• Successful websites incorporate five important design principles that put the user first
• Those websites make it easy for users to find what they want
• Designers make great websites by using conversion optimisation research to understand the users and by applying techniques that bring clarity to the design and user experience

“Design should not dominate things, should not dominate people. It should help people. That’s its role.” Dieter Rams

Jakob Neilson, one of the founding fathers of User Experience design, has taught us that web users behave like animals on a scent trail, hunting for information when they land on a website. So, it is essential to be able to answer three key questions quickly (within five seconds), before they give up and continue their hunt elsewhere:

• Where am I?
• What can I do here?
• And why should I do it?

The words used on websites are vital in answering these questions and encouraging customers to explore the website further, but can design help? Yes! Design is instrumental for two reasons:

1. It helps create an emotional connection with website users through brand (logo, choice of colours and images, words, and tone of voice, etc.)
2. It facilitates a visual hierarchy that helps them to read, understand and act on key messages. Clarity is by far the most important tool that can enable this—so, consider whether your message is clear and understandable? This website for Deliveroo is as clear as it gets.

‍

Deliveroo does not beat around the bush (no pun intended). There is a compelling value proposition that states clearly what you can do here and why you should do it.

“The food you love delivered to your door”, and “Choose from the best restaurants”.

So which techniques have the website’s designers used to craft this message so that users can read it, understand it, and take action?

There are five basic principles of design that help to aid clarity; let’s look at how each one is used.

1. Contrast

Clever use of contrast allows you to emphasize or highlight key elements within your website. You can use it to guide the user towards the important messages or actions on your webpage.

Contrast is the most abused and neglected principle on the internet for one simple reason: there is no significant cost involved in expanding the breadth of information on our websites. Therefore, it is tempting to use the real estate for all sorts of things, from advertising to the latest news, confusing business functions with e-commerce goals and trying to sell every single product in the warehouse on one webpage!

All these competing messages create visual clutter, and they ultimately cancel each other out. You think you are telling your website users lots of important things? You are actually telling them nothing… all of your users apart from the most motivated will have followed their scent trail elsewhere.

For contrast to work successfully, your message must be focused and compelling. The use of contrast must be strong and obvious, and for it to make an impact it must not be overused. In the case of Deliveroo, the designer has used colour (white on a dark background) and scale (large headline point size) to draw attention to the key message.

‍

By contrast, we can see how Odeon has tried to employ contrast to draw attention to a key promotion “Relive the magic with Odeon and Bafta”.

However, the carousel is very busy and the individual films take almost equal visual precedence. To compound the issue, the rotating carousel makes it difficult for the eye to settle. “No online booking fees” is attractively designed but is competing for our attention with the main feature.

Moreover, the adverts around the edges of the page are individually using contrast to draw attention to the key messages: “London Has Fallen”, “Choice” and “Hail Caesar!”.

Not one message stands head and shoulders above the rest, and consequently, the page fails by appearing loud, cluttered and confusing.

2. Alignment

Alignment helps us to create a visually ordered design by creating relationships between items on the page, for example, aligning navigation items horizontally across the top of the page or right-aligning descriptive or instructional text next to form fields.

The use of an underlying grid structure as the basis of your website’s design is imperative to alignment, and leads the eye, greatly enhancing the clarity of your site.

Deliveroo has used central alignment to group its bold headline with a compelling line of explanatory text, “Get amazing food from an incredible selection of local restaurants delivered in an average of just 32 minutes”.

Along with the fork in the underlying image, these lead the eye directly towards the call to action (CTA), leaving the user in no doubt about what is expected of them on the website.

3. Proximity

Proximity simply means grouping similar elements together to create a relationship between them. It gives the website user an idea of where they should start and finish.

Proximity doesn’t mean that elements have to be placed together, it means they should be visually connected in some way. This can be by use of typeface, colour, image placement, etc.

Proximity works with alignment to help with efficient interpretation of a website and its messages. When scrolling on a website like Deliveroo, proximity centres around a repeated hierarchy of elements, starting with the bold headline and explanatory subheading, which enables us to interpret each block of information as one complete message.

4. Repetition

Repetition creates association and consistency and reduces the cognitive load on the users of our sites. For example, by designing and positioning all CTA buttons in a similar way, the user comes to understand their function, anticipate their appearance and can take action without processing as much information as would be needed for a range of button designs

As it is not possible to control where users choose to enter a website, it is important to use repetition to create a strong visual association between all of the pages. On a scrolling site, such as Deliveroo, repetition is used to create distinct blocks of information with consistent headlines.

5. Balance

Balance provides stability and structure. It is the visual weight distributed on the page by the placement of elements. These elements don’t necessarily need to be of the same size because balance can be achieved by placing a large element on one side of the design and several smaller elements on the other.

White space is vital to creating a sense of visual balance and is why it is necessary to avoid crowding every pixel of a webpage’s real estate with calls to action and text.

‍

While a lot of effort goes into designing unique websites and offering cutting-edge interactive experiences, research has shown that users simply want websites that make it easy for them to find what they want.

The best websites put the user first, and designers can make good websites great by

• using research to understand the users and,
• employing clarity so users can find what they want.

I began with a quote from one of my favourite designers and I’ll end with another one by Jonathan Ive,

“There is beauty when something works and it works intuitively.”

‍