Website Usability: Are You Making These 10 Web Design Mistakes?

Buffer

steve-jobs-ssoosay-large_6216642784

Design is not just what it looks like and feels like. Design is how it works. – Steve Jobs, 2003

Web usability is something that most online publishers spend time on, but few spend enough time on.

Design and usability – like traffic building or social media marketing – need to be ongoing tasks, rather than things considered when launching your website and then forgotten about. Over the years, new features get added, you tweak this, you tweak that, and before you know it, your site’s becoming visually confusing.

So here are arguably the Top 10 usability mistakes to avoid to make your site more user-friendly.

1. Your main font is difficult to read

Visitors need to be able to read your words easily.

That means sticking to fonts designed for a variety of screens. Classic fonts like Arial / Helvetica, Georgia, Tahoma / Geneva, Trebuchet MS, and Verdana became classics because they’re easy to read on any kind of screen size or operating system.

Ease of legibility has always been important, but now that websites can be viewed on anything from a 3.5-inch BlackBerry screen to a 90-inch HDTV display, it’s crucial.

It’s also important to get the font size right.

Too big and it seems like you’re shouting to a group of deaf foreigners, too small and visitors in the 40+ range (or those with impaired vision) may find reading your content such tough going they don’t bother.

2. Your heading font is too funky

Have fun with headings – an unusual font can help brand your site – but it needs to be readable. Nothing else is as important. Get funky – but check what the heading looks like across different screen sizes.

3. Not making good use of whitespace

Whitespace is any “blank” space between elements on the page. Think of it as breathing space. Make sure there’s enough of it between your main content column, the header, sidebar and other design elements.

Not having enough whitespace is the web design equivalent of talking at top speed on a first date. Everything seems rushed, nervous and lacking in confidence. Not a great start to a relationship.

4. You’re using big blocks of text

Like whitespace, short paragraphs with subheadings and bullet points make it easier for your content to be read. Even the most dedicated reader will be put off by large chunks of text. Short paragraphs are an easy way to improve readability.

5. Light text on a dark background

As you can see, light text on a dark background is great for drawing attention to a particular area of the page – but most people find it difficult to read for more than a sentence or two.

If you have your entire website designed like that, shoot your web designer and then pick up a WordPress theme for less than what the average designer charges per hour.

6. Auto-playing video or audio content

Definitely not.

Aside from the audio possibly alerting co-workers to non-work related web activities, many people surf with their own iTunes soundtrack – they don’t want your video getting in the way of The Red Hot Chili Peppers.

7. You’re still using Flash

If you think Flash is the only way to bring animation, maps, games, 3D or other interactive elements to your website, think again.

Technologies like HTML 5 and CSS3 – and browsers that support them – are now sufficiently widespread to make Flash just an expensive way to produce content that can’t be read by search engines or used by anyone with an iPhone, iPad or iAnything else.

8. Hiding important links in a dropdown menu

Aside from not always working well with smartphones, tablets and other devices that don’t have a mouse, dropdown menus keep parts of your site navigation hidden.

Don’t rely on users understanding that your Contact link is nestling under the About dropdown link. Most users won’t think that hard. It’s no coincidence that one of the all-time best-selling web design usability books is called Don’t Make Me Think.

9. Not making clickable links obvious

Links in the body of posts and pages don’t necessarily have to be blue and underlined (although I’ve found those get the most clicks) but they do need to be both obvious and consistent.

If red, underlined links make more sense with your design, use them – but don’t make anything else red and underlined.

10. Not having a responsive design

A responsive design is one that resizes itself to fit the screen it’s viewed on. It used to be that mobile web browsers were catered for by having a separate site. Not any more – the modern approach is an adaptable, responsive design.

If you’ve bought a WordPress theme in the last year or so, it’s probably responsive. If it looks good on a tablet or phone – or it can be resized in a desktop browser without producing horizontal scrollbars – you’ve got a responsive design.

Resources mentioned in this article

Simple Press - responsive WordPress theme

Responsive WordPress themes from Elegant Themes



Don’t Make Me Think – A Common Sense Approach to Web Usability


Post illustration by ssoosay