You need a website that works. Here’s how to address some of the most common usability issues.
There’s a big difference between building something that works on a basic operational level versus one that is functional and easy to use. When it comes to websites, a lack of consideration for user experience often causes website owners and designers to build site that look nice, but don’t function. This has disastrous consequences for owner and visitor alike. To avoid them, here are some of our top usability do’s and don’ts.
1. Do: Maintain a consistent interface.
Your color scheme, font choices, and other style decisions should be uniform throughout the site. Your buttons should look the same, images should have a unified look and feel, and content types should display in similar formats. Even when things perform different functions, they should all look like the belong to the same family.
2. Don’t: Radically alter the look and feel of the site from section to section.
It’s tempting to get carried away with things like font styles and color choices. But doing so can confuse users, and make them question if they’ve moved to a different site. Keep it consistent to maintain your brand identity.
3. Do: Follow effective navigation principles.
Navigation that doesn’t navigate is a non-starter. Your menus should be easy to find, contain no more than tier-two navigation, and have self-descriptive labels. Your blog should be called “blog,” not “inspiration.” Your navigation is the table of contents to your site. It’s not a place to fool around.
4. Don’t: Make it hard for users to find what they’re looking for.
Hiding items in a hamburger menu, or having a navigation menu take over the entire screen of your site, or giving menu items fancy but non-descriptive names, are all signs of a poorly-built website.
5. Do: Employ design hierarchy to guide user attention.
Header tags (such as <H1>, <H2>, etc.) help screen readers navigate content, and they help Google understand your site content. They also provide visual hierarchy for your reader, making your content more scannable and easier to read.
6. Don’t: Fill your website with unstructured content.
Long, dense columns of text with no headings and little white space provide a visual strain for readers. Similarly, an overly cluttered site with too many images and CTAs divides user attention. Use structure to direct user focus and drive leads.
7. Do: Use thoughtful, engaging, consistent copy throughout your site.
Simple, clear language will get you a long way. Think about what your visitors need to know, and direct your copy toward speaking to their interests more than your own.
8. Don’t: Stuff your copy full of keywords or use long, jargon-laden terms.
It’s far too easy to start dropping burdensome phrases crammed full of jargon terminology to show off your own knowledge rather than create accessible writing for your users. Don’t do this. Plain English, please.
9. Do: Use your design to engage your users to scroll down the page.
It’s OK to have image or text cut off by the first screen your visitors land on. Users know how to scroll, and they will keep reading your content. Instead of forcing too much into that top screen, use your design to direct users further down the page.
10. Don’t: Trap yourself with “above the fold” thinking.
If you focus too much on the top part of your homepage, you neglect everything that comes below it. Don’t do this. And stop trying to shove more and more content into that top screen. It looks bad and confuses your visitors.
11. Do: Use descriptive labels on clickable buttons.
It should be obvious to your users that they can click on a button. If it isn’t, then they’re likely to make a usability error by missing the button altogether. You also want to have your button say what it does. One trick is to have your button label complete the sentence “I want to…” If it doesn’t, your button is probably making a non-sequitur for visitors.
12. Don’t: Use ambiguous labels or buttons that don’t look like buttons.
Have you ever hesitated to click a button because you don’t know where it will take you? Ambiguous button labels are disconcerting for most web users. If your button says something like “congratulations” or even just “click here,” your users are only acting in their best interests to treat it with suspicion. Similarly, if you button is plain text, or a ghost button, users may not realize they can click on it at all.
13: Do: Create a responsive, mobile-friendly design.
Most web traffic takes place on mobile devices. This means your website must have accessible navigation on smaller devices, readable text, and buttons that are easy to click without accidentally clicking something else.
14: Don’t: Neglect testing your website across multiple interfaces.
You may think your website works, but you won’t know for sure until you try it out. Test your website on different devices and on different browsers to be sure everything displays properly.
15: Do: Have your site behave in an expected manner.
Many competent online adults still struggle with technical proficiency. If your site is hard to use, they will quickly give up in frustration. Be considerate of your visitors. When you aren’t, you not only alienate them, you deprive yourself of their business.
16: Don’t: Hijack scrolling or other functions.
Have you ever landed on a disorienting website where your controls didn’t do what you thought they would do? Hijacked scrolling is the most common example, where the scroll feature starts doing something other than what you expected it would (or at a rate you didn’t expect). Menus that take over the entire screen are another. I don’t stay on these sites. Neither do your visitors.
17: Do: Provide users a trail of breadcrumbs so they know where they are on your site.
Have links turn a different color when users click on them. Show in the navigation the trail of pages your users took to get to where they are. Not only is it important for continued navigation of your site, it’s also comforting to your visitors not to feel lost.
18: Don’t: Strand your users with no navigation.
I recently landed on a site where, after clicking through a few pages, I was stuck at a dead-end page with no means of return. Yeah, I could have hit the “back” button, but that was clumsy and I didn’t want to return to the page I just left, I wanted to go directly to a different page. There are only a few cases where a hard exit page makes sense. In almost every context, you need to give your visitors better options so that they’ll stay on your site.
19: Do: Always put your users first.
Don’t ask your visitors to do a lot of work in order to use your website. Their time and attention should be precious to you. If part of your design will make it harder for your users to access your site, then it’s not good enough.
20: Don’t: Put form before function.
It doesn’t matter how nice it looks if it doesn’t work. Save the avant-garde design experiments for showpiece websites. In the working world, your website should resemble street fashion, not project runway.