43 Web Design Mistakes You Should Avoid

Daniel Scocco

background image

There are several lists of web design mistakes around the Internet. Most of them, however, are the “Most common” or “Top 10 mistakes.” Every time I crossed one of those lists I would think to myself: “Come on, there must be more than 10 mistakes…”. Then I decided to write down all the web design mistakes that would come into my head; within half an hour I had over thirty of them listed. Afterwards I did some research around the web and the list grew to 43 points.

The next step was to write a short description for each one, and the result is the collection of mistakes that you will find below. Some of the points are common sense, others are quite polemic. Most of them apply to any website though, whether we talk about a business entity or a blog. Enjoy!

1. The user must know what the site is about in seconds: attention is one the most valuable currencies on the Internet. If a visitor can not figure what your site is about in a couple of seconds, he will probably just go somewhere else. Your site must communicate why I should spend my time there, and FAST!

2. Make the content scannable: this is the Internet, not a book, so forget large blocks of text. Probably I will be visiting your site while I work on other stuff so make sure that I can scan through the entire content. Bullet points, headers, subheaders, lists. Anything that will help the reader filter what he is looking for.

3. Do not use fancy fonts that are unreadable: sure there are some fonts that will give a sophisticated look to your website. But are they readable? If your main objective is to deliver a message and get the visitors reading your stuff, then you should make the process comfortable for them.

4. Do not use tiny fonts: the previous point applies here, you want to make sure that readers are comfortable reading your content. My Firefox does have a zooming feature, but if I need to use on your website it will probably be the last time I visit it.

5. Do not open new browser windows: I used to do that on my first websites. The logic was simple, if I open new browser windows for external links the user will never leave my site. WRONG! Let the user control where he wants the links to open. There is a reason why browsers have a huge “Back” button. Do not worry about sending the visitor to another website, he will get back if he wants to (even porn sites are starting to get conscious regarding this point lately…).

6. Do not resize the user’s browser windows: the user should be in control of his browser. If you resize it you will risk to mess things up on his side, and what is worse you might lose your credibility in front of him.

7. Do not require a registration unless it is necessary: lets put this straight, when I browse around the Internet I want to get information, not the other way around. Do not force me to register up and leave my email address and other details unless it is absolutely necessary (i.e. unless what you offer is so good that I will bear with the registration).

8. Never subscribe the visitor for something without his consent: do not automatically subscribe a visitor to newsletters when he registers up on your site. Sending unsolicited emails around is not the best way to make friends.

9. Do not overuse Flash: apart from increasing the load time of your website, excessive usage of Flash might also annoy the visitors. Use it only if you must offer features that are not supported by static pages.

10. Do not play music: on the early years of the Internet web developers always tried to successfully integrate music into websites. Guess what, they failed miserably. Do not use music, period.

11. If you MUST play an audio file let the user start it: some situations might require an audio file. You might need to deliver a speech to the user or your guided tour might have an audio component. That is fine. Just make sure that the user is in control, let him push the “Play” button as opposed to jamming the music on his face right after he enters the website.

12. Do not clutter your website with badges: first of all, badges of networks and communities make a site look very unprofessional. Even if we are talking about awards and recognition badges you should place them on the “About Us” page.

13. Do not use a homepage that just launches the “real” website: the smaller the number of steps required for the user to access your content, the better.

14. Make sure to include contact details: there is nothing worse than a website that has no contact details. This is not bad only for the visitors, but also for yourself. You might lose important feedback along the way.

15. Do not break the “Back” button: this is a very basic principle of usability. Do not break the “Back” button under any circumstance. Opening new browser windows will break it, for instance, and some Javascript links might also break them.

16. Do not use blinking text: unless your visitors are coming straight from 1996, that is.

17. Avoid complex URL structures: a simple, keyword-based URL structure will not only improve your search engine rankings, but it will also make it easier for the reader to identify the content of your pages before visiting them.

18. Use CSS over HTML tables: HTML tables were used to create page layouts. With the advent of CSS, however, there is no reason to stick to them. CSS is faster, more reliable and it offers many more features.

19. Make sure users can search the whole website: there is a reason why search engines revolutionized the Internet. You probably guessed it, because they make it very easy to find the information we are looking for. Do not neglect this on your site.

20. Avoid “drop down” menus: the user should be able to see all the navigation options straight way. Using “drop down” menus might confuse things and hide the information the reader was actually looking for.

21. Use text navigation: text navigation is not only faster but it is also more reliable. Some users, for instance, browse the Internet with images turned off.

22. If you are linking to PDF files disclose it: ever clicked on a link only to see your browser freezing while Acrobat Reader launches to open that (unrequested) PDF file? That is pretty annoying so make sure to explicit links pointing to PDF files so that users can handle them properly.

23. Do not confuse the visitor with many versions: avoid confusing the visitor with too many versions of your website. What bandwidth do I prefer? 56Kbps? 128Kbps? Flash or HTML? Man, just give me the content!

24. Do not blend advertising inside the content: blending advertising like Adsense units inside your content might increase your click-through rate on the short term. Over the long run, however, this will reduce your readership base. An annoyed visitor is a lost visitor.

25. Use a simple navigation structure: sometimes less is more. This rule usually applies to people and choices. Make sure that your website has a single, clear navigation structure. The last thing you want is to confuse the reader regarding where he should go to find the information he is looking for.

26. Avoid “intros”: do not force the user to watch or read something before he can access to the real content. This is plain annoying, and he will stay only if what you have to offer is really unique.

27. Do not use FrontPage: this point extends to other cheap HTML editors. While they appear to make web design easier, the output will be a poorly crafted code, incompatible with different browsers and with several bugs.

28. Make sure your website is cross-browser compatible: not all browsers are created equal, and not all of them interpret CSS and other languages on the same way. Like it or not, you will need to make your website compatible with the most used browsers on the market, else you will lose readers over the long term. You might need some expert help to achieve this.

29. Make sure to include anchor text on links: I confess I used to do that mistake until some time ago. It is easier to tell people to “click here”. But this is not efficient. Make sure to include a relevant anchor text on your links. It will ensure that the reader knows where he is going to if he clicks the link, and it will also create SEO benefits for the external site where the link is pointing.

30. Do not cloak links: apart from having a clear anchor text, the user must also be able to see where the link is pointing on the status bar of his browser. If you cloak your links (either because they are affiliate ones or due to other reasons) your site will lose credibility.

31. Make links visible: the visitor should be able to recognize what is clickable and what is not, easily. Make sure that your links have a contrasting color (the standard blue color is the optimal most of the times). Possibly also make them underlined.

32. Do not underline or color normal text: do not underline normal text unless absolutely necessary. Just as users need to recognize links easily, they should not get the idea that something is clickable when in reality it is not.

33. Make clicked links change color: this point is very important for the usability of your website. Clicked links that change color help the user to locate himself more easily around your site, making sure that he will not end up visiting the same pages unintentionally.

34. Do not use animated GIFs: unless you have advertising banners that require animation, avoid animated GIFs. They make a site look unprofessional and detract the attention from the content.

35. Make sure to use the ALT and TITLE attributes for images: apart from having SEO benefits the ALT and TITLE attributes for images will play an important role for blind users.

36. Do not use harsh colors: if the user is getting a headache after visiting your site for 10 consecutive minutes, you probably should pick a better color scheme. Design the color palette around your objectives (i.e. deliver a mood, let the user focus on the content, etc.).

37. Do not use pop ups: this point refers to pop ups of any kind. Even user requested pop ups are a bad idea given the increasing amount of pop blockers out there.

38. Avoid Javascript links: those links execute a small Javascript when the user clicks on them. Stay away from them since they often create problems for the user.

39. Include functional links on your footer: people are used to scrolling down to the footer of a website if they are not finding a specific information. At the very least you want to include a link to the Homepage and possibly a link to the “Contact Us” page.

40. Avoid long pages: guess what, if the user needs to scroll down forever in order to read your content he will probably just skip it altogether. If that is the case with your website make it shorter and improve the navigation structure.

41. No horizontal scrolling: while some vertical scrolling is tolerable, the same can not be said about horizontal scrolling. The most used screen resolution nowadays is 1024 x 768 pixels, so make sure that your website fits inside it.

42. No spelling or grammatical mistakes: this is not a web design mistake, but it is one of the most important factors affecting the overall quality of a website. Make sure that your links and texts do not contain spelling or grammatical mistakes.

43. If you use CAPTCHA make sure the letters are readable: several sites use CAPTCHA filters as a method of reducing spam on comments or on registration forms. There is just one problem with it, most of the times the user needs to call his whole family to decipher the letters.

Start Your Free Trial Today!


Browse all articles on the Blog Design category or check the recommended articles for you below:

589 Responses to “43 Web Design Mistakes You Should Avoid”

  • nick

    wrong on number 40. Getting users to click through next page, then next page and so on is a good way to lose users.

    Ask any competent marketing person, long sales copy trumps short sales copy every time.

  • Daniel

    Cookie, I agree. This would be our tip #63!

  • Cookie

    Here’s another one: don’t use visitor counters. Instead, use an invisible tracking system like Google Analytics. People couldn’t care less that they are visitor number 8541371!

  • Prateek

    Tip 38 is hard to follow if you are making AJAX websites 🙁

  • Prateek

    Tip 38

  • Daniel

    ta, the one you mentioned is true. Additionally bear in mind that almost 12% of the Internet users (as of 2006) do not have Java compatiblity on their browsers.

  • ta

    38. Avoid Javascript linkes

    What problems?

    I can come up with one
    Expirienced users use the shift or controll key(Windows) to open a new window/tab. If the purpose is to execute Javascript code, use input-button element.

  • Yuri van Geest

    Hi,

    Good article and good discussion. Some basic stuff but it is always good to remember the basics once in a while 🙂 And I loved tip nr. 55 🙂

    My 2 cents (of key design mistakes):

    56. Neglecting the standards for Sitemap structure and XML (SEO and usability impact)

    57. Neglecting the standards for Web Accessability

    58. Subjectifying discussion on priorities on webpages instead of using user centered design techniques like online personas+scenarios, Google AdWords -> free keyword selector tool (objectifies the selected content in every webpage), web surveys on your site, webstats on your site, eye-tracking studies, benchmarkting (a.o. award winning sites), industry level web design research etc. Neglecting market data in favor of internal politics and strategy can be huge mistake in my view.

    59. Neglecting the importance of a Glossary in the header or footer (good for SEO and usability)

    60. Ignoring the use of trigger words throughout the site. The trigger words should be based on analysis of keyword selector tools from AdWords, Yahoo Search etc.

    61. Offering standard FAQ pages while ignoring the possibilities of offering context- or webpage-specific FAQs throughout the whole website. Better for usability experience.

    62. Designing without taking mobile access from smart phones, PDAs etc. into account.

    I agree with most points related to JavaScript, Flash (and RIA/Ajax/Flex). The trouble is that it is a mixed picture popping up. Flash and RIA can enhance the user experience but at the same it can be a hassle in terms of measureability, maintenance, costs, accessability (W3C) as well as SEO impact. Of course, there are advancements regarding Flash and RIA in these respective fields but still… a critical view is needed here in my view.

  • Daniel

    Tim, yeah sometimes it is difficult to mention that rule. I could break the post into smaller parts, but this would also annoy the readers.

    Usually think that blogs are a kind of exception for that rule due to the large amoung of comments they get.

  • Daniel

    Adam, it is always a good idea to get back to the basics. If you have “mordern” web design mistakes feel free to share them :).

    Thanks for the comment anyway.

  • Rikki

    Dont agree on point 40 at all.

    I HATE pages that have one paragraph then links to the next 28 pages. It could all be done in 3 and save dicking around when I try to print things.

  • mostafa

    great article wow

    this site changed my life

  • Adam

    Most of these are crap and way out-dated!

    First off; blinking text is long dead and goes without saying. Just ask Lou Montulli.

    Flash has smaller file sizes than jpgs.

    Do not use music, period??? What??? What if its a site for a rock band? Its silly to offer such broad rules with no thought.

    Badges are cool, leave badges alone. And what legally has to put the badges of there suppliers?

    And some more, but I dont have time.

  • Vent Swap

    Great list and I really wonder what fonts would you guys recommend?

  • Rex

    Certainly a nice list, I think i have used and recomended them to my web production clients but not listed them so well before.

    Not too sure about your web editor comment, hey develop a web in frontpage, test it on multiple browsers b4 release. At least Frontpage has a spell checker and people in the stell/fabrication and Nursery (plants) sectors may be able to get a half decent web site running.

    Which brings me to AmeyJah, by all means let us know how you have been burnt by your inability to spell check your own web sites and then make at least two spelling and two gramatical errors in your comment, Doh!

    Thanks for the entertainment, Rex.

  • Tim

    Is statement in point 41. “while some vertical scrolling is tolerable” meant to be ironic? This page with its’ included comments is quite possibly the longest in internet history (over exaggeration).

    I find nothing wrong with long pages as if the information is of interest. Sometimes having multiple pages for articles just adds more messy navigation.

    Great list though!

  • Ben Evert

    Excellent list. I can’t believe that people still put flash, music etc on their sites. It annoyed me years ago and still annoys me today. And, thanks to the additions from the other readers. Keep up the good work.

  • Daniel

    Bret, yeah CAPTCHA filters are annoying, in fact my advice would be to remove them altogether.

  • AL

    Hey no one told me porn sites are becoming more usable!

    Later, gotta check ’em out 🙂

  • Bret

    Great post. I especially like the points about “no music” and making captcha readable. I don’t know how many times I’ve entered the wrong captcha word just because I couldn’t read it. And music on a site…let’s just say it’s a sure sign of an amateur: “Hey! Look what I learned how to do!”

  • Cucirca

    Great tips Daniel 😉 I will have to apply some of them 🙂

  • Webbie

    This should be like our 10 43 55… Commandments.
    Good stuff.

  • basketer

    Hey Daniel,

    this post is a great confidence booster especially after I realized that I was doing just one mistake out of the 43 you had mentioned.

    The list seems pretty comprehensive but I think we can have a few more additions, as other people have already suggested.

    Actually, this can be a great meme if you are looking for one.

    Also, I do not agree with a couple of points you mentioned. Its alright catering to the needs of your visitors, but I think the readers should be expected to get a bare minimum of resources with their browsers.

    Thats why the JS points are inapplicable according to me. Its high time they get that.

  • Roberto Alamos

    55. When possible use ’em’ instead of ‘px’ or % as a measure in your CSS. It grows (or shrinks) proportionally if your user increases (or decreases) his browser’s font sizes. That’s because em’s size is relative to the font size of parent elements while pixels and percentages are relative to screen’s size.

  • Daniel

    Amey, good ones.

    I need to apply number 54 :).

  • AmeyJah

    hey, i agree with you.
    Since we should not annoy reader it is better to place it at top (with left alignment) the best and wroked for me for my wordpress blog.
    here are some suggestion from my side:

    52. check your spelling and grammar ( don’t laugh it’s fact, and i have suffered a lot from due to this)

    53. try to avoid useless wordpress plugings so that your page can load faster. ( it’s not necessary to have avatar for comment section)

    54. Most important: differentiate between your and readers comment. it can bee done by adjusting background color or text color)

  • Daniel

    Rishi, we had a discussion sometime ago about HTML editors, check it out:

  • Rishi

    Hey Daniel,
    Really cool tips. I follow only 41 of them and now will follow all 43.

    And Kris, I agree with you on the theme point, my recommendation is always go for a custom theme design maybe yourself, any designer or any generator and think 10 times to change it.

    And Daniel, which editor do you prefer? I used to have FrontPage but now using Nvu. Any recommendation to your readers about an editor?

  • Daniel

    Kris, I agree with not using hidden text and being consistent with your theme.

    The other points are more Search Engine Optimization than design, but yeah they are useful also.

    • key ödemeleri

      Great post. I especially like the points about “no music” and making captcha readable. I don’t know how many times I’ve entered the wrong captcha word just because I couldn’t read it. And music on a site…let’s just say it’s a sure sign of an amateur: “Hey! Look what I learned how to do!”

  • kris

    Hi,

    A few more..

    44.Do not use hidden text.

    45.Do not link to banned sites. Google is strict on this.

    The ones you can do…

    46.Place your ads at the top. They tend to get clicked more. The ones on the right are next in line to get clicked.

    47.Get listed in dmoz and yahoo.com. Google specifically mentions this.

    48.Get into adwords. The tools given are a great help.

    49.Try tools at seomoz.org. They are the best for picking up keywords from your site.

    50.Choose a specific theme for your website. Do not alter the theme midway. If you have multiple themes, choose anothere website. Of course, you have to do this considering the monetization aspects.

    51.Start a blog. Keep posting one article a day.

Comments are closed.