Alluring Layouts; drawing and capturing attention

Figure 1: A striking  pattern – but where is your attention drawn? (From Andrew Morrell Photography)

So maybe you’ve got a good website, its working well but it’s not creating that extra ‘omph’ that leaves your customers walking away raving? Or maybe, a bit further down the scale, your website is struggling to get users browsing what you’ve got to offer, to spend longer than a few seconds looking at a page? This article delves into some underlying principles of how to draw users into your design, by looking at the instinctive effect of similarity and how we can purposely break similarity to draw attention to key page aspects. This follows on from my previous article – 5 tips for effortless layouts – that explored how to use the gestalt principle of proximity to subtly (and intuitively) help users scan and interpret meaning from a page.

Similarity

Similarity is used by the visual system to automatically group items together, speeding up how we interpret what’s in front of us. Once one item has been interpreted, anything that looks similar can be grouped under that label too, helping us predict what they do and how they will act. We can then quickly decide if it’s relevant, and if not, allows us to dismiss similar objects and move onto the next. You can see this effect in the diagram below, your brain instantly interprets the patterns as arrangements of squares vs circles.

Figure 2: The gestalt principle of similarity

The pitfalls of similarity

The trap websites can often fall in to is that the same design is used for multiple page elements and these become repetitive. The visual similarity of items can mean that users end up glossing over the very important thing they were looking for. The major consequence is that items lose their meaning – something Simon outlined as critical for that deeper, emotional, connected experience of a website.

Ok, consistency is important so people don’t have to start at the beginning every time they reach new webpage and frustratingly have to work out what is going on each time. However, when every page looks the same, not only does the website quickly become boring it also makes it difficult to orientate yourself, to tell one page from the other. Like being lost in the woods, every tree looks very similar to the next.

Figure 3: Repetitive page designs can create a confusing user journey

Differentiate key pages

If each page has a unique feeling about it, it creates something memorable for people. This helps people to keep track of individual pages, to recognise where they are in a website and where they have been. More importantly, it gives that page meaning, it helps to convey what was important about visiting that page in the first place.

Figure 4: Pages with unique designs are much easier for the user to remember and distinguish between

Our Sky Sports Living for Sport website demonstrates this.  Each landing page has its own feel and the design is aimed to maximise understanding of the content. For example the ‘Running your project’ page shows the 5 steps of running a project as an interactive flow diagram.

Figure 5: Designs for the Sky Sports Living for Sport ‘What’s our goal?’ and ‘Running your project’ pages

Style different content types differently

A great way to build up a design customised to the content is to focus first on the intended content for a page and then how the design can help communicate it better. Rather than use the same layout for each item of content (e.g. picture, title, snippet) break this similarity and style the content in a way that helps drive home its meaning.

Below are two example homepages which contain a relatively large amount of content but make effort to differentiate items from each other. This makes the user stop and think about each element in a pleasurable way.

1. Maximises interest with each page item
2. Speeds up comprehension
3. User feels supported

Result = Positive experience

Figure 6: The Prostate Cancer Charity homepage and the BBC Weather homepage

Draw on intuitive elements

Some quick tips to help convey the meaning of content is to draw on established design techniques:

• Numbers – numbers jump out at us when used sparingly, they provide instant meaning about amount or value. An ordered list instinctively tells the user this is a list of related items that are connected in some progressive way.
• Iconography – the inherent purpose of icons is to provide quick communication via imagery; this makes them ideal for visually representing and differentiating content.
• Colour – colours have inbuilt association, for example red for hot or warnings and green for positive or action which can help reinforce the message you are conveying. The BBC weather website uses the combination of numbered lists and colours to great effect.  Just watch out for variations in colour meanings with culture.
• Arrows – arrows instantly grab your visual attention and communicate direction, practically forcing your gaze to follow where the arrow points.

When similarity works best

As always it is a careful balance between creating a stimulating experience and over stimulating. Drop all similarity and consistency and you can drive your users loopy!

Some content just works best using a regular repeated layout. This is largely when time might be more critical, when people just want to get at the content or to help direct comparison across items:

• Lists – such as search results, documents and articles. Consistency across list items works well so that users can easily scan through key pieces of information.
• Core navigation – users need to be able to trust and easily operate the main navigation, here consistency across the website is important.
• Page furniture – the items present on every page, such as headers, search boxes and footers are best kept consistent so they’re not grabbing the users attention on every new page. They should take a backseat, like a comfy couch, you know it’s there and you can rely on it.

Wrapping up

Hopefully this article stirs up thinking about designing with and against similarity, thinking about how to break consistency and repetition to really optimise website design. There are many more directions this idea can be taken to and grown – it’s  an exciting prospect to unlock!