10 Usability Crimes You Really Shouldn't Commit

29/09/2010 10 Usability Crimes You Really Shouldn…
Line25
Articles
Inspiration
Tutorials
About
Advertise
Contact
10 Usability Crimes You Really Shouldn’t Commit
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.
line25.com/…/10-usability-crimes-you-… 1/20
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.
590
StumbleUpon
96K
Share
25
0
Written by Chris Spooner
Chris Spooner is a designer who has a love for creativity and enjoys experimenting with various techniques in
both print and web. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily
findings on Twitter.
More posts like this
Top 5 Web Design Debates That Cause the Most Riots

10 HTML Tag Crimes You Really Shouldn’t Commit
Coding Up a Web Design Concept into HTML & CSS
How to Code up a Web Design from PSD to HTML
Coding a Stylish Blog Design Layout in HTML & CSS
15 Must Read Articles for CSS Beginners
244 Comments
1. Adam says:
November 30, 2009 at 8:11 am
This was great. I commit one….but not anymore.
2. choen says:
if I disable images in your template, I lost your rss feeds.
3. Russell Bishop says:

What I didn’t agree with:
The :visited state

The :focus use
Background colors
The :visited state, I believe, only really needs to be utilised on large websites, where you might be
annoyed to find yourself at the same section again.
Although :focus is really helpful, and it looks great when it’s used effectively, I wouldn’t say it’s a crime
not to. If you can’t remember which input you were last in, or can’t spot your text-cursor, then yes I
suppose that might be annoying, but once again, I don’t believe a crime!
Also, this isn’t me having a go at the author Chris, I’d just like to hear some more ideas!
Alex @ Webson Design says:

March 10, 2010 at 2:27 am
I agree about the "visited state", I hardly remember using it in 7 years of building websites… I
don’t think people are idiots :)
4. woodshed says:
I thought ‘click here’ with a bit more description was a recommended practice for maximum clicks? ie
‘Click here to see pictures of he-man’ is the idea. Its a definate call to action then. There was quite a
long post on it over at Smashing a while back.
Besides that though, its a real nice handy list.
Thanks
Charles Boyung says:

November 30, 2009 at 4:52 pm
Not by any usability expert, it isn’t. For every article by an “expert” such as Smashing Mag, you
will find a true expert such as Jakob Nielsen or Steve Krug telling you that you should never use
“useless” words, like “click here”. They provide absolutely no value to the user; if the link looks
like a link, he knows that he needs to click on it.
Amy says:
“click here” also implies a visual orientation and input method that some users might not
have. Some users may not use a mouse so “click” doesn’t quite fit. Screen reader users
may find “click here” to be useless because you don’t see where “here” is.
Joby says:
Good usability does not necessarily equal good marketing, and vice versa.
David says:
You all should read this regarding the whole “click here” ordeal.
http://dustincurtis.com/you_should_follow_me_on_twitter.html
5. George - Planet Anarky says:

Good post: this is a well-illustrated list. Nice work.
6. webmasterdubai says:
really nice article and good way to describe the problem and found solution of my common problems
from here.
7. Dave Sparks says:

Nice post Chris. I like the use of He-man throughout.

I agree with Russell that the visited state only really becomes a major issue on larger sites, however it is
obviously good practice to use it all the time.
RJFerret says:
What does the size of the site have to do with how f’ing infuriating it is to click on a link,
expecting to see new info, only to see a page already visited?
Don’t waste your users’ time! It used to be browsers resolved this automagically, I wish that
control was never taken away.
Worse are sites that include another link to a previously visited page with different text linked to
it.
Add to that dynamic content so you don’t even realize it’s the same damn page you read
through five minutes ago until you’ve gotten halfway through the first paragraph.
Although I replied to you because you made the point more succinctly, others have opined
making a site more frustrating and time wasting to navigate is not horrible design as well.
8. jay design says:

Well put together line-up. Simple design points but all for good reason. I don’t tend to use link visited
states in my designs but I can see why they are used.
9. Design Informer says:

Chris,
I love this post. Excellent idea. This is the type of post that you want to read.
The content and the points are all valid and great, but adding the He-Man element to it just adds the
cherry on top. Great article! I just stumbled it and bumped it as well. Keep up the great work!
Dave says:
I agree with @Design Informer.
I actually read the entire article because it was (a) informative and (b) amusing. Great
combination Chris.
10. BigRobbie says:

hooray
someone else thinks text centre-justified is a piee of *klonk* for readability.
I wish more print people thought so too
11. john snoq says:

Crime 11: Copyright theft. Using unauthorised images of he-man & friends
Joseph Earl says:

I’m inclined to agree – the use of the images in an article completely unrelated to ‘He-man’ is
unlikely to count as ‘Fair Use’
12. Joseph Earl says:

The crime with ‘Click here’ is two-fold:

1) The text of the link does not describe what the link is pointing too – this is especially bad for blind
users
2) How do you know they clicked? They might have pressed a keyboard button, touched the screen
or spoken to their computer for all you know
13. designfollow says:

very useful, thank you.
14. Subharanjan says:

Nice Tips… Although I went off HTML and Web Scripting about a decade ago, this was a nice
reminder of the basics… :-)
15. tevfik bülent öngün says:

thanks for this cool article about usability
16. abdulaziz says:

thanks for this post I really got benefits from it.
keep up the great stuff.
17. Gerard says:
Very well writen, illustrated and explained. Thanks
18. Alan says:

Excellent little article, i do them all anyway, but its great for beginners.
19. Ted Goas says:

Hi Chris, great roundup. You have some great point in here, but what’s wrong with justified text? Do
you think this can be considered on a case by case basis?
20. Andy Jones says:

Nice one. Did all of these apart from the background color on links with a background image – nice
tip!
21. Lee says:

There are very few “crimes” in usability that apply to every situation. Usability is relative to your
intended audience.
Having said that, these are some good tips for front-end developers. 4 and 7 are a bit dubious
though… 4 might be helpful in some cases, but hardly constitutes a usability “crime” and 7 is very much
dependent on context…
22. Chalda says:

Gret article!
23. Anon says:

Nice article, but your images don’t have alt text =0
24. @wickedgeekie says:

Thanks, I didn’t know about justified text and dyslexia.
25. Anon 2 says:

If you have a small login area on a page, make sure that when someone does log in that they’re taken
back to the page they were at, not the homepage – sxc.hu breaks this rule and it *really* annoys me!
26. Angela Colter says:

Bless you for joining the chorus of voices proclaiming that using “click here” as link text is a crime
against your users. The Smashing Magazine article claiming otherwise was a load of poorly researched
crap. For more musings on the use of “click here” see my ironically titled blog post “Click here for
more information.”
Charles Boyung says:

Could you point me to that Smashing Magazine article? I must have missed it. I’d like to read
how wrong they are.
Louis says:
Charles, I don’t think there is such an article. The user seems to be repeating what you
erroneously implied — that a Smashing Magazine author would say such a thing. Now
we know how false rumors get started.
27. Shawn says:

Thanks for an elegant case against justified text! I had to try and explain this to a client just last week.
Next time, I’ll just point ‘em here!
28. Kilian Valkhof says:

You are giving usability tips using text in images without an alt text. Irony much? Usability tip #12?
Come on…
29. Mike says:

Great list of tips. Very helpful indeed. Thanks!
30. Jose says:

I break these all the time. Thanks for Sharing. I appreciate this very much.
31. Steven Howe says:

“Crime 2: A logo that doesn’t link to the homepage”
Unless you’re on the homepage.
If you’re already on a page, you shouldn’t have a link to that page on it, it’s confusing.
This doesn’t apply to content anchors of course.
32. Maria Papandreou says:

I love the way you chose to illustrate these tips! Thanks! Yea! :P
33. Christian says:

Nice tips, I will implement this ideas.

Thanks from Argentina
34. Neale says:

Nice post Chris, Cheers :)
35. Mehmet Aydın Ünlü says:

Nice post, i like this =)
36. Chris Spooner says:

Thanks for the comments everyone, and some great additions mentioned too.
Before the thread gets filled with the same responses:

> ‘Crimes’ – It’s a catchy title, there’s no scale on how much of a crime one point is against another.
Consider it more a collection of tips I personally find handy.
> Yes, I’m a criminal, there’s some of these points that I don’t fully practice on this site. Maybe I’ll
correct them on the next design refresh! If you disable background images there’s plenty of content
here that become illegible, but the main content is there. Plus the images in this post I’d argue are more
for presentational purposes, rewriting the image content in alt attributes would more likely confuse a
reader not seeing the actual images.
37. Rachel Levy says:

Great post, thanks! (@BostonMarketer)
38. David says:

Great article. I know I’ve been guilty of using the click here crime especially when a client specifies that
to be used and I can’t think of any alternatives.
39. Grafiko says:

Great article. I have to say I used to commit the “click here” all the time.
Love the He-Man theme for the post.
40. Amber Weinberg says:

LOL I love your examples! I’m guilty of not specifying visited link colors. I always try not to use “click
here” but sometimes I fail for lack of better words ;) I do, however, disagree with not putting alt
descriptions on everything. For design elements, I’ll normally just put a few keywords in it for SEO
purposes.
41. Car says:

This was a great article! I’ve just added ‘:focus’ to my CSS – I have been wondering for a while what
the code for that is! Thanks!
42. Chris Spada says:

Great post chris, He-man is the poster boy for usability. I’m a Crime #5 violator
43. Mario says:

Very Good Article!!! I’m guilty of doing some of these things.
44. Brian Yerkes says:

Great post Chris, and awesome way of presenting it.
However, on the note of the “click here”, I’ve seen a lot of REAL statistics that “click here” does in
fact typically produce higher click thru rates than descriptive words of what the link will bring you to….
I’m sure there’s someone out there that has carried out this research recently.
Alex @ Webson Design says:

March 10, 2010 at 2:23 am
Brian is right… but what about combining the two? "click here for pictures of skeletorrrrr",
althoug "see" is also an action word, just probably not as effective…
45. Paul says:

Nice post Chris. Great job visually illustrating these points as well.
46. JMLeon says:

Most of this also is penalized by google in searches.
47. Anthony Calzadilla says:

Awesome post Chris! Crime #10 was a surprise to me. I did not know that unevenly spaced
paragraphs could make it difficult for Dyslexic users.
THANKS!
48. Lai says:

another crime I see often is having a link in a website that is not or no longer a valid link.
49. Craig McLachlan says:

Great use of He-man visuals. I’m now going to dig out my Masters of The Universe video and
reminisce about my childhood Castle Grey Scull toys.
50. Josh says:

I can’t believe that I never knew about the for attribute in the form label. Although I think that since this
is an underused feature it may be good to highlight or underline the the label and input together on
hover so users know it is clickable. I will be using that from now on. You learn something new every
day. Thanks for the informative post.
Rick Cusick says:

March 8, 2010 at 10:27 pm
Just stumbled onto this from a tweet. One thing to note about the "for" attribute is that when
using JS to set or get it, you must use htmlFor as the Attribute name, if you want this to be
compatible with Internet Explorer.
Great summary article, great points.
Newer Comments
Comments are now closed
57258 subscribers
Subscribe by RSS
Subscribe by Email
Follow Line25 on Twitter
Search
What you're saying
10 Usability Crimes - http://line25.com/articles/10-usability-crimes-you-really-shouldnt-

commit
revendo: http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit
interesting designs&apps!! http://line25.com/articles/beautiful-mac-app-web-design-

showcase-trends
http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit хорошая статья
10 erros mais comuns em usabilidade. http://line25.com/articles/10-usability-crimes-you-

really-shouldnt-commit ( via @guiausabilidade )
Can I Haz Universe? http://twitpic.com/2t2544 #meme source: http://line25.com/articles/10-

usability-crimes-you-really-shouldnt-commit
@laura_ci thanks for your kind words re the @redupdm site featured on @chrisspooners
Line25 blog! much appreciated, Phil.
10 Usability Crimes You Really Shouldn’t Commit. http://line25.com/articles/10-usability-

crimes-you-really-shouldnt-commit
About Line25
Line25 was built in March 2009 by Chris Spooner, a designer with a passion for all things creative. Line25
aims to provide web design ideas and inspiration through articles, tutorials and examples of stunning site
designs. Keep up to date by subscribing by RSS, Email, or join Line25 on Twitter.
Most popular posts
Create a Clean Modern Website Design in Photoshop

30 Awesome Design Enhancing jQuery Plugins
How to Convert a Photoshop Mockup to XHTML/CSS
10 HTML Tag Crimes You Really Shouldn't Commit
15 Must Read Articles for CSS Beginners
50 Inspiring Examples of Minimalism in Web Design
Back to top
Site by SpoonGraphics
Powered by Wordpress
Part of the Smashing Network

10 Usability Crimes You Really Shouldn't Commit

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

10 Usability Crimes You Really Shouldn't Commit

Uploaded by

Copyright:

Available Formats

29/09/2010 10 Usability Crimes You Really Shouldn…

10 Usability Crimes You Really Shouldn’t Commit

Over time certain conventions and best practices have

Crime 1: Form labels that aren’t

Crime 2: A logo that doesn’t link to the homepage

Crime 3: Not specifying a visited link state

Crime 4: Not indicating an active form field

Crime 5: An image without an alt description

Crime 6: A background image without a background color

Crime 7: Using long boring passages of content

Crime 8: Underlining stuff that isn’t a link

Crime 9: Telling people to click here

Crime 10: Using justified text

Written by Chris Spooner

Top 5 Web Design Debates That Cause the Most Riots

This was great. I commit one….but not anymore.

if I disable images in your template, I lost your rss feeds.

3. Russell Bishop says:

What I didn’t agree with:

The :visited state

Alex @ Webson Design says:

Besides that though, its a real nice handy list.

Charles Boyung says:

5. George - Planet Anarky says:

Good post: this is a well-illustrated list. Nice work.

7. Dave Sparks says:

Nice post Chris. I like the use of He-man throughout.

8. jay design says:

9. Design Informer says:

I agree with @Design Informer.

10. BigRobbie says:

I wish more print people thought so too

11. john snoq says:

Joseph Earl says:

12. Joseph Earl says:

The crime with ‘Click here’ is two-fold:

13. designfollow says:

very useful, thank you.

14. Subharanjan says:

15. tevfik bülent öngün says:

thanks for this cool article about usability

16. abdulaziz says:

thanks for this post I really got benefits from it.

keep up the great stuff.

17. Gerard says:

Very well writen, illustrated and explained. Thanks

18. Alan says:

19. Ted Goas says:

20. Andy Jones says:

21. Lee says:

22. Chalda says:

23. Anon says:

Nice article, but your images don’t have alt text =0

24. @wickedgeekie says:

Thanks, I didn’t know about justified text and dyslexia.

25. Anon 2 says:

26. Angela Colter says:

Charles Boyung says:

27. Shawn says:

28. Kilian Valkhof says:

29. Mike says:

Great list of tips. Very helpful indeed. Thanks!