Shaun Wyatt – Digital Manager

Websites are kind of a big deal. They present an organisation’s service to its users, they communicate its identity and at some level, they represent the individuals within the company too, so it’s no surprise that everybody wants to get involved in the project when the decision is made to build a new one.

Designers want to express their creativity and communicate the brand’s identity. SEOs want to optimise, content writers want to engage, and developers just want to build a functioning platform. You can try to appease everybody, but as the phrase goes, too many cooks spoil the broth. For me, every decision made about the design, functionality or processes should come back to one question: what is best for the user?

And that’s what user experience (UX) is – approaching every problem with the experience of the user at the forefront. To help us understand the true importance that user experience can have on our websites, let’s look at some specific examples of those doing it well, and those doing it not so well.

Examples of good and bad UX on websites

 

The bad: Purchasing a game from the Xbox website

Xbox website bad user experience

The Xbox website is a great example of how UX has not been considered. The frustration of having to click the same button 4 different times is enough to give most UX professionals nightmares, but what really tops it off is having to log into the platform for a second time before being able to purchase the game.

In UX there is a principle known as the three-click rule – anything that takes more than three clicks is considered a bad experience. Take note Xbox!

The good: Domino’s notifying users when their delivery driver sets off

Dominos delivery tracker good user experience example

Whoever made the decision to create a progress update page to notify users when their delivery was on the way deserves an award.

Gone are the days of being stuck between being ready to jump to the door and making a snack to tide you over. This progress page and the app notifications that go with it have been designed with the user’s peace of mind, and stomach, in mind.

Bad: KFC menus

kfc website bad user experience example

The purpose of visiting a restaurant website is to find out:

  1. What meal you would like.
  2. Where the restaurant is.

Making a purchasing decision with no indication of price is like trying to find a light switch in a dark room, though this is due to variations in menus and pricing in different locations and an issue that most fast food chains have to consider. A simple suggestion here would be a postcode checker linked to a database.

What compounds this however is that the nutritional information is on a separate PDF page, which contains the nutritional facts for EVERYTHING, rather than the one item you’re looking at. While you may think it’s strange to be calorie counting on a fast food website, for those with special dietary requirements this could cause serious frustration.

A decision has been made here to get some form of menu online, but nobody has taken a step back to consider how customers will be navigating it.

Good: Learning to code on Code Academy

Code Academy website good user experience example

Everything just works here. The instantaneous feedback you get whilst building a page, the way that you can see visual updates to the example page whilst you update code and the links to resources and FAQs for each step make using this educational platform a great experience.

It’s a great example of a site built by people who have had to perform the functions of the site on a day to day basis. They understand the small annoyances of coding, they understand how useful it is to have side by side comparisons and more importantly, they’ve considered the needs of the user.

How to approach web design with your user in mind

 

Now that we understand how decisions we make as designers and developers affect the experience of the users on our platforms, how can we approach design in a UX led process?

Get to know your audience

First and foremost, we need to understand who our primary users are. As an exercise, you can profile your website’s users and create personas to help you put yourself in their shoes.

For example, let’s say you are a charity that provides help to the aged.

Harold – Age 67

harold website user example
  • Has a small amount of computer knowledge
  • Sight-impaired
  • Accessing the site on a library computer
  • Looking for assistance for his wife
  • Heard of the charity through word of mouth

In the case of Harold, you may understand that he requires accessibility options to enlarge the site text. You may also want to present a request assistance button early on the homepage in a clear fashion in order to simplify his browsing experience.

By running through exercises like this, you can begin to understand how you may approach the design of the site differently when not operating from your own perspective.

The importance of wireframing

Wireframing as a UX exercise is one of the most valuable tools in a designer’s arsenal. Wireframing is an early sketch of a webpage that allows a designer to consider what content will be presented to the user and in what priority.

website wireframe sketches

Typically, our process involves wireframing key site templates whilst drawing on the earlier work we did for the audience personas. When approaching a wireframe, a number of questions need to be considered:

  1. What is the primary function of this page?
  2. Who is going to be using this page?
  3. What is the most important information that a user needs to see on this page?
  4. If they have scrolled past this, what next? (and so on)
  5. What signposts do they need in order to navigate to other/previous sections of the site if they aren’t interacting with anything? Why?
  6. How can we best present the sections we outlined above?

And now we sketch blocks to represent the discussion we had above.

Add some creativity

Now we know what goes where, and why, it’s time to make it look sexy.

This isn’t the point where the focus shifts firmly to UI (User Interface) though. It’s a case of making sure that the UI and UX are working hand in hand to deliver a great looking and easy to use website.

The design stage also isn’t a paint by numbers process, where you merely add images and colours to the wireframes. You can freely explore any design as long as you keep in mind the decisions you made during the wireframing process.

For these reasons, our design workflow heavily involves using programs such as Sketch and InVision. With Sketch we can ensure that elements like buttons, text styles and colours remain consistent, while keeping our designs responsive. InVision allows us to prototype our designs and collaborate during testing with ease and efficiency.

Test and learn

UX isn’t something that you’ve completed once your site has been launched. Our exercises have only allowed us to step into the user’s shoes, now we need them to take the next steps so that we can measure and learn from how people are interacting with the pages on the site.

What pages are causing users to leave the site? Has their objective been satisfied before they do? What page elements are users trying to interact with, and can they?

The questions can continue forever, but ultimately data will tell us which obstacles users are running into. Our job as UX designers is to present solutions to the problems. Test, learn, repeat.

In order to successfully find out how users are interacting with the site we can conduct various tests. To name a few:

  • Record your users’ experiences. Ask a typical site user to sit down and interact with the site and watch or record them performing a task. Did they manage it? What issues did they run into? Was it easy?
  • Hire users to perform tasks on the site. There are a bunch of sites out there that allow you to pay people to use your site, and these journeys are recorded for you to review.
  • Install tracking software to create heatmaps and record journeys for users already using your site. Installation usually requires dropping some script on your website, but once your setup you can see how everybody visiting your site is interacting with it. We use HotJar.
  • Use Google Analytics to assess page flow and dropouts. Google analytics is free, and a great tool for the budget UX designer!

 

Is your brand in need of a new website? Let’s have a chat.