Why Design Hierarchy Really Matters

Why Design Hierarchy Really Matters

When potential clients come to your website, what do they find? Your site is usually the first interaction they have with you, but if your website is not properly designed, it could be their last.

Quality web design really matters because it represents who you are and what your clients can expect if they want to work with you. When a website is not properly navigated, your clients do not know where to begin when they come to your site or where they should go after they click a few links. There are many elements to a proper web design, but let me focus on the role of design hierarchy.

“A hierarchy is an organization of items into different levels of relative importance. Visual hierarchy is naturally enough creating this organization and prioritization visually. Through basic design principles you emphasize one element over another so more important content looks more important. You design related elements to provide visual cues that those elements are on the same level in the hierarchy. You organize everything on the page to create a sense of order. Visual hierarchies create centers of interest on your page, communicate additional meaning through convention and repetition, highlight actions you want your visitors to take, and establish patterns of movement and flow. (Credit: Vanseo Design)”

When you create a website for your business, begin with the end in mind. What is the call to action you want your viewers to take? If your goal is for clients to contact you for a consultation or click “Buy Now” on some item, then you design everything on your website around that call to action. Let’s demonstrate this with the

School of the Apostolic Church’s website:

This website is for a new school of theology and Christian education beginning in the Fall of 2011. The perspective “client” coming to this website is someone who’s heard about the school and wants to learn more about it. When they come to the website, their goal is to find out what “SOAC” is all about. SOAC’s desire is that they download an application packet or click “contact us,” with the end goal being a student for the Fall of 2011. So, what’s the first thing viewers will be? A homepage with a clean welcome screen and three simple options: About, Academics, and Admissions. Where do you think someone is going to begin?

Hopefully you chose the About page, as most anyone who wants to know what this site is all about will begin there. Click the About page or “Read More” and what do we find? All the relevant information about the school, its vision, and why it was created. If you go to the navigation bar at the top right, you can see a sub-navigation menu with options to read their mission statement and core distinctive. Remembering that their end goal is getting students to download an admission pack, they have that option instantly available on the right-hand column. Some people may not need any more information, so why make them scroll through any more pages?

The next step in their design hierarchy is answering the second question most people will be asking, “What classes will be offered?” Being this is a college, there are a lot of classes. So instead of overwhelming the viewer with too many options, they organized them according to what’s required and what’s optional. While this does require the viewer to go back and forth to see the class offerings, it keeps the page clean and simplified.

And finally they wanna know how much it costs to enroll in this school and where one ought to begin. Their Admissions page answers all these questions and continues to offer the perspective student the ability to download the application form at any moment they so desire.

If you still have questions or you just want to talk to somebody before you send in an application, then their contact page gives you three options, all clearly labeled.

SOAC’s website has a very systematic and organized design hierarchy. It doesn’t take a degree in rocket science to figure out where to go to get your questions answered or where you should go next. With a well labeled navigation bar and a simple page layout, people get exactly what they suspect.

Don’t lose customers because of poor web design. When you create your website or redesign it, write out a road map you want your viewers to follow to reach your goal.

For more information on this topic and some more examples, check out Smashing Magazine’s write-up on this topic called Designing for a Hierarchy of Needs.