A Few Website Usability Tips Backed by ResearchPosted: 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.
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.
- Side drawer navigation could be costing you half your user engagement
- Kill The Hamburger Button
- Hamburger Not the Best Choice?
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.
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.