The_Full_Stack_Design_System_Final_Logo

Looking at how we view design.

A good design is more than creative, it has to be strategic.

An experienced designer should have a decent understanding on the human eyes’ natural tendencies. Rather than seeing blocks of data, the eye generally sees information in a visual way. This is why as kids, the first books we read would contain more pictures and words with a large print. Other types of books such as comics are heavier in images rather than texts; visuals taking centre stage in telling sequence of events, and texts only serve as accompaniment. This results in content that is easy-to-read and faster to digest for the human brain.

In short, content must be organised based on priority, or put in a “hierarchy” from highest priority to lowest. Designers must have a keen eye on organising content, with the aim of directing viewers’ eyes so that information of the utmost priority is seen first. So how do we do that exactly?

Hierarchy Patterns

When presented a fresh page, there are two common patterns in which the human eye will scan and read the page — the Z pattern and the F pattern.

d9c889f11d5bc5ada45fd52af515ab71

When to use which?

  • Z pattern is most commonly used when there is a low level of text content. Users would scan the page from top left to top right, glances down through the content, moving to the bottom left to the bottom right. To maximise use of this pattern, designer can place the most important content along the “Z” shape.
  • F pattern is usually utilised for text-heavy content or video content. Users would begin scanning the page from top left to top right, then keep going down from left side to the right side of the page, over and over again, looking for visual elements that would help them understand the written content.This pattern continues until they reach the bottom of the page, creating a heat map that looks like the letter “F”.

Hierarchy Principles

Regardless of which pattern you go for, it is important to know what and how to emphasise the elements that are on top of the hierarchy list. In design, especially data visualisation, all aspects cannot be emphasised. In order for an element to stand out, others must fade into the background. Subtleties such as what size, colours, shapes, or what information to include and — perhaps more importantly — exclude, affects the hierarchy of design.

hierarchy_

Let’s break it down, shall we?

1. Size

Just like a newspaper headline, the larger the element, the more it will attract attention. The more attention it attracts, the more viewers will interact with it because it’s the first thing they see.

In web design, Fitts’s Law states that bigger-sized objects are easier to engage with because less effort is required from users to click on them. In regards to text and typography, Smashing Magazine calculates some average sizes appropriate for headings and body copy:

  • Heading → 18-29 pixels
  • Body copy → 12-14 pixels

2. Colour

As we have explained thoroughly in this blog post, different colours have different psychological links to them that affects viewers’ perception of the objects. Bright colours are naturally more attention-grabbing, followed by rich darker colours and lighter tints. Muted, subdued colours lay at the bottom of the colour hierarchy.

3. Layout and alignment

Layout and alignment plays a major key in visually telling users what is most important. For example, having a body of text and a sidebar next to it will lead users’ eyes through the text, then the sidebar as follow-up CTA (this is especially true in web design). Objects placed at the top or smackdab in the middle also tends to garner most attention at first glance.

4. Repetition

Repeating styles tells viewers that the content is a unit. For instance, this blogpost is written in a cohesive style. Say, we disrupt the organised layout and use red text on this paragraph, it would break the repetition and instantly draw attention on the element that is different — that is, the red text. Another example is the use of hyperlinks. Links are usually underlined, and you know right away that it is clickable.

5. Proximity/spacing

The placement of design elements tells users how likely they are to be related. For instance, this list has a header/title, and each points are separated by a row of whitespace. This proximity or distance shows that list items are separate, but are not unrelated to each other.  

6. Texture and style

Using various styles and textures can help visually diversify content hierarchy. Using different fonts in a project, or textured backgrounds that juxtapose each other can lead users’ eyes to the most dominant of the elements.

7. Contrast

Contrast refers to the value difference between colours. The most stark contrast you could do between two colours is black and white. Strong contrast can emphasise important elements, while weak contrast will make elements blend together. Strong contrast might be eye-catching and needed to determine hierarchy, but in turn weak contrast is less confronting, often utilised by designers to create a more harmonious design that users may want to look at longer.

___

Relatively an undervalued aspect of design, hierarchy is an important tool if you are looking to deliver key information to viewers upon first glance. Remember, a good design requires not only creativity but also strategy behind it.

 Next on our Design Principles series is Photography. Subscribe to our mailing list below or follow us on social media to be the first to have a read!

Get in Touch

Datalabs is a data design agency, specialising in visual strategy, consulting, training, analytics and software development.
  • This field is for validation purposes and should be left unchanged.

Sign up to our Newsletter

Get the latest data visualisation news, examples & training tips. Sign me up!

Our Data Visualization Expertise

Data Analysis

Discover why data analysis can be a creative experience — visualisation to discovery. Engage a data analysis company that services both sides of an analyst’s brain.

U.S.A.: Los Angeles | New York | Washington, DC | San Francisco | Chicago | Boston | Seattle | Austin, TX | Philadelphia

Australia: Sydney | Melbourne | Brisbane | Adelaide | Perth | Canberra • China: Hong Kong
Privacy Policy | Disclaimer | Copyright © 2018