The science behind good web design | Web Design & Digital Marketing Cumbria - Wombat Creative
Effective website design is based on a wide range of scientific and psychological principles. There’s reasoning why effective websites are laid out the way they are. Good website design is never just thrown together.
For a positive user experience, websites need to feel seamless and fluid, reacting as the user would expect, with all the information located where they’d expect to find it. But most importantly with the goals of what the website is intended to achieve, front of mind.
The goal is to create design that takes the user’s long-term needs and desires into account, and helps him focus his attention, a well-designed website doesn’t encourage aimless clicking and eventual ennui. Instead, it pushes the user to come face to face with what’s on offer and to decide (hopefully) to engage – Seth Godin
What is UX?
UX stands for user experience. Which is the bare bones of the design, the science behind where everything’s placed. It’s the journey the user experiences when visiting your website.
What is UI?
UI relates to user interface engineering which sounds complicated but it’s the graphics and typography of the design. It’s the visual elements of a website.
Iterative Design
Iterative design is the process of learning through completion. By building the design rather than documenting the expected process, it’s possible to spend much more time on the actual designing. It takes away the red tape and focusses the time on being creative and practical.
By doing so we’re able to understand the websites design in much more depth discovering problems which no amount of forward planning would have uncovered.
Navigation is fundamental to user experience (UX); users need to be able to work their way around and find everything they need. A website should feel familiar to a user, it’s much harder and requires more concentration to learn a new skill than it does to revisit an old one.
To understand this, the brain uses two types of processes, controlled and automatic. Controlled processes are the ones we really need to think about, for example a first driving lesson. Automatic processes don’t need much thought, so accomplished drivers don’t need to think about starting their engine, whereas a new driver would. Any new skill is a controlled process, anything we have learned already is automatic. We can only concentrate on one controlled process at any one time but we are able to multitask numerous automatic ones.
A website should be designed around automatic processes. And therefore the experience must feel familiar to users, using concepts they are familiar with from previously visited websites.
When we distract a controlled process with another controlled process, we often forget what it is we are doing. Have you ever been to a supermarket needing to buy one thing, became distracted by something else and forgot what it is you went in for in the first place? It’s the same principle.
Where a user has to engage their brain and really look for something it requires more concentration which increases frustration levels. It interrupts them in achieving their goals and in doing so makes them forget what their goal was in the first place.
So looking at user behaviour and the psychology behind it, it’s possible to create websites which feel natural to use and satisfy users expectations by relying on design principles which are familiar to the user. Which is why most websites use a similar structure and layout. Anything ‘out there’ is risky as it is likely to confuse users and frustrate them.
This doesn’t mean you can’t be playful and imaginative with navigation structure as long as it remains simple, familiar and easy to use.
Goal-Directed Experience
Where there’s a short interruption in what we see the brain automatically pieces what we’ve seen together, we therefore, don’t notice the break. What this means is any slight changes which are located away from the centre of the screen, are almost impossible to see.
When it comes to error messages and similar, it’s crucial to UX and therefore we use design principles to combat it. For example, the use of red in an error message helps them to stand out alongside locating it more prominently in the centre of the screen.
Brains are very much goal-directed, we focus on the aspects that bring us closer toward those aims. And we pay little attention to aspects outside them. This is commonly known as perceptual blindness. It occurs when the user is so absorbed in the task at hand that they fail to recognise what is happening in the background.
An example of this is this video.
To understand goals, we need to understand intentions. Personas are the intended audience, scenarios are the reasons behind their visit.
Once these are fully understood, the design can be built around these users’ goals. Because the reasoning is understood we are then able to satisfy their needs.
It’s about understanding audiences needs and goals and then tailoring the website to suit them.
Fovea centralis
The popular ‘F’ layout relies on eye tracking studies, suggesting users view website in an ‘F’ pattern. Viewing the very top, middle and down the left-hand side. Therefore, this is where the main navigational elements are placed for optimum effect.
Surprisingly the way the human eye focuses comes into this. We have sharp centralised vision known as the fovea centralis, focussing on just 1% of our vision field meaning our peripheral vision is pretty poor. Therefore, to have error messages and major navigational elements along the edges without highlighting them with contrast, colour and animation would deem them almost impossible to see at a first glance.
Software like Crazy Egg uses eye and click tracking technology to detect which parts of your site are being looked at it and which parts are being overlooked. It’s a great tool to use if you want to improve your website UX.
The human eye isn’t optimised for picking up brightness levels. When the eye has to move, it becomes more difficult to differentiate similar colours.
Pale navigational elements placed on a pale background will make for a confusing layout. Whereas if the navigational elements are shown in a bright or contrasting manner, the user is able to find what they need more easily. Contrast is key to visibility.
White space in design is a fundamental principle. Allowing elements on the page to appear highlighted and ensuring users can find exactly what they are searching for.
A cluttered website which doesn’t use white space makes it difficult for users to differentiate between different elements.
The best way to capture users’ attention is by creating contrast, using colours, animation, shape, and size. There’s a whole psychology behind colour choice.
To find out which colours go together there’s a handy app called Coolors.
Load speed
A slow website can seriously hamper user experience and sales. Half of users abandon a website that takes longer than three seconds to load. A page which is slow to respond to users’ actions causes further frustration.
To check a websites performance with Page Speed Insights and it’s also possible to view page load times in Google Webmaster tools.
There are a number of ways to streamline a sites performance, from resizing images to organising and cleaning up code.
This is actually a pretty obvious one, saying that it’s frequently overlooked.
Photography is naturally engaging – it’s the first thing people look at when visiting your website. If it looks professional and enticing, the website will look so too.
Stock photography should be avoided as much as possible. They may look professional but also cold and clinical. The photography on your website is an opportunity to give users a window into your products and business, anything less and is a missed opportunity.
Web design is all about displaying content. Making text easy to scan and digest without overwhelming visitors.
So how do we make it easy to digest? By making it easy to read and break it down into logical chunks, separated with headings and images to keep the user interested.
Clear layout Is important. Making it easy to browse, allowing visitors to easily pinpoint the exact piece of information they are searching for.
Typography is about optimising the style and appearance for readability. Bad fonts can instantly turn a website design sour. For on-screen readability, the optimum size for body text is 16px.
Minimalism is everything in design. However, taking away all content will make your website devoid of value. Copy sends a message to search engines that there’s value on your website. To perform well it is arguably the most important factor.
The content is what answers questions, overcomes difficulties and transforms prospective buyers into customers.
The design principle we use to arrange content and make it readable and easy to assess is known as visual hierarchy.
Visual hierarchy is a way of laying out a page which prioritises aspects with varying levels of importance, so not to overwhelm a user with all elements at the same time. The use of font, colour, positioning and contrast all come into play.
Up-to-date
Website design is constantly evolving and with it so does code. With depreciated code comes a network of problems, from security issues to speed problems.
The way we access websites is evolving too. From smartphones to tablets, laptops and the traditional desktops. Websites are being pushed to the extremes of what they can do. They need to constantly mould and adapt. Web design is constantly evolving.
Pop-ups and Advertisements
Users are focused on goals, anything that interrupts a user from their goal is irritating and encourages them to leave. What’s worse is they may forget why there on the website in the first place and therefore go elsewhere. Advertisements are distracting and often intrusive. They only really work effectively on established major websites like news establishments and even then more and more of us are choosing to pay to go ad free or use ad blockers to get around them.
Pop-ups are especially irritating on mobile phone screens. Google are recognising this and look set to reflect it shortly in their search signals.
This content was originally published here.
