Ten deadly sins of web design

The feature article in the latest issue (4/2006) of Swedish design magazine CAP&Design is called 10 dödssynder i webbdesign (Ten deadly sins of web design). I didn’t write this article, but I was interviewed for it and contributed with some examples of web design gone wrong.

Like the title says, the article brings up things that no web designer should ever do. Unfortunately, many of the sins mentioned in this article are committed every day by designers and developers all over the world. Here’s the list (my translations):

  1. Not following basic typographic rules
  2. Being too creative with navigation
  3. Creating a cluttered navigation system
  4. Making sure the site requires certain technology to work
  5. Thinking that accessibility is only about blind people
  6. Ignoring web standards
  7. Not keeping search engines in mind from the start
  8. Basing the site structure on your organisation structure
  9. Using grey text on grey background
  10. Skipping the feasibility study

Each deadly sin is explained in more detail in the article, which is currently only available in the printed magazine.

Update: The article is now available online: Tio dödssynder i webbmakeri - och hur du undviker dem. Still only in Swedish though.

Posted on May 3, 2006 in Accessibility, Quicklinks, Usability, Web Standards

Comments

  1. If I had £1.00 for every time I heard the 5th sin, I’d be extremely wealthy.

  2. Oh yes. Number 5 sounds very familiar! =)

    I wish there was an english translation available online, since I can’t get an issue of that magazine. And even if… I don’t speak swedish. ;)

  3. May 3, 2006 by Daniel

    And what about user analysis, business objectives and usability testing?

    1. Flash. ;-)
  4. Doh! Didn’t pay attention to my comment preview. Flash should be #11.

  5. Surely that’s the same as #4? :)

  6. Yes… I think “Flash” is covered with #4. The important thing with #4 is the phrase “requires certain technology to work”. In my opinion, a site can have flash-based contents as long as the whole content can be accessed w/o flash (flash is not required).

  7. Nr. 1 is a bit vague for me (typography on the web is very tricky) but 10 out of 10 for the other 9.

    Especially nr. 7. Search engine optimalisation is often added as an afterthought… And we all know what that leads to.

  8. If you do all but #7, haven’t you achieved much of what you want to accomplish with #7?

    I presume that #9 also refers to light green against dark green and light blue against light blue? OR, IOW, watch for colour contrast.

  9. This is a good list. How about:

    Designing for yourself rather than your audience.

    This is an easy trap to fall into. How to avoid it? User testing throughout the design and development process.

  10. 11) Building an entire site in JavaScript and rendering it inaccessible to anyone who doesn’t have JavaScript (aka super-ajax-fetish).

    12) Thinking that HTML, CSS and JavaScript can be done by anyone (the developer, the designer, the boss).

  11. May 3, 2006 by Christian

    How about the point “Skipping to check the page in IE to see if the leading number on long lists is displayed correctly”? :)

  12. I think i’m a bit bold now to state that i can add one more to the list:

    11: Being too creative to put “more” in when lesser is better.

    (missplacement,many colors,curves,blocks,shapes,wiggles,etc)

    Anyway, i think that it’s one of the most maked mistakes, mainly by beginners.

  13. On the whole I agree with the list.

    Surely number 4 (depending on technologies) is impossible. I see your point (I don’t rely on flash or javascript) but surely the buck has to stop somewhere?

  14. On the whole I agree with the list.

    Surely number 4 (depending on technologies) is impossible. I see your point (I don’t rely on flash or javascript) but surely the buck has to stop somewhere?

    This very comment form depends on the browser sending a referrer header.

  15. Haha, nice. I’m gonna print these out and give to my very skilled web design teacher.

  16. May 3, 2006 by Roger Johansson (Author comment)

    Daniel: Those areas (except for usability testing) should be covered to at least some extent by #10. But yes, this list is not conclusive.

    Aaron, Olly: Yes, requiring Flash is covered by #4.

    Jules: Correct.

    Christian Watson: Oh yes, another good one. I think we’ve all been guilty of that at one point or another.

    Ara: You mean like the new Windows Live Shopping? ;-)

    Christian: Haha, strike! The numbered lists were a bit off in other browsers too though. Should be better now.

    Jungsonn: Yes. Less is often more.

    Andrew: The buck stops at HTML 4.01 for me. I’m sorry about the comment problem. Blame the comment spammers :-(.

  17. Roger: Bingo! It’s crazy, it’s like we’ve regressed to the bad-old-days of Flash only websites. Won’t people ever learn?

  18. I’m sorry about the comment problem. Blame the comment spammers :-(.

    No worries. Wasn’t having a dig at you. It was just an example.

  19. That’s a weird list anyway, isn’t it?

    a) Some more important issues are entirely missing, like design conventions or readability.

    b) Some issues are not sufficient: “Using grey text on grey background” sounds like “red on red” is fine. “Using similar colors for foreground and background” is certainly clearer.

    c) Some issues are trivial: “Not following basic typographic rules” is a nice tabu, but using wrong quotation marks (that’s basic typography, I fear) is not necessarily a “deadly sin”. (It’s that popular that it almost became a convention - now slap me.)

    d) Redundancy: The “navigation sins” 2 and 3 should probably be merged into one more general issue.

  20. Won’t people ever learn?

    No! There’s too much money to be earned on repeating these “sins”, and that’s more important than the “deadly” part of it.

  21. May 4, 2006 by Alex Kadis

    I’m with Johan..

    Any chance of someone posting a translated copy online at some point? I don’t want anyone to violate copyrights, but I have no idea how to read Swedish, and I doubt I could get access to the printed article in the US even if I could.

  22. May 5, 2006 by grumpY!

    i still say, proof the site in elinks.

  23. May 5, 2006 by Zeeshan

    I can dig all the other sins. But number 9 comonnnnn. Its like messing with the color contrast thing. You can mess with that

  24. NUmber 7, is, I think, the most neglected web design “sin”.

    Michael - web2earn.com

  25. May 6, 2006 by Jeff

    I don’t understand why #8 would necessarily be a sin. Can you give some examples?

  26. Number 8 is a tricky one. When the organizational structure of an institution (like a university) is closely related to the information structure required by your audience (students, faculty, staff, alumni), #8 on the list requires some consideration. Also, the political environment, legal requirements, and sheer amount of information can be a problem when trying to abstract the informational structure from the organizational structure. Does anyone else feel this hasn’t been discussed enough? Feel free to post about this for my benefit :)

  27. May 7, 2006 by Roger Johansson (Author comment)

    Jens: Like I said in comment 17, this list is not conclusive, and if you ask ten people you will probably get ten different lists ;-).

    Alex: I’ll check with the magazine if translating the article is permitted. I’m not so sure it is though.

    Zeeshan: Not sure what you mean there?

    Jeff: It doesn’t always have to be wrong to use an organisation’s organisational structure, but in many, many cases visitors are not interested in that. Most visitors come to the site to find specific information or perform a specific task, not to look at an organisation chart. From Jakob Nielsen’s Top Ten Mistakes of Web Management:

    Users should not have to care how your company is organized, so they should not be able to deduce your organizational structure from the structure of your website.

    and

    The site structure should be determined by the tasks users want to perform on your site, even if that means having a single page for information from two very different departments.

  28. I would think the biggest sin is not giving the sites target audience the content they want to see, in the method they would prefer it to be delivered.

  29. Would be nice if you had explained the ‘sins’ more and provided examples…

  30. Michael, I think feedback would help with that, but unfortunately it’s not pait attention to. I would involve audience in designing as much as possible.

  31. Not explaining to the customer at the beginning why building a site that is focused on delivering a rich and informative site experience to their target audience should be the main business objective of developing a web site.

  32. July 6, 2006 by Anonymous

    Sin #11. Allowing anonymous readers to post their crappy comments.

  33. Very nice article.

  34. You can add a new sin now, that is follwoing too much of CSS and trying to complicate simple stuff by jargons like accessibility, usability and other bilities.

  35. using huge flash files make sites really complicated. it is so bad that “contents” are not important nowadays. creating great designs doesn’t make a “one page site” perfect…

  36. I agree with 5. Accessability is a whole major otrher can of worms. A very vague and complicated subject

  37. July 3, 2007 by Jack

    Designing based on your corporate structure is fine, if its an intranet site and you’ve made allowances for the new guy that just showed up. Usually everyone that works at your company has an idea of what goes under what department.

    For an INTERNET site, its a horrible sin to assume that your visitors have a clue or care what department is where.

    One of the top five rules of customer service is NO JARGON, staying strictly with your companies organizational chart definitely counts as Jargon. The other rule I try to stick with is one from the Evil Overlord list, the 8 year old child rule.

    If you can tell an 8 yr old to go to your site and find out how to buy a widget, and they can, easily, with no other prompting, you probably got it right.

  38. well written article. I enjoyed it and look forward to your comments on what’s next in teh design world

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.