What is your web site’s visual hierarchy? | npENGAGE

What is your web site’s visual hierarchy?

By on May 19, 2010


What catches your eye when you look at your web site’s homepage? What is the first thing you see and the first thing you want to click on? These are questions we almost always ask during a usability test to ensure our visual hierarchy is coming through clearly and consistently. Think of the visual hierarchy as the pecking order of a page’s content, providing cues as to what’s most important. If your organization wants, first and foremost, to bring in donations, then a compelling ask should rank high in your list. Maybe you’d rather get visitors to take an action alert or read a new study you’ve published. Your visual hierarchy should reflect your organization’s goals, whatever those may be at the time.

Take a look at the Blockbuster web site. Since Netflix arrived on the scene, one of their goals is likely to obtain subscribers to the DVD-by-mail program. From their homepage, the first thing I see is the “Try it free” button on the “Movies Delivered” promo. The “Learn More” for Blockbuster On Demand also stands out, which is likely reflective of another one of Blockbuster’s goals.

The Jewish National Fund site also demonstrates a good visual hierarchy. My eyes are drawn to the “Donate” button in the top navigation bar and the graphic in the “Plant a Tree” promotional box, both of which are major goals for the organization.

Many of you may be so used to looking at your web site that you may not see a visual hierarchy anymore. Or, the one you do see may be artificially influenced by what you know is most important. In that case, have a friend take a look at your site and tell you what they see first. You could try a “5-second test” where you display the homepage for 5 seconds, then close it and ask your friend to write down what they remember. If their list does not correspond to your organizational goals, then consider rearranging the page or redesigning certain elements. You’re likely to see more clicks and actions taken as a result.


Lacey Kruger, principal information architect for Blackbaud, designs online properties for nonprofits that delight and inspire. Whether a full scale website, a campaign site or a peer to peer fundraising site, Lacey guides clients through a research-based and user-centered approach to design. In her 15+ years at Blackbaud, she has developed a deep understanding of nonprofit web presences. That knowledge, along with her years of experience in information design, have established her as an industry expert.

Lacey has written a Blackbaud eBook, “A Guide to the Nonprofit Web Design Process” and her article, “Designing Nonprofit Experiences: Building a UX Toolkit” was published in User Experience magazine. She has presented at industry conferences including bbcon, IA Summit and BIG Design.

Leave a Reply

Your email address will not be published. Required fields are marked *