The main goal of using hierarchy in your designs is to guide the user. Hierarchy helps the user know where to focus first and what action to take. To visually understand how hierarchy works, here’s a graphic that can give you an idea of how information can be grouped. If you think of the information that needs to be shared as a giant rectangle, hierarchy then takes that block of information and parses it out from most important to least important.
Hierarchy is different from emphasis because it’s about guiding the user’s attention through groups of elements, instead of focusing on the importance of one particular element.
Using hierarchy is important for arranging information within logical groupings, which helps users find the information they need and emphasizes elements in order of importance. Hierarchy also helps the user avoid becoming confused and overwhelmed by information.
Implement hierarchy in your designs
When you create a design, the most important information for a user should come first. Focusing on the order of importance gives users exactly what they need without allowing them to become frustrated with their experience using your product.
To best include hierarchy into your design, focus on the primary goal you want users to achieve when interacting with your product. For example, if the main goal is to get them to log in to your site and interact with it, your hierarchy should begin with a clear link to your site login or sign-up page. Check out how edx.org uses hierarchy for their register page.
Users need to fill out the form from top to bottom to create an account. It layouts a clear steps that users need to take in order to create an account. It also states a clear intention of the designer primary goal is to have user create an account by filling in the information. The secondary goals is register with an existing accounts from other platform. Either way, the main goal is still established – create an account.
Help people who use assistive technology
Clear hierarchy is also necessary for users that rely on assistive technology, like screen readers. As you populate your design with content, imagery, and elements, each screen of your app will become more complex.
This complexity can make it challenging for screen reader software to follow the correct flow on screen, and therefore, challenging for users to understand the layout of your interface. Hierarchy helps guide the screen reader to pick up the information within your design in the order that you intended it to be read. Here’s an example of a screen reader reading headings on Google Search.
In the screen reader box, you can see how each heading being read corresponds to an area within the Google Search page. If these headings were out of order, the user that needs a screen reader would be confused about where they are on a page. It is critical that you communicate the heading level of your content to set the stage for the information that follows. Doing so supports the information architecture of your designs – keeping them happy and engaged.
Organization is key
Organizing your design using hierarchy improves the user experience of your product. And keeping accessbility in mind as you work on the hierarchy of each page will make the user journey better for everyone. While working on your mockups, think about the importance of each area of your design on a scale of most important to least important. You want to place the most important information first!
Build your hierarchy
Additional resources on hierarchy:
Good Luck!
Scholar Journeys 