Smashing Magazine we smash you with the information that will make your life easier. really.
10 Usability Nightmares You Should Be Aware Of
September 27th, 2007 in How-To | 266 Comments
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 awful” 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.
Backpack, 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.
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.
However, Adidas developers team seem to consider pop-ups as a creative approach for their target audience. It’s not clear what ImpossibleStory.com 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. Fichey 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.
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 Player had been using a bunch of invisible links for a while. Take a look at the picture and the labels below (originally created by Trenton Moss) — can you spot the links?
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 Overstock 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.
You can use different approaches to introduce your new web-service to your visitors. Scriblink 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.
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.com:
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.
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 Kabe243. 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.
2Advanced and Brita.net are excellent examples for these usability nightmares.
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 Magazine, an excellent online magazine we read on a regular basis, has a disturbing animated ad on the left side of every article.
Future Nightmare?
Pointing the mouse instead of clicking.
Dontclick.it, 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.it in this post).
8 Usability Check-Points You Should Be Aware Of
- You don’t use pop-ups.
Pop-ups interrupt the browsing session of the visitors and require an instant feedback. Respect your visitors. - 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?” - 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. - 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. - 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? - 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. - 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. - 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.
psycholq (September 27th, 2007, 1:03 am)
Yeah. IMHO first place belong to hiden links.
Matt Cadenhead (September 27th, 2007, 1:22 am)
Another great article from Smashing! You guys rock, keep up the good work.
ptamaro (September 27th, 2007, 1:42 am)
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.
Aaron (September 27th, 2007, 1:43 am)
If only I could forward this article to every single person with decision-making power at my office without getting repremanded…
Bryan (September 27th, 2007, 1:55 am)
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?
Blaise Kal (September 27th, 2007, 2:01 am)
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.
Phil (September 27th, 2007, 2:25 am)
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.
t3amBrian (September 27th, 2007, 2:26 am)
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.
Saul Pwanson (September 27th, 2007, 2:39 am)
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.
Alec (September 27th, 2007, 2:59 am)
Top quality article that raises excellent points. Keep it up.
Elliott (September 27th, 2007, 3:00 am)
Really good write up about some of the bigger ones out there for usability issues. The “dontclickit.com” site is really neat to play around on, I couldn’t help but clicking on things at first…hard habit to break!
apollo13 (September 27th, 2007, 3:30 am)
Nice new design and great article again :)
Chris Papadopoulos (September 27th, 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 Link [www.adamduvander.com]. Simply removing useless elements can go a long way towards making a site fun and easy to use.
As always, very good article that Link [informationrain.com].
Chris (September 27th, 2007, 4:01 am)
You may be missing the point with #11 (even though this is supposed to be a 10 item list ). Dontclick.it 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.
Penguin Pete (September 27th, 2007, 4:30 am)
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.
benz (September 27th, 2007, 4:30 am)
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 dontclickit.it 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.
Matt (September 27th, 2007, 4:31 am)
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…)
ikosoma (September 27th, 2007, 4:35 am)
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!
Elenor (September 27th, 2007, 4:37 am)
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!
Penguin Pete (September 27th, 2007, 4:38 am)
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!
Bjorn Larsen (September 27th, 2007, 4:41 am)
As for Basecamp, users who have signed up are supposed to use the login URL they decided during the sign-up process, like copmanyname.seework.com. 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.
Ben Bodien (September 27th, 2007, 5:24 am)
Great list, though I think you’re missing a Link [benbodien.com].
Lee (September 27th, 2007, 5:43 am)
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.
Josh Minnich (September 27th, 2007, 5:55 am)
Pretty good article. I love the examples shown. Finally someone else who agrees that 2advanced design makes some of the most horrible usability websites.
am (September 27th, 2007, 6:14 am)
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.
Jeff (September 27th, 2007, 6:16 am)
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!
Vitaly Friedman & Sven Lennartz (September 27th, 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.
Dennis (September 27th, 2007, 6:29 am)
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 ;-)
Starfeeder (September 27th, 2007, 6:29 am)
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.
Vitaly Friedman & Sven Lennartz (September 27th, 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.
Cedric Magnin (September 27th, 2007, 6:40 am)
Wah, the example with hidden links is unbelievable !
Richard Kendall (September 27th, 2007, 7:19 am)
I have to agree with everything you and Smashing Mag said. 37signals are an example example of an online company doing the right things and providing a great set of online tools, I have used Basecamp regularly for nearly 2 years now at work. I saw Ryan Singer in London at the Future Of Web Design conference this year and he talked a lot of sense.
But.
As soon as I read Smashing’s comment, I had to agree, a couple of times I had to login to their site and I did struggle to locate the small login text amongst all the other imagery and wording on the page. You are right about it being a secondary issue, as I’m sold on their products and will persevere to find the login, but it does seem odd that such an advanced usability-driven company have chosen to make it such a small text link in the middle of more eye-catching page content. I would have added it to the top line of links, out of the way, but a more visible and a more regularly used position (in my experience) for login links.
Marco (September 27th, 2007, 8:15 am)
nice article. and the redesign smashed me :-).
anonymous (September 27th, 2007, 8:23 am)
in general, i agree with your analysis. it is great to see such a nice concise list. thank you.
wildeny (September 27th, 2007, 9:30 am)
I add one more example for #2: Link [symphony.lotus.com]. I tried to watch the tour when the news of this office suite came out. However, it didn’t allow me to see the tour unless I accepted its pop-up windows. After I add the site to the list in my Firefox, I still couldn’t watch the presentation. What a stupid web design it is!
Paul Irish (September 27th, 2007, 9:31 am)
@Bryan, the word is using SWFObject will fix the issues with flash sitting on top of everything. And lightboxes can go on top, too. Check this link: Link [blog.deconcept.com]
It’s also a good idea to use SWFobject for your flash for a multitude of other reasons, but you can see the site for that: Link [blog.deconcept.com]
@Vitaly. great article. you guys pointed out some usability concerns that arent the standard fare.
@Lee. 37signals are very smart and talented, but they aren’t the gods of usability. I forget my custom login URL for backpack and basecamp ALL THE TIME. Why would a user think to log into their basecamp account at some updatelog.com subdomain???
Photoshop Tutorials (September 27th, 2007, 9:39 am)
Great article, it points out those mistakes which are made by even expert designers. I like the point about Drop Down Menu especially.
Ben (September 27th, 2007, 9:52 am)
@ Lee
I think you fail to see the point here and going overboard with comments like “using 37 signals as an example of bad usability was a horrible decision. It lost you all credibility.” is a bit ‘dramatic’ don’t you think. 37 Signals is not the ‘be-all and end-all’ of usability, far from it.
Fact of the matter is they did get it wrong in this case and putting a simple “Login here” link on their homepage is far from a unreasonable request.
Just think of someone that after a while of not using Backpack, Basecamp & Co. comes back to the site and can’t remember what the login link for their company/group is.
A simple information page reminding the user that their login is their company/group name, maybe even with a “reminder” mail function, is definitely not too much to ask for.
jayhan (September 27th, 2007, 10:54 am)
i am truely agree on point #7
Arman (September 27th, 2007, 10:57 am)
visitors are king..webmaster are servants. =p
Not Vitaly Friedman or Sven Lennartz (September 27th, 2007, 10:58 am)
Another common usability problem is not being able to find the information you are looking for.. such as the name of the author of the “10 Usability Nightmares You Should Be Aware Of” article.
Introductions aside, I wanted to point out a few things:
Issue #1 - The issue you cited on Backpack isn’t an issue with the UI (yah it would be nice if there was a login there but is it really needed?), it is an issue with the person writing this article going to the wrong location. For example, I use Basecamp on a regular basis (another 37Signals product) but never in my life would I ever go the main Basecamp product site to login to my Basecamp. I would, however, go to my Basecamp URL directly and see that the first thing it asks me to do is to login. The context here is missing, the reason people go to the site is to learn about the product, not to use it.. to use it they go directly to their version of the product.
Issue #5 - In the issue you cited overstock.com and defined it as visual noise. The actual problem here is not visual noise but the lack of white space. If you look at how the text flows under each product you will see less white space under some items than others. This is what makes the page busy. If the designer had added proper white space the page wouldn’t be so so visually noisy, as you put it. If you are going to show a problem like this, show us what it would look like if you fixed it and explain how to fix it. Don’t just show us problems.
Issue #9 - In the issue you cited with drop down menus is actually nothing to do with drop down menus themselves but rather with how some people implement them. Even more specifically it is to do with the on-mouse-out time-out function. The sites you listed have a short or no time out function for the user to react in the event their mouse moves outside of the navigation hot spot. Good drop down menus have a reasonable delay before the entire menu collapse back down or in some cases you can only get the menu to collapse back down if you click on a parent item.
Issue #10 - The issue you cited on Digital Web Magazine is actually not an issue with the design but a issue with the design of an ad that an advertiser created. You’d be pretty hard struck to be able to offer up ads on a site a never see an animated GIF or worse, a flash animation.
I think this article is quick to dismiss things as incompetence on the designer’s part yet fails to acknowledge how things work in the real world with real clients and real business needs.
- Not Vitaly Friedman or Sven Lennartz
ephi (September 27th, 2007, 11:07 am)
The Google Ads served before this article is also annoying. In print it’s not there, but on monitors, it’s annoying to have to see those before actually reading the content.
Chris Porter (September 27th, 2007, 11:42 am)
Very good article…I’m designing a website right now and I’m taking in this information…so now i want to change a bit of stuff, especially the “less is better” bit….
ps….dont the current aol.com site looks just like yahoo.com?
michael mckee (September 27th, 2007, 11:52 am)
Phil said:
But that isn’t the only option for using Google Maps. You can work their maps just fine without ever having to drag. A simple click centers the map. Offering more than one way to achieve goals is done brilliantly there.
John Faulds (September 27th, 2007, 12:52 pm)
Resizing the browser window would be my number one pet peeve.
Homer Simpson (September 27th, 2007, 1:17 pm)
Only a heavyweight object can block another heavyweight object. Hence what a lot of developers will do is place a transparent iFrame underneath the object they want on top (ie the menu)
helly001 (September 27th, 2007, 2:36 pm)
One incredibly annoying point is missing from this list…
Web developers, please don’t commandeer my speakers for your purposes. Ask first. This will give me a moment to make sure it is at a reasonable volume. Or, I can pause my music.
Might not agree with me that it is a “usability” issue, but I kinda think it is. It is my #1 annoyance at any rate (2advanced included).
Vitaly Friedman & Sven Lennartz (September 27th, 2007, 2:55 pm)
@Not Vitaly Friedman and Sven Lennartz: thank you for your detailed comment! All articles are written by Vitaly Friedman and Sven Lennartz as written on our Link [www.smashingmagazine.com].
Joram Oudenaarde (September 27th, 2007, 3:06 pm)
Sometimes opening new links in a new page is actually what visitors feel that “should” happen. As long as they’re links of your own website they should open in the same window, but as soon as it’s an external link, it should open in an external browserwindow imho.
As a visitor, I would feel irritated if I want to take a quick look at a couple of links to external websites that the site I’m currently browsing through has, and find that I have to keep clicking the “back”-button in order to reload the site I intended to stay. ;)
Wolf (September 27th, 2007, 3:17 pm)
In reply to (1): you get your very own Backpack address which you should bookmark, the site you are reffering to is a promotional site for new users.
Think context based design, not out of a strict ruleset.
Sachin Jain (September 27th, 2007, 3:17 pm)
Good Post Smashing Magazine..
Please post something on Proper Google Adsense Ad location on website also..
Sander Wapstra (September 27th, 2007, 3:31 pm)
Some great points (I like the point about drop down menus especially) but most of them are obvious.
Like your new design :).
Ikito (September 27th, 2007, 4:23 pm)
I love Basecamp and most of the 37signals’ products. The features are great, the applications are really awesome. I must admit I have become quite a fan..
Until I viewed the source of their pages. Layout tables, anyone?
Jesper (September 27th, 2007, 4:29 pm)
@ Layering Flash and HTML:
The problem with flash obscuring for instance menus is easily fixed: Set wmode param/attr to opaque og transparent and the problem disappears.
Without wmode set to something other than default objects are rendered in their own ‘layer’ on top of the rest of the HTML (to save resources). Set wmode and the flash object is rendered in the same layers as the rest of the site, and obeys standard rules for stacking.
See: Link [www.communitymx.com]
Jesper
John Braine (September 27th, 2007, 4:33 pm)
Number 7 is just bad coding rather than a useability issue. Setting the drop-down to a higher index than the flash is simple fix.
Andy Gongea (September 27th, 2007, 5:09 pm)
Nice article. I hate the pages with drop-down menus and flash animations on top.
Toby (September 27th, 2007, 5:17 pm)
You can fix that issue in 7 pretty easily with a bit of research…. especially seeing as it depends on which browser and element your overlapping… its well documented too, i love the web.
Also, dontclick.it is probably one of the most well-built flash sites around, please admire its smoothness…
Thanks for the post!
Ognjen (September 27th, 2007, 5:50 pm)
*) IFRAME src attribute will trigger “Unsecured Items” message in https pages!
Btw, great article and thank you for sharing this with us.
polarizer (September 27th, 2007, 6:37 pm)
Since a normal user mostly is just scanning a website, the hidden links will make to loose the visitor.
Imho the overlapping content blocks are only bad web layout - not truly tested with different browsers and
resolutions.
I would suggest the use of pure flash w/o an alternative way to view the site to apperar in the list
my 2 cents - the polarizer
Vitaly Friedman & Sven Lennartz (September 27th, 2007, 6:53 pm)
@Sachin Jain: Google AdSense? We already did! Link [www.smashingmagazine.com].
im suden (September 27th, 2007, 7:49 pm)
I like this article: practical tips that don’t refer to web standards and validation are an absolute must, in my opinion. It’s the simple choices relating to clutter, position, contrast etc. that are more important. Link [www.webpagesthatsuck.com] has been looking at these ideas for years; it also has a good dos and don’ts list.
The first usability rule is don’t add things just because you can, or because you think a web site should look clever in some way. Don’t be scared to keep it really basic.
What about a list of sites that get it right? Off the top of my head, I’d suggest Link [todoist.com] and Link [tumbler.com].
Benoît (September 27th, 2007, 7:52 pm)
May I ironically suggest : don’t have too much add at the beginning of your page, such that you can see only a little of the article if you don’t scroll down. Exemple : Link [www.smashingmagazine.com] :-)
beth (September 27th, 2007, 8:50 pm)
That Overstock screenshot looks like scores of other sites. I’d like to see you present your suggestions for improvement besides something so vague as decreasing visual noise. Perhaps a case study?
matt (September 27th, 2007, 9:07 pm)
A quick blurb to all the comments regarding 37 signals, if you never login from the main page then why have the login link? Basically if something is on you site it should be usable….
Balakumar Muthu (September 27th, 2007, 9:47 pm)
Great list!, Checkout my Yahoo! Flickr Usability study at:
Link [i5bala.blogspot.com]
Anthony (September 27th, 2007, 9:49 pm)
Or when you are playing music on a website. If you are going to play something, warn me first.
Jens Meiert (September 27th, 2007, 9:51 pm)
I may add that “Visual Noise” can be explained by Link [meiert.com]. The effect is yet more visible when using many prominent borders or other types of “chartjunk”, and yet you already showed a great example with the Kabe243 screenshot.
effisk (September 27th, 2007, 10:50 pm)
to the author of this post: the screen is clickable to the right of the pictures illustrating your article. I’m on a 1920×1200 screen, so that makes pretty much half the screen clickable. That’s my 11th usability nightmare…
evan (September 27th, 2007, 11:02 pm)
Great article. The first point hits the nail on the head with “hidden” login text. Too many site try to work the login link into some part of the site copy - which is very dangerous.
Another big UI problem I’ve seen lately is changing menus. Google is a prime example of this. If you use say iGoogle, then go to your account page, then login to any google service - you can’t usually get back to your account page, and usually can’t even get back to your iGoogle (or regular google) homepage. Without having to re-type in the URL.
If interested, I’ll send over some screen shots of the UI.
dead_orc (September 27th, 2007, 11:57 pm)
Do you really think that dontclick.it is a future usability nightmare? I think it already is one now. I don’t move my mouse too fast because I’m just a bit tired, and so ich just try to hover the second link from the top in a subnavigation (what was it about drop-downs, aren’t they bad anyway?) and before I reach the second link the contents of the firs link pops up between the two links, multiplying the distance I have to move the mouse by at least 20. Not a nightmare? A drop-down menu nearly is a usability dream compared to that approach…
But speaking of usability… why can’t I focus your “Submit Comment” button with a tab from the comment field?
michael (September 28th, 2007, 1:38 am)
“#6 You have at most one animation per page.”
Is this rule based on user comments, or on the opinions of someone who relies on ads for $$? 1 animation is 1 too many. The first request I get from clients when setting up their computers (after the pop-up blocker) is ad-blocking. I usually throw in Flashblock too, and haven’t had any complaints.
Jim Cook (September 28th, 2007, 3:58 am)
2. You don’t change users’ window size.
Dang straight! If you do, and I find you, I will drag you out in the back lot, beat you senseless, take your lunch money, IM your mom to come get you and then give her a wedgie when she shows up.
One of my biggest peeves. Is it obvious?
indigo (September 28th, 2007, 4:25 am)
The best mail client has just one small usabilty issue that I wish they would address…
Hey Gmail…I can’t EVER seem to find your REPLY LINK!!
Is it at the bottom of the page…along the far right side???
How about placing it right above the message, or along LEFT side??
Just LOOOVE everything else about ya though!!
effisk (September 28th, 2007, 4:44 am)
@indigo: you don’t have to hit the “reply” button, you just start typing your message in the reply box at the bottom of your message. How much easier can it get?
Michael (September 28th, 2007, 6:53 am)
first, i had to chuckle at the headline, as that type of grammar is oh so common these days, and becoming less a speedbump.
Do people really find “10 usability nightmares of which you should be aware” all that stodgy?
:)
but with regard to one nightmare in particular, consider this the following please.
worse yet, the dreaded “we don’t serve your kind here” alert:
“On Mac Computers, Scriblink is only compatible with the Safari browser.”
Patrick Algrim (September 28th, 2007, 8:12 am)
Very nice, even though most designers should know this stuff already.
HellYeahDude.com approves!
Zoli (September 28th, 2007, 1:32 pm)
Nice list. Many of the things mentioned should be obvious.
I find it very hard to find designers that focus on site navigation and usability.
pingoogle (September 28th, 2007, 1:34 pm)
Smashing redesign!!!!
And useful article ;)
Keep up the good job!
And keep showering with more GREAT articles!!!
Adam (September 28th, 2007, 2:23 pm)
@effisk: Yes! This page itself s a great example of a usability nightmare. Not realizing that all that whitespace next to the site images was a link, and being one who middle-clicks to scroll down, when I middle-clicked on the whitespace next to the scribble site image it opened in a new tab (without my noticing) and brought up that annoying Java popup which wouldn’t go away when I clicked cancel. How annoying!
Adam (September 28th, 2007, 2:27 pm)
Oh, and another usability nightmare: Only the first 80 comments are shown on this page although it reports that there are 117. How do I get to the next ones? I dunno, I still haven’t figured it out, maybe you can’t, maybe this will never be seen by anybody…
-B- (September 28th, 2007, 4:56 pm)
Those google ads are positioned really annoying… Please, can you re-consider their placement? Or maybe add “Make a donation” button instead? I’m sure many of us would like to support your great work!
guest (September 28th, 2007, 5:37 pm)
nice post
but i have to say that the very most of your ‘featured’ wordpress templates do crash if the font size is changed.
Vitaly Friedman & Sven Lennartz (September 28th, 2007, 5:57 pm)
@effisk, Adam: fair enough. We fixed it. Thank you.
Vitaly Friedman & Sven Lennartz (September 28th, 2007, 6:00 pm)
@Adam: the number of comments is a sum of the actual comments plus the number of trackbacks. You can switch to trackbacks right under the articles.
Doug Stewart (September 28th, 2007, 8:37 pm)
(11) Over-use of AJAX and other hyper-interactive features. How many times have we as designers and developers been made to use interactive elements, be they Flash or some form of fancy JavaScript, and they just aren’t necessary and actually do nothing but distract the user from the actual content?
Don’t get me wrong, I love add little bits of interactivity into my work and I love making my sites extra pretty so the user enjoys coming to them to look at the content, but in the end it’s about presenting the content, not about making a website that you, the designer, gets turned on over.
Mason (September 28th, 2007, 9:56 pm)
1) I don’t think the criticism of the Overstock page is valid. Every item is a block with 5 identical vertical modules: Picture of the watch, linked description of the watch (with rollover color change), price, retail price, and review (if available).
I would find this really very helpful if I was shopping them for a watch. Really, I think this is actually an excellent page, giving me exactly the information I would want, assuming I was just browsing for a new watch. (And I promise, I have no connection to Overstock.com and actually don’t really like it that much.) I’d be much more irritated if one of the information items was omitted and I had to click through to find out the rating or the retail price.
You may be right that they have a large and confusing variety of hover effects when this example is compared to other pages, but within the context of the example, there isn’t any confusion at all.
2) You got my favorite pet peeve on #7. It drive me nuts when navigation or content I want to see is obscured by a second layer of content I don’t want to see. the Major League Baseball site(s) is a horrible offender. If you want to see the home team schedule and order a ticket, they run up a video over top of the schedule and ticket-ordering links. It’s very hard to turn it off.
Brown University apparently has some idiot who keeps at it. They revamped the page after they were featured in a “worst web pages” site, and I thought they had caught on.
Great article. I hope a lot of the “more is better” movement gets a clue.
mcgurk (September 29th, 2007, 2:11 am)
I agree with everything here… except for number 8. In the land of tabbed browsing, opening links in a new window is king. I ALWAYS open links in a new window. That’s because very rarely do I want to leave a webpage I’m currently reading to go to where the link points me. Usually these links are located in a text block I’m reading; clicking the link breaks into reading and requires me to change my focus to investigate the link, after which I have to return (and so help me if that link doesn’t lead me somewhere else…). My only option is to perform a multistep process to open the link in a new window (right click, OINW or shift-click) or I have to try to middle click, which more often than not misses the mark and results in the scroll-page function coming up. PITA. What I want to do is open these related links in a background tab so that I can finish reading the current page, then go check out related content.
Here’s the facts: Navigation links that lead to other pages of the current website (on the current domain) should open in the same window. Related content links, or links to other webpages not on the current domain, should always open in a new window.
Website Design (September 29th, 2007, 2:33 am)
Great list. I would consider many of these major mistakes in design.
Tim (September 29th, 2007, 4:25 am)
I would hardly call a drop down menu a serious usability nightmare. Most of the time it’s a poorly designed drop down that creates a problem.
Clearly the fact that they’re used on every program, including any browser you work with, underline the fact that they “always get on peoples nerves.” What have we been doing for the past twenty years or so…
Lucifix (September 29th, 2007, 7:10 am)
I don’t agree with this:
8. Your links open in the same window.
I think only external links should be opened in new window.
Otherwise great article! Thanks
ChrisMullin (September 29th, 2007, 2:13 pm)
I really don’t see an issue with overstock, besides not having a “call to action” button.
sylv3rblade (September 29th, 2007, 8:01 pm)
This is probably the best post you’ve made after the Wordpress themes. Simply Smashing!
Ahelg (September 29th, 2007, 11:31 pm)
“Your links open in the same window” - no good, except where the link points a page on the same website. I really hate if I read articles with inline text links, click to them, and the new page (from another site) opens in the same window or the same tab. Then I think I leave this new page in the background to read it a little later, and searching for the original article but it was in the same window. Or I start to read the other article immediately but I decide that I’m not interested in it and close it. Or what worst, open another new link from this second page, and so on. Then I close these pages (when I think these are _these_), and the whole thing disappears, all closed, I have to open a blank page and start browsing again. Or I should click back-back-back-back-back or use the back-history to land the original article again, etc, etc… So awful.
OK, I have the chance to right-click and select “Open in new tab”, but it’s a one more click, and I don’t want more clicks, don’t want use right-click menus or CTRL buttons. I just want simple clicks for open and for close. And many websites has javascript links or other tricks which make impossible to use “Open in new tab”, or they use it in a bad way.
So my opinion is that outer links that point to another website should always get opened in a new tab or a new window — this is more reasonable now with the new browsers having the tabbed browsing function.
Nonda (September 30th, 2007, 12:17 am)
Or when you are playing music on a website. If you are going to play something, warn me first.
Gabriel Porras (September 30th, 2007, 1:45 am)
Hello… I ´ve traslated this great article to spanish.. Take a look: Link [www.estandaresyaccesibilidad.com]
Thanks!!!
Alvaro (September 30th, 2007, 8:55 pm)
Ok Ok, tip #eleven.
Please do not build a blog orwebsite thart can’t use my window space. And for so get my scrollbar ABUSED. Users don’t like and don’t have to scroll too long for visualize ALL the page content.
Look at this page man, its sucks!
Prasanth (September 30th, 2007, 11:07 pm)
This is awesome stuff! Very very useful for web designers. The best thing to teach is to tell what is wrong. Awesome stuff guys! Cheers!
anya (October 1st, 2007, 2:58 am)
quite afraid to click into the dontclick.it site, hehehe.
for me, i really hate those ads where they accidentally expand whenever your pointer hovers over(gr?) them. you just have to do the closing bit over and over again.
anyway, erm, yeah, alvaro is right. although i would’ve put it in a gentler way :) but i must say, you guys always give good content :)
Andrew Boardman (October 1st, 2007, 9:27 am)
Lovingly written, truthful, and, now, bookmarked.
ellen (October 1st, 2007, 3:25 pm)
I was JUST looking for a log-in tonite on Backpack’s HighRiseHQ website (I have an account already) and could not find it to save my soul. And then I found your website a little later. Thanks for letting me know Im not crazy… and a good chuckle.
Idar C Quist (October 1st, 2007, 3:33 pm)
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.
I don´t agree at all to this point, if you are moving away from your own webpage, the target must be set to blank. There are users that don´t know how to open a new page, so if they would like to see another page, and at the same time don´t loose the page they first was visiting, target blank i the right thing.
Matt (October 1st, 2007, 9:06 pm)
Opening in another window by default has it’s own problems. The back button disappears. This is really obvious odd when the browser is set to full screen and the user is running ie6 (which lots still do). They can’t find their original window. Also, _blank is not part of the w3c standard.
Mirror12 (October 1st, 2007, 11:18 pm)
Drop-Down Menus…
Well, I don’t have power to make site structure and flow chart at my work place. I only do design and development. I almost alway get 2nd to 3rd level navigation, and it contains more than 10 sub menu. I think Drop-Down Menu is the good solution, do you have any better idea?
Paul Kohler (October 2nd, 2007, 9:28 am)
Nice list. One of the things I hate most is a new window of a set size - grr - thats my choice!!
In the desktop world I still find the concept of a tiny fixed dialog window size… move on! We don’t have 800×600 monitors any more… OK - rant over ;-)
In general especially with web sites it’s best not to go against the norm - such as unobvious links etc… Thanks again.
Website Consultant (October 2nd, 2007, 10:39 am)
Ah, very basic, very true, and very much common mistakes. Dropdowns that you have slide over to are a particular pain, and the hidden links particularly when you have a deep site with a lot of content to study, this can be a huge no-no. We need visual feedback of where we’ve been and what we’ve just reviewed.
Totally agree, too much some clients just don’t want to spend the time/$ to do things right.
Website Consultant in Washington DC (October 2nd, 2007, 10:40 am)
Ah, very basic, very true, and very much common mistakes. Dropdowns that you have slide over to are a particular pain, and the hidden links particularly when you have a deep site with a lot of content to study, this can be a huge no-no. We need visual feedback of where we’ve been and what we’ve just reviewed.
Totally agree. It’s expensive to design site right, unfortunately, and some clients just value the web quiet the same, at least not enough to understand why their bounce rates may be so high.
Ahelg (October 2nd, 2007, 1:27 pm)
“Opening in another window by default has it’s own problems. The back button disappears. This is really obvious odd when the browser is set to full screen and the user is running ie6 (which lots still do). They can’t find their original window. Also, _blank is not part of the w3c standard”
What the back button is used for when the actual page is the first page in that very window or tab? LOL! This thing is all about that you don’t have to push back buttons, but you simple close the window / tab you don’t need anymore, and the earlier windows / tabs still remain in place where you’ve left them.
Fullscreen is a silly use of a web browser, it’s actually a user’s idiocy when he uses the browser in fullscreen and he doesn’t find buttons and interface elements.
Target=_blank is part of standard HTML DOM. If the W3C finally and completely takes it out from new standards like XHTML it will be a serious mistake, if they won’t replace it with an equivalent parameter or solution. W3C are not gods — they do the good, but they do mistakes too.
Matt (October 2nd, 2007, 3:54 pm)
@ahelg You talk in your first post about opening in a new window by default because most users don’t know how to open in a new window by using the right-click options. A lack of user knowledge. It’s the same issue with users having the browser in full-screen mode. Whether it’s good practice or not, many inexperienced users do it, so you need to be aware of it.
Also, the w3c WCAG standards for accessibility warn against opening windows using _blank. Whether you like their standards or not, their standards are what contracts are won and lost on. “Can you provide level AAA accessibility?” If you open a new window using _blank you can’t.
I do sympathise though with the idea that external sites ought to be opened in a new window, but I wonder whether trying to educate users into using ‘Open in New Tab’ might be a better plan.
Matt (October 2nd, 2007, 4:06 pm)
Apologies for the first comment in the last post - it was Idar C Quist not Ahelg who said users might not know how to open in a new tab/window.
Robin (October 2nd, 2007, 4:22 pm)
I agree on the hidden “log in” links. Maybe backpack isn’t the best example, but there sure are sites that take some time to find the login link (like imdb). I think it’s best to make a big “sign up now” text next to a form where you can enter the login and password.
kazla (October 2nd, 2007, 6:05 pm)
I know flash is all the rage, and any one who is any one HAS to use it in abundance, but seriously…. my year old laptop nearly has a coronary every time there’s more then 1 on a screen. (the don’tclickit site was a horror)
The thing that bugs me most are web designers who are out of touch with their users. I see businesses that rely on lower income users who design web pages that require high-speed internet access. You ever try flash on dial-up? (And yes, there are users who are still forced to use that.) There used to be a comprimise for this… but it seems as if web designers have adopted a myopic view of who will use their website.
Mike (October 2nd, 2007, 8:24 pm)
Maybe it’s my browser, but the article is crammed into the left 1/4 of the screen and the rest of the screen is blog lists and white space. I would consider that a major useability flaw.
Troy (October 2nd, 2007, 8:42 pm)
I second that complaint. Many of the example screen shots were cut off due to the fact that the site is only using 1/3 of the screen width.
Jay Gilmore (October 2nd, 2007, 9:19 pm)
Okay, for those of you you think that opening all or external links in a new window is okay: the only way to see if it is actually usable for your site demographic is to test and see. It has been shown in studies that some users don’t realize that they have a new window open and it disables your back button.
It is wrongheaded to blame the user for being too stupid to learn how to open links in new windows. It is wrong to blame users for browsing full screen (which I do all the time on my laptop) and it is wrong to assume that all rules apply for all websites.
If you can prove that a design that breaks standards or breaks commonly thought usabilitiy guidlines will measurably increase user response and you have the numbers to prove it, then do it. If you don’t test and aren’t going to then you may as well follow convention so that the user has a fighting chance at getting the solution they are looking for.
On opening in a new window: for those who like to do it. In Windows, FireFox, IE7, Opera and Safari all allow you to control the opening of links in a new tab by clicking on the scroll button. No Extra Clicks. No CTRL+click. No Right Click context menu click. Just find your scroll wheel and click.
On Stickyness and target=”_blank” and opening links in new windows: This is unproven. If you need to trick people into staying on your site then either write more compelling content, omit the link or place a list of link references at the bottom of the article. Iniline links should be true hyper links. There is no reason to place a link about something that is within the document if you feel that people aren’t going to get to the whole message of the article. If you have to use target=”_blank” or some javascript workaround, reassess if you actually need the link or a contextual explanation of the thing linked to. Remember here in many cases the text on a page is to acheive some type of goal for the site owner as well if you place links that detract from the goal or distract the user from their interaction then the link should never have been there in the first place.
I have on occasion used external links that open in a new window but in all cases I indicate both visually and in the title attribute with a note that the link opens in a new window.
On the flash and overlapping content blocks: this is bad design all the way not because they have broken two rules (inlcluding tremendous dropdownlists) but because they don’t know how to properly include flash using the object element and proper transparency and z-index of the surrounding elements (i.e. the dropdown–its container must have a z-index higher than the flash object and its container or you get this type of overlapping. Part of this is the Flash implementation in the Dreamweaver/Flash suite where they are placed using the old proprietary Netscape embed element and not using the object element. There are many ways to include flash that can be unaffecting of the other elements. The examples used just show laziness or ignorance on the part of the designer.
Test, measure, prove your are right.
Jared (October 2nd, 2007, 10:25 pm)
I agree with your ten points, good article! I do find myself migrating away from websites with UI irritations such as these. What I really find amazing is some really big-name sites do employ these tactics. It’s more than sad, it’s actually quite pitiful that highly paid teams of “experts” produce such utter crap. I find it really inexcusable when the user is left hanging with un-usability because the developers need to make cool stuff. (IMHO a lot of un-usability is directly attributable to creators forgetting the user)
Rourke (October 2nd, 2007, 10:48 pm)
Great Article, but did anyone else notice that the Title of this Article is one of those annoying “Invisible links”. When you click it the adverts reload.
Ryan (October 3rd, 2007,