As the UX-professional on your team, you will find that you are often called upon to make the design of a landing page “better”. This very specific request often begs the question of where to start improving your design.

One of the ways we can improve our designs is by looking at how the elements are structured relative to each other. The way we arrange information within our products greatly affects how users experience our product.

Thankfully, we can have a look at some basic principles of how we process visual information and by weaving these principles into our designs, we can create landing pages and apps that users enjoy using.

These have become known as “visual hierarchy”.

So Visual Hierarchy, tell me more…

At its core, visual hierarchy describes how we rank elements relative to each other, taking into account how important or relevant the information is.

You may have heard of information architecture, which is similar but not identical. Visual Hierarchy allows us to rank the elements, resulting in information architecture.

By adjusting different properties of these elements, such as the relative size, colour and grouping, we give our content structure that helps guide our users to their goal.

We can make the most important elements stand out more, allowing users to quickly and efficiently find where they need to go.

That is why it is so important for your designs to have a clear visual hierarchy. It allows you to control the way in which your experience is being delivered to the user. Each carefully crafted element will bring them one step closer to their goal, lighting up a designated path for them to follow. The experience simply flows, removing any need for the user have to stop-and-search for information for them to proceed.

The goal is a silky-smooth experience that leaves your users and yourself feeling happy about a job well done.

Now that we know what visual hierarchy is and why it is important for us to understand what it does, let us have a look what tools we have at our disposal to create our visual hierarchy.

Typography

The typography is one the easiest ways to get your information architecture spot on. The reason being is that text is very widespread when it comes to the web.

It is everywhere.

Here is an example of a heading, a subheading and the paragraph styled exactly the same way:

Example test without visual hierarchy

It may well take a second for you to fully understand what is happening. That split-second of navigating the content is a sign of subpar visual hierarchy.

It causes a negative user experience.

The internet has a wealth of options that allows users to simply move on to the next product.

Not good.

Let us see how we improve the visual hierarchy by adjusting the font size:

Example using relative size to adjust hierarchy

Not bad — our attention immediately falls on the larger text of our heading, allowing us to see if the paragraph is relevant to our goal or not.

That is what visual hierarchy is all about. It allows the user to orientate themselves quickly and scan the content for relevant information.

Remember, users do not read on the web — they scan.

Design accordingly.

We have a better visual hierarchy thanks to us varying the size of our text. To further enhance the hierarchy, we can give our heading a bolder font:

Example with bold text

This further underlines the authority of our heading and makes it stand out even more. This further improves the user’s ability to scan our content for relevant information, making their lives easier.

That is what technology is all about.

Colour

We can use colour to aid the user in navigating our site.

While colour can help us convey information, it should be used in a more supplementary fashion and not as the sole provider of information to the user. The reason being that people with colour blindness will have a hard time seeing the clues you have laid out for them.

Using colour we can also help the user identify headings more easily, by making them a different colour to the text body:

Example with colour to aid visual hierarchy

We can use this style for each heading we use within our product. That way users can easily learn to differentiate between headings and paragraphs more easily. This learnability is one the factors that influences the usability of your product.

A good usability is essential for a good user experience.

Another great way to use colour in your designs is to make certain elements stand out more by using brighter colours. The increased contrast between the target element and the background colours naturally draws attention.

Think links or button of submit forms:

Image of a basic form

Making these stand out more by highlighting them with a strong colour will allow users to see these more easily. This discoverability is especially important when designing for smaller screen sizes such as tablets or phones.

In the example above you can see how the button practically screams for attention.

Whitespace

Staying with our headings and paragraphs, we can now look at the whitespace we use. Whitespace can go a long way in taking a good design and making it top-notch.

What if we removed the whitespace from our example above:

Example text without whitespace

There is not much space and everything appears a bit cramped. The content can’t breath and flow nicely.

Not a very good user experience.

Example text with whitespace

There we go, much better.

When you first start designing, you may be looking at how to fill the space you have in front of you. However, whitespace is something that you can intentionally use within your designs to improve your user experience.

Alignment and Proximity

Here the Gestalt Laws can unfold their beauty.

We can help a user make sense of what they are seeing by grouping related options together.

Here we can see how we can use the alignment and proximity of elements in combination with colour to better organise our user interface for our users:

Example of grouping options together

All of the options are grouped together and we are using card elements to better differentiate between the sidebar area and the rest of the screen.

The user will quickly learn that each card-like element has information regarding their messages. On the left-hand side we have the top-most level and go further into detail, the more we move to the right.

We can also make elements within a category stand out to highlight their presence to the user:

By using colour we can indicate to the user which mails have not been read yet, which mail we are currently reading and which mails have a related task.

We are again also grouping related elements together to help users find their way more easily.

Here I would encourage you to play around a bit with the proximity of the different elements and test them on users to see which feels best to them.

I would definitely recommend reading the gestalt laws because they do give you a solid understanding of how human perception works and how you can use these within your own designs.

Size and Scale of Elements

The size of elements relative to each other can also be a great tool to improve the information architecture.

We already saw with our typography that larger elements tend to grab the attention of the user more. It is no different with other elements:

Image of a landing page

The larger element is seen first by the user. After that, the user begins to scan the rest of the page.

With this we can control how the user processes each part of our product and make important information stand out more to grab their attention.

A word on Mobile UX

With mobile becoming the dominant medium for users to enjoy the offerings of the internet, it is very important to consider the constraints the smaller screen size bring with them.

Mobile users should be able to see and select the elements they want with ease. The easiest way to do this is to make the actionable elements stand out more, by adjusting the size and contrast.

Make your text easy to read for users to quickly understand what is happening and if they want to click on a button, make the button’s area big enough for them to easily select that action. Avoid buttons that are so small and close together, that a user accidentally presses the wrong button.

Implementing Visual Hierarchy

Using these principles in practice is not always straight forward. It may start out well and we have a clean information architecture. As the project grows and stakeholders are throwing requests at you to make more and more elements stand out, the visual hierarchy becomes muddled.

It is important to keep things simple and basic.

Start with one, really important element. This is the one every user must see and is the real value-bringer for your product. It is the one you found during your user research that everyone kept repeating. It is the main goal of what you are designing. Once you have that, build up the hierarchy and messaging around that.

The goal decides what your information architecture will look like. It can change, but the need to change should be reflected in your user research.