It’s easy to take for granted that people visiting your website don’t have the background with your company and website that you do. While you may think it is easy to place an order for something or navigate the services section of your website, first time users could be having a pretty hard time getting to the information they want. Luckily, there are a lot of good resources out there to help you make sure your website design isn’t scaring people away.
One particularly good one is the book Don’t Make Me Think by Steve Krug, a professional usability consultant. It is one of the most highly-recommended books about usability. Throughout the relatively short read, Krug does a great job of describing how to make websites more self-explanatory.
Hopefully you can apply these eleven tips to your own website and save your readers time reading and understanding it!
The F-pattern, a common eye scanning pattern
1. Make it scannable
When we read a web page we don’t read every word. We scan the most important parts. Given this behavior, it makes sense to write web pages that are easily scannable. This means paragraphs that are as short as possible. If you can’t remove text, look for ways to break the formatting up into different sections. You can do things like breaking it into lists, headings, highlighted sections, or multiple smaller paragraphs. Another thing that makes scanning possible is good visual hierarchy. In other words, it should be easy to tell what is important on the page so sections that are important should look important. Large headings, color contrast, and surrounding white space can all do the job to create emphasis.
Two visually distinct sections
2. Distinguish logical groups visually
The human brain is always searching for patterns. Giving things that are logically related similar visual characteristics is a fast, reliable way to communicate that they are related. Likewise, giving things that are not logically related contrasting visual characteristics communicates that they are not. If you have, for example, a page with a list of testimonials and then a list of resources, you can make relationships between the items clear by closing the gaps between items within each section, creating a gap between the two sections, giving each one a different background color or pattern, giving the individual testimonials one shape, and giving the individual resources another shape. Here is an article with some other good examples of how to use contrast on your website.
In the top block, the links are too close to the color of the text
3. Make links obvious
One common thing that is commonly confusing on a website is when we can’t tell if something is a link or not. This happens when the color of links in a block of text is not significantly different from the color of the text or when buttons don’t look like buttons. Designing creatively is important but links should always look like links so we know where to click. Additionally, you should try to use the clearest wording possible for links. The example Krug uses in the book is having a button leading to a Careers page labeled either Jobs, Employment, or Job-O-Rama. Jobs is immediately clear, Employment requires some thought, and Job-O-Rama obscures the purpose of the link completely.
An easy choice
4. Create easy choices
Travelling through a website generally happens as trial-by-error basis or, in Krug’s words, as a process of “muddling through” to get to where we you want to go. A lot of time spent muddling can be spared by planning your navigation so that it is easy or mindless choices to the user. You should know the details that are needed at the moment of the decision and cut out the rest, making it easy to guess which link to choose given a few options. So, if you’re making a website for a hardware store, listing 30 categories of products will take the user a long time to read. It may even be so frustrating that they give up. Instead, break the 30 categories down into just a few more general ones, maybe something around 5, and make sure the choice between the 5 categories is easy to make so that the decision for where to go next is as close to mindless as it can be!
Cutting out an unnecessary paragraph
5. Cut out happy talk
Krug refers to unnecessary content as “happy talk”. These are blocks of text that waste visitors’ time because they lack useful information. It can be tempting to want to demonstrate how how grateful you are to have visitors on your website or how much you value your customers, but this text will probably be skipped by most readers of your website. You can save time for you and users by choosing to leave these sections out. Adding text should be on a conditional basis, where every paragraph has an obvious reason for being there.
Logo as the name of the building, navigation as a map of the building, and page name as the room you’re in
6. Imagine your website as a building
Krug compares a website to a physical space to emphasize the importance of conventions in web design. The top menu, page titles and the indicator in the menu showing what page we are on tell us where we are on the website. If it is missing any of these, we would likely feel lost just the same as if we were trying to find our way through an airport with no signs. Having a main menu in the same place as every other website not only lets you know that you haven’t left the website by accident, but gives you an idea of how large the website is and where you are located. We should make sure our websites have these elements and that they are where people expect them to be so no one feels lost.
New content on a web page
7. Show signs of life
You can increase trust in your website by showing that it is regularly maintained or, in other words, incorporating fresh content. One way to communicate this is to leave evidence of updates on the home page – this can be things like posts, projects, bulletins, or events. Increased trust in your website will increase the chance that people will return to it later on! There is also the added bonus of keeping people informed about what is going on in your company.
Company that sells chairs
8. Be upfront on the front page
One of the most critical aspects of the home page is that it makes the purpose of the website clear. Visitors to the home page should be able to tell what your business does right away. Without a clear purpose, there is no reason for them to go any further into the web site. By making sure your home page is clear right from the start, you can save users the time spent searching for clues before moving on to other parts of the site! You can do this by trying adding things like a banner image that is relevant to your business, overlaid text on the banner image, a tagline underneath your logo, and an About Us page in the main menu.
The tagline “Homemade chairs from Minnesota”
9. Embrace taglines
Adding a tagline to your logo can quickly explain what you do and why you’re valuable. In the book, Krug gives a quote from Jakob Nielson who said, “A really good tagline is one that no one else in the world could use except you.” The tagline should be 6-8 words, clear, informative, and possibly clever. It is not always necessary, but by adding one you lower the chance that the user has to look for clues about what your company does before looking around the rest of the website. Here is a list of good taglines to inspire you.
Issues a user might find during usability testing
10. Conduct usability testing
Testing your website using a focus group can be expensive. Not only do you have to find a specific group of people, but you have to find a specialist who can test and analyze them and pay the specialist a large amount of money.
Usability testing is another option. According to Krug, usability tests have an optimal number of three participants. Anyone who is building the website can be a moderator. During the test, people unfamiliar with the company try to complete various tasks on the website and as they run into problems the moderator and other observers take note. Afterwards, the observing team prioritizes the worst issues the participant ran into.
Tired of dealing with your slow WordPress website? Email me at firstname.lastname@example.org and mention the code #FreeHosting10 for two free months of lightning-fast WordPress hosting. We will even migrate you for free!
With limited participants and resources, this is how usability testing can demonstrate the most pressing issues on the website. To find out more about the process of conducting a test, here is a usability script available on Krug’s website.
Website generating goodwill
11. Generate goodwill
Finally, Krug mentions that there are things on a website which will increase goodwill toward the owners of the website and things which will diminish it. To keep visitors happy, you should try to practice goodwill-increasing things like being clear and guessing the questions they will have before they ask them. You should also avoid goodwill-diminishing things like hiding important things for manipulative purposes and requesting information you don’t really need.
Good usability practices make it easier for people to engage with you and your business. With a more usable website, you might even save time answering questions that your website answers but were previously too difficult to find. A small amount of clarity can go a long way!