Using visual design to improve the user experience

After conducting user experience (UX) research, we often find ourselves swimming in data that must be translated into clean, easy to follow deliverables for the client. If you have worked with us before, we may have provided an insights report, personas, journey maps, or wireframes to improve a service. Regardless of the format, we always strive to ensure that our deliverables are visually appealing (whilst also answering your research questions). Why? Because good visual design drives engagement, increases understanding and creates a great user experience!

We thought we’d share some of our tips on how to create an effective and concise visual design. The best thing about them, is that these principles can be applied to pretty much anything!

1.   Use colour with purpose

When considering use of colour, it can be tempting to follow a well-established “rule” such as 60-30-10, pairing complementary colours and never daring to think about using more than one primary colour. All of these theories help to create a visual that is aesthetically pleasing, BUT there are some things that should be considered first. For example, every colour that you use in a visual design should have a purpose, such as to:

• simplify interaction with a product or service by drawing attention to key elements on the page, for example calls to action
• distinguish between different stages or topics, for example, at System Concepts we use four different colours to match our four service areas
• match and reinforce the brand, which over time helps to evoke an associated emotional response from the user.

So, if you need to use more than three colours in a design, for example to differentiate six stages in a customer journey map, then do it. However, ensure that you use the colours consistently and sparingly throughout. The result: a visual that can be easily processed, with improved association, recognition and usability over time.

2.   Welcome white space

White space is the design tool you never knew you needed – don’t be afraid of it! Intentionally leaving areas of your design blank has the power to:

• separate different topics, by creating a clear division between aligned objects, without the need for messy lines
• create emphasis around a focal point, to attract attention from the user
• improve legibility through use of margins, line spacing and typography.

This results in a structured, balanced layout, which reduces the user’s workload by making it simpler to search, process, and comprehend. Plus, it helps to reduce the amount of visible content, which gets you thinking about what information is really important to communicate. Anything that doesn’t add value for the user should be removed, and if necessary, included in a side note or appendix instead.

3.   Use data visualisation to tell a story

Let’s face it, no one wants to scroll endlessly down a page of text or look at a table full of data. Get creative when presenting information by using videos, infographics or storyboards. Not only does this provide a more fun and welcome alternative to text, but visual information can also be processed more quickly, decreasing the workload for the user. However, “a picture is worth a thousand words” only if it can be efficiently and accurately interpreted. This can be achieved by ensuring your design tells a cohesive story with a strong, single narrative that is free of distractions. You can do this by:

• succinctly introducing the topic
• guiding the reader through an intuitive flow
• making it easy to compare values and identify patterns or relationships
• highlighting the key insights that support the message
• including a key with clear labels for groupings or icons.

4.   Use understandable icons or graphics

As with colour, one of the primary purposes of imagery is to enhance aesthetic appeal. If you see a text-heavy poster on the wall, I bet you’d be less likely to read it compared to one that entices you in with some stylish graphics. When considering the user experience, icons and graphics should be relevant and support comprehension. They can also serve other purposes IF used correctly.

Used consistently, and in line with mental models, icons can improve recognition and tie together information relating to a common topic across one or multiple designs. Graphics help to tell a story, often with a primary focus and context that can be grasped at a glance. They also help to break up the page, save precious space and convey or elicit emotion from the reader. Where would we be without emojis?! However, you must consider the market and scenario where a design will be used, avoiding anything that may be ambiguous, and using text labels where appropriate. Oh, and don’t go overboard – having too many icons or graphics is distracting, not helpful.

5.   But first, decide what is important

All of the above tips will help to keep your visual designs simple, beautiful and usable, whilst helping to focus the user’s attention. However, this doesn’t mean that you need to keep unnecessary information in the design. If you can’t think of the potential impact of an element (whether it’s an image, text or button), then question whether it really needs to be there.

Once you have a basis for the content, go back through the other tips. For example, think about how different pages or designs will tie together; use a consistent layout, clear icons, and consider whether infographics could help to tell a story to engage the user. Then, refine the design; ensure content is legible and distinct using white space, and last but not least, bring in the colour!