by Chris Myhill
Director of Experience
No two websites are the same. They all have different aims & objectives.
When it comes to the overall UX strategy of your website, there’s no cookie cutter approach. We need to understand what the user’s needs are, and plan the content and features to accommodate them.
The next step is designing the user interface and individual screens. When we get through to this point, it is possible to lean a little more on proven best practices.
By using established principles (and a bit of common sense), you can make your site easy to use. In this post we’re going back to basics with six fundamental principles to keep in mind during the design process.
A single website often needs to serve a range of user needs. After all, there could be many potential reasons for someone to visit. This could mean providing a lot of information and features, each competing for the user’s attention.
But here’s the thing. Some user needs will be more important than others.
If the majority of your site visitors are arriving for a single feature or piece of information, then that one thing should also be the easiest to find. Make sure that the important tasks are visible straight away in your interface.
We make no secret about being huge fans of the UK Government’s Digital Service (GDS). Their design guidelines are simple, user friendly and well-researched.
Prioritisation is at the heart of GDS’ content strategy. Take the page for public holidays. The soonest upcoming holiday is prominently drawn out at the top of the page. The team did their research, and realised that most visitors to this page just wanted to know when the next holiday was. So they designed the page with this in mind.
You couldn’t miss it.
Virgin Atlantic have thought carefully about why people use their website. Most of the time, customers just want to book a flight.
That’s not the limit of what they offer, of course. There’s way more you could do. You could get travel money. Or arrange group bookings. But these are much less common than the core need of booking a flight.
The home page reflects this. A huge amount of real estate is given to answering the question : ‘where are you going’. The secondary tasks are still present for those who want them. But they don’t divert attention away from what matters most.
Make sure that the most important tasks are visible straight away in your interface
People want to grab information and use it quickly. We go to the web to get answers to questions. To complete our tasks. We’re far too busy to read waffle that doesn’t give us what we need.
Paradoxically, most websites don’t consider this. Pages often contain reams of copy that says almost nothing. Not only is it distracting, but it prevents users from being able to find what matters.
This principle is all about letting go of the words and focusing on what’s important. This makes for simpler, more visual experiences.
Just look at apple’s product pages. They’re gorgeous. Clean & minimalist, they present information in an impactful way. They really showcase how great these products look.
They can do this is because they’ve kept copy to a minimum. Distractions have been eliminated, helping the user to focus on what really matters.
Another great example of minimalist product pages can be found on Audi’s website.
Cars are pretty complicated products. The page could easily warrant loads of specification & marketing text. Audi have managed to resist the temptation to stuff pages full of text.
By keeping text to a minimum, important information can stand out… Not to mention the amazing photography.
Let go of the words and focus on whats important for simpler, more visual experiences.
We’ve already addressed minimalism. Keeping our pages clean and tidy by thinking carefully about what we show. But that’s not all. When show it matters, too.
Websites can have a lot to say. We also need to make sure that more advanced questions are being answered, even if they’re not most people’s top priority. But we need to do this without throwing users in at the deep end.
This principle means showing the basics first, and making the complicated stuff available on request. This way the majority of users who don’t want added complexity can still progress, without feeling confused or overwhelmed.
Let’s revisit the Apple example. They’re able to have such easy to use pages because they show one thing at a time.
Sure, they could have put the whole phone specification on the page. But in reality, how many people care? Do most consumers need to know about the 174g weight, or the 1,000,000:1 contrast ratio?
Some probably do care, for sure. But they’re the nerdy minority. Apple handily make this information available for those who want it. But it doesn’t clutter the page for everyone else.
Show the basics first, and making the complicated stuff available on request
Too much choice paralyses decision-making.
When people are too overloaded with choice, they can’t process the task. Deciding becomes a chore, and the user experience suffers. Complicated choices slow down tasks. They may even cause people to leave the site.
This principle means getting users to the desired outcome without friction. Break large tasks into smaller and more manageable steps. You can also help by giving recommendations and suggestions where it’s appropriate.
The UK Government’s website sets very specific guidelines around forms & user input. Only one thing is asked per-page. This helps keep things easy, allowing the user focus on each question & its answer.
They also have a policy of avoiding drop-down lists where possible. If a question would lead to hundreds of possible answers, then it should be fragmented. By asking more focused questions, they avoid the need for complex answers.
There are various ways to travel on Britain’s rail network. Each option incurs different prices and journey times. This choice can make the ticket booking process a bit overwhelming.
Trainline’s booking system approaches the task in a really user friendly way. They highlight the recommended ticket. This suggestion is based on the cheapest and most direct fare.
This makes deciding much easier, helping get users through the process quickly. Ultimately this leads to an increased bookings through the site. Everyone wins!
Get users to the desired outcome without friction, and break large tasks into manageable steps
Every website has an objective. A desirable action that we wants users to complete.
Whether it’s completing a sign-up process, booking a ticket or learning more about our product or service. There’s always something we want people to do. So we should never leave users stumped about what to do next.
The design should be nudging them forward. Encouraging that desirable behaviour. This principle means having a clear call to action on every page. An obvious ‘next step’ that the user can take.
OpenTable’s homepage makes it super clear what my next step is. The action to ‘find your table’ can’t be missed, and there’s a obvious button to search.
The journey is laid out for me. Nothing else is competing for my attention. It’s made clear what I’m expected to do next.
Insurance comparison site GoCompare have worked hard to make sure calls to action are unmissable.
For them, the desirable user action to ‘get a quote’. Everything about the design emphasis this. The button is high contrast. It’s been positioned optimally, and there’s plenty of white space around it.
This button should be the first thing users see. GoCompare have gone to great lengths to make sure that’s the case.
Never leave users stumped about what to do next
If something is too complicated, people won’t use it. After nobody likes to puzzle over things. Or second guess how they’re supposed to work.
This principle is all about making the user interface clear and easy to understand. Users should take one look at your page and ‘get it’ without any effort. They should never need to think.
We can remove uncertainty about our interface elements by using affordances. Affordances are visual characteristics that imply an interface’s behaviour. They can be as simple as applying depth & contrast to your buttons – so they actually look clickable.
The text in your UI is a big part of this, too. Jargon and unfamiliar technical terms can cause people to stop and think unnecessarily. By keeping language simple and using everyday words, we make things much easier.
Let’s mix things up and take a non-digital example. The humble door.
If a door has a handle that sticks out, it’s an affordance to suggest that you grasp & pull it. If it’s got a metal plate on one side (with nothing to grab), then you probably need to push it.
Ever slammed face-first into a door that you should have pulled? It was probably due to bad affordances. This is a fundamental principle of design, and it applies online too.
Rather than give a specific example, let’s look back at those we’ve already covered. All represent very different industries, but they have this in common. They’re prime examples of “don’t make them think” design.
They all use clear, no-nonsense language. They all keep things simple, by using well-established UI design patterns. If you want to see best practices, then look no further.
Users should take one look at your page and ‘get it’ without any effort
Designing beautifully simple interfaces takes effort. But by sticking to the six principles in this post, you’ll be well on the way.
Take the time to apply them, and your website will be easier for it.
Without ending on a downer, there’s just one final warning. If your site doesn’t have a clear UX strategy it isn’t fit for purpose… Even if it’s polished & well designed from an interface point of view.
Form should always follow function. Make sure you’ve mapped out the goals & objectives of your site with a discovery process, before diving into the interface level.
13th January 2021
It’s important to choose words wisely when writing for the web. Here are some quick tips when producing written content for websites and apps.
1st December 2020
Though conversational UI is still a novelty for many, it can offer some helpful benefits over traditional interfaces when used well.
18th November 2020
Designers can make better products through collaboration, respect and understanding of the development role.