What we think

The beginner’s guide to creating a better user experience

After an insightful few days at the Future of Web Design Conference in London earlier this year, I learned two things:

  • Everyone has their own ideas on how to evolve the digital industry
  • Nobody really knows who is right

Electric debates overwhelmed the conference hall, while industry leaders from around the globe wrestled (figuratively) over the popularity of apps vs browsers and whether data or design should lead brand focus.

Nevertheless, one set of rules which are universally accepted by designers, developers and software engineers alike, are the fundamentals of how to improve the user experience (UX). So I decided to collate a few solid ground rules to report back and share with you when it comes to providing a positive UX.

Check off this simple list of design dos and don’ts, to keep sites popular and users click-happy.

1. Don’t be a hoarder

Add only the necessary components to your user interface. Cut the clutter and you’ll reduce the risk of users being unable to find what they need, which potentially creates a barrier to purchase.

Focusing on mobile first when designing is a good way to achieve this. It allows you to decipher what really needs to be in there, while throwing out the rest. A perfect example of this is todoist.com – a clean-cut ‘to do’ app, which is clear, simple and easy to navigate. It keeps your diary in check with minimal fuss – perfect.

2. Memory hooks are essential

… so be consistent in design. This is an obvious ‘do’ but an important one nonetheless. Create a style sheet to streamline elements such as CTA buttons, so they are positioned, coloured and sized consistently and distinctively throughout the site, thus creating memory hooks.

“A great UX is the craft that brings all of the elements together to create one consistent feeling for the user” says designer Cat Noone, who also points out that consistency is important across devices as well as platforms (e.g. Twitter > Tweetdeck).

Fail to do this and users will repeatedly click the wrong buttons and find the experience to be a headache. Occasionally sites employ this technique in order to make users click a purchase button accidentally, which leads us to point number three.

3. Be honest

There’s no need to deceive users. Designer and author Stephen Hay describes deceptive techniques as ‘dark patterns’. The above mentioned pattern is known as bait and switch, where the interface switches appearance at the last minute to manipulate your behaviour.

People use dark patterns as they’re supposedly easier to get results, but in reality they just make users feel patronised. All you need is to be open and transparent, while making the path to purchase clear. Gaining the trust of users is much more important than trapping them.

4. Visually clarify props

It’s also handy to make it clear to the user how everything works upon their first visit to your website or app. Not everybody knows what the hamburger menu or share icon represents, so you may want to label these on first use.

Referring back to the Todoist app, these guys have provided a great example of visual clarification, making their guidance useful without being invasive.

5. Eliminate time lags

Designing for performance should be second nature. According to developer David Hurley, a one second delay in loading speed causes users to lose focus, which results in a 7% reduction in traffic. In addition, Google recommends that it should take no longer than 400ms for all of your above-the-fold content to load.

So what are the best ways to eliminate time lags? For a start, avoid gifs, tiffs, and carousels. An excess of widgets and social media buttons also cause delays, so only use them where necessary.

When it comes to optimising images, it’s a good idea to make sure the srcset attribute is used at the coding stage (currently available for all modern browsers) to pull through different resolutions of the same image, depending on what device and screen size the user has.

This does require more work and is time consuming, but it’s the best solution to improving load speed while retaining image quality.

6. Drop the interruptions

Pop-ups are not your friend. No one likes an advert, survey, or any other interruption – especially those with sound. Use pop-ups sparingly, make sure you find the best time to do so (e.g. ask for feedback after purchase) and try to avoid obstructing the user’s view by keeping the pop-up out of centre screen.

7. Show you care

This is really just about providing good customer service. Reply to queries with speed, price apps reasonably, and above all else, make the experience as easy as possible for the user. As magician Darwin Ortiz says: “The audience must never be made to work”.

But customer service doesn’t just end at the checkout; it’s important to look after the user post-purchase too.

Take AO.com for example, who give you a call to make sure your order is right, and ensure you speak to the same person every time you make contact. This is a nice personalised touch which makes them stand out against other companies.

They also keep you updated on the delivery arrival, and giving feedback is made easy for the user with rating buttons being directly clickable in the follow-up email.

Sounds easy enough, yet so many get it wrong. Let’s take a look at how most e-commerce sites would look translated into ‘real life’:

As designers and digital agencies alike, we may not always agree on how we envision the best version of a website or app to look and work, but if one thing is for certain, it’s that we need to create the best possible experience for our audience.

Hopefully this round up of UX improvements will help you in doing so; it’s always a good idea to recap on the basics to make sure you’re building on solid foundations.

I’d also like to say thanks to the Future Insights team for putting on a brilliant conference. The FOWD events are held every year in London, New York, San Francisco and Las Vegas, and I would definitely recommend them to anyone who loves networking, learning, and free gingerbread lattes.

Related posts