Blog/

What makes a website easy to use?

Designing user friendly websites doesn’t have to be rocket science. Keep these principles mind, and make things simple for your users.

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.

1. Prioritise what matters

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.

Example – GOV.UK’s content pages

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.

GOV UK bank holidays screenshot
The most common user need is clearly addressed right at the top of the page.

Example – Virgin Atlantic

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.

Virgin Atlantic home page screenshot
The site’s navigation draws out the most common task. Booking a flight.

Prioritisation tips for your website

  • 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 importance of user goals in things like the order of your navigation.
  • Make sure the most important thing is also the most prominent thing on your content pages.
  • Draw out ‘top tasks’ in your home and landing page design.

 

Make sure that the most important tasks are visible straight away in your interface

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.

Screenshot of the apple iphone product page
The page is clean and focused. Removing the noise makes what's left way more impactful.

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 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.

Screenshot of the audi product page
Resisting the temptation to overstuff the page with content makes things easier for users.

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.

Let go of the words and focus on whats important for simpler, more visual experiences.

3. One thing at a time

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.

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.

Iphone spec screenshot
The advanced details are available at a click, but only if I want them.

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.

Show the basics first, and making the complicated stuff available on request

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 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.

GOV UK form screenshot
Asking the user for just one thing at a time helps them focus on the task.

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 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!

Trainline mixing deck screenshot
Providing suggestions & recommendations helps make tricky choices easier.

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.

Get users to the desired outcome without friction, and break large tasks into manageable steps

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.

Open table screenshot
Calls to action should be emphasised in the design, so they can’t be missed.

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.

GoCompare Screenshot
Strong calls to action encourage the desired behaviour.

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.

Never leave users stumped about what to do next

6. Don’t make them think

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.

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.

affordances in door handle design
Door handles are a great example of affordances we encounter every day.

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.

Users should take one look at your page and ‘get it’ without any effort

In summary

  1. Prioritise what matters.
  2. less is more.
  3. One thing at a time.
  4. Keep decisions simple.
  5. Make it obvious.
  6. Don’t make them think.

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.

Share this post

Related Posts