10 Usability Nightmares You Should Be Aware Of

Advertisement

Sometimes you just want to get the information you’re after, save it and move along. And you can’t. Usability nightmares — which are rather the daily routine than an exception — appear every now and again; usually almost every time you type your search keywords in Google. In his article “Why award-winning websites are so awful1” Gerry McGovern points out that “the shiny surface wins awards, real substance wins customers” and that is absolutely true.

Nevermind what design you have, and nevermind which functionality you have to offer — if your visitors don’t understand how they can get from point A to point B they won’t use your site. In almost every professional design (except from special design showcases such as, e.g., portfolios) you need to offer your visitors

  • a clear, self-explanatory navigation,
  • precise text-presentation,
  • search functionality and
  • visible and thought-out site structure.

And that means that you simply have to folow the basic rules of usability and common sense. You want to communicate with your visitors, don’t drive them away, right?

In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites. At the end of the article you’ll also find 8 usability check-points you should probably be aware of.

1. Hidden log-in link.

Backpack2, 37signal’s one of the most usable organizational and project management tools out there, explains exactly what the tool can be used for, how one can use it and which features it has to offer. However, once you’ve signed up, you might need few minutes to find out what you should do to actually start using the tool.

Backpack Login3

The “Log in”-link (hint: in the yellow box) should have a greater font-size — also icons would do the job. Every registered user has his/her own personalized page, however new registered users will need a while to find out how they can log in. As Lee in our comments said, “someone thats invested their time to sign up for a service will spend more than two seconds finding out how to log in.” Ok, but why should he/she? Why not just place the link somewhere where it’s visible? It sounds reasonable to us.

2. Pop-ups for content presentation.

Almost every modern web browser uses a popup-blocker to prevent pop-ups, ad blocks and further site content recognized as advertisement. Firefox, Safari, Opera and Internet Explorer make use of it — therefore the idea to use pop-ups to present the main content isn’t probably the most reasonable idea web-designer might come up with.

Adidas Pop-Ups4

However, Adidas developers team seem to consider pop-ups as a creative approach for their target audience. It’s not clear what ImpossibleStory.com5 is actually about — most users will never find out; even we were too lazy to deactivate our popup-blocker.

3. Dragging instead of vertical navigation.

Actually, this technique — not a real nightmare, but very unusual — might become a new trend in the future. Dragging, as used from .pdf-documents, can also be adapted to web-sites. Fichey6 offers a Flash-based solution. Interesting approach, however you can’t bookmark specific parts of the site – a typical problem for Flash-based designs.

Fichey7

An introductory info box on the start page of the site informs its visitors about the new way of navigation. The tool shows sites which are currently popular in social media. By the way, the displayed links don’t work – apparently, the tool shows the screenshots which are saved and embedded as images.

4. Invisible links.

Visitors have to know where they are, where they’ve been and where they can go next. If designers don’t present this information in an appropriate way, visitors can have serious problems with site navigation. Real Player8 had been using a bunch of invisible links9 for a while. Take a look at the picture and the labels below (originally created by Trenton Moss) — can you spot the links?

Real Player10

1, 3, 4, 6, 7 and 11 are links, and 2, 5, 8, 9 and 10 aren’t.

5. Visual noise.

Often less is more. Visual noise is probably one of the most typical problems large web-sites’ designers have to cope with. And it’s extremely easy to get it wrong. As Overstock11 does.

Overstock12

Bonus: It’s also not quite clear what is a link and what’s not. Overstock also uses a number of different link presentations and hover effects. Link or not a link? You might have a lot of fun finding out.

6. Dead end.

You can use different approaches to introduce your new web-service to your visitors. Scriblink13 welcomes its visitors with a pop-up and a Java-applet. Visitors have to provide some input to start browsing through the site.

Scriblink14

Nothing helps:

  • clicking on “cancel” doesn’t help,
  • OK doesn’t help,
  • full-screen mode doesn’t help,
  • clicking somewhere else doesn’t help,
  • closing the browser window doesn’t work,
  • clicking on the question mark for help doesn’t work.

Unfair, really. We just wanted to see what the tool does…

7. Content blocks layering upon each other.

A typical problem which always appears if large Flash-movies are used on large web-sites. The site navigation is hidden; whatever users might be willing to browse to — they have no chance.

Photoimpact15

The same problem on Yahoo.com16:

Yahoo17

8. Dynamic navigation.

What looks like a usable site navigation, shows itself soon enough from its worst side. Nevermind where you point your mouse pointer to — supporting images slide down and up and change the focus of the link you’ve clicked on. On the image below the link “history” was clicked – it moves away; and no, the sliding images aren’t linked to the page you’d like to browse to.

Brown University18

The effect appears in both left- and right-side navigation menus. Visitors might need some time to find out what is happening. However, once the idea is understood, the navigation isn’t that hard to deal with.

Kabe24319

The same idea on Kabe24320. Bonus: visual noise at its best.

9. Drop-Down Menus.

Drop-Down menus are useful for web-developers and almost always get on users’ nerves. If you — as a designer — hide navigation items in a drop-down menu you can save yourself a large amount of vertical space; however users have to focus the mouse precisely to get to the section they’d like to visit. It’s not usable.

However, it can be even worse. If the distance between different levels of navigation is too large (for instance because some navigation items have more text) users have to move the mouse horizontally. If the mouse focus changes its vertical position, users have to start from the beginning.

2Advanced21 and Brita.net22 are excellent examples for these usability nightmares.

2Advanced23

Brita24

Notice: it took us a dozen of attempts to actually make these screenshots.

10. Blinking images.

Sometimes you just want to read the content of a web-site you are visiting. And you can’t. To fight against the banner blindness advertisers make use of animated ads — usually animated .gif-images or Flash-movies. In both cases it might become extremely hard to focus on reading if such images are blinking all around the content.

Digital Web Magazine25, an excellent online magazine we read on a regular basis, has a disturbing animated ad on the left side of every article.

Digital Web26

Future Nightmare?
Pointing the mouse instead of clicking.

Dontclick.it2927, an interesting experiment in interaction design, explores a clickfree environment. It wants to explore how and what changes for the user and the interface once you can’t rely on the habit of clicking.

Dontclickit28

Within this interface you won’t find any buttons. Instead you navigate the contents in a different way — by pointing the mouse to the areas of the site you are interested in. What sounds like an interesting approach might soon become a usability nightmare – just imagine web-users trying to open external links in a new browser window; besides it’s interesting to know how exactly users will be able to, let’s say, open a list of links in new browser tabs (updated to clarify why we’ve put Dontclick.it2927 in this post).

8 Usability Check-Points You Should Be Aware Of

  1. You don’t use pop-ups.
    Pop-ups interrupt the browsing session of the visitors and require an instant feedback. Respect your visitors.
  2. You don’t change users’ window size.
    The same argument as the one against pop-ups holds. Some browsers, e.g. Internet Explorer, saves the browser dimensions and uses them for further browser sessions. As Ben Bodien commented, “it’s just plain inconsiderate to assume that you know better than the user how their software environment should be configured?”
  3. You don’t use too small font sizes.
    Long passages are harder to read, and to read brief sentences readers need more time. It holds also for links, buttons, forms, search boxes and other elements. Good news — in Web 2.0 the opposite is the case.
  4. You don’t have unclear link text.
    Links have to be precise and lead to the destination they describe. Ambiguous link descriptions should be avoided.
  5. You don’t have dead links.
    There are too many of them anyway; why would you want to point your visitors to a dead end?
  6. You have at most one animation per page.
    If blinking images are wide-spread through the site, it’s extremely hard to focus on one single site element. Give your visitors an opportunity to perceive your content. Using animated ads, don’t place them right along your articles.
  7. You make it easy to contact you.
    Maybe because you just don’t want to be contacted, but If visitors do want to get in touch with you, but can’t find any contact information, you lose their interest and trust. Disastrous for online-shopping, a missed opportunity for the rest.
  8. Your links open in the same window.
    Visitors want to have control over everything what happens in their browser. If they’d like to open a link in a new window they will. If they don’t want to, they won’t. If your links open in a new window you make the decision which is not your decision to make.

Footnotes

  1. 1 http://www.gerrymcgovern.com/nt/2006/nt-2006-10-16-awards.htm
  2. 2 http://www.backpackit.com/
  3. 3 http://www.backpackit.com/
  4. 4 http://www.impossiblestory.com/
  5. 5 http://www.impossiblestory.com/
  6. 6 http://fichey.com/
  7. 7 http://fichey.com
  8. 8 http://www.realplayer.com/
  9. 9 http://www.sitepoint.com/article/usability-blunders-big-players
  10. 10 http://www.sitepoint.com/article/usability-blunders-big-players
  11. 11 http://www.overstock.com/Jewelry-Watches/Mens-Watches/136/dept.html
  12. 12 http://www.overstock.com/Jewelry-Watches/Mens-Watches/136/dept.html
  13. 13 http://www.scriblink.com/
  14. 14 http://www.scriblink.com/
  15. 15 http://www.ulead.com/
  16. 16 http://www.yahoo.com
  17. 17 http://www.yahoo.com
  18. 18 http://www.brown.edu/
  19. 19 http://www.kabe243.com/stage.html
  20. 20 http://www.kabe243.com/stage.html
  21. 21 http://www.2advanced.com
  22. 22 http://www.brita.net/de/combination_ovens.html?&L=5
  23. 23 http://www.2advanced.com
  24. 24 http://www.brita.net/de/combination_ovens.html?&L=5
  25. 25 http://www.digital-web.com/articles/interview_sidebar_creative/
  26. 26 http://www.digital-web.com/articles/interview_sidebar_creative/
  27. 27 http://www.dontclick.it/
  28. 28 http://www.dontclick.it/
  29. 29 http://www.dontclick.it/

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    What a great article. Smashing Magazine always on top of this stuff. Love it.

    0
  2. 152

    I read somewhere else that it has to do with people that has unconventional browsers, like to help with some disability. It also said that you should make all links open in the same window and if you want, you can put a small icon next to the link that opens it in a new tab or window.
    Can’t remember where i read it, but its an option.

    0
  3. 303

    Õàé, áûëî î÷åíüèòåðåñíî òåáÿ ïî÷èòàòü. òîëüêî âîò îäíîïëîõî Ñïàìåðû äîñòàëè, ó ìåíÿ ó ñàìîãî åñòü áëîã òàê è íà ïðåìîäåðàöèþ ñòàâèòü âñå ñîîáùåíèÿíå äåëî, à âîò êàïò÷ó íèêàê íå ìîãó óñòàíîâèòü, íå ïîëó÷àåòñÿ…

    0
  4. 454

    I have to agree with you, but not all of them are “nightmares” … i mean … some of them like you said, era going to become a trend in web.

    0
  5. 605

    You have misspelled the word “follow” on this page. What ever happened to spell check?

    -1
  6. 756

    I don´t agree with the checkpoint 8 in case that it’s external link. You should provide a external link icon. If you are open a site external, it’s intuitive that open in new window.

    0
  7. 907

    I agree with Alexandre Magno, I think using new windows/tabs for external link is a good thing. When you proved as icon or textual indicator for a link being external you improve the navigation through your website. This in the case of resources of referrals. If you you have to go elsewhere for an other reason (When the user is looking for something you your website doesn’t provide) the link should open in the current window, but those situation are rare.

    0
  8. 1058

    IMO, one of the worst usability error is this one:
    (example)
    http://www.poggenpohl.de/de/index2.php
    (“sprache” button)
    to change site language, you must speak deutsch first.
    It’s an old error but I still find it very often.

    0
  9. 1209

    Missing number 0: stuffing your page with externally-loaded, slow, crashy banners.

    0
  10. 1360

    As a general rule of thumb, always keep your navigation simple. I know it sounds easy, and dumb to say, however you would be surprised at how many people seem to go out of their way to make navigation confusing! Also make sure that each page has good navigation to allow visitors to get to other parts of your website. Remember, a browsers back button should not be considered part of your site navigation!
    -Brian
    LINK

    0
  11. 1511

    I am glad to post my views and points in this blog, Blogs are becoming the main source of knowing about things certainty,its importance,idolizing,either in a marketing way that one can differentiate. I enjoyed to be at here because one of my point has been cleared here.

    0
  12. 1662

    You are so right on #9. I don’t know how many times I’ve wanted to toss my laptop out the window trying to navigate to the lower levels of DHTML navigation drop-downs.

    0
  13. 1813

    I must be in the minority of people who’d rather links opened up in new windows, rather than in the same window. Sometimes when I’m browsing, if I click a link, I have no way of getting back to the page I was on without some serious clicking. If the content I want to see opens up in a new window, I haven’t lost the main page I was browsing; one click to close as opposed to several clicks to get back to where I was.

    0
  14. 1964

    I don’t think drop down menus are a usability problem, more of a developers problem. If they don’t work, it’s only because they weren’t made properly.
    However, I can see how just clicking through a site using calls to action is much friendlier.

    0
  15. 2115

    I am not sure that I agree that 5 is relevant to Overstock.com…at least in that example. I hate clutter but that seems relatively utalitarian to me…am I missing something?

    0
  16. 2266

    i am looking on yahoo, came to your post, i read couple of your post very nice.
    hoping to read more such post in future.

    0
  17. 2417

    One of these you should add to the list is Blogs that don’t prominently display the date the blog/article was posted. Lists like these are great if the information is timely, but there are a few comments on here that are completely inaccurate now… such as not being able to bookmark areas of Flash-based applications and sites. Deep-linking is standard practice now.

    Also, a drop down menu is far from a nightmare if implemented the right way. I would like to see the New Media community post lists like this that describe alternatives or tips and tricks that help turn nightmares into daydreams.

    ;)

    rp

    0
  18. 2568

    Muhammad El-Nabawy

    July 19, 2010 11:23 am

    Great Article.

    No 9 is very much true

    0
  19. 2719

    I simply wished to let you understand that your blog doesn’t present up properly on the BB browser, I added it to my bookmarks and have simply checked from the desktop

    -1
  20. 2870

    Please be aware of the very young, very innocent and extremely vulnerable MISSING – BRITISH – CHILD; who’s name is Madeleine McCann, now seven years old. Madeleine disappeared from Praia da Luz, on Thursday evening, May 3rd 2007, in Portugal. Please think about keeping a lookout for Madeleine, as nobody, as far as I am aware knows where young Madeleine might be in our world. With everyones help we can bring young Madeleine back to her loving family in the United Kingdom, thankyou. For more information please visit w dot findmadeleine dot com GOD PROTECT YOU MADELEINE

    -2
  21. 3021

    A BIG THANKYOU – AGAIN A BIG THANKYOU.

    -3
  22. 3172

    Thanks a lot

    -2
  23. 3323

    Another usability nightmare: having nomore to 100 comment on one page, the page is too long and is difficult read all comments and is so long to load the page for the browser. (daniel from filtri brita)

    -1
  24. 3474

    Hiya, I am really glad I have found this info. Nowadays bloggers publish just about gossip and web stuff and this is actually annoying. A good website with exciting content, that’s what I need. Thank you for making this website, and I will be visiting again. Do you do newsletters? I Can not find it.

    0
  25. 3625

    Fashion Gadgets

    May 15, 2011 7:38 pm

    Usefull collection.

    0
  26. 3776

    Great site very informative article thank you…cheers Peter

    -1
  27. 3927

    Have you regarded putting extra video clips for your blog posts to help keep your readers a lot more entertained? I mean I just read during the entire article of yours and it was very excellent but since I’m really a visual learner,I discovered that to generally be more useful. Just my my idea, Good luck

    2
  28. 4078

    uxdesign.smashingmagazine.com is wonderful. There’s always all of the ideal info in the ideas of my fingers. Thanks and keep up the excellent work!

    1
  29. 4229

    Good Post. You do a good job. I appreciate it.

    1
  30. 4380

    Interesting point about drop-downs getting on users’ nerves.

    -1

↑ Back to top