A Few Website Usability Tips Backed by Research

Posted: June 2, 2014 under Web Design

If you make websites for a living, then you're well aware how tough it is to keep up with everything that goes into creating a top-notch site. Something that often gets overlooked is usability testing. It's one of those things that many clients can't afford - or perhaps don't see the value of - and so instead of testing things, we rely on common patterns and trends to help us along.

Below are a few resources that discuss common web design patterns that may be hurting your site more than they are helping. I have to admit, a couple of these surprised me. Hopefully you'll find them useful as well.

Hamburger Menus Could Be Tripping You Up

Hamburger menus - also called side menus or navigation drawers - have become a common web design pattern, particularly on mobile. Take a look at the image below for an example - it's the list icon in the upper left.

Hamburger Menu Example

An article I recently came across points to research that indicates these little menus may be seriously damaging conversion rates.

Here are some related resources to provide you with more research on these troublesome little icons and what you should do instead.

Content Accordions Are Probably a Bad Idea

I don't use accordions on sites I work on unless the client insists (this has only happened once). But I haven't avoided them because I have data showing they are a bad idea - I'm just annoyed by them. It seems 90% of the time they make me work for content that I think should be exposed by default.

Fortunately, we have guys like Jakob Nielsen to deliver some truth and get us past our biases. Turns out accordions are mostly not the right choice, but they do have their place.

What Is the Impact of Large Images on Website Success?

One trend that has become very popular over the past couple years is the use of large "hero" images, typically on home pages. They have a lot of visual appeal and I've often thought they make a good replacement for image sliders, which are the worst.

But how do these big images help a design, aside from the initial 'wow' moment they might provide? I came across this great post that goes over test results from several large sites. The bottom-line is that they work, but please remember to optimize images for performance!

A Few Things About Legible Type

This is a personal beef of mine - text that is hard to read. Admittedly, my eyes aren't what they used to be. Staring at computer screens year after year has taken a toll. But if your content isn't readable by the visitors to your site - 42% of whom are likely to be near-sighted - then really, what's the point?

Text that is difficult to read usually appears in one of two forms - small font sizes or low-contrast text. Let's look at the first one. At a minimum, body text should be 16px. Also consider for a moment the website, Medium, which is widely praised for having an excellent reading experience. Their font size? 22px for the body of their posts. Be kind to your readers, bump that font size up. A good way to determine font size is looking at line length. About 60 characters per line on large screens is optimal, but keep it closer to 45 characters per line on on mobile.

As for low contrast text, I'll simply point you to Contrast Rebellion which pretty much covers it. A side note is to make sure your font weights are OK. Thin fonts look cool, but are harder to read.

Bonus Tip: Avoid Using Infinite Scrolling

I came across some resources on this topic a few hours after initially publishing this post. Infinite scrolling - when additional results automatically load as you scroll down the page - is another one of those nifty looking things that doesn't quite measure up. For an overview of the pros and cons of infinite scrolling, this post is a good place to start.

Another take on infinite scrolling comes from Derek Featherstone, who has rather strong opinions on the subject. However, if you're committed to implementing this in one of your designs, here's a good checklist for what it should look like if you don't want your users to go mad when they encounter it.

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.