Usability in Web Development

The goal of usability is to improve the experience for users by making websites easier to use and learn. An improved experience in turn leads to increased goal completion rates and happier users.

Focus on the users

Before you can think about usability, you need to know about your users. Different users have different goals. Before you plan a design, you need to ask yourself:

  • Who are the users?
  • What are their goals?

Think “Conversation”

A good user experience is just like a conversation. Your users come to your website with questions and it’s the responsibility of your design to answer those questions.

When users first enter your website, they are going to ask:

  1. Where am I? (Is this site trustworthy?)
  2. What can I do here? (Is this site relevant?)
  3. Where’s the information I’m looking for? (Where’s that link?)

If these questions cannot be answered within a few seconds, the user will either push the back button or become frustrated.

#1 and #2 are easy to answer: place a logo (trustworthiness) at the top of the page and display a tagline next to it (relevant).

A tagline should convey the essence of your website. What can people do on your website?

Unless you are a known brand, you need a tagline. Coca Cola or Nike can get away with it because it’s assumed that people recognize the brand and know what to expect when they see it.

Question #3 (where’s the information I’m looking for?) depends on your users and their goals. Place the most important answers in the hot areas of your pages. Hot zone maps like the one below can be useful in aiding your decision of where to place information.

The darker areas should display the most useful information

An example: Restaurant Website

By asking several people, I determined that people visiting a restaurant’s website mainly want to know the answers to these questions:

  • What’s the phone number?
  • Where’s the menu? / What can I order?
  • Are they open today? / What are the hours?
  • How do I get there? / Is there parking available?

Help your users. The question to “Are they open today?” could have simply been answered by saying “Today we are open from 11am to 10pm”. But this answer requires the user to:

  • Look at a clock.
  • See what time it is.
  • Figure out if the restaurant is open right now.

Calculate that for the user and show a concise answer: “We open in 48 minutes!”. As web usability consultant Steve Krug puts it, “Don’t make your users think“.

Link: www.cantonesehouseduluth.com

Trim

It’s a common mistake to assume that users are going to read the page of a website just like they read a book. People read websites like they read billboards while driving in a car at 70mph. Capture their attention using a few words, communicate the message quickly and direct them using links to the places where they can find more information. Trim everything that is not necessary, or move content in separate pages.

People Browsing Websites: Expectation
People Browsing Websites: Reality

Anticipate and forgive

Attempt to guess how your users are going to interact with the website ahead of time. If they add a product to their cart, it’s likely they would want to know how to checkout and how to register an account. Assume that errors will be made (especially when it comes to filling forms). Help your users and correct their mistakes automatically whenever possible. Be forgiving.

Testing is essential

How do you know if your design works? Look at how people use it! One of the best way to evaluate the effectiveness of your design is to do usability testing. During usability testing a user is instructed to perform different tasks (find information, complete a checkout, guess what the website is about, etc.) and note is taken of the steps that are frustrating, taking too long or simply that could not be performed. There are several companies that will lend you usability testers for very little money. One of these is UserTesting.com, but do some searching and you’ll find many more.

If you don’t have a budget, ask your friends and family to navigate your website. Stay behind them and observe how they interact with it. Are they getting stuck? Are they getting frustrated? Are they clicking the right links quickly? How can you improve the design by reducing the frictions? Are they thinking too much?

Once you have identified areas that could be improved, modify the design and repeat the testing!

Educate your clients about usability

It is important that user goals and not management decisions dictate the structure of a website. Unfortunately a lot of clients will think that they know best what and where everything goes on their website. They might even come to you with a list of specifications, such as:

  • The home page should include our mission statement and a picture of our management team.
  • The center part should include a box with the company’s latest news.
  • We will have these links, placed in this order, on the left sidebar, for people to browse these sections.
  • This button will be placed here.

Websites designed by committees tend to be even worse, since multiple people make key decisions about the structure of the website. That is probably the reason why University websites are often so frustrating.

Typical University Website. Credits: https://xkcd.com/773/

It should be your responsibility to educate your clients and emphasize the need to focus design decisions around your users. This can be tough sometimes, since clients are paying you to build something that they want. Don’t start an argument with a client, but explain that by investing some time and money in usability research, users will be able to use the website more easily, which will result in both higher goal completion rates and increased user satisfaction.

Summary

  • Focus on the users.
  • Think “conversations”. Place the answers to your users’ questions.
  • Trim the content. Websites are like billboards at 70mph.
  • Anticipate and forgive your users.
  • Test, test and test!
  • Educate your clients.

This was a quick introduction to usability. To learn more I invite your to read the resources I linked below.

Recommended Reading

Need help with usability?

Get in touch! At MasseranoLabs we offer UX Design Services and we’d love to help.

 

Stay up to Date