First impressions are key – how to cut them correctly?

February 28, 2019 5:26 pm

First impressions are key – how to cut them correctly?



Do you remember the last website you instantly decided to leave? What was the reason you abandoned it?

Believe it or not, it takes about 0.05 seconds for people to form an opinion about a website and decide whether to stay or leave! For designers, therefore, it is crucial that you ensure your website captures attention, is easily understood and provides the guidance that your users need in that limited time.

This article will discuss design principles you can take advantage of when deciding on page layout and design to create an effortless experience for your users.

Focal Points

Starting with focal points, these are areas of the page that users are drawn to. Contrasting colours, large font sizes, images and whitespace can all be used to create focal points.

Figure 1: What are you drawn to in this image?

You can use focal points to help create emphasis on important information on your page and guide users to seek out this content. However, it is important that there are only a few focal points on a page as too many can dilute the importance of the content and confuse the user.

Images

Images are a powerful tool that can direct attention to parts of the page, convey information such as products and services you have, as well as evoke an emotional response from your users.

Humans are naturally social beings and drawn to images of faces – and depending on the expression shown, this can change how we understand ideas, web pages, brands and this can have a lasting impression on us.

In Figure 2, Uber has taken advantage of our social psychology by using a smiling face in their image. Uber are trying to evoke a sense of friendliness to their brand and service – we would have a very different opinion of Uber if his expression was different.

Figure 2: Image of smiling Andy on the Uber website

But what about when imagery goes wrong?

Be careful with imagery because if they are used in the wrong context they can be off-putting. For example, if lifestyle images are non-relatable or too aspirational to users, they will feel as if they are in the wrong place or the products they are viewing are out of their reach.

Figure 3 demonstrates an example where the image that may put users off from the service the website is promoting.

Easigrass has featured an expensive car on their artificial grass installation service. A user may deduce that, based on the image, the Easigrass product is too expensive for them and as a result abandon the service and find a cheaper one.

Figure 3: Bentley featured in the image of grass – too aspirational for the target users?

Generally, images have a huge impact on users and can draw a lot of attention. If you decide to use images on your website, it is important that they are well shot, good resolution and easy to relate to for maximum impact.

Whitespace

Whitespace can be used to isolate content and draw attention. The right amount can declutter a page to improve readability and help users focus on the most important parts of the page. As well as this, it can help deliver the clear and impactful messages that you need your webpage to get across.

Figure 4 demonstrates how Apple has used whitespace to promote their MacBook. Apple has ensured their product is the focus on the page and it draw users’ attention by isolating their MacBook using whitespace around it.

Figure 4: Use of whitespace on Apple store website

Be careful with whitespace though as too much of it between content as you scroll down can be misleading, often creating the illusion that users have reached the end of the page. Therefore, always check your design in most common browser sizes.

Visual Flow and Visual Hierarchy

Visual flow is the path users take when they are scanning a page. Left to right readers tend to follow the page from top to bottom and left to right, creating the Z or F shape – two of the most common scanning patterns on a webpage.

Figure 5: Z shape scanning pattern
Figure 6: F shape scanning pattern

You can take advantage of visual flow when you start structuring your page deciding where you want to add focal points to guide users’ attention and lead them to what they should look at next, a technique called Visual Hierarchy.

The following example demonstrate how visual hierarchy can be applied, considering everything we have spoken about in this article so far.

This is a block of text with no formatting and structure. It looks dull and uninteresting.

What is the paragraph about? What is the key information?

You can gather this is an invitation from the first couple of words. However, what is the event? When and Where is it held? You do not know this information until you make the effort to read it.

Now let’s improve this.

By separating the content into distinctive groups of information with whitespace quickly improves the readability of the information.

Finally, let’s add some other focal points.

The most important line, “SimpleUsability’s Valentines Party”, is in large, bold font and the second most important information, “When and Where”, is in big, bold font.

Images have been added for context and relate to the event. All other information is in normal sized text and indicates that “you may want to read it, but it is not really essential if you miss it”.

The key information is highlighted with focal points that draw the eye to move between them in a simple flow so readers can quickly understand what they need to know.

Visual Design – the principles of Gestalt

With focal points, visual flow and visual hierarchy in mind, you can now start arranging your page properly together and look at the overall design rather than just the individual components.

Taking all the above in consideration, there are a few psychological laws that you can use to our advantage when designing your pages. We will cover three basic ones:

  • Proximity
  • Similarity
  • Continuity

These can be implemented to help you enhance users understanding of what they can do on your homepage, and where to go to find the key information that is relevant to them.

Proximity

When elements are close to each other on a webpage, users see them as a group of similar information and other groups as being different.

An example of this can be seen on the Club Med website shown below.

Figure 7: The use of proximity

The proximity of the different elements allows the user to quickly compare images and titles of the different destinations available. Incorporating proximity here will allow users to quickly scan options and reduce time spent searching for a suitable option.

Similarity

Visual similarity, including techniques such as colour-coding for groups of elements with similar meanings or consistent typographic styling for main headings and sub-headings. This tells users the content is the same type or of equal importance.

An example of this is demonstrated on the Uber website shown below.

Figure 8: The use of similarity

Uber have two very different pathways for users on their website, ‘Drive’, and ‘Ride’ aimed at their two audiences of drivers and customers. As both pathways have equal importance, Uber has used equal font sizes and styling but communicates a clear difference using colour. As a result, neither pathway draws the majority attention and instead only appeals to who it’s relevant for – both similar and dissimilar yet equal in importance.

Continuity

As humans we recognise paths. So, you can use visual representation on your page such as lines, arrows, or progress bars, to help users understand the flow and continuity of their journey and make it easier for them to know what their next course of action should be.

For example, progress bars like the one below, not only reassure the user they are taking steps towards completing their goals but also show the user how far through the ‘checkout process’ they are.

Figure 9: The use of continuity

The use of colours also shows users which steps are completed (blue), which step is currently in progress (green), and which steps are incomplete (grey).

Conclusion

Overall, we have looked at different ways and principles including focal points, visual flow, hierarchy, proximity, similarity and continuity to grab users’ attention and change how they engage with a page.

Users may feel lost on your page in the first 0.05 seconds as they are unlikely to read through your content to understand who you are and what you do. Therefore, may abandon your website completely and never come back.

But by incorporating and considering what we have discussed within this article you have the foundations you need to begin building easy, intuitive visual paths for your user to follow, guiding them to the content you want them to get to and the goals they need to achieve – ultimately achieving a positive user experience.

No article is written in isolation, the ideas, research and crafting are all the result of team work. For this one, special thanks are due to Jason Baxter and Lucy Buykx for their contributions.