On Visual Hierarchy

What is Visual Hierarchy and why it's important?

Designer’s job is not only making something beautiful but also arranging the content clearly and making an interface work well so the user never get lost. And that is possible by creating visual hierarchy.

Visual hierarchy is the organization of items on an interface. It is so important, because it helps people recognizes the most important elements first and in the right order on the given interface.

Especially on mobile app interfaces, the users have a very low attention span. They need to understand the interface within an instant, without reading labels or content - even more so than on the computer. Why -? Because they are looking at the screen on a mobile device: They are usually multi-tasking, or outside, walking even.

When a user looks at a interface they don't read, they scan. That means they will not stop until something interesting catches their eye. Visual hierarchy make the interface easier to be scanned and lets the user focus on the important information. It is like an invisible hand to lead them to notice the things that matter most and lets them take action confidently.


4 basic components of visual hierarchy

Use contrast, size, color and proximity to organize elements on a page to create a sense of visual importance. Actually there are many other things which can affect the visual hierarchy such as shape or prominence. However, those four above are basics to create hierarchy.

1.Contrast

Contrast shows relative importance. you want to give important things higher contrast like the square in the middle. The rest of the image is light, so a dark square is more noticeable. People would click the dark one than if all the squares were the same colour.

201506116_blog_VH_1_contrast

2.Size

This one is simple. We all know the larger text is more important than the smaller text - News headline is bigger than other less important article for instance. Bigger grabs our attention first and so comes across as more important. Size guides your eyes from the biggest to the smallest elements. If everything is the same size, nothing looks more or less important.

201506116_blog_VH_2_size

3.Colour

You can use a bold color to make something stand out. Applying a bright, bold color to a feature will draw eye to it, making it a main item within the design.

201506116_blog_VH_3_colour

Like in this example blue is quite, red is loud. More people will click a colour that comes forward like red. Colours that stand back are good for something like a menu that is always on the screen. If it is as strong as red, it steals focus from more important things.

4.Spacing & Grouping

The closeness or distance between two objects creates a feeling of those objects being related or unrelated.

201506116_blog_VH_4_proximity

In the image you see 6 squares which are not aligned horizontally or vertically, but we see two groups of squares and the squares in each group seem together.

To create this perception put related elements closer together and unrelated elements farther apart in your design.

Reference Article


Create Visual hierarchy : 3steps

201506116_blog_VH_5_3steps

1. Create a version without hierarchy, spread the content out and read each item’s hierarchical level.

2. Place the items (Spacing) and give different weight(Contrast, Size) on them to achieve a solid foundation of Visual hierarchy without using colour.

3. After nail down the purpose of each items then dress the design up using colour to take the visual hierarchy even further.

4. Last but not least, always do user-testing. Get your design and VH choices validated by potential users by asking them what elements on the screen they are drawn to first, second, and so on.

To sum up, Prioritize your interface based on thoughtful consideration of the content and goals of the design. Then, apply contrast, size, and spacing. For the last step, figure out where to add colour to use for increase the visual importance.

>Reference Article


Here are some good articles to check out if you want to know more about Visual hierarchy!

52weeksofux 

Awwwards : Understanding Web UI Visual Hierarchy

Creativebloq : 4 key ways to create visual hierarchy

 

Shinae Kang

Shinae Kang is Associate Creative Director at ReignDesign. Shinae is from South Korea and is based in Shanghai.

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *