Jakob Nielsen's Alertbox inShare127
Top 10 Mistakes in Web Design
Summary:
The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.
Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2011.) 
1. Bad Search
Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are
particularly difficult for elderly users, but they hurt everybody.
A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list — especially for important queries, such as the names of your products.
Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that's what users are looking for.
2. PDF Files for Online Reading
Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts.
Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.
PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.
> Detailed discussion of why PDF is bad for online reading
3. Not Changing the Color of Visited Links
A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.
Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.
These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.
> Usability implications of changing link colors
> Guidelines for showing links 
4. Non-Scannable Text
A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.
Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:
- subheads
- bulleted lists
- highlighted keywords
- short paragraphs
- the inverted pyramid
- a simple writing style, and
- de-fluffed language devoid of marketese.
> Eyetracking of reading patterns
5. Fixed Font Size
CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is
tiny, reducing readability significantly for most people over the age of 40.
Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms — not as an absolute number of pixels.
6. Page Titles With Low Search Engine Visibility
Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.
Summary of Article by Eric Cleveland
Comment 1 Bad Search:
Searching on the internet can be a frustration to many people that are looking for something specific. I remember when I first started searching online, I just typed a word in the search field and hit enter and the results of my search returned. The hardest part now scrolling through all the returned information to determine what would be the best link to click on to find what I am looking for. This could be a very time consuming ordeal search through all this data and even then not find what you want exactly. Experience can help, and a little training on search options are very helpful leading to better results.
Comment on 2 PDF files for online reading:
Technology is helping when it comes to opening and reading or viewing PDF files online. I don't think that is as big of an issue these days unless you’re using some old computer or still on dial up for your connection speed. These newer operating systems view many different files formats pretty easily with little effort and that includes viewing PDF files without them even opening in Acrobat reader to view them.
Comment 3 not changing the color of visited links:
Visited links changing color after you visited them is a nice function and it can help you to know where you have been and what haven't you click on yet. I really like when you click on a navigation tab and it is highlighted showing you what page you are currently on. Labeling web pages with clear names that are easy to find on the web page that you can quickly glance and see where you are and how to get out and back to the home page or other options. Is there a way to reset the highlighted links so they are not highlighted when you return to the web site or is it better to have them remain highlighted every time you return to the web site or when you log off they reset?
Comments 7 on anything that looks like:
Advertisements that keep getting in the way of searching the web page can frustrate most people; they usually will start to have less visitors use their web site. If I am searching for music or videos I want to view, then putting up with a few advertisements every once and while I can put up with. My favorite web site says I can skip this advertisement in a few seconds after it starts, I believe this is a great option for those whom want to finish the advertisement and for those that have seen it and want to move on.
Comment 9 opening new browser windows:
I really like when you click on a link and it opens a new window instead of taking you from the web page your currently on. Setting up your browser to open a new tab when you click on a link keeps your current web page open and opens the path to the link, that is easily closed and your right back where you started.
Comment 10 not answering users’ questions:
This is one of my biggest frustrations of web site that clearly don't identify themselves and their purpose of what they can offer me. I really dislike when I see something and I want and I can't find a price or you have to fill out personal information before you get an answer. Usually I have left the web page and moving on to other options.
tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it's truly <a href="http://www.useit.com/alertbox/980906.html" title="Alertbox: Microcontent - How to Write Headlines, Page Titles, and Subject Lines" class="old">microcontent</a>. </p><p> Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W." </p><p> For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users. </p><p> <a href="http://www.useit.com/alertbox/20010722.html" title="Alertbox: Tagline Blues: What's the Site About?">Taglines on homepages</a> are a related subject: they also need to be short and quickly communicate the purpose of the site. </p><h2>7. Anything That Looks Like an Advertisement</h2> <strong>Selective attention</strong> is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being <a href="http://www.useit.com/alertbox/20030428.html" title="Alertbox: Will Plain-Text Ads Continue to Rule?">text-only search-engine ads</a>.) <p> Unfortunately, users also <a href="http://www.useit.com/alertbox/fancy-formatting.html" title="Alertbox: Fancy Formatting, Fancy Words = Looks Like a Promotion = Ignored" class="old">ignore legitimate design elements that look like</a> prevalent forms of advertising. After all, when you <em>ignore</em> something, you don't study it in detail to find out what it is. </p><p> Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules: </p><ul><li><a href="http://www.useit.com/alertbox/banner-blindness.html" title="Alertbox: Banner Blindness - Old and New Findings" class="old"><strong>banner blindness</strong></a> means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page </li><li><strong>animation avoidance</strong> makes users ignore areas with blinking or flashing text or other aggressive animations </li><li><strong>pop-up purges</strong> mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph). </li></ul> <h2>8. Violating Design Conventions</h2> <strong>Consistency</strong> is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they <em>know</em> what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's <em>good</em>. <p> The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky. </p><p> <strong>Jakob's Law of the Web User Experience</strong> states that "users spend most of their time on <em>other</em> websites." </p><p> This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave. </p><h2>9. Opening New Browser Windows</h2> Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). <p> Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the <strong>user-hostile message implied in taking over the user's machine</strong>, the strategy is self-defeating since it disables the <em>Back</em> button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out <em>Back</em> button. </p><p> Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command — assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior. <img src="http://www.useit.com/alertbox/20021223_01_mistake.gif" style="float: right; padding-left: 2ex; padding-top: 3ex; padding-bottom: 4ex" alt="Cartoon - woman (at car dealership): 'How much is it with automatic transmission?' - sleazy salesman: 'I'll give you a hint - it's an EVEN number...'" height="450" width="340"> </p><h2>10. Not Answering Users' Questions</h2> Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish — maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for. <p> Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there. </p><p> The worst example of not answering users' questions is to <strong>avoid listing the price</strong> of products and services. No B2C ecommerce site would make this mistake, but it's rife in <a href="http://www.useit.com/alertbox/b2b.html" title="Alertbox: Business-to-business website usability" class="old">B2B</a>, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking <em>"Where's the price?"</em> while tearing their hair out. </p><p> Even B2C sites often make the associated mistake of forgetting prices in product lists, such as <a href="http://www.nngroup.com/reports/ecommerce/categorypages.html" title="Nielsen Norman Group report: 28 Design Guidelines for Category Pages on e-commerce sites" class="new">category pages</a> or <a href="http://www.nngroup.com/reports/ecommerce/search.html" title="Nielsen Norman Group report: 29 Design Guidelines for Search" class="new">search results</a>. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones. </p><h2>Other Top-10 Lists</h2> <ul><li><a href="http://www.useit.com/alertbox/high-roi.html">High-Profit Redesign Priorities</a> </li><li><a href="http://www.useit.com/alertbox/film-ui-bloopers.html">Usability in the Movies</a> — Top 10 Bloopers </li><li><a href="http://www.useit.com/alertbox/20031110.html" title="Alertbox Nov. 2003" class="old">Most violated homepage guidelines</a> </li><li><a href="http://www.useit.com/alertbox/20020512.html" title="Alertbox May 2002" class="old">Top homepage usability guidelines</a> </li><li><a href="http://www.useit.com/alertbox/991003.html" title="Alertbox Oct. 1999" class="old">Good deeds in Web design</a> </li><li><a href="http://www.useit.com/alertbox/designmistakes.html" title="Alertbox Oct. 2005" class="old">Web design mistakes</a> (2005) </li><li><a href="http://www.useit.com/alertbox/20031222.html" title="Alertbox Dec. 2003" class="old">Web design mistakes</a> (2003) </li><li><a href="http://www.useit.com/alertbox/20021223.html" title="Alertbox Dec. 2002" class="old">Web design mistakes</a> (2002)<br>With cartoons. </li><li><a href="http://www.useit.com/alertbox/990530.html" title="Alertbox May 1999" class="old">Web design mistakes</a> (1999) </li><li><a href="http://www.useit.com/alertbox/9605a.html" title="Alertbox May 1996" class="old">Web design mistakes</a> (1996)<br>My first list. Luckily, many of these mistakes have been fixed by now. </li><li><a href="http://www.useit.com/alertbox/application-mistakes.html" title="Alertbox Feb. 2008" class="old">Application design mistakes</a> </li><li><a href="http://www.useit.com/alertbox/ia-mistakes.html" title="Alertbox" class="old">Information Architecture (IA) mistakes</a> </li></ul> See also: <a href="http://www.useit.com/alertbox/20030825.html" title="Alertbox" class="old">Usability 101: Introduction to Usability</a> <p> I'll present my newest usability guidelines in the tutorial on <a href="http://www.nngroup.com/events/tutorials/usability.html" title="Nielsen Norman Group: conference tutorial outline" class="new">Fundamental Guidelines for Web Usability</a> at the annual <a href="http://www.nngroup.com/events/" title="Nielsen Norman Group: full conference program with detailed course descriptions of usability training tutorials" class="new">Usability Week conference</a>. </p><p> The conference also has full-day seminars on <a href="http://www.nngroup.com/events/tutorials/design_patterns.html" title="Nielsen Norman Group training seminar: detailed course description" class="new">Emerging Patterns for Web Design</a> and <a href="http://www.nngroup.com/events/tutorials/web_design.html" title="Nielsen Norman Group Usability Week conference: detailed tutorial description and course outline" class="new">Web Page Design: The Anatomy of High-Performing Web Pages</a>.<br></p><p><br></p><p>Summary of Article by Eric Cleveland</p><p><span style="font-style: italic; color: rgb(51, 0, 153);">Comment 1 Bad Search:</span><br>Searching on the internet can be a frustration to many people that are looking for something specific. I remember when first searching online, just type a word in the search field and hit enter and something returns. The hardest part is now scrolling through all the returned information to determine what would be the best link to click on to find what your looking for. I don't thing that is a easy answer and this can be very time consuming. Experience can help, and a little training on search options are very helpful leading to better results.<span style="font-style: italic;"><span style="font-weight: bold;"><br></span></span></p><p><span style="font-style: italic; color: rgb(51, 0, 153);">Comment on 2 PDF files for online reading:</span><br>Technology is helping when it comes to opening and reading or viewing PDF files online. I don't think that is as big of an issues these days unless your using some old computer or still on dial up for your connection speed. These newer operating systems view many different files formats pretty easy with little effort and that includes viewing PDF files without them even opening in Acrobat reader to view them.</p><p><span style="font-style: italic; color: rgb(51, 0, 153);">Comment 9 opening new browser windows:<br></span><span style="color: rgb(0, 0, 0);">I really like when you click on a link and it opens a new window instead of taking you from the web page your currently on. Setting up your browser to open a new tab when you click on a link keeps your current web page open and opens the path to the link, that is easly closed and your right back where you started.</span><span style="font-style: italic; color: rgb(51, 0, 153);"></span></p><p><span style="font-style: italic; color: rgb(51, 0, 153);">Comment 10 not answering users questions:<br></span><span style="color: rgb(0, 0, 0);">This is one of my biggest frustrations of web site that clearly don't identify them selves and there purpose of what they can offer me. I really dislike when I see something and I want and I can't find a price or you have to fill out personal information before you get an answer. Usually I have left the web page and moving on to other options.</span><span style="font-style: italic; color: rgb(51, 0, 153);"></span></p><p><span style="font-style: italic; color: rgb(51, 0, 153);">Comments 7 on anything that looks like a advertisement:<br></span><span style="color: rgb(0, 0, 0);">Advertisements that keep getting in the way of searching the web page can frustrate most people, they usually will start to have less visitors use there site. If I am searching for music or videos I want to view, then putting up with a few advertisements every once and while I can put up with. My favorite web site says I can skip this advertisement in a few seconds after it starts, I believe this is a great option for those whom want to finish the advertisement and for those that have seen it and want to move on.</span><span style="font-style: italic; color: rgb(51, 0, 153);"></span></p><p><span style="font-style: italic; color: rgb(51, 0, 153);">Comment 3 not changing the color of visited links:<br></span><span style="color: rgb(0, 0, 0);">Visited links changing color after you visited them is a nice function and it can help you to know where you have been and what haven't you click on yet. I really like when you click on a navigation tab and it is highlighted showing you what page you are currently on. Labeling web pages with clear names that are easy to find on the web page that you can quickly glance and see where you are and how to get out and back to the home page or other options.</span><span style="font-style: italic; color: rgb(51, 0, 153);"> <span style="color: rgb(0, 0, 0);">Is there a way to reset the highlighted links so they are not highlighted when you return to the web site or is it better to have them remain highlighted every time you return to the web site or when you log off they reset ?</span><br></span></p></div>
