Over time certain conventions and best practices have been developed to help improve the general usability of websites during their design and build. This roundup of ten usability crimes highlights some of the most common mistakes or overlooked areas in web design and provides an alternative solution to help enhance the usability of your website.
Crime 1: Form labels that aren’t associated to form input fields
Using the ‘for’ attribute allows the user to click the label to select the appropriate input fields within a form. This is especially important for checkboxes and radio fields to give a larger clickable area, but it’s good practice all round.
Crime 2: A logo that doesn’t link to the homepage
Linking the logo of a website to the homepage has become common practice and is now second nature for (most) web surfers to expect the logo to head back home. It’s also worth mentioning the logo should appear in the top left.
Crime 3: Not specifying a visited link state
Visited link states do exactly as they say on the tin. It’s not the most advanced CSS selector, but it’s one that is often overlooked. Give users a visual clue as to which link has already been clicked.
Crime 4: Not indicating an active form field
You can use the ‘:focus’ selector on lots of elements, but it’s super handy when used on inputs and textareas to indicate that the field is active. Add CSS styling such as a highlighted border, or a subtle change to the background color.
Crime 5: An image without an alt description
This is straying a little into the realm of accessibility, but it’s still an important consideration! Remember to always add a descriptive alt attribute to your images, unless of course they are used for decorative purposes, then the ALT attribute can be left empty (but should still exist!). When using an image as a link, enter a description of where the link goes.
Crime 6: A background image without a background color
It’s common to use background images behind passages of text, but it’s worth remembering that if background images are disabled by the user, there needs to be a similar tone in the form of a background colour to avoid the text becoming unreadable.
Crime 7: Using long boring passages of content
There’s nothing more off-putting than landing on a webpage that’s laid out as a continuous passage of text. Break up your content with images, headings and clear sections to make it easier to scan, read and digest.
Crime 8: Underlining stuff that isn’t a link
Everyone knows that text that’s underlined, or is a different colour is likely to be a link. Don’t go confusing people by throwing in underlined text elsewhere! To draw attention to a certain word, try using the strong or emphasize tags instead.
Crime 9: Telling people to click here
The words click here have been around since the dawn of the Internet, but have been shunned aside in favour of more usable options. Using the words click here requires the user to read the whole sentence to find out what’s going to happen. Instead, describe what’s going to happen in the actual anchor link text.
Crime 10: Using justified text
This is another tip that’s heading a little deeper into accessibility but is also an important point to consider. Justified text might look at neat and square to the eye, but it can generate some real readability problems, particularly for Dyslexic users who can find it troublesome to identify words due to the uneven spacing of justified paragraphs.
http://www.my-iName.com/index.php?id=29176
Labels for checkboxes go on the right – putting them on the left is a usability error…..
He keeps them on the right also, but having it on the left just gives a large clickable area :)
Good understanding of the problem posed with suitable solution, nice post.
Great article with great illustrations of the crimes being mentioned. I made this one of my three links for the day on my daily design blog “Design Thought for the Day”
http://designthoughtfortheday.blogspot.com/2009/12/12-16-usability-crimes-best-psd-tuts-id.html
All the best, Ted
This is really a good note, i found some things i am not following. like visited link color change its good to make a mark of it….
thanks for the post
Nice and helpful! Thanks
Nice list. One thing with the “click here” links, this is related to a general heuristic which can be applied to systems development in general. A navigational item should always indicate the action that it makes on the system.
I’m sorry, there’s no point on clicking “Skeletor”, everybody knows that He-man is the Master of the Universe.
Good post, I like crime 4. I will have to keep that in mind. I don’t agree with crime 3 though. Visited links are visually confusing IMHO. I find it interesting that line 25 is guilty of crime 3.
Good article, these things are always good to remember.
Regarding “Crime1″ i don’t think you were very inspired when you added radio inputs to the right.
LOL: you didn’t use ALT text (crime 5)
Nice article, everyone wants to keep pushing forward but start to forget the basic.
So He-Man is usable? I understood a lot of He-Man and homo-erotic practices from this article….errrr, good work?
Also: use punctuation correctly. Commas and periods go INSIDE quotation marks, not outside.
There’s not agreement on this question. Putting punctuation inside the q-marks is used by most Americans (although not me!). Outside is more common in British English — it’s known as Oxford commas.
Personally I don’t see why the former makes any sense — the punctuation is not part of the quote. “Four score,” said Lincoln, “and seven years ago, our fathers…” would, to any logical person without previous bias, then truncate to “Four score, and seven years ago, our fathers…”
As long as we’re on the topic, “shunned aside” is a quite strange phrase too. But besides that, great article!
perhaps another crime can be taking website address without indicationd adding http or not.
I strongly agree with labbeling but when translating you need to select the label but usually input/select element gets focus. Thats problem sometimes
5, 7, and 10 are a bit opinionated, but the others seem reasonable.
I agree with all except one, the last one…
justified text cannot be difficult for SOME readers, so fuck them….
so, you will have also to reduce the colours you will use just because there are daltonic people?? or what??
The He-Man theme makes this article even more brilliant than it already is. Great post!
Hmmm. I never specify visited links. Live and learn I guess.
I’m guilty of not using a visited style on my links. The rest are standard for me though, with the exception of using :focus on form fields. I use that sometimes but since selectors don’t work across the board in browsers, I sometimes accompany it with a simple jQuery snippet that makes it work globally.
Hey! Great article! :)
Usablility is very important. :P
I agree with all but justified text.
There is nothing wrong with justified text as a default. There are actually some benefits.
The issue happens when you have short line-lenghts. Since it’s not yet possible to hyphenate in browsers, short line-lengths that are justified generate large rivers which are not only ugly but bad for readability.
However, on pages with longer line lengths justified text isn’t a negative but a benefit as it helps to identify content blocks more clearly.
Doug S: Sorry, but I disagree about the “nothing wrong with justified text”.
The reason for the problem with justified text is that the eyes and the brain reads word-by-word, and not letter by letter. The variable space width makes it harder for the brain to interpret the words.
It isn’t a rule exactly, but your main navigation is broken on Chromium/Ubuntu.
Great article tho, I’m wrting this right above my bed, so I read this every night.
Very good stuff. Two handful of rules which make every website better! Thank you.
Nice post Chris.
Sometimes we forget about these things in our daily workings.
Thanks again!
Well done Mr Spooner! I am guilty of a few of those, just because they are so simple I forget!
Great great post !!
I think about most of the stuffs often, but I must say some things never even came to my mind. Especially the Crime 6 (A background image without a background color), this is the simpliest thing but I’ve never even think about it…
(And I promise I’ll try to be more an “a:visited” guy in the future… ;-) )
very nice post, the developers forget this simple things that make all the diference between a good and bad experience of the user on a website
Actually ‘alt’ attributes in image tags are also important for SEO purposes.
Greatlistand good advice thanks
Great article, I sometimes get a bit lazy and don’t set proper alt tags, I try not to do any of the others though on a regular basis
Where is She-Ra?
I couldn’t agree more! All of these points are spot on. Usability is something that’s far too often overlooked! Thank you.
I agree with everything except not specifying a visited link state. This is true for larger websites, but not a universal principle across the board.
I agree on all points. But you should really use the title attribute on images as well as the alt-text. The title attribute can also be used on other elements. And, using the alt-text where it’s not needed is also a crime in my opinion. And not specifiying a visited link state is ok if it is a link within a more application-like web page. Another terrible crime is to avoid using margins and line-height.
/g
Excellent list of reminders. I particularly appreciate your including Crime #7 “Using long boring passages of content”. We often get content from clients in long passages of prose.
I have committed some of these crimes, so I plead guilty… try to be a better person
I found most of this to be common sense at this point, however its a great posting for newbs that wanna get started!
Thanks a lot for the amazing post Chris. I would like to add 1 more Crime:
1- Playing Music Automatically when opening a website.
Thanks,
Mohammed
Nice post, i like the pictures of He-Man too :P
just a pointer… ALT-Text wont display for users within Firefox, they will only see it if users have images turned off. A better way to make use of this would be to use the TITLE attribute instead.
The last point, Crime 10, is funny i think. But if you say so, it must be true.
Great article by the way
lets not forget about not doing client-side validation on a form so users get all the way to the end submit the form and have to re-input the data. I see that happen quite a bit.
good article i especially like the he-man throwback
very interesant !
thx
typo: “hompage” under crime 2.
Spot on.
Using He-Man really helps it hit home, great article.
per dustin curtis,
in regards to click here and click rate.
or rather HERE, not necessarily click. :)
http://dustincurtis.com/you_should_follow_me_on_twitter.html
Great Article. I implemented solution to crime 4 straight away. Had never thought of doing that. Makes sense. You learn a new thing every day I guess. He-man theme takes me back. Battle Cat is cool.
I have to say, I’m guitly of some of those.. shame on me.