Designing user friendly websites isn’t rocket science. Keep these in mind, and make things easier for your users.
No two websites are the same. They all have different aims & objectives.
When it comes to the overall UX strategy 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.
But that’s the strategic vision. The next step is the design of the user interface, and our individual screens.
When we get through to this point, you can lean a bit more on proven best practices.
By using established principles (and some common sense), you can make your site is easy to use. In this post I’ll cover six fundamental ideas to keep in mind during the web design process.
1. Prioritise what matters
What does it mean?
One website will often need to serve a wide range of user needs. There could be many potential reasons for someone to visit. This could mean providing a LOT of information and features.
But here’s the thing.
Some needs will be more common than others. If the majority of your site visitors are arriving for a single reason, then that one feature or piece of information should be the easiest to find.
This principle is all about prioritisation. Make sure that the important tasks in your interface are visible straight away. Nothing else should be competing for attention.
Example - Gov.uk’s content pages
I make no secret about being a huge fan 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.
Example - Virgin Atlantic’s navigation
Virgin Atlantic have thought carefully about WHY people use their website. Most of the time, customers just want to book flights, hotels or cars.
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.
The site navigation prepares for this. Those secondary needs don’t compete with those of the majority. Common user needs are visually drawn out, with bigger text and eye-catching icons.
The secondary tasks are still present for those who want them. But they don’t divert attention away from what matters most.
Applying this principle
- Understand WHY most people coming to the site, and find the common patterns. Analytics data and user interviews can help with this.
- Run workshops with teams & users to define a priority for user goals.
- Reflect the prioritization of user goals in your navigation, and on content pages.
- Draw out ‘top tasks’ in your home and landing page design.
2. Less is more
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.
Example - Apple’s product pages
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.
Example - Audi’s product pages
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.
By keeping text to a minimum, important information can stand out… Not to mention the amazing photography.
Applying this principle
- Make sure everything on you say on your website serves a purpose. If not, strip it away.
- Be vigilant when adding copy. First ask; is it addressing a user need?
- Communicate as succinctly as you can.
- Writing tools like Hemingway Editor can really help. This writing app highlights unnecessary words & phrases in your text.
3. One thing at a time
We’ve already addressed minimalism. Making our pages clean and tidy by thinking carefully about what we show. But that’s not all.
WHEN we 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 don’t throw all your 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.
Example - Apple’s product pages (again)
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.
Example - Audi’s product pages (again)
The same goes for Audi, too. They’ve resisted the temptation to plaster the page with information about the fine stiching in the leather seats. If you’re interested, you’re welcome to expand open a new screen to learn more. But if you’re not, that’s cool too.
Applying this principle
- Classify your content & features. Identify what the basics are, and what’s more advanced.
- Defer complicated needs to a secondary screen or state.
- Use links or button text that set clear expectations for what happens, if users choose to select them.
4. Keep decisions simple
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.
Example - GOV.uk’s forms
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 droplists 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.
Example - Trainline’s ticket selection
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 is based 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!
Applying this principle
- Resist the impulse to provide loads of choices for users at once. Keep things simple.
- When building forms and linear interactions, ask just one thing at a time.
- Break long forms or processes into short, simple steps.
- If a question has too many possible answers, then rethink and reframe the question.
5. Make it obvious
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.
Example - OpenTable
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.
Example - GoCompare
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.
Applying this principle
- Make sure every page on your site has a clear call to action.
- Keep calls to action focused. Just the one or two most important things users should do next.
- Make them visually striking. Use space, position, colour & contrast.
- Use short, succinct and imperative language.
- Techniques like AB testing can help you tweak and optimise your calls to action.
6. Don’t make them think
If something looks too complicated, people won’t use it.
After all, 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.
An offline example - Doors!
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.
Online examples - All of the above
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.
Applying this principle
- Use affordances carefully when styling UI. Anything interactive should stand out.
- Use established design patterns. Give people familiar conventions, without reinventing the wheel.
- Think carefully about language choices for buttons and links. Describe the resulting actions, without jargon.
- Look at your search analytics & SEO data to find the terms people actually use.
- Prioritise what matters.
- less is more.
- One thing at a time.
- Keep decisions simple.
- Make it obvious.
- Don’t make them think.
Always remember… Form follows function
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.