WordPress.com



Top 10 Mistakes in Web Design Jakob Nielsen on January 1, 2011Summary: The ten most egregious (flagrant) 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 SearchOverly 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 ReadingUsers 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 reading3. Not Changing the Color of Visited LinksA 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 TextA 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:subheadsbulleted listshighlighted keywords short paragraphsthe inverted pyramida simple writing style, andde-fluffed language devoid of marketese.> Eyetracking of reading patterns 5. Fixed Font SizeCSS 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 VisibilitySearch 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.The page title is contained within the HTML <title> 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 microcontent.Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin 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."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.Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.7. Anything That Looks Like an AdvertisementSelective attention 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 text-only search-engine ads.)Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.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:banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the pageanimation avoidance makes users ignore areas with blinking or flashing text or other aggressive animationspop-up purges 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).8. Violating Design ConventionsConsistency 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 know 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 good.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.Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."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.9. Opening New Browser WindowsOpening 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).Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back 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 Back button.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. 10. Not Answering Users' QuestionsUsers 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.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.The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, 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 hours of video of users asking "Where's the price?" while tearing their hair out.Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant 10 Web Design Mistakes of 2005 Jakob Nielsen on October 3, 2005Summary: The oldies continue to be goodies -- or rather, baddies -- in the list of design stupidities that irked users the most in 2005.For this year's list of worst design mistakes, I decided to try something new: I asked readers of my newsletter?to nominate the usability problems they found the most irritating.I assumed that asking for reader input would highlight many issues that I hadn't noticed in my own user testing. This was not the case. Instead, all of the top thirty problems were covered in existing usability guidelines. Thus, when you read this year's top ten list, you'll probably say, "Yes, I've heard about this before." That's okay.There's value in reminding ourselves of past findings and raising their priority on the agenda of things to be fixed. Because these mistakes continue to be so common, it makes sense that people continue to complain about them the most.1. Legibility ProblemsBad fonts won the vote by a landslide, getting almost twice as many votes as the #2 mistake. About two-thirds of the voters complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background.For more info on resizable text and readability, see my 2002 column, " HYPERLINK "" \o "Alertbox" Let Users Control Font Size."2. Non-Standard LinksFollowing are the five main guidelines for links:Make obvious what's clickable: for text links, use colored, underlined text (and don't underline non-link text).Differentiate visited and unvisited links.Explain what users will find at the other end of the link, and include some of the key information-carrying terms in the anchor text itself to enhance scannability and search engine optimization (SEO). Don't use "click here" or other non-descriptive link text.Avoid JavaScript or other fancy techniques that break standard interaction techniques for dealing with links.In particular, don't open pages in new windows ( HYPERLINK "" \o "Alertbox: Open New Windows for PDF and other Non-Web Documents" except for PDF files?and such).Links are the Web's number one interaction element. Violating common expectations for how links work is a sure way to confuse and delay users, and might prevent them from being able to use your site.3. FlashI view it as a personal failure that Flash collected the bronze medal for annoyance. It's been three years since I launched a major effort to remedy Flash problems and published the guidelines for using Flash appropriately. When I spoke at the main Flash developer conference, almost everybody agreed that past excesses should be abandoned and that Flash's future was in providing useful user interfaces.Despite such good intentions, most of the Flash that Web users encounter each day is bad Flash?with no purpose beyond annoying people. The one bright point is that splash screens and Flash intros are almost extinct. They are so bad that even the most clueless Web designers won't recommend them, even though a few (even more clueless) clients continue to request them.Flash is a programming environment and should be used to offer users additional power and features that are unavailable from a static page. Flash should not be used to jazz up a page. If your content is boring, rewrite text to make it more compelling and hire a professional photographer to shoot better photos. Don't make your pages move. It doesn't increase users' attention, it drives them away; most people equate animated content with useless content.Using Flash for navigation is almost as bad. People prefer predictable navigation and static menus.4. Content That's Not Written for the WebWriting for the Web?means making contentshort,scannable, andto the point (rather than full of fluffy marketese).Web content should alsoanswer users' questions anduse common language rather than made-up terms (this also improves search engine visibility, since users search using their own words, not yours).5. Bad SearchEverything else on this list is pretty easy to get right, but unfortunately fixing search?requires considerable work and an investment in better software. It's worth doing, though, because search is a fundamental component of the Web user experience?and is getting more important every year.6. Browser IncompatibilityI admit it: during my spring 2004 seminars, I downgraded cross-platform compatibility to a one-star guideline (that is, "worth thinking about if you have extra project time, but not a priority"). At that time, almost everybody used Internet Explorer and the business case for supporting other browsers was getting pretty tough to defend on an ROI basis.Today, however, enough people use Firefox (and various other minority browsers, like Opera and Safari) that the business case is back: don't turn away customers just because they prefer a different platform.7. Cumbersome FormsPeople complained about numerous form-related problems. The basic issue? Forms are used too often on the Web and tend to be too big, featuring too many unnecessary questions and options. In the long run, we need more of an applications metaphor for Internet interaction design. For now, users are confronted by numerous forms and we must make each encounter as smooth as possible. There are five basic guidelines to this end:Cut any questions that are not needed. For example, do you really need a salutation (Mr/Ms/Mrs/Miss/etc.)?Don't make fields mandatory unless they truly are.Support autofill to the max by avoiding unusual field labels (just use Name, Address, etc.).Set the keyboard focus to the first field when the form is displayed. This saves a click.Allow flexible input of phone numbers, credit card numbers, and the like. It's easy to have the computer eliminate characters like parentheses and extra spaces. This is particularly important for elderly users, who tend to suffer when sites require data entry in unfamiliar formats. Why lose orders because a user prefers to enter a credit card number in nicely chunked, four-digit groups rather than an undifferentiated, error-prone blob of sixteen digits?Forms that violate guidelines for internationalization ?got dinged by many overseas users. If entering a Canadian postal code generates an error message, you shouldn't be surprised if you get very little business from Canada.8. No Contact Information or Other Company InfoEven though phone numbers and email addresses are the most requested forms of contact info, having a physical mailing address on the site might be more important because it's one of the key credibility markers. A company with no address is not one you want to give money to.For advice on how to best present contact info, see our usability studies of "About Us" pages?and store finders and locators.9. Frozen Layouts with Fixed Page WidthsComplaints here fell into two categories:On big monitors, websites are difficult to use if they don't resize with the window. Conversely, if users have a small window and a page doesn't use a liquid layout, it triggers insufferable horizontal scrolling.The rightmost part of a page is cut off when printing a frozen page. This is especially true for Europeans, who use narrower paper (A4) than Americans.Font sizes are a related issue. Assuming a site doesn't commit mistake #1 and freeze the fonts, users with high-resolution monitors often bump up the font size. However, if they also want to bump up the window size to make the bigger text more readable, a frozen layout thwarts their efforts.The very worst offenders are sites that freeze both the width and height of the viewport when displaying information in a pop-up window. Pop-ups are a mistake in their own right. If you must use them, don't force users to read in a tiny peephole. At an absolute minimum, let users resize any new windows.10. Inadequate Photo EnlargementAccording to the vote count, #10 should really be about pop-ups, but I've written a lot about them already (most recently when they were rated the #1 most hated advertising technique). Instead, I want to feature here a problem that got a bit fewer votes, but illustrates a deeper point.One of the long-standing guidelines for e-commerce usability?is to offer users the ability to enlarge product photos for a close-up view. Seeing a tiny detail or assessing a texture can give shoppers the confidence they need to place an order online.It's gratifying that most sites obey this guideline and offer zoom features, often denoted by a magnifying glass icon. But many sites implement the feature wrong.The worst mistake is when a user clicks the "enlarge photo" button and the site simply displays the same photo. It's always a mistake to offer no-ops that do nothing when clicked. Such do-nothing links and buttons add clutter, waste time, and increase user confusion: What happened? Did I do something wrong? (An even more common no-op mistake is to have a link on the homepage that links to the homepage itself. This was #10 on the list of most violated homepage guidelines.)Another mistake here that's almost as bad is when sites let users enlarge photos, but only by a fraction. When users ask for a big photo, show them a big photo. It's often best to offer an enlargement that fills up the most common screen size used by your customers (1024x768 for B2C sites, at the time of this writing). Other times, this is insufficient, and it's better to offer a range of close-ups to give users the details they need without requiring them to scroll a too-large photo.Yes, initial pages should use small photos to avoid looking fluffy. Yes, you want to be aware of download times and watch your pageweight budget. Even in this broadband age, slow response times were #15 on the full list of design mistakes. But, when users explicitly ask for larger pictures, they're willing to wait for them to download — unless that wait produces a mid-sized photo that lacks the details they need to make a purchasing decision.Back to Basics in Web DesignThis year's list of top problems clearly proves the need to get back to Web design basics. There's much talk about new fancy "Web 2.0" features on the Internet industry's mailing lists and websites, as well as at conferences. But users don't care about technology and don't especially want new features. They just want quality improvements in the basics :text they can read;content that answers their questions;navigation and search that help them find what they want;short and simple forms (streamlined registration, checkout, and other workflow); andno bugs, typos, or corrupted data; no linkrot; no outdated content.Anytime you feel tempted to add a new feature or advanced technology to your site, first consider whether you would get a higher ROI?by spending the resources on polishing the quality of what you already have. Most companies, e-commerce sites, government agencies, and nonprofit organizations?would contribute more to their website's business goals with better headlines than with any new technology (aside from a better search engine, of course).Top 10 Web Design Mistakes of 2003 Jakob Nielsen on December 22, 2003Summary: Sites are getting better at using minimalist design, maintaining archives, and offering comprehensive services. However, these advances entail their own usability problems, as several prominent mistakes from 2003 show.Here's my list of ten ways that websites have been particularly annoying recently.1. Unclear Statement of PurposeMany companies, particularly in the high tech industry, use vague or generic language to describe their purpose. Obscuring this basic fact makes it much harder for users to interpret a website's information and services.A strong mental model can grow from small seeds, as each additional design element adds to the user's existing understanding of a site. However, many sites create blurry mental models in users' minds because they fail to offer the one hard fact that users need to place other facts in their proper context.2. New URLs for Archived ContentArchives add substantial value to a site with very little extra effort. Although more and more sites are archiving old content, most sites still fail to maintain good archives. Some sites treat archives as a separate site area, assigning pages new URLs when they move them from the main area into the archive.Changing the URL when archiving content causes linkrot. It also makes other sites reluctant to link to you. Although sites might consider linking to a current article, if they've been burned by linkrot in the past, they'll often pass you by because they don't want to bother with having to update their own pages when you move yours.3. Undated ContentWithout dates on articles, press releases, and other content, users have no idea whether the information is current or obsolete. It's great to keep content in archives. The Alertbox, for example, gets 80% of its readership for old columns, which readers continue to find useful. But some facts and recommendations are strongly date-dependent, such as when I recommend using a certain version of a software package for another two years. Obviously, I mean two years from the day the article was written; if readers can't see the date, they won't know how to follow the recommendation.A user confronted a similar error in our recent test of how investors and business journalists use the investor relations areas?of corporate websites. The user found a news item through a site's search engine and used the item to evaluate the company's current business prospects. Fine, except that the item was a few years old. The search engine had listed a misleading date for the article -- probably the date that the file was moved or had a typo fixed.The search engine on my own site has the same problem: it relies on the operating system's file-modification date rather than the date the content was written. As a result, I've shut off the date feature in the search result listings. Such dates can be very useful, but they do more damage than good if users can't trust them. Of course, the ideal solution is to get a content management system that feeds the authoring date to the search engine. Any big site with an IT staff should do so.4. Small Thumbnail Images of Big, Detailed PhotosIt's great that websites are now using smaller pictures. Avoiding the bloated designs of the past decreases download time and increases information richness. It's also good when sites link small pictures to bigger pictures, so users have the option of seeing the image in more detail.The main problem here is that websites typically produce small images by simply scaling down bigger images. If an original photo has a lot of intricate detail, the thumbnail is often incomprehensible.??? The left photo is from the site. It shows the U.S. President, the Secretary of the Interior, and the Director of the National Park Service walking in the Santa Monica mountains. If I hadn't told you that, you wouldn't have known by looking at the thumbnail: It's just a photo of three people. You can't even really tell that they're in a park, let alone which one.The right photo is from , which usually does a great job with small images on the homepage. This photo illustrated a story about flooding; in this case, you can clearly see what's going on, even though the image is only 65 x 49 pixels.When using photos on the Web: Include fewer people and objects, in less complicated settings than you would for photos intended for printEmphasize close-up shots with clean backgroundsUse relevance-enhanced image reduction?when preparing small photos from big ones. Don't just resize; first crop the image to focus on a salient and simple element5. Overly detailed ALT TextMany sites have begun paying attention to users with disabilities and are following accessibility guidelines, such as including ALT texts for images.Unfortunately, some sites don't realize that ALT text is a user interface element, not a statement of political correctness. ALT text should help blind users (and others who can't see images) navigate and operate the site. The text should describe the image's meaning for the interaction and what users need to know about the image to use the site most effectively. There is no need to describe irrelevant visual details.For example, I came across a site that used the following ALT text for its logo: "Link to home page using the IDEAS logo: two swooshes surround ideas and a sun is rising in the background." It might be reasonable to have a textual description of the logo design somewhere on the site for blind users who are curious about how it looks, but there is no reason for every user's screen reader to announce the number of swooshes in the logo on every single page view.It takes a screen reader a long time to read out nineteen words, and the excessive description makes it harder for users to pick out the salient information: that the graphic is a link to the homepage.Short is good when writing for the Web; it's even better when writing for screen readers.6. No "What-If" SupportComparing and choosing?between alternatives is the basis for most critical Web tasks, yet most websites don't support users who want to consider alternatives.What if I want to travel out Sunday instead of Saturday? How would that affect the price of my airline ticket? On most travel sites, the only way to answer this question is to start again from the first screen and plan an entirely new trip, losing all the work required to build your first itinerary.What if I want a color copier instead of a monochrome one, but I'm satisfied with all the other attributes of the monochrome copier I'm currently viewing? Can I navigate by attribute and change only one parameter? Usually not.Some websites do let users pick out a few products and view a comparison table, but such tables typically have low usability and don't highlight the most important differences between products.7. Long Lists that Can't Be Winnowed by AttributesIt used to be that Web sites offered one or two things. Now it's common to find sites with thousands or millions of items. Wonderful, but that means that item listings are often very long and hard to use.One of the main usability guidelines for category pages?is to let users winnow items according to attributes of interest. To "winnow" a list basically means to filter out elements that don't meet specified criteria, leaving a shorter list that's easier to manage and understand.Useful winnowing requires four things.The site must support winnowing in the first place, and most don't.The winnowing attributes must make sense to users rather than being highly technical or company-internal (say, using part numbers, even though they may be offered for search if customers know exactly what they want).Criteria should differentiate products of interest from those the user wants to ignore. Examples: Show only products that can be delivered by Christmas Eve.Show only shoes that are available in size 10 extra-wide.Finally, of course, the user interface that controls the winnowing process must be simple so that users can focus their attention on attributes and listings, not on the mechanics of operating the site.8. Products Sorted Only by BrandSites that offer many items ought to provide winnowing and sorting, which is a highly useful way to deal with lists and is fortunately fairly common. Unfortunately, many sites only let users sort items by brand. So you can find, say, all Armani products, but not all red sweaters. To support sorting by attributes of interest to users, the obvious first question is "What attributes do users value?" The answers will differ by product category, but user research can help you discover them, as can a good sales person.9. Overly Restrictive Form EntryPut the burden on the computer, not the human: let users enter data in the format they prefer. Two common ways of unfairly restricting users:Picky, overly specific forms. Splitting what users see as a single piece of information into multiple fields means that users must waste time moving the cursor around. A typical example is when forms ask users for their first and last names as two items, rather than simply letting users enter their full name in a single field, which is much faster to type. Another example is: Human formatting prohibited. Any text entry field that requires users to type information in a specific way rather than allow the natural variations that humans prefer can be irritating. Many sites, for example, force users to enter credit card numbers as 1234567890123456, rather than letting them put spaces between groups of four digits, which significantly reduces the risk of errors. Similarly, some sites won't let users enter a phone number with parentheses around the area code, even though many people are used to such parentheses. Our testing has shown that senior citizens?are particularly harmed when a website's format is different than a format they've grown accustomed to over many years of use.Restrictive data entry also causes internationalization problems , because the one, sacred format that the computer will accept often ends up excluding customers from other countries.10. Pages That Link to ThemselvesThis point was discussed in detail as item #10 on my list of ten most violated homepage guidelines , but it's important for all pages, not just homepages.Web Usability: Two Steps Forward, One Step BackMany of this year's top design mistakes actually indicate a happy phenomenon: we are making progress in Web usability. Now that sites are doing certain things correctly, we get hit by second-order phenomena that only cause problems because users have progressed past the first-order issues.For example, the question of good or bad ALT text only arises for sites that care enough about accessibility to have any ALT text. Other top mistakes this year derive from sites that target fast downloads by reducing image size, that maintain good archives, or that have a broad product selection. All are positive design directions, but attention to details is required to achieve optimum usability 10 Web Design Mistakes of 2002 Jakob Nielsen on December 23, 2002Summary: Every year brings new mistakes. In 2002, several of the worst mistakes in Web design related to poor email integration. The number one mistake, however, was lack of pricing information, followed by overly literal search engines.As the Web grows, websites continue to come up with ways to annoy users. Following are ten design mistakes that were particularly good at punishing users and costing site owners business in 2002.1. No PricesNo B2C ecommerce site would make this mistake, but it's rife in B2B, 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 "Where's the price?" while tearing their hair out. Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages?or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.? > more on the need for websites to show the price.?2. Inflexible Search EnginesOverly 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.?3. Horizontal ScrollingUsers hate scrolling left to right. Vertical scrolling seems to be okay, maybe because it's much more common. Web pages that require horizontal scrolling in standard-sized windows, such as 800x600 pixels, are particularly annoying. For some reason, many websites seem to be optimized for 805-pixel-wide browser windows, even though this resolution is pretty rare and the extra five pixels offer little relative to the annoyance of horizontal scrolling (and the space consumed by the horizontal scrollbar).? > More on scrolling and scroll bars.?4. Fixed Font SizeStyle 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.?5. Blocks of TextA 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:subheadsbulleted listshighlighted keywords short paragraphsthe inverted pyramida simple writing style, andde-fluffed language devoid of marketese.??6. JavaScript in LinksLinks are the Web's basic building blocks, and users' ability to understand them and to use various browser features correctly is key to enhancing their online skills. 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.Users deserve to control their own destiny. Computers that behave consistently empower people by letting them use their own tools and wield them accurately.?7. Infrequently Asked Questions in FAQToo many websites have FAQs that list questions the company wished users would ask. No good. FAQs have a simplistic information design that does not scale well. They must be reserved for frequently asked questions, since that's the only thing that makes a FAQ a useful website feature. Infrequently asked questions undermine users' trust in the website and damage their understanding of its navigation.?8. Collecting Email Addresses Without a Privacy PolicyUsers are getting very protective of their inboxes. Every time a website asks for an email address, users react negatively in user testing. Don't assume that people will sign up for a newsletter just because it's free. You have to tell them, right there , what they will get and how frequently it will hit their mailboxes. Also, you must provide an explicit privacy statement or an opt-in checkbox right next to the entry field. Otherwise, you have little hope of collecting email addresses other than mickey@.?9. URL > 75 CharactersLong URLs break the Web's social navigation because they make it virtually impossible to email a friend a recommendation to visit a Web page. If the URL is too long to show in the browser's address field, many users won't know how to select it. If the URL breaks across multiple lines in the email, most recipients won't know how to glue the pieces back together. The result? No viral marketing, just because your URLs are too long. Bad way to lose business.?10. Mailto Links in Unexpected LocationsWhen you click a link on the Web, what do you expect? To get a new page that contains information about the anchor you just clicked. What don't you expect? To spawn an email program that demands that you write stuff rather than read it.Mailto links should be used on anchors that explicitly indicate that they're email addresses, either by their format (donald@) or their wording (send email to customer support). Don't place mailto links on names; clicking on people's names should usually lead to their biography.Again, interaction design must meet users' expectations. The more that things behave consistently, the more users understand what they can do and the greater their sense of system mastery. Violated expectations create a sense of oppression, where technology rules humans and reduces their ability to steer the interaction.?Cartoons byDoug Sheppard and Katrin L. Salyers ??The Growing Importance of Email IntegrationIt's interesting to note that the last three mistakes all relate to email. Despite being the oldest of the main Internet services, email continues to be one of the most important. It's also finally becoming better integrated with the Web, and I expect that this trend will continue (if websites can avoid making those mistakes, that is).Top Ten Web Design Mistakes yourself into a corner. Beware of emphasizing the aesthetic over the practical. While your menu structure or navigation bar may be beautiful, if you've designed it in such a way so that you won't be able to add and remove links easily, you will end up having to redesign that navigation bar every time you want to add a link. Always make room for more.Not knowing when to stop. Unless you are careful, it can be easy to fall into the trap of adding and adding and adding to the point where the user is bombarded with conflicting information and doesn't know where to look first. Prioritize before you visualize — then assemble the design from there.Building a difficult-to-navigate navigation structure. Now, where was that again? Links to important information should be displayed prominently on every page, and in the same place on the screen. You can help users navigate your site by placing prominent guideposts that will always let them know where they are. Don't put important links low on the page! You may like how it looks to put links in a "unique place," but if users have to scroll in order to get to that all-important link, they may never find it, and the most important function of your website — getting your information out to your users — may be lost.Failing to promote your website after it is has been launched. If you build it, they will come? No, no, no, no, no, no, no! Posting a website doesn't automatically mean that people will visit your site. Yes, search engine optimization is important, but it's also important to actively and consistently promote your website outside of the internet as well.Posting your contact information in a place that is difficult for your users to find. Your e-mail address and phone numbers (if you choose to post them) should be displayed prominently on every page of your website, if you want your users to contact you.Posting a maze of links that all look alike. Users can go numb seeing long lists of links that all start to look the same. Try to limit links lists to 7-9 links, so that users won't be daunted by too many choices.Mistaking a computer monitor for a television set. While television shows look essentially the same within the frame of the TV set, every computer monitor is different. Novice web designers often make the mistake of trying to frame their site on the screen — but there is no such thing as a static frame for websites! Your site will display in a different manner on each computer screen, depending on the screen resolution your users have set up on their systems.Using too many colors (or not enough). Oh, let's add another color. Fledgling web designers are often tempted to bring in another color so as to draw attention to this and to that on the screen — the results can often look amateurish, and not very well thought out.Allowing your website to become out of date. Urban legend has it that the average life span of a website is 44 days. The world is full of people who open a site and then do nothing more with it. Launching a website is only the beginning. If you are not prepared to keep your website up to date, then maybe opening a website is not for you. (Also, remember that search engines give precedence to sites that are constantly updated.)AND FINALLY:Failing to design a website that promotes the product or services represented by the website. But enough about me — what do you think about me? Unless you are a movie star, people are not likely to come to your website to hear all about you. Users respond to website's that provide them with useful information that they can take away into their daily life. Tailor your website content to benefit your users, and they will be more likely to come back for 34 Web Design MistakesVersion 1.01 article lists common usability web design mistakes that many website designers tend to make. Web usability refers to the ease of use when trying to accomplish a task at a website.OverviewThese are not in any specific order. Each of them contributes about an equal amount of inconveniences to a web site so it is hard to order them.The use of JavaScriptSpelling and Grammar MistakesFlash, Shockwave, Director and Java Use Separate Thumbnail Images to Link to Larger Images Animations with Flash and GIFs Background Music / Mp3 / Wave File Splitting content into many pages / Slide Shows Breaking FAQs into multiple pages Use High Contrast Text ColorsScreen Size Width (Design resolution) Font Usage Small Font Sizes and Making Text ResizableStandard Consistent LayoutOptimizing ImagesTitle, Meta and Keyword tagsAttaching Labels to Form Objects Organizing Forms with Fieldset and Legend tagsImage Alt Attribute and Link Title Attribute Splash ImagesFeedback Links and Processing E-mails in the server File NamingLumping Text in One Big Paragraph Disabling Right-Click and Selecting of Text Usage of FramesUnderlining Links Proprietary Documents Types and Extensions Pop-Up Windows AJAX (Asynchronous JavaScript)Not Setting a Background ColorUsability TestingNot Being Accessibility Friendly Mandating Requirement of JavaScript Not Providing a Print ViewNot Providing a Basic Search FunctionUse Semantic HTML codeDetailed Explanation 1. The use of JavaScript2177000JavaScript is such a great technology - it allows much more interactivity with a website. But it should only be used when it is needed. A simple example<a href="javascript:goToLink('index.php');">Go to Home Page</a> produces thisGo to Home Page Now try doing a right-click and Save Target As on the above link. See what you get? This is how it should be coded <a onClick="javascript:goToLink('index.php');return false;" href="index.php"> Go to Home Page</a> produces this Go to Home Page Now try doing a Save Target As on the above link. You get the Save As dialog. There's also the added advantage of the search engine being able to index the linked page. RecommendationThis is a very simple example of how an innocent looking code can affect users interacting with it in other ways. Other common misuses of JavaScript As the main navigation system, sub-sections are fine as long as the main pages have links to the sub-sections in HTML code. Some newer navigation menus now have the ability to display a simple navigation menu when a visitor's JavaScript is disabled, this is fine as long as the page layout does not mess up in such as situation.To trail a snippet of text or image wherever the cursor moves around the page To display a document within a page with custom JavaScript scroll bars, breaking the usual way of scrolling, disabling mouse wheel scrolling and inability to scroll to a certain point of the page. Designer sites love to use this, especially to display News Updates. To disable right-click or disable selection of text or some more-considerate-webmasters disable right-click on certain parts of the page, like the images. More on this below2. Spelling and Grammar Mistakes2177-444500Face it, we all make spelling mistakes sometimes when we type. Normally we leave that burden to Microsoft Word Spell Checker. But, the web editor you use may not be as feature rich as Microsoft Word. It may catch spelling errors but not grammatical ones. See an example of the problem. RecommendationProof-read the page manually.Scan the document through Microsoft Word by opening a copy of it as it tends to change the HTML code unnecessarily. Yes, that means you have to copy every change manually to your web editor. 3. Flash, Shockwave, Director and Java 2177-444500Flash is cool. Java, cooler. Director, awesome! But it brings a host of disadvantages to a site using it: Bad for Search Engine Optimization (SEO) - This is especially for sites that are fully based on Flash, search engines will have trouble indexing them with the exception of Google - which does its best to index but always turns out much worse than a non-Flash site. Big download = Long Wait - If you are using a Flash movie as a splash image, place a "Skip Introduction" link outside the Flash in HTML code, not in the movie itself, as it will bar users without Flash from entering. For sites fully based on flash, visitors will need to wait more time to see something on your site.Mobile Compatibility - There is a ultra high probability that PDA devices and mobile phones will either have trouble viewing or even loading the flash elements of the site. Heck, even an Apple iPhone 3GS or iPad can't view such sites.Totally New Interface - For full Flash based sites, it breaks the standard interface of the browser such as the Back, Forward, Refresh buttons and inability to interact with the page like a normal HTML page (e.g. cut, copy, paste, copy link shortcut, right-click options). Users will have trouble bookmarking a particular page of the flash. Some developers have worked around this by creating anchor links for every link clicked on the flash movie but many other usability problems still remain.Flash sites look awesome, but as you can see, there is a high price to pay for it. If you have to develop a Flash site, cater a HTML version for Flash impaired visitors. And don't forget, place the link to the HTML version outside the flash movie.Examples of good usage of the above technologiesAs a movie the user expects (eg. an introduction movie, Youtube videos) An animation of a process flow diagram Examples of bad usageA website fully based on Flash. A big no-no.As the main navigation bar in every page. This will prevent users who don't have the Flash plug-in unable to navigate to any of your pages). Search engines would also not be able to index your site properly as they are unable to 'see' any links on the page.As an animated logo in every page. See Animation (Including Flash). As an static image with background music or sound effect, especially when the user is not expecting it (Imagine a 2 second Whoosh sound repeatedly playing from the top left logo while you are reading this article or when you navigate to any page)4. Use Separate Thumbnail Images to Link to Larger Images 2177-444500A common mistake many new designers make is placing a 800 x 600 image in a webpage resized to 32 x 32 manually (i.e. setting the width and height attributes to a much smaller number). By doing this, the user has to download the whole 800 x 600 image, just to view the 32 x 32 image fully. RecommendationThere are free programs, such as Easy Thumbnails, IrfanView, Picasa and GIMP that allows you to save a smaller version of the image. Use the smaller image to link to the bigger one and you cut down the time the user has to wait for your page to load.5. Animations with Flash and GIFs 2177-353800Animations serve to distract. That is why advertisement banners are animated (or even in Flash animation). For example, falling snow flakes are better used for one short page (preferably only during a special occasion) rather than on every page. Likewise for page transitions - limit to one page. It goes without saying that animated GIFs should never be used as backgrounds. Animations are good when used as a user expects - introduction movie, a Flash movie, an animated diagram, advertisements or greeting cards. Now, wasn't reading this text hard with the animation on the right? Click the Stop (thanks IE!) button if it is annoying in this as well as in other pages. Unfortunately, it does not work for Flash and other types of non-GIF animations. 6. Background Music / Mp3 / Wave File 2177-444500Here we are enjoying The Reason by Hoobastank and suddenly a Mortal Kombat music fires on entering a page drowning the song. Thankfully, IE allows users to stop the music by hitting the Stop button.The worst case is having a MIDI file on every page. RecommendationDon't put music files to run in the background on a web page, unless it is specifically requested by the user (eg. he intentionally clicked on a link to sample the music). If you must use a MIDI music on a website, put the code on a frame (like a navigation frame bar) and allow the user to stop it by providing player controls. This way, the music continuously plays throughout the visit (instead of changing for every page) and the user has a choice of stopping it.7. Splitting content into many pages / Slide Shows Pages: 1 | 2 | 3 | 4 | 5| 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |... 42 pages Many long articles on the web are split into multiple pages. Compare the following two scenarios: User starts reading article. Reaches end of page. Moves the pointer to the "Next Page" link, Click the link. Wait for the page to load. Tries to remember where the article left off. (repeat for each page) Compare with User starts reading article. Reaches end of page.Which is faster and saves more time?The main reason behind splitting articles is because banner ads could only be shown once on every page. Having multiple pages, would mean that the user would see more ads. And the feeling that long pages discourages the user - It does - but not for articles. Users expect articles to be long, but not simple product or home pages. RecommendationPut the whole article on one page. Avoid any kind of "Image Slide Shows" in HTML - it is a variant of paging too. If you must split into many pages, consider implementing a Printable Version (with the ads removed) so that users who want to print your article don't have to print one page at one time. 8. Breaking FAQs into multiple pages EXAMPLE1. What is your company about? (links to page A) 2. What services do you offer? (links to page B) 3. How do I contact you? (links to page C)Similar to above, this "technique" is used by many designers. Each FAQ question's answer is a link that points to another page. To read the entire FAQ, the user has to perform a click on each link, read the text and a back button click for each FAQ.For an entire FAQ of about 10 questions, that relates to 20 clicks. What about the time spent to wait for each page to load? RecommendationPlace entire FAQ questions and answers in one page. Put anchor links for each FAQ question to the answer for easier navigation. Some designers add a "Expand All" feature to automatically expand all answers. Some also integrate a non-Javascript browser tolerant design by automatically showing all answers for users with JavaScript disabled browsers. Don't make answers to appear only when the question is clicked on. If you want to do this, put a "Expand All" link that allows all answers to be shown.9. Use High Contrast Text ColorsCan you read me? Imagine how hard it is to read with one long paragraph of text especially with a textured background as compared to a background of solid color. Ensure your text is readable without the users having to strain their eyes. There's nothing worse than to get a dark gray text on a black background when a user surfs with images disabled.The text on the right may be easy to read on a small scale, but on one whole page, it'll cause the user to hit the Close button. Thankfully, modern browsers allow you to hit Ctrl+A (Select all) to make the text more readable. RecommendationChoose colors that give a good contrast balance to the text and background. Avoid textured backgrounds that contain a mix of bright and dark colors.If you are having trouble thinking of colors, check out this Color Scheme Generator. 10. Screen Size Width (Design resolution) 1905-444500Design your site for the minimum - 800 x 600. Designing higher than that produces a horizontal scroll bar for users using 800 x 600 display resolution. Users don't like scrolling horizontally when on a website. <p><a title="Download Caesar 3" href="" rel="nofollow"> <img src="/images/links/gog3010.jpg" alt="Download Caesar 3" width="300" height="250"> </a> </p> Although the vast majority (as of 1st Jan 2006) of users use 1024 x 768, there is still a significant number using 800 x 600, probably with old computers or resized windows. There are also some people who prefer to open websites at 800 x 600 in their high resolution display, browsing two sites side-by-side at a time.RecommendationFollow a liquid design (also known as fluid design) of layout. The basic principle of achieving this is by using percentage values for table widths. This allows the text to fill in the entire available space in the browser - like does. Some designers prefer to use DIVs rather than tables, but ultimately, the end presentation should be user friendly.If you need to have a fixed width design, consider having different versions for an 800 x 600 and 1024 x 768 users.11. Font Usage Use a common font in your pages. If the user does not have the font, the browser will render the page using its default fonts and would not be what the designer intended it to be. This is an important aspect of readability in web design. 2177-489900Please, don't use Times New Roman. This font is more appropriate for print documents, which is why if you have a "Printable Version" of a document, it should use this font mainly. RecommendationUse common fonts from this list of core fonts in Wikipedia. Most sites use Arial. You can also specify multiple fonts instead of one single font. For web usage, it is recommended to use "Arial, Helvetica, sans-serif" so that the browser will use Helvetica if the user doesn't have the Arial font.Likewise, for print layouts, it is recommended to use "Georgia, Times New Roman, serif".12. Small Font Sizes and Making Text Resizable Small fonts are great for small snippets of text like copyright notices.But for long articles, the user gets tired of the small font and gives up eventually.Most users do not use the Text Resize feature of the browser. In fact, the feature doesn't even work with some websites. It is becoming a "cool" factor for websites to use small microscopic fonts like the one on the right. Plainly put, it is fine for short snippets of text. Use it on a long article like this, and the user gets frustrated. Try reading this article with a smaller font size (View > Text Size > Smaller).Internet Explorer has a feature (or bug?) preventing font size changes (via Edit > Text Size) when websites use pixel (px) units to specify the font size. Keep in mind that a large percentage of users still use IE (with Firefox and Opera gaining on). RecommendationTry to keep font sizes above 0.8em. Use font size units like EM and % to specify font sizes in CSS style sheets. Users are then able to use the Text Size functionality to modify font sizes as desired.13. Standard Consistent Layout- Home- About Us - Products- Services- Contact Us Use a standard layout on every page. This means keeping the navigation bar, colors, fonts, link styles and other web elements consistent in every page.Every page should have an effective website navigation bar, either on the top or on the left. Don't place the main navigation on the right - users are accustomed to left or top navigation links. If you must place links on both sides, try to keep the left/top area for the main links.Place the logo near to the top left which should always link to the home page. Use Favicons to add an icon to your site for better branding. Internet Explorer and Firefox now automatically show your Favicon at the address bar and Favorites if the user adds your site to their Favorites. The top right can also be used to place a search box.Reserve the footer to place your copyright notices and links to pages such as the site map, a privacy policy and a email form.RecommendationUse a basic template for every page that contains links to the main sections of the site. Avoid using DHTML (Dynamic HTML) JavaScript Navigation Menus as search engines will not be able to access the links in them. The newer CSS Navigation Menus are Search Engine Optimization (SEO) friendly, but cause layout problems if the browser does not support JavaScript. Highlight the current active page in the navigation whenever possible so that the user is aware of where he is currently at. At Bootstrike, we show this as "Home > Articles > Top 34 Web Design Mistakes" above.14. Optimizing Images 2177-444500Optimize your site images so that they load as fast as possible on the user's monitor. There are tons of software which do this for you, free ones included. Free popular ones include IrfanView and Picasa. A more advanced one is GIMP. For example, JPG photo files can be reduced in file size with only minor sacrifices in quality. GIF files also have a Loss and Number of Colors property that can reduce file sizes. RecommendationUnless the photo is for users to save and print, don't place the original unaltered 4 (or more) megapixel photo on a page. Resize it to a comfortable size (eg: 800 x 600) which in turn reduces the disk space and download time. Provide a direct link to the full megapixel resolution image if you believe the user may want to print the image. 15. Title, Meta and Keyword tags2177254000Many websites could have made it higher in their search engine ranking (SERP) if they had thought about replacing those "Untitled Document" titles (take a look) with more meaningful ones. Placing meta keyword and description tags also help search engines to index your site.Google has also begun to take advantage of the META DESCRIPTION tag. Sometimes it will display the content of this tag for the site description in the search results. Keep in mind though - there's a limit to how much text Google is willing to index for this tag so don't make it too long. You can view our article on Search Engine Optimization. Recommendation2177-544300Perform a search for "Untitled Document" in your whole website. Replace them with meaningful titles.To make your pages more search engine friendly, define the meta description and keywords tag in every page. <meta name="description" content="Description of less than 160 characters. Avoid long words. "><meta name="keywords" content="keywords separated by commas. Keep it within reasonable limits "> 16. Attaching Labels to Form Objects Top of FormForm A Name SexMale Female Form B Name SexMale Female Bottom of FormIf you think we are referring to the words describing each form input element, you are wrong. Try clicking on the word Male on Form A on the right. Now try doing the same in Form B. It is more beneficial when used in radio boxes and checkboxes, as the clicking area for them are much smaller than the other inputs. By attaching a text label to it, the user can also click on the text to select the radio button.In fact, this is how normal Windows GUI applications work.RecommendationThis is the HTML code for Form A's "Male" radio button <input name="sexRadio" type="radio" value="radiobutton" checked> MaleTo attach the text "Male" to the radio button, we give an id to the form object and wrap the Male text with a label. <label for="radiobutton"><input name="sexRadio" type="radio" id="radiobutton" value="radiobutton" checked>Male</label>17. Organizing Forms with Fieldset and Legend tagsTop of FormPersonal Name SexMale Female Experience Years of Experience Please list down your previous job experiences Bottom of FormSometimes, forms can get very big. One option is to use tables and organize them neatly. The other is to use Fieldsets and Legends. Fieldsets draws a frame around the form objects. It allows you to specify a name for the frame by using the LEGEND tag. RecommendationThis is the HTML code for Form A's "Male" radio button <input name="sexRadio" type="radio" id="radiobutton" value="radiobutton" checked><label for="radiobutton">Male</label>To surround it with a fieldset <fieldset><legend>Personal</legend> <label for="radiobutton"><input name="sexRadio" type="radio" id="radiobutton" value="radiobutton" checked>Male</label> </fieldset>18. Image Alt Attribute and Link Title Attribute Provide the alternate (alt) text of an image whenever possible. You don't have to provide this for every single image such as your spacer and sliced images, only those meaningful ones. For the other images, just leave the alt attribute blank as the attribute is required to be specified. 217718100Hover over me to see my title attribute For example, if your navigation uses images, consider adding the textual description to each navigational image. The Home image would label Home, the Products as Products, etc. Similarly text links can also have the title attribute set to better describe the link.It helps the disabled and folks who disable images or use text browsers when surfing. This is also done for search engine optimization purposes, since they are unable to read images.19. Splash ImagesThis point was highlighted above, and is being said again on a more general context - Put a separate "Enter Site" link outside the Flash move/shockwave/applet application so that the user can enter the site without needing the plug in. 2177371900This way, if the user has ActiveX/plug-ins disabled, he can still enter the site. Search engines can also better index your page as they will also be able to follow the link. Avoid splash pages with one "Enter Site" link at the center. If splash pages are needed, consider placing the main section links along with the splash image. 20. Feedback Links and Processing E-mails in the server It is good practice to put a link to a feedback e-mail form on every page of the site. Keep in mind that a majority of users use web-based email such as GMail, Hotmail, Yahoo and Lycos. Try clicking on the link below.To e-mail George, click here. 190534226500An e-mail box opens up. For some users, the Internet Connection Wizard starts up. This is because they are using free web mail services and not a software mail application. To e-mail George, users would have to extract the mail address from the Outlook form, fire up their webmail website, compose a mail and paste your e-mail address there. Most users aren't familiar with this process hence it makes them confused and unable to e-mail you.RecommendationPut a simple web form that submits to a server side script such as PHP/ASP, which e-mails the form directly to you instead of relying on the client's e-mail ability. Forms should submit to a server side script to process the mail. Scripting languages such as PHP/ CGI / JSP / ASP server side programming can be used to process the form input. Do not use forms that that uses the "mailto" syntax to send a mail. There are free scripts which can assist to send the form for you if your host does not allow programmable scripts or you are not familiar with the technical stuff. 21. File Naming2177-444500Most servers support spaces in filenames, but avoid doing so. Always use a lowercase filename and folder name without any special symbols (including spaces but not "_") in them. Windows based HTTP servers usually are not case sensitive but the more common and cheaper Unix servers are. RecommendationIf your server is hosted in a Unix server, avoid usage of capital letters in the file and folder names. This helps a user remember the page URL easier if he or she decides to return on a later time. 22. Lumping Text in One Big Paragraph This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. This is a snippet of text. Don't pile a block of text all in one big paragraph to create a wall of text. Try to shorten it to 3-6 lines per paragraph and users will have an easier time reading the content. Don't use the whole browser width for one line of text. Keep it to about 75-90% of the width of the screen, especially when page margins are set to zero. 23. Disabling Right-Click and Selecting of Text The sole intention of disabling these functions was to prevent viewing the source code and saving of the images. This still works as intended for the casual web surfer but not determined users who would either disable JavaScript or retrieve the file from the cache. 2177-489900Such a method comes with its share of problems. By disabling right-click, you remove all the capabilities of the right-click menu - some of them do not have their own toolbar icon or menu item in the browser. And by disabling text selection, you are adding an extra annoyance to the user who has to manually type out the text - unless he/she is savvy and knows how to disable JavaScript. A common piece of advice comes to mind here - If you want your html / images / text to be private, then don't put it online. 24. Usage of FramesFrames have generally been frowned upon by the web design community. Pages in frames don't get added to the users bookmarks properly, causing problems when the user tries to return to the site.2177-45400When the user enters a framed page from a search engine, it causes a problem as the page would not have any navigation, which is located in another frame. RecommendationAvoid frames. Do not use frames for your main navigation, even though it makes updating much easier. Consider using Server Side Includes (SHTML, SSI) or PHP includes. Do not use frames to add a little header on the top of every external website your site links to. However, if you must do this, ensure that a link is provided to remove the frame as users will not be able to bookmark the page easily. 25. Underlining Links LINK EXAMPLES Link that changes on mouse over - Confusing with other bold elements Link that changes only on mouse over. link with no reaction other than cursor. The WORST case. Normal Underlined Recommended Link Style Use the underline function for links and links only.The current conception with many web designers is that underlines look ugly. Instead, many choose to provide a bold formatting with a different color to the links.Some websites even go to the extent of showing that a link is a link only when the mouse is hovered over the text and some formatting - like a underline, over line or a double underline - takes effect. This makes it very frustrating for users to recognize links, forcing them to hover the pointer on every word that could be a possible link.RecommendationDon't use the "text-decoration: none" CSS tag for links. Change colors to fit the site theme, but leave the underline alone. Don't underline text which are not links. Use a special tag like Header 3 or Header 4 to place emphasis on it. Specify a different color for visited links so that a user is aware that he/she has already visited a link before clicking on a link. See Jakob Nielson's article on this.26. Proprietary Documents Types and Extensions 2177-444500The purpose of Adobe's PDF and Microsoft's DOC formats are for viewing and printing documents with the intended paging and formatting.These are big size file formats, taking up much more disk space than a regular HTML file hence a user has to wait for a longer period of time for the document to load. The usual browser interface changes to the interface of the document owner's application (e.g. opening a DOC adds new menus and buttons to the IE window). Finally, the user has to wait till 100% of the document has been loaded before he can view anything.The newer PDF readers supports dynamic loading; it can render a document as it downloads. But the other usability problems still remain. RecommendationProvide a HTML version of the document. Use PDF as an alternate download, indicating clearly that it is a non-html file. Most users would want quick access to the content of the document, and if they want a better version for printing, they will get the printable version. 27. Pop-Up Windows 2177-444500Don't open entire websites in a pop-up window. Websites are meant to be seen in the default browser window with all the status bars, title bars, toolbars and the other normal user customized add-ons.Some of the reasons cited by designers for this tactic are to prevent source viewing and to provide a full customized interface to the user, Both of these reasons are not valid - by right-clicking the page, or hitting Ctrl-N (thanks IE!), a user can view your whole site source and images.Provide a customized interface? What about the normal browser buttons? Where do we enter a new URL to go to another site?RecommendationIf you are worrying that the user's browser may be too wide for your site, simply center the table design in the page. Do not use advertising companies which rely on pop-ups and pop-unders. They will chase away your visitors, and most of them don't work due to most browser's built in pop-up stoppers. Consider doing a liquid layout. 28. AJAX (Asynchronous JavaScript)AJAX is the latest cutting edge technology now to evade the web. Unfortunately, when a website uses it, it brings lot of inevitable changes to the way a user communicates with the website.The first issue is that JavaScript is required. Secondly, it also requires ActiveX to be enabled in Internet Explorer 6. Yes, IE6 is ancient, but it still takes up 7% of the market. Many corporations disallow ActiveX controls to run for security reasons, and websites that force the use of AJAX have to forego such users. And lastly, some implementations can disable the browser's Back button. Check out GMail, which provides a AJAX powered web mail interface that works with the Back button. It even supports basic HTML mode!Why is ActiveX Required?Technically, it is because Microsoft has placed the XMLHttpRequest under the ActiveX branch, which is why attempting to initialize the object will result in a error even when JavaScript is enabled. It is worth a note that the latest Internet Explorer 7 fixes that - placing the XMLHTTP object natively. RecommendationIf you want to use AJAX, be sure to provide an alternative non-XMLHttpRequest way to access your application. Till IE7/Firefox gets hold of the market, that is. 29. Not Setting a Background ColorDo not assume all users use the default background color of white. This is how looks in our browser:Notice that the background defaults to the user's default background color, which was not set to white. Now see Oracle's website:You can see how the artifacts in the Oracle logo are showing through. The fix for this problem is very simple - simply set a background color for every page in the BODY tag or style sheet. <body style="background-color:#FFFFFF">30. Usability TestingTest your website as in many different environments and settings as possible. Some suggestions:FirefoxOperaAbove browsers with images turned offAbove browsers with the images renamed/removed (so that the browser will be unable to download them and thus will not know the actual size - to find out if you specified the widths/heights of images)Above browsers with images renamed/removed AND JavaScript turned offLook out for inconsistencies. Find the answers to the following questionsDoes the design still hold even though the images are broken or disabled?Can the text be readable when the images and JavaScript are disabled?Does the layout appear as intended in Firefox / Opera? If it is a framed page, is there some JavaScript informing the user of a framed content so that the user is not lost when coming through a search engine? Do all pages have consistent design and titles?Are all big blocks of text broken into small paragraphs?Is there a feedback link on every page? Search box on every page? Do Links have underline?Is the Flash Movie Skip link is outside the Flash movie?31. Not Being Accessibility FriendlyMany users of high resolution monitors force their browser to render text fonts at a larger size than the designer intended. They don't have much choice as LCDs demand that the highest resolution to be used for the best quality (called the 'native resolution') causing the fonts to appear smaller. This is made even worse by designers who commit Mistake #12: Small Font Sizes and Making Text Resizable. Adding more salt to the wound, some designers unknowingly design their site to 'hang' their browser when an accessibility feature is used. For example, if you try to visit the phpBB Community Forums with IE6 (with Text Size Largest, Ignore Font Sizes accessibility feature enabled), the browser hangs for no apparent reason.Another example - Oracle's press releases. Viewing it in IE6/IE7 with large font sizes renders it as below:Notice how hard it is to read the overlapping capital letters. A good example of an accessibility friendly site would be BBC, which has spent a considerable amount of money on making its website very accessible.32. Mandating Requirement of JavaScript If your site requires JavaScript, make use of the noscript html tag to highlight it to the user. The advantage of the noscript tag is that it is only displayed when the browser has JavaScript disabled.Don't redirect users to another page to upgrade to the latest browser, or a page that specifies that JavaScript is required to browse the site. Try to provide the basic function of the page without requiring JavaScript. An example would be Microsoft's Communities - try visiting this link with JavaScript (Active Scripting in Internet Options > Security) disabled. Notice that you can't even hit the Back button to view the page after being redirected. Many users disable JavaScript for speed and/or security reasons. E.g. - the popularity of the NoScript Firefox extension with over 300,000 weekly downloads, which disables JavaScript. So don't make JavaScript redirects for JavaScript-disabled users to browse your site when the page appears fine without it. 33. Not Providing a Print ViewTry doing a Print Preview of this document. Really, just try it. You don't have to print it, just see a preview of it.Notice that the left column automatically disappears? In fact, with the left column removed, the page now has 20% more width (depending on your screen resolution, as the site is liquid designed). And that means less paper is needed for printing.How is this achieved? Via CSS! In summary, a separate style sheet is created that is used only when printing.Rather than go into specifics, take a look at some tutorials around.34. Not Providing a Basic Search FunctionSearch is one of the important navigators of the web. Almost all of us find websites through search engines such as Google and Yahoo!Did you know that almost any site can now offer a simple search solution without any scripting required? And it is even powered by one of the top search engines around - Google! Best of all, it is free! Ad supported, but you can partake in a share of the revenue It is no other than Google's Custom Search Engine. Bootstrike's Search is also powered by Google.RecommendationPlace a basic search box in every page in a prominent location such as the top right.35. Use Semantic HTML codePresentation wise, this does not make a difference. But it can make a big difference to search engines, who are better able to analyze the layout of the page. For example, headings should use the H1 tag rather than the P tag. sub headings should use the H2 tag and so on.So rather than doing this...<p>My Life</p><p>Day1</p><p>Today I learnt about some web design mistakes</p>do this...<h1>My Life</h1><h2>Day 1</h2><p>Today I learnt about some web design mistakes</p>RecommendationAs stated, it does not make any difference in terms of usability and presentation. However, it can improve search engine rankings as well as provide accessibility-impaired users a more friendly Ten Web Design Mistakes content is still the key to an effective and successful Web site, the presentation of that content is a major factor in holding the attention of your visitors and making sales. The look of your site is important, because it says something about your business and presents an image. But Web designers routinely sabotage their efforts by making mistakes in how they present their content. Here are 10 examples of common web design errors and some tips on how to avoid them. Animation, gimmicks, and Flash. While most designers understand that Web surfers want to go straight to the content, there are some who still insist on either making you sit through a splash page, while others offer annoying flashing graphics. Studies show that no matter how well-intentioned these splash screens are, their main effect is to drive traffic away from the site. In-your-face advertising. While standard pop-up ads are annoying, persistent full-screen ads are simply unacceptable. Visitors detest these, and most will leave the site rather than waiting for the ad to go away. Navigation nightmares. If your users cannot get where they want to go in two clicks, many will leave. Too many choices, no site map, a "back" button that does not take them to the last page they visited, and other such navigation mistakes will cost you many customers. Being unreachable. As concerns about security and identity theft increase, users want to be able to reach the people with whom they are doing business. Providing an email address and a phone number can help assuage your customers' concerns. No place for feedback, comments, or questions. Customers appreciate it when they feel you value their feedback. Providing a feedback or comment system is an easy way to start creating this goodwill. And it is also a great way to gain insight into how your customers think and get ideas for improving your site. Cramming and crowding. You can have great content, but if it is lost in a sea of words or graphics, people will miss it. A little white space on a page goes a long way. It helps a reader find specific items, differentiate between areas of content and advertisements, and provides a more professional look. Jargon. Business-to-business and high-tech sites are usually the worst offenders in packing their content with jargon. When writing any content for your site, keep the user in mind. He or she may not know all the arcana of your business, and may just want the basic facts of what your business is all about and what services or products you provide. Bad graphics and boring photos. Bad graphics make your site look amateurish. Make sure the colors and text you use will show up clearly (and fit) on a range of monitors, including handheld devices. When you choose your photos and graphics, choose interesting graphics that say something about your business. Torturing potential customers. When a user fills out a form online and needs to either change something or fill in a field which they left blank, they should be able to go back and make that change. Do not make the user start all over again. Many people will leave the site altogether rather than re-enter all their information. Presenting products or services in only one way. Shoppers should be able to look up a product or service by any one of several methods. Assuming that everyone is shopping by the same set of criteria is a mistake, especially when it is very easy to allow people to sort by any of several methods. Make it easy to shop by product type, alphabetically, by size, by gender, by manufacturer, or by any other criteria shoppers are likely to use. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download