Use hierarchy in mockups

As a reminder, 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.

Once you know your primary and secondary goals, you can organize the hierarchy of your design. Check out these two designs for Google Opinion Rewards on a mobile phone:

The design on the right shows a version of the Google Rewards app that lacks any emphasis on the important areas of information for the user. The font is small and there isn’t a solid path for the user’s eye to follow. In other words, the user doesn’t know where to focus first or what action to take on this screen, making it a poor user experience.

The design on the left shows the current version of the app, which is easier to read and navigate. Adding hierarchy created emphasis in the app’s design. The use of larger, bold text and color brings attention to the rewards the user earned and it makes it clear what information the user should exit this app knowing.

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 a 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 design which aids in user navigation and comprehension.

A clear organization of your design’s layout, page by page, will communicate to engineers the goal of your layout and will provide all users an expectation of how to interact with your designs — keeping them happy and engaged.

Organization is key

Organizing your designs using hierarchy improves the user experience of your product. And keeping accessibility 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!

Keep in mind that as you design, the hierarchy of your page may change depending on the feedback you receive from users and stakeholders.

Build your hierarchy

To learn more about the importance of adding hierarchy to your designs, check out these additional resources.

• Get started on your journey to creating effective visual hierarchies with the Mockplus article Golden Tips and Examples to Create Visual Hierarchy in Website Design.
• If you want to see a visual representation of how hierarchy can work, read this article from Interaction Design Foundation, which ensures you understand the fundamental question: What is visual hierarchy?
• Hierarchy is critical to creating a product design that is accessible to all of your users. To learn more about designing inclusively, here’s an article from the UX Collective: A is for Accessibility — 12 top tips for designing an inclusive user experience.

Sources: Google UX Design Professional Certificate

Coursera | Create High-Fidelity Designs and Prototypes in Figma