m10 Visual Hierarchy

Visual Hierarchy Technique

  • Visual hierarchy is a design technique used to indicate to users which elements on a screen are most important. It influences how users perceive and interact with information.

Key Concepts

  • Perception:
    • The human eye scans scenes and perceives objects with the highest contrast to their surroundings first.
  • Importance Indication:
    • Elements can be prioritized on a screen based on how they stand out visually.

Strategies to Achieve Visual Hierarchy

  • Size:

    • Larger objects draw the eye first due to their prominence.
    • Example:
    • In newspapers, the main news of the day is represented with the biggest text.
    • Larger text indicates the most important news as it is the first thing that catches the viewer’s eye.

  • Color:

    • Objects that exhibit the highest color contrast with their backgrounds are perceived first.
    • Example:
    • Camouflage used by soldiers aims to reduce contrast, thus helping them not to be seen.

Real-World Applications

  • Gmail:

    1. Email Prioritization:
    • Unread emails are displayed in bolded black text against a white background, creating high contrast.
    • Previously read emails are presented in lighter shades of black and dark shades of white, which are still legible but less prominent.
    1. Inbox View:
    • Default view highlights the inbox in blue with bolded black text, including the count of unread messages, emphasizing its importance.
    1. Additional Highlights:
    • New emails in different tabs are highlighted with color accents, as seen in the example of the message from Revolut Bank in the updates tab.

  • Calendar App (within the Google ecosystem):

    • Meetings that a user is definitely attending are shown with strong color contrasts, helping users quickly identify their schedule.

  • Spotify:

    • The interface contains a lot of information, colors, and controls.
    • Key elements prioritized include:
    • The current album or playlist,
    • The current song,
    • The play/pause button, emphasized by a bright green color on a black background.
    • Playlist names are displayed in larger text than other elements on the screen.

Conclusion

  • Visual hierarchy is a powerful tool that utilizes size and color to help guide users through an interface.
  • It enhances usability by allowing users to easily determine the most important information and common actions.
  • By effectively employing visual hierarchy, designers can create efficient and intuitive interfaces for users.