Why Visuals Matter

July 10, 2019 Jaroslaw Brykowicz

You shouldn’t judge a book by its cover, yet it’s still the first thing you see. There’s a reason publishers invest a lot of time on getting the front image just right.

In short, visuals matter – and not just for books. It’s also true for software and digital products. After all, even the best backend developments and features go to waste if the frontend doesn’t make these accessible and usable.

Strong visuals and a well thought out design count for a lot. They help:

  • Keep users informed without having to spell everything out
  • Encourage (ideally) positive emotional responses
  • Motivate and influence users on a psychological level
  • Ensure your branding is strong
  • Aid in smooth navigation
  • Reward user behaviour and business goals
  • Reduce the opportunity for human errors

Visual Notifications & Status

Quick question – what is better? A loading bar or a looped animation?

PGS Software Visual Loaders

One tells you that something is loading, but the other gives you an indication of progress. This is a status update. More importantly, it’s a visual status update. It doesn’t break the flow of the software, but it gives users a subconscious update that everything is still working.

There are many ways to do this – it doesn’t need to be a progress bar. As long as it moves or is animated from a ‘start’ and ‘end’ stance, then it should be clear to users how far along progress is.

Of course, loading times are not ideal but they are often necessary. Yet, there are many reports out there that show just how much people hate long loading times – by today’s standards, that can be just a few seconds, particularly for mobile applications. Without any hint of progress, users can grow frustrated and leave your app or solution entirely (especially since they’re likely to have so many other options). A progress bar, on the other hand, can indicate that it’s just a few nanoseconds more – encouraging people to stick around to use your product.

Emotional Response

Colour theory is another thing to consider here. Certain colours draw out specific emotions, or convey certain factors. For example:

  • Red is a very powerful colour, responsible for both love and anger. It connotes feelings or danger, excitement, and passion. It is also the colour of ‘stop’ and ‘wrong’.
  • Yellow is similarly optimistic. Its cheerful and happy tone is known to draw attention – there’s a reason it’s used in hazard stripes.
  • Green is commonly associated with wealth (the literal ‘colour of money’ for some countries). But it is also natural and full of vitality. It is often the colour for ‘yes’ and ‘success’.
  • Blue is a very universal choice. It suggests trustworthiness and an open, communicative nature. It’s professional tones make it the first choice for banks and social media networks alike.

PGS Software Visuals Colour

(Of course, here at PGS Software, we use orange, as it is assertive, yet creative. Similar to red, it is very energetic, but lacks the aggressive tones.)

These are just a few examples, of course, but it’s clear that colour has an impact on any product. This also informs some very common visual choices, such as using a sharp, alarming red to indicate cancel or go back commands.

That being said, your branding will still need to be important – which we’ll discuss shortly – but colour theory can still be used to aid in other features. Is there a key action you want users to take? Make sure this uses a strong, contrasting colour to stand out from the primary accents.

Psychology

This also extends to a few non-image areas too. How you present yourself with language, for instance, can also influence user behaviour. There’s a big difference between “start” or “let’s go!” – depending on your exact product, business, or niche, one may be more useful than the other.

We’ve gone through the nature of design psychology in a previous post, so we won’t go into too much detail here. But it’s important to know that even the smallest details give users subliminal suggestions.

Branding

We’ve already mentioned before that branding is a key issue for any product, specifically within the area of consistency. When you want users and customers to access your business across various different channels, they should always feel a sense of familiarity.

As such, product designs should include branding where possible. This includes logos, colours and even imagery carried over from elsewhere. A custom application that features a new design, custom graphics and an alternative style might not match existing solutions – and customers will feel unsafe or uncertain as a result.

This is also an area where Design Systems truly shine. Many companies dread the idea of a rebrand as, while occasionally vital, designers and developers alike often worry about having to go through every product or service to ensure the new branding is consistent. A properly integrated Design System gets around this and helps ensure any brand changes stay consistent throughout, from slight tweaks to entire redesigns.

Design System Branding

Navigation

Unless your entire product guides people through a single path, users need a little help knowing where to go. How customers navigate your software highly depends on the visual layout.

Are the most key and commonly used features easy to find? Ideally, your menu should make this clear in a minimal amount of clicks,
Are the buttons or links clearly defined? If they don’t stand out, they may simply get lost in the mix,
Are intended outcomes clear? A link “to checkout” on your store should send users to just that — the checkout screen — not to anything else,
Are your symbols or icons clearly represented? Despite being outdated technology, most people look for a floppy disk icon to save their work. If you introduce something else, there’s a chance some people might not recognise its intent or purpose.

In terms of positioning and layout, combined with graphical choices, there is a simple test known as the ‘squint test’. In short, if everything is blurry and or poorly focused (i.e squinting) are the key areas still defined? Even blurred, the intended path or primary sections should be visible.

Alternatively, if your footer stands out more than your main buttons, you’re likely having navigation problems!

Reward & Encourage User Behaviour

While it may sound a little Pavlovian, users are conditioned to be ‘rewarded’ in some way for positive behaviour. For example, little animations (whether it’s a tick, thumbs up, etc.) that indicate successfully logging in, making a purchase, or completing an intended action are more important than you might realise. They two two things:

They indicate that the intended task was successfully accomplished
The positive design gives the user a good feeling

Both of these work together to mentally train users that such behaviours or tasks are allowed and – in many ways – encouraged.

PGS Software Visual Microinteraction

This can further be enhanced through design and layout. The most important features – the ones users should spend most of their time on – should be clearly visible, stand out and prominently displayed.

Likewise, this is one area which can benefit the most from testing. Let’s say your product is widely used, but certain features aren’t being as used as much as possible. Through testing, you may be able to better position or design these to encourage increased behaviour.

Reduce Human Errors

Human users are not perfect and often need a little nudge in the right direction. A well designed app will try to avoid human errors through a number of means, namely by:

  • Removing unnecessary options
  • Making the intended or next steps clear and visible
  • Providing any instructions or help on screen

When it comes to the actual errors themselves, many designers often refer to slips and mistakes. The former – slips – include simple typos, or misclicks. A common example of bad visuals is having one screen that differs in a layout from the rest. If a user is on autopilot, they will often click or use the buttons/features in the same area, expecting the intended result.

For the latter, mistakes occur when the user simply lacks the correct knowledge. They are either unsure they are right, or believe they are correct because they don’t have additional information to confirm otherwise. A classic example of this is when eCommerce stores and apps ask for card information. The image of a credit card (and its various numbers and fields) certainly isn’t necessary, but clearly informing readers which numbers are which removes the risk of such mistakes.

In terms of making the next steps clear – as well as removing unnecessary options – visuals are important. Using an eCommerce store as an example again, the basket screen should have a clear button to move to the checkout stage — the customer should be absolutely sure what’s going to happen when they click on it.. While users should always have the option to go back, add more, or continue shopping, the checkout is ultimately the end goal for the business.

Summary

No matter how good the backend technology may be, users still need to interact with your products through visual means. Whether it’s an application, website or dedicated software, clear visuals are vital in encouraging the intended behaviour and mitigating the chances of frustration or confusion along the way.

Business Perspective

The visual qualities of product contribute a great deal to how it is received. If people can’t clearly navigate or understand what’s going on, they can simply decide to use another solution. Consequently, without clear visuals, digital products will struggle to meet their business goals, if such goals require happy or content users.

Sources

Last posts