9 Usability And UX Pitfalls: Learn How To Avoid Them
Jacob Creech
As the web has matured, design has come along with it, but there are still a number of issues that affect usability and user experience that haven’t matured at the same rate as design.
If we want to be ahead of the design curve: get more satisfied clients, and happier users, we need to make sure that both we and our clients understand what these points are, and how to solve them.
When designing and developing a website, there are many different things that we focus on:
- Design
- Compatibility
- Content
- Usability
- ..and I am sure you could keep counting down a lot more here, but let’s keep reading.
Remember, as Jacob Neilsen once said:
A bad website is like a grumpy salesman.
The inverse is also true, a good, well designed website is a great way to represent your brand, and to get your message out there.
Read on for a brief list of some of pitfalls that can bring your site down, and how you can solve these issues just below.
1. Hard To Find Content You Are Interested In
These sites are known, but design is outdated and what about usability?:
Form number what now?
The spinning dominoes are the links to the content...
Ah, reddit.com, my old foe. I like the concept, but the content hurts me
How many times have you been to a website, eager to search for some pertinent information about:
- Product
- Prices
- Company
- Telephone number
..or other factors, only to find the content is nigh on impossible to find.
How many times have you had friends ask you for help when searching for certain information because they just didn’t know how to find the right information? Government departments and utilities especially, I’m looking at you! I’m sure everyone has had their own soul destroying experiences with sites like the IRS.
Browsing the web shouldn’t be this difficult – as we are often told, content is king.
We need to ensure that content takes pride of place on its’ throne, that users can find all the information that they are looking for. We shouldn’t have to go in and out of a million different menus before we find the correct content.
Solution
You know best what information is important for your users, make sure this information is easily accessible.
So you have a lot of content on your site?:
- Make sure everything is in relevant sections on your site
- Make the search function on your site work well.
- Clear tagging and categories can help a lot!
- Make sure what needs to stand out, does stand out.
- Things need to be logically named.
A blur test (where you add say a 10% blur to your design images) can help to make sure what you want to be visible really does stand out. Use usability testing sites like IntuitionHQ.com to see what’s working and what’s not.
2. Poor layout
I know this is in Chinese - it means you can see all the text flying at your face even more
Text, everywhere. Want to know more? Click! Anywhere!
Functional? Kind of. Pretty? Not even close.
Of course, another reason why content is so hard to find is poor layout.
- What about all those sites that think they should include all of their content, and then some on the main page of their site?
- What about including lots of flashy banners all over the place?
- Check!
- What about sticking all the navigation menus in the last place anyone is likely to look?
OK, some of these statements may be exaggerations, but I’m sure all of you have come across sites that have done all of these things and worse. Again, this is taking the ‘content it king’ thing a few steps too far – you should really put it all in it’s appropriate place – I think a lot of news sites try and shove all the content on the front page because they think that’s the only place we’d ever possibly look.
If things are neatly laid out, we won’t have this problem!
Solution
- Hire a designer (like the people reading this article)!
Just because some poorly laid out sites succeed, doesn’t mean you should try and follow their trend. They succeed despite poor design and poor layout, not because of it. It also means they are more susceptible to losing out to more functional designs in the future.
Don’t listen to clients when they tell you to do something which you know doesn’t work, and use usability testing to prove your point – the results can’t lie, and they have nothing to argue with.
3. Confusing menus
It turns out the orange bar with the question mark is for navigation...
As they say, a picture is worth a thousand words...
Nice enough looking site, but what do flash and HTML mean to most people?
People are generally pretty familiar with menu navigation,but..:
- What about sites where you interact with different menus in different ways?
- What about sites where the menus all have obscure titles?
- What about sites where the menu structure is just plain wacky?
No one is going to look for ‘contact us’ in the Personal Finance section. - What about sites where you just have no idea what you are meant to be doing, or even what you can interact with? A lot of flash sites fall into this trap.
Also, make sure people know how to get back where they came from… This is a big issue for ordinary users.
Solution
- Write down (on paper!) a menu structure.
- Make it logical.
- Ask people where they would look for specific information, and arrange the menus accordingly.
- Preferably check with the sites target audience
- And again – run usability tests.
- Try and leave a breadcrumb trail so people can get back to where they came from, and make sure the back and forward buttons work (AJAX sites, I’m looking at you!).
These little things do make a difference.
4. Poor menu layout and design:
Menus, menus everywhere, but nothing to be found
I suspect most people aren
Pricing feels like it might be a popular option, but nowhere to be found
Many sites also suffer from poor menu layout and design:
- Often the most important areas are hidden deep within menus.
- Often the prime content from the site is buried far underneath millions of other bits and pieces that people just don’t care about.
- Many sites place ads in amongst the content, which means people have to scroll further and search more to find what they are looking for. While it might lead to higher click through rates on the ads to start with, people quickly get fed up with these kind of tactics and are far more likely to leave your site, or start using ad blocking software when they visit.
Neither of these outcomes benefit you.
Solution
You should be using different analytics tools to tell you:
- What content is most popular
- What pages people spend the most time on
- What content is viewed more infrequently.
Make use of this information.
For content driven sites, try linking to relevant articles from previous articles, and actually using categories and tags so people can find the relevant information.
With advertising – try and keep it to the sidebar and end of articles, and even then you should limit it’s numbers, flashy-ness, and make sure it fits in with your site.
5. No or poorly done indicators of progress:
Dell - Seems easy enough
But wait, there's more! And where does it end? Nobody knows.
Some sites do this, some sites do it very poorly, and some sites don’t give any indicators of progress at all.
When it isn’t done or isn’t done well, it makes a really frustrating user experience:
- Imagine you are signing up for some service but you have no idea how long its going to take or how many steps are left.
- Imagine the sites craps out part of the way through.
- Imagine you get to step 4 and decide to give up.
It really does make for a frustrating user experience, and leads to much higher abandonment too.
Oh, people like to know when they’ve actually finished the process too. Try and make signup and purchase as easy as possible:
- Do people really need to create an account?
- What information doe you really need?
Solution
People love to know where they’re at, and how much further they have to go. Tell them.
The easiest way to do this is just a list with steps – Dell got this half right, and then decided to add about a million sub-steps, so it’s kind of wasted. Doing this right is so simple, and yet often forgotten.
A little ‘success button’ or the like when signup or purchase is finished wouldn’t go astray either.
6. No way to provide feedback
And contact or feedback?...
Feedback? Check! Four levels deep? Hmm
Contact? Feedback? Nowhere to be found
OK, Facebook probably has the best excuse for this – if contact details were floating about, they would probably get millions of enquiries every day from the same kind of people who find the login page via google, and complain when they find other sites instead.
However, for smaller sites getting feedback from users is invaluable. Even for bigger sites, the people who complain probably represent a large number who care but just can’t be bothered or don’t know how to let you know their feelings.
Solution
Feedback forms are about the easiest thing you could set up. The feedback you get from them is priceless.
And wouldn’t you rather your users came complaining to you than left for your competition? The fact that people care enough to contact you is a sign of success for you site, so go ahead and make it easy for them to get through:
- Email address
- Contact forms
- Forums…
The choice is yours, but having several options is a good way to ensure there is a method to please everybody.
And while you’re at it, people love about pages too, even very simple ones will do – your analytics results will surprise you with just how many people click through to these pages.
7. Use of social media: Just about everyone
This makes me feel sad.
We all know social media is taking over the web these days. Every man and his dog needs to have Facebook, Twitter, Digg, LinkedIn… Well, the list just goes on and on really. This is a really great way to connect with your audience, to let them know what is going with your site, company, brand etc, and to generate buzz about your company.
BUT, and this is a big but, about 99% of people on these services never update their pages or have 3 or 4 followers on twitter (OK, we all start somewhere, but if their last tweet was months ago, maybe it’s time to let go).
Solution
Explain to your clients, it’s great if they use social networks, but they need to have a strategy.
If they want to use social media, they need to use social media! This means good content, regular updates, and actually connecting with people.
Maybe if Kevin Costner builds it, they will come, but this doesn’t work for everyone – for most people you get out what you put in. If they won’t use it, don’t do it. It looks really unprofessional when these sort of organisations just let things hang.
8. Too Many Options
Um, what?...
My head hurts just looking at this
Sorry reddit - just too many choices.
If there is one thing Apples recent success has shown us, it’s that most people don’t care that much about having millions of different options to choose from.
They want maybe a couple of basic choices at best, and something that works. I’ve lost count of the number of sites I’ve gone to which try and sell me on a million and one different things, 99.99% of which I don’t want, rather than just presenting me with fewer options which I can actually choose from.
I don’t need 50 different options for web hosting, 3 or 4 different tiers will do me fine. I’d tell them that through the feedback form if they actually had one… I’m sure you’ve all had people come to you with complaints like this:
- Which option do I need
- What one actually works for me
- What on earth are the differences between them?
Solve it.
Solution
Keep it simple.
You know your users/customers/readers best. Figure out what they want, and just give them that. They honestly don’t need millions of different options, and the time spent customising for every last one of them just simply isn’t worth it, and confuses the hell out of most ordinary users, as well as making for a really frustrating user experience.
9. Links, forms and buttons that don’t work
You can crap out, but website won’t tell you why you can’t go on – Countless.
The password (on sign up) that won't work; The unclickable calendar; And the least helpful 404
Ah yes, the old favorite; after all that time filling in the feedback form, signup form etc., you click the submit form and… Error, the form is broken. And you know what, we won’t save all the data you just entered, so you’d better enter it again.
- What about including lots of mandatory fields that most people don’t know the answer to, or just plain don’t exist.
- What about having lots of broken links floating around on your website?…
- Crazy catchphas’ fall into this category too.
- What about all the links that don’t actually connect to anything?
- The images that won’t load for some reason?
- The videos that have been removed?
- … The list still goes on.
Solution
Test, test, test.
This is one of the most basic usability flaws you can have, and one which has a great impact on your site. These kind of negative experiences really push people away from sites, and make them never want to come back.
The more you test, the more you will find. Of course, there needs to be limits, so when you go live make sure the feedback form is there and works too! If you are going to have mandatory fields, make sure they really need to be mandatory – a sign up without complete information is still better then.
I was recently signing up for a service that demanded to know what state I’m from. The only problem is, I’m from New Zealand, and we don’t have states here – and of course, there was no prompt to tell me what they actually wanted to know.
When people do hit a 404 page, try and have some useful information there so they can get to the information they want.
Conclusion
Of course there are many other pitfalls, these are just a few key examples to get you started. Nobody can be perfect either, the point is, the more you think about it, the more you test, the better your sites will be. The better the site, the happier the client, and the more success you will have in the long run.
On top of this, usability testing is another service you can sell on to your clients, and which adds a lot of value for them too. It’s win-win; you get more money, and they get better sites.
Do you have any pet peeves about usability, UX, or design in general?
Be sure to let us know in the comments! Your feedback is very welcomed!
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Free Yoville Game Card
Posted 251 days ago 33Wow, incredible weblog layout! How long have you been blogging for? you made blogging look easy. The total glance of your website is great, as neatly as the content!
Dan
Posted 677 days ago 31Great article
Really enjoyed reading it, which is novel and nice!
I agree with almost everything you say, just gotta get my boss on the same page!
Onno
Posted 683 days ago 29Excelent post! But about the ‘too many options’ at the Dell site: sometimes I want all those options because I have specific needs. I think both the Apple dogma (keep it simple, just a few options) and the Dell one (lot’s of configuration options) have a place. It’s just for different public. Best solution for Dell would of course be to present just a few OS options and a “show me more options…” link.
Jacob Creech
Posted 680 days ago 30Hi Onno,
I completely agree with you about the Dell solution, and I don’t know why they haven’t gone with that approach.
The other issue I see is with not clearly letting people know about just how many steps they have left to complete the process – it just seems never ending when they start offering you all the different hardware and software configuration options. Maybe an an option for standard users and advanced users would help deal with this one.
Rachel
Posted 701 days ago 28Thank you for this – I found the thing about About pages particularly interesting.
With regard to your first points about navigation – having ‘action-led’ navigation can help usability. People come to your site to do something so it’s good to have those ‘doing’ words in the nav where you can – eg ‘Adopt a puppy’ is better than ‘Adoption’; ‘Find a store’ better than ‘Store locator’. ‘Contact us’ is a classic example of action-led navigation.
[PS - I just got Item 9 trying to submit this comment - bad request.]
Rachel
Posted 701 days ago 27Thank you for this – I found the thing about About pages particularly interesting.
With regard to your first points about navigation – having ‘action-led’ navigation can help usability. People come to your site to do something so it’s good to have those ‘doing’ words in the nav where you can – eg ‘Adopt a puppy’ is better than ‘Adoption’; ‘Find a store’ better than ‘Store locator’. ‘Contact us’ is a classic example of action-led navigation.
Jordan Walker
Posted 705 days ago 25Great read, very interesting.
Helen
Posted 706 days ago 22Godaddy is a nightmare! I have a bunch of domains and one hosted there and everytime I need to do something it´s … like a word I don´t want to write!!! Big patchwork of totally uncompatible pieces. Like a maze. They win worst site award from me. I am now moving out from there because I cant stand using the site.
dejunky
Posted 706 days ago 21Great article!
A lot of these issues came up when I was designing/coding the latest MacJunky website, but I think I managed to get a good mix of the “don’t & do’s” on it…
What do you think… http://www.macjunky.nl
.-= dejunky´s last blog ..Top 20 Free Mac Applications for Front-End Designers =-.
Jacob Creech
Posted 705 days ago 23Thanks for you comment – your site looks really nice, and has a very clean design.
Two things I might change though, stop the testimonials section changing so much/so quickly, and make the meaning of the security: 2+2 section a little more obvious. Also, adding an asterisk helps people realise that the fields are required.
Why not try a usability test from http://intuitionhq.com to see if other people find it usable?
Good luck!
dejunky
Posted 703 days ago 26Hey Jacob, thanks for the nice comment. I’ll try out your recommendations.
Cheers.
Elliott richmond
Posted 706 days ago 20Fantastic post, so glad I have subscribed to your blog, the key factor when is comes to design and usability is to keep it simple, content is king and the structure of that content doesn’t need to be complicated or overwhelming!
minto
Posted 706 days ago 19Well said mate. Alternative thoughts described are inspirational. Thanks for sharing your thoughts. Well done
Jacob Creech
Posted 705 days ago 24Thanks very much! Glad you liked the article.
Amy Larsen
Posted 706 days ago 15Great article. Seems these days we go for cool or nifty without thought to use or strategy. The age old argument of form vs. function. My mother always told me, a place for everything and everything in it’s place, same goes for the internet.
Omar
Posted 706 days ago 14thanks for this very useful article with good examples.
Jae Xavier
Posted 706 days ago 13Funny that you mention Craigslist; as they are very conservative and idealistic. That is the Cragislist way as I see it. Craigslist has a lot of visitors and they seem happy with it.
As a designer, sure the Craigslist website is bland.
As a business guy, that’s what makes them unique (plus its free).
Saad Bassi
Posted 706 days ago 18They are just successful because they are the old. From design point of view, craigslist completely sucks.
Kyle Hogan
Posted 706 days ago 12Good example with godaddy’s menu and layout design. I have a hard time finding things on their website. Great article. RT’d it. Thanks.
Jacob Creech
Posted 706 days ago 16Cheers Kyle, I always found Go Daddy a big pain to get though; the backend is especially confusing. As they are so popular though, we have to keep dealing with them!
Saad Bassi
Posted 706 days ago 17Completely agreed with Jacob. It took me almost 10mins when I bought a domain from godaddy. So much options, email hosting bla bla bla. That confuses a lot.:/
Jacob Creech
Posted 706 days ago 10@ Jeremy, those screenshots are from the regular Dell website – I just went in as a regular user and that’s what I came across.
As for Craigslist, I think it’s an exception rather than a rule. It works in spite of it’s poor design and layout.
@ Harold & Getjins- Thanks! Glad you liked it.
@ Ben – Indeed, Reddit has too much of everything to take in at one time; there are IMHO too many options at the top of the page in the navigation bar, and the content on the page flows together too much which causes it to be difficult to read, and obviously readability is important for a site like this.
The comments are arranged in a slightly more orderly way, but I still find the lack of divisions between them causes it to be hard to follow, and as you scroll down, with all the threaded comments the page starts to look a bit funky. I think the space on that page could be used much more effectively, especially with the number of comments they get.
That’s the brief gist of it.
@Ejaz – Thanks for sharing; I’d never used the American Airlines site before, but I can see what you mean! It certainly could do with some work, and you just know they have a big budget behind them.
I don’t mean to be so critical of everyones work however; everyone has to start somewhere, I just hope by pointing out some pitfalls people know what to avoid. I think for my next article I should write a post on some great sites so people have something to aspire to.
Cheers everyone, and sorry for the long comment!
James
Posted 706 days ago 9really a most awaited article as the number of websites/blogs increasing day by day. there are many pitfalls present in them and they can be removed by hiring a good designer.
thanks for the share
.-= WebGuide4U´s last blog ..Download Stunning Looking Smoke Photoshop Brushes =-.
Ejaz
Posted 707 days ago 8Let me add one more thing; Your article could have been better If you would have included good examples as well.
Scott
Posted 707 days ago 7The ultimate example of poor design yet successful buisness.
http://www.lingscars.com/
alexplus
Posted 707 days ago 6You should have a look at your website with Firefox 3.6.2 (navigation bar problem). However thanks for this article.
Saad Bassi
Posted 706 days ago 11I am unable to see anything wrong in bar, using FF 3.6.2. Will you please provide screenshot.
Ejaz
Posted 707 days ago 5Great article Jacob, most of the big companies are the culprits of these usability mistakes which could easily be avoided.
You can also include the famous America Airlines http://www.aa.com and Dustin’s letter to them http://dustincurtis.com/dear_american_airlines.html.
Anyway really very helpful article.
Anand
Posted 363 days ago 32Poor content & poor design can be the two very important things which everyone shall take care while making or designing a website.
getjins
Posted 707 days ago 4I agree with most of your points – nice examples. Thanks
Ben Moseley
Posted 707 days ago 3Do you mind elaborating on Reddit and why exactly you find it difficult to find the content you’re looking for?
Harold T
Posted 707 days ago 2This is a really interesting article – it’s useful to know some common mistakes, and how to deal with them, as some of these are the kind of things that are easy to let slip through your fingers, or can be hard to explain to clients.
Hopefully this means we can all make better websites in the future. Thanks!
Jeremy
Posted 707 days ago 1I don’t think that craigslist is a very good example here, they’ve often been criticized for having no design but have been wildly successful in spite of that – they didn’t need to hire a designer, and people seem to like how their site works.
Dell isn’t a good example for the progress indicators. The customization part of their site is really aimed at more technical users – most users won’t end up there. It’s actually very good, and I’ve used it many times without becoming confused about how far through I was.