5 UX tips for effortless layouts

A great website layout will deliver an intuitive, effective and enjoyable experience. Layouts are the foundation of presenting information clearly, attracting attention to the right parts and guiding people to their goals. You may not know that most aspects of a website are perceived subconsciously – get it wrong and its jarring and makes users think and question. This article focuses on layouts and how to help users interpret them correctly and positively as they scan the page. This guidance can be used throughout the development process, during wireframing to ensure the underlying structure is clear through to applying the finishing touches of a design. All stages are critical to ensuring any carefully planned layout works in practice.

Gestalt principles

The Gestalt psychologists explored how people perceive visual elements and tend to organise them into groups. Gestalt translates to “configuration or pattern” or “whole or emergent structure” and reflects the idea that individual parts can have different characteristics to the whole. Their set of six principles captures the cues the visual system uses to make sense of an image and have had a massive impact on vision research. These are: Proximity, Similarity, Closure, Symmetry, Common Fate, and Continuity. In this article I want to focus on ‘proximity’ and suggest five easy tricks to improve wireframe and visual design.

Proximity

Proximity, at its simplest, implies that features that are close together appear grouped together. This effect is instant: items positioned closer together than other items are seen as a group. The space between them becomes an automatic divider. For example, see the diagram below – why is this seen as two pairs of lines rather than four lines?

Figure 1: Gestalt principle of proximity

As with most of the gestalt principles, proximity is instrumental in our natural ability to be great at spotting patterns. In contrast, anything that breaks a pattern stands out and we can use this to our advantage in design.

The top five tips

1. White space is your friend – use it to emphasise boundaries

As in the diagram above, whitespace creates an instant boundary between visual elements. Therefore it’s great for creating boundaries around different content areas on a webpage. This means that when someone scans the page they quickly identify the distinct sections. This is great for home pages and landing pages which aim to surface a variety of lower level content and route people on their way to their goals. White space can potentially be more effective than an actual boundary, such as a line or box, as these methods create an additional visual element to interpret, which could result in visual clutter. For example, when wireframing, boxes are often used to allocate page areas to content. However, this additional visual clutter can reduce the impact of the wireframe’s message making it harder to scan and interpret.

Figure 2: Example wireframes, the left uses whitespace as boundaries and the right uses lines

Bear in mind though that white space is always a careful balance on websites. It’s great for emphasising boundaries between items but we also need to avoid wasting precious screen real estate or removing cues for users to scroll.

2. Group related content together

This is pretty standard practice, but it fits nicely within the domain of proximity. If one page section is related to another, then place them near each other. This is using visual proximity to support comprehension of content and connecting the meaning of the content. Users can then block this area of the page as a topic area. This is great if you can use this same page area on multiple pages for the same purpose, people will quickly learn this consistency and use it throughout the website.

Figure 3: Layouts showing grouped and ungrouped content areas

3. Group titles close to the content they represent

This sounds obvious but it is easy to let slide and can be difficult to control when webpages are created from panels or tiles of content that are designed to be flexibly arranged. Titles are critical to support scanning and getting the meaning of content across quickly. However, it’s easy for titles to become lost or dissociated from the content they are supposed to emphasise. This can happen anywhere: in article pages, listings and landing pages. The trick is to ensure the gap between the title and the content it relates to is smaller than the gap above (or around it). For example, on listing pages titles can often become more closely positioned to the content above them rather than the content they introduce.

Figure 4: Layouts showing titles positioned close to and distant from the content they introduce

This rule in conjunction with rule one will make a layout that is clearly divided up and ordered, people will notice the blocks of content first (without thinking) and then consequently pay more attention to the titles of these section.

4. Delineate navigation functionality from content

Use proximity to create distinctions between navigation and content whilst maintaining their association to each other. For example, create some room to breathe around the main navigation systems, such as top and left navigation, and the page body.  This will help navigation become easily identifiable and defined areas of the page. It is important to balance the size of this spacing so that the navigation does not become dissociated. Navigation should still be positioned close to the content it controls so it is simple to locate and infer its behaviour.

5. Use proximity to emphasise hierarchy

Proximity is great for creating hierarchies, the lower down the hierarchy the smaller the distance between items. For example, in a left navigation second level items can have less space between them than the first level items. This not only creates the impression of subordinate items but helps to separate one top level section from the section below.

Figure 5: Using proximity to emphasise hierarchy in the left navigation

Conclusion

Hopefully these guidelines will help you to use proximity to maximise the intuitiveness of your designs. Utilising the automatic processing of the visual system will help users to spend their time thinking about the most important aspects of your website rather than trying to understand the trivial. The subtle aspects of design can make a massive impact overall, pulling together all the individual components into a cohesive and pleasing experience. These subtleties create the impression of a well thought out, professional and supportive website.  The end result should be more time spent listening to your messaging, browsing your products and creating a happy user.