When it comes to web design; usability and visual design are two areas that are heavily dependent on each other. They affect each other dramatically, and each requires an understanding of how people will interpret the message you want to communicate, and what experience the user will have.
Finding the correct balance between these two disciplines is essential to developing a good user experience. However this isn’t such an easy task when you consider their juxtaposing nature.
On the one hand, you have visual design which is almost entirely subjective. Everyone looks at design from a personal perspective – what one person loves, another hates. No one, including even the most experienced web designer, can categorically say if a piece of creative work is right or wrong. However, on the other hand you have usability, which by its very definition is objective; granting the capability of easily achieving the user’s objectives.
The Relationship
Not understanding the relationship between aesthetic and usability will often result in a website which under-performs, as the core business goals are compromised in preference to aesthetic, or value is lost through poor visual design.
More often than not, this problem can be seen when clients and/or designers jump into the creative phase from the outset, with drawn-out deliberation of logo placement, and making navigation systems look cooler etc. Whilst it’s understandable why a lot of agencies and clients favour this approach (it quickly and tangibly gives everyone an idea of how the site will finally be realised) it does not give careful consideration of what is required to get a user from X to Y in Z way.
This is fine, as long as the primary purpose of your site is to convey beauty. And don’t get me wrong; strong and well-considered visual design is incredibly important. A well-designed site is essential to gaining trust and increasing the perceived value in your brand and product/service.
Objective design
But let’s look at the bigger picture for a second; isn’t the website meant to address certain problems? Or is its purpose to demonstrate a process to someone with little experience? To act effectively, you need to be sure that the user understands how to achieve their goals; something which can’t be done through design alone.
At the risk of sounding cliché, let’s take a look at the most obvious example of objective-focused design; Google. Is it the best looking site? No. Is the logo even very good? Not really (but of course this is purely my subjective opinion!). Does it deliver what the user wants quickly and without any obstacles? Yes. And so, despite having a weak visual design, does Google deliver an overall good user experience? Without question, yes.
Subjective design
But don’t write off the importance visual design just yet. It’s long been known that Internet users make up their minds about the quality of a website in the blink of an eye. In just a 20th of a second, users have formed an opinion as to the quality of the entire site. This is known as the ‘halo’ effect: If people like the design of a site, then this perceived quality will permeate to the other areas of the site. First impressions really do count, and the quality of the visual design goes a long way to affecting that judgement – irrespective of what you are offering or the how usable the site is.
Striking a balance
So how do we ensure our web design is both aesthetically pleasing, and useful? The answer is in how we apply and use the aesthetics. Used as a tool rather than decoration, visual design becomes seamlessly interwoven with the interface design.
Simply put; the visual design of a website should be used to influence key information, functionality, and brand message, and not be used for anything superfluous or distracting from the user objectives – unless of course that the objective is to demonstrate the visual aesthetic itself. Not only then does the balanced web design bring a sense of quality and trustworthiness, but it also reinforces the core goals of the site.
There are some basic design principles that can be applied to web design to help ensure that the site satisfies both visually and in terms of experience. Here are just a few of them:
-
- Define goals – All websites have one main goal, and it’s the job of the web designer to accomplish this. It may seem common sense, but it’s remarkable how many times this simplest of things can be overlooked. A designer who has a sense of what needs to be achieved is far more potent than one who is simply trying to make something look pretty.
-
- Placement – Where things are placed has a huge impact on when it will get noticed, and also how important that element is considered to be. Generally, hierarchy uses the ‘F’ pattern which is defined by the way a user naturally scans the page (top left, then to the right, then down a bit and to the right again). By following this placement pattern, we can estimate the first and last places a user will look. As such, the designer can make sure that important functionality, call-to-actions and key information stands out.
-
- Colour – The use of colour is one of the most powerful visual elements, especially when it comes to interface design. Brighter colours will immediately draw attention from more neutral colours, and is often the most effective practice to bring attention to the primary call-to-action.
-
- Size – Our eyes are naturally drawn to the biggest elements on a page first, and so it’s important to give more space in the design to key messages and information as well as call-to-action links.
-
- Contrast – Although contrast also falls somewhat under colour, the same can also be applied to other forms of contrast such as black and white, dark and light etc. The higher the contrast, the more attention; the lower the contrast, the less attention.
-
- Flow of information – In what order information and options are presented to the users will help guide and persuade them toward your objective. An example of this is used in most good ecommerce sites: The top of the page will feature the main attention-grabbers and the primary call-to-action (often ‘buy now’). Further down the page often lists features and testimonials, arranged in a way for the user to quickly scan and get the most information. After some more convincing with these pieces of content, the same call-to-actions are usually presented.
Conclusion
Subjective vs. objective really boils down to the age-old debate regarding form vs. function. In my opinion though; form should support the function (even if that function is to be as beautiful as possible) and should never be a trade-off. Web design is often seen as a subjective and creative discipline, leaning heavily toward form. Whilst this is partly true it doesn’t encompass everything that web design needs to be. The greater the onus given to the subjective form, the more detached it becomes from the function. As such, if there’s any confusion regarding how the site functions, you should expect a large amount of drop-off from your site.
The creative side of web design is an exciting part of the process for both the designer and the client, but it can be an unreliable crutch, requiring users to accept anything based on your creativity. Whilst visual design is an incredibly important aspect, it’s even more important to realise that a solid objective strategy will always be more relevant to the success of your site than creativity alone, and to expect design to make up for a lack of strategy is a dangerous game to play. Therefore, it is the role of the visual design to aid the objectivity of the site.
I wouldn’t expect any designer can become 100% ‘objective’ about everything they produce – the world would be a boring place without a little decoration. However, through employing a smart use of design and aesthetic tools to define focus on objectives, rather than pure decoration; it’s possible to achieve balanced web design that gives a great first impression as well as delivering on the core goals of the site.