Menu Search
Jump to the content X

10 Usability Nightmares You Should Be Aware Of


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.

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. Link

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. Link

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.


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.

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. Link

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.


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. Link

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.


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. Link

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.


The same problem on Yahoo.com16:


8. Dynamic navigation. Link

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.


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

9. Drop-Down Menus. Link

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.


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

10. Blinking images. Link

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.


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 Link

  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 Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29

↑ 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 UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Yeah. IMHO first place belong to hiden links.

  2. 4

    Another great article from Smashing! You guys rock, keep up the good work.

  3. 5

    Great list, and they’re all really important. If designers avoid these basic problems, and can still deliver a good usable site, they’re off to a good start creating a good user experience.

    I love the “no holds barred” approach in terms of the examples you’re giving… Oftentimes, folks won’t mention the “popular” or well know sites –even when they have clear usability issues.

    Great post, very helpful reminders.

  4. 6

    If only I could forward this article to every single person with decision-making power at my office without getting repremanded…

  5. 7

    7. Content blocks layering upon each other.

    Ironic, we were just looking to a solution to this problem on a new site we are working on… Anyone have any useful links?

  6. 8

    Good article! I agree with everything in this article, except for “Your links open in the same window”.

    I agree that you should be very, very careful with opening links in a new window. The problem is that unexperienced users don’t know how to open a link in a new window. In some cases you want to help these unexperienced users, e.g. when you link to a downloadable file, a printable version or a background process.

    • 9

      Muhammad El-Nabawy

      July 19, 2010 11:06 am


    • 10

      I’ve recently switched hats from Quality Assurance Tester to Usability Analyst. I’m pouring over tons of web design blogs, books etc.. I also agree with all the content here, except opening those links on the same page. As a tester, I’ve always asked for those links to open in a new tab. I think inexperienced users get confused when the content changes from what they were looking at… and I’m fairly certain they are annoyed at how to get it back.
      This is interesting. The article is dated for sure, but all points remain, except this one. For me anyway.

      Thanks for the good reading!

  7. 11

    Is there a usable version of any of these techniques?

    Google Maps, for example, uses dragging and you can bookmark/get a direct link to anywhere on a map found by dragging. It also feels quite natural.

  8. 12

    I’m with you on that. Having an external link open in a new window can be very useul for some users. Especially those who use tabs.

  9. 13

    Opening links in a new window is usually a bad idea; however, I think it is standard and accepted practice to open external links in a new window. This helps stickiness since the user won’t have to go “back” several layers to return to the site.

  10. 14

    Top quality article that raises excellent points. Keep it up.

  11. 15

    Really good write up about some of the bigger ones out there for usability issues. The “” site is really neat to play around on, I couldn’t help but clicking on things at first…hard habit to break!

  12. 16

    Nice new design and great article again :)

  13. 17

    Chris Papadopoulos

    September 27, 2007 3:46 am

    The drop-down menus are a particularly lazy way of designing. If you can’t fit all of your important links on the main page you’re likely organizing your site in a horrible manner and throwing way too much unnecessary content at users.

    Also the idea you presented about removing clutter is very important. John Maeda’s first of 10 rules to attain simplicity can be summarized as “thoughtful reduction”. Simply removing useless elements can go a long way towards making a site fun and easy to use.

    As always, very good article that mirrors a few of my own thoughts.

  14. 18

    You may be missing the point with #11 (even though this is supposed to be a 10 item list ). is just an experiment with a non-clicking environment to show that you can intuitively pick up what you are supposed to do even without the “click” of the mouse and that it doesn’t take a long time to get used to it. It’s the only site I’ve ever seen do something like this so I would hardly call it a “nightmare.” Otherwise, great content as usual.

  15. 19

    For once, I really have to applaud. To my thinking, some of these offenses are reason to be banned from the Internet. To combat anything intrusive, I use full pop-up and ad-block, and when all else fails I use lynx in a console, but really I’ll just go somewhere else.

    Just one thing to add: I never see this addressed anywhere else, but to what purpose do all the blog comment forms collect email addresses? I removed the email-required part from my blog’s comment form, because I have no use for the addresses and because that’s just like asking too much from a user before letting them participate.

    Come to think of it, has anybody ever received email from a blog comment? And God forbid they should.

  16. 20

    I agree with Chris – 11 will never become a nightmare. It’s completely experimental. Either it will catch on or it won’t I haven’t seen gestures catch on with casual users for anything at all, and that is a similar approach to user interface. I’d also like to point out that video that circulated of an infant using an iPhone. The concept is similar in someways. If an infant can get the hang of it, so could adults. I still doubt that it would ever catch on as one of these so called usability nightmares.

  17. 21

    Very useful list, and even better with the impressive examples you give. It raises some points that give me a quite a headache every now and then. (I’d add not supporting Opera (like google does with their reader), but maybe that’s just me…)

  18. 22

    8 and 11 are great. Maybe the eventhandling could be better for “kabe243”, but you donnot need 10 seconds to understand how it works. Even you say so! Why are those examples a nightmare? You donnot really explain!

  19. 23

    And “speaking” of problem websites — trying to read this article on an 800×600 monitor makes the actual article (column) shrink to just slightly UNDER 50% of the viewport — and the graphics demonstrating your points are half (or more) hidden! Oops!

  20. 24

    Me again. the email address thing was nothing compared to what happened after I clicked ‘submit’. I got taken to a CAPTCHA on a different page – why not put it by the comment box like everybody else? Then it doesn’t surprise you like a jack-in-the-box.

    Then after that, it goes to a page which is completely blank except to tell me the comment’s been submitted. No link back to the home page, nothing, just a dead end. Some users will be afraid to click the ‘back’ button for fear they will ‘undo’ their comment (not everybody understands how POST methods work).

    By the way, now that I’m done nitpicking, you have a fantastic site and I come here and refer readers here often!

  21. 25

    As for Basecamp, users who have signed up are supposed to use the login URL they decided during the sign-up process, like And the pop-up described in number 2, isn’t a pop-up, but a layer which will not be blocked by pop-up ads. That’s how far I got until I disregarded the article and stopped reading.

  22. 26

    Great list, though I think you’re missing a bigger picture.

  23. 27

    ummmm…. using 37 signals as an example of bad usability was a horrible decision. It lost you all credibility.

    As someone has already pointed out, if you’ve got an account you know how to log in, but more to the point, if someone has gone to the effort of signing up, then they will go to the effort of figuring out how to log in. But people won’t necessarily go searching for the signup form.

    Put another way, someone thats invested their time to sign up for a service will spend more than two seconds finding out how to log in. On the other hand, someone who has just found your service probably wont spend more than two seconds finding out how to sign up.

    If you want to build a user base, the signup form MUST be more obvious than the login, and 37 builds probably the most usable, sensible, logical web apps on the planet.

    But now I’m thinking you just picked on them to create some controversy, and you’ve baited me too.

  24. 28

    Pretty good article. I love the examples shown. Finally someone else who agrees that 2advanced design makes some of the most horrible usability websites.

  25. 29

    GREAT stuff. a lot of it should be common sense, but people ignore it for some reason. thanks for a great post. one of the most useful aspects of these kinds of articles is that you can bring it into a meeting, or even pre-emptively send it around to your co-workers who you know go in for crappy/facncy/useless UI features.

  26. 30

    Another major usability nightmare – main navigation that changes from page to page. I’ve come across several sites that exhibit this behavior, and it drives me nuts!

  27. 31

    Vitaly Friedman & Sven Lennartz

    September 27, 2007 6:26 am

    @Bjorn, Lee: you make an interesting point. Of course, you are right. However, as Lee 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? Why not just place the link somewhere where it’s visible? It sounds reasonable to us.

  28. 32

    9. Drop-Down Menus – “it took a long time actually getting these screenshots”.

    My tip: Use HyperSnapDX (or any other program being able…) to use a timed Snapshot. Set the timer to 3 seconds, hit Full Screen Snapshot and do your Drop-Down-Menu-Magic.

    No hassle at all ;-)

  29. 33

    Oh 1. Hidden log-in link. makes me mad every time I forget the link to our basecamp :(

    I mean seriously, hello? there SHOULD be a login button on the homepage.

  30. 34

    Vitaly Friedman & Sven Lennartz

    September 27, 2007 6:33 am

    @Dennis: we do use special tools for screenshots, thank you. :) However, it was really hard to focus the mouse on the navigation section we wanted to highlight – even with a Snapshot timer. Really.


↑ Back to top