Do's and Don'ts of Web Sites
Originally compiled July 2004 for IJO Chicago Conference.
by Matthew A Perosi
Additional source material provided by Jakob Nielsen. General Do's and Don’ts of web sites | Even if it is a “business-card” type site.
Generation X and Y will not have their fingers do the walking, they will make their fingers do the typing. They will go to Google.com.
Remember that your web site is always open even when your store is not.
| | The web is a constant changing medium. No web site is ever fully completed. They can only be considered to be complete enough for current information. As soon as new information comes along the site will change. Would you hang a sign in your retail store saying, "inventory incomplete and changing, come back soon?" | This is especially beneficial if you have extensive design work to do and this can be achieved very quickly. This basic web site could also get picked up by some of the search engines and, most importantly, won't irritate any visitor. You can even give a teaser of what the site will be doing. | | New Internet technology appears daily, and many companies have lost a lot of money implementing poorly conceived technologies. If you spend time and resources on the latest technology just because it's a fad, you will loose money. | You will reap many rewards if you spend time figuring out your customer needs and create a usable web site to answer those needs. | | If you only have a catalog online the impression you give off is that you only care about the product and not who’s wearing it, or using it. | Include information about your business, your services, valuable education information about products and your industry. | | Users want to know who they are dealing with. | Biographies and photographs of the company owners or authors of web articles will help make the Web a less impersonal place and increase trust. Personality and point-of-view often wins over anonymous bits coming over the wire. | | Please avoid the temptation to use the latest in moving graphics if it means that it only works with one browser and you have to put the phrase "Best viewed with ..... browser". You will not only turn away many would-be visitors but alienate them as well if they perceive that you don't like their favorite browser. | Spend the time and extra money to have your site tested in every appropriate browser so there are no surprises when your site is launched. | | There are many factors in what causes web pages to download slowly. Originally it was caused by bloated graphic designs. Some sites still have too many graphics or too big graphics; or they use applets where plain or Dynamic HTML would have done the trick. The growth in web-based applications, e-commerce, and personalization often means that each page view must be computed on the fly. As a result, the experienced delay in loading the page is determined not simply by the download delay but also by the server performance. Sometimes building a page also involves connections to back-end mainframes or database servers, slowing down the process even further. | Do spend the extra money to make sure your web site and code quality are optimized for the fastest response times.
Users don't care why response times are slow. All they know is that the site doesn't offer good service: slow response times often translate directly into a reduced level of trust and they always cause a loss of traffic as users take their business elsewhere.
| | Frames are great at making navigation simple and quick but more than three will work against this. Use two for navigation and one for content. Avoid scroll bars and borders on frames, they're highly unfashionable. | Design a site that is fast downloading for the users, as well as a layout they will understand. Frame designs work will in situations where the users are more experienced, and also work well in corporate intranet designs. | | Resist the temptation to provide sound on your site just because you can. Someone working in an office certainly does not want music blaring out unexpectedly! | If you feel the need to have music on your site do not allow it to start automatically, but allow the user the ability to turn it on, and turn it off again. | | Users are getting very protective of their inboxes. Every time a web site 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. | Otherwise, you have little hope of collecting email addresses other than mickey@mouse.com. | | In fear of spam, your visitors do not want to give you their email address. You should fear spam even more if you include your email address in a mailto link on your web page. Email collection companies have mastered the ability to find your email address listed in your web site. Once found, your email will end up on every spam list from ab-workout machines to trips to Zimbabwe. Don't list your email in text format on any web site any more. | But still don't include a mailto link. If the person wants to email you let them retype your email address, better yet, just provide them with a form page direct from your site that will get processed through a hidden program and email you directly. | | If your web site is working today, but not tomorrow, visitors might think you went out of business or you could not pay your web site bill. | Get a get a multi-year domain registration so you don't have to worry about it. Make sure you pay your web hosting company's bill on time. | Important home page Do's and Don'ts | Obscuring the basic purpose makes it much harder for users to interpret a web site's information and services. | Use well researched design elements to add to the user's existing understanding of a site. | | If you want to give them more information then create links to pages with detailed information, don’t force it on them. | | A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read. | 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 marketing gimmicks. | Do's and Don't of hiring a web creation team. | All the time you spend trying to put a good web site together is valuable time you could be spending on making money for your business. You should concentrate on what you do best, not learning something new outside of your field of expertise. | Unless you are able to keep up with the current do's and don'ts about web site design, let a professional handle the work. They can do it faster and more professionally than you could every do. | | Watch out for consultants that say they can do everything computer related. The truth is they specialize in nothing. The Internet is a specialized business and making it work for your specific needs will be difficult. | Make sure they have a lot of experience developing web sites. Don't hire a student or someone you know that does web sites for a hobby, their inexperience will doom your web site's effectiveness. | | Web Programmers are technical people good with numbers, science and technical issues. Their thinking comes from the left half of their brain. Typically these people are not artistically talented and can't design a good-looking functional web site. | But hire a "Web Designer" who is artistically talented and uses the right half of their brain, to design your web site for your needs. | | It is physically impossible to proficiently do both unless the person is a genius and most geniuses will have better things to do than program web sites. | Ask the web creation company to tell you who does what jobs. Your web site design and functionality will be better for it. | Do's and Don'ts of information on your site. | They will cause it to load slowly. Visitors using dial-up will not wait for more than 15 seconds for your site to load. | Graphics appropriately created and sized for the web. Concise descriptions to help people skim you page. | | Stock photography sellers are doing a brisk business, but users don't believe that your product will make them happy just because there's a smiling lady on your homepage. Better to show your actual product. | Photos of people who have an obvious connection to the content as opposed to using models or generic stock photos. People are naturally drawn to pictures; gratuitous graphics can distract users from critical content. | | It's good when sites link small pictures to bigger pictures, so users have the option of seeing the image in more detail. However most of the time the thumbnail images are simply reduced versions of the full size images. If an original photo has a lot of intricate detail, the thumbnail is often incomprehensible. This might work for general photo galleries, but not for important image content. | If you are trying to tell a story, use a small cropped image while maintaining image clarity and importance. When the image is clicked you can then show the fully enlarged, uncropped image.
When using photos on the Web:
- Include fewer people and objects, in less complicated settings than you would for photos intended for print.
- Emphasize close-up shots with clean backgrounds.
- Don't just resize; first crop the image to focus on a salient and simple element. |
-Don’t make the users have to click through 5 pages to get to your product catalog.
-Don’t make the users scroll down to get to all your important information and important links.
|
- Put all important information at the top of every page.
- Make sure all important navigation links are at top of every page.
- If you can’t follow these rules then you MUST put a Search feature at the top of every page. | | The Web is a different medium and visitors view it differently. | Remember the Web is a medium where content must be sparse but full of impact. | | Headlines must be written very differently for the Web than for old media: they are actionable items that serve as important information elements and should help users navigate. Headlines are often removed from the context of the full page and used in tables of content (e.g., home pages or category pages) and in search engine results. |
- tell users what's at the other end of the link with no guesswork required
- protect users from following the link if they would not be interested in the destination page (so no teasers - they may work once or twice to drive up traffic, but in the long run they will make users abandon the site and reduce its credibility) | | Broken links cause frustration. When a visitor believes they found good information on your site you are leading them on and suddenly let them down hard! | Avoid 404 errors. | | Most webmasters will check every link both within the site and links to other sites on the Web before their site is launched. However, once a site is launched link checking rarely happens again. | Dead links will annoy your users. Nothing is worse than leading your user on with a link they believe will answer their question, only to be let down by a broken link. | | This will keep them coming back. | | Without dates on articles, press releases, and other content, users have no idea whether the information is current or obsolete. | (although you need to keep your copyright date current as well). More specifically your need to include an exact date for any reprinted article, statement, or message that appears on your site. You do not want to mislead your visitors when you refer to the passage of time without giving them date specific information. They might mistake an outdated article from 2 years ago as something relevant for today. | | Many visitors will be over 40 and experiencing reading difficulty. If your site is too difficult to read they will have no choice but to leave. | | Cascading Style Sheets give web sites 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. | This will allow every user's computer settings to specify the font size and making it easier for them to read | | Search engines use the <title> tag to help index your web site. Poorly chosen page titles will hinder a search engines ability to properly list your site. The 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. 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. | | The ALT tag is use for search engine information, navigational help and for users with disabilities. ALT tags can be uses inside many other HTML tags. It is unnecessary and distracting to use them in hyperlink tags, or in font or paragraph tags. Reserve their use for images only. Do not over use the amount of information in the ALT tag, only use what is needed. | Provide what users need to know about the image to use the site most effectively. There is no need to describe irrelevant visual details. | | Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. | 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 page
- animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
- pop-up purges mean that users close pop-up windows before they have even fully rendered. | | Designing a web page to fit in a specific browser size is poor planning. Users hate scrolling left to right. Vertical scrolling seems to be okay, maybe because it's much more common. | By using percentages, the user has the freedom to change their browser size for their needs. People with big monitors want to be able to resize their browsers to view multiple windows simultaneously. You can't assume that everyone's window width is 800 pixels: it's too much for some users and too little for others. | | You may like it but the chances are there will be many more that don't! And there are a very limited number of successful combinations of colored fonts on colored backgrounds. | Make sure you use it throughout your entire site. | | Don't design for use with millions of colors. There are only 216 "Web safe" colors that can be used that will be seen in the same way by both Windows and Macintosh users. | Do stick to web safe colors for your backgrounds and for the color content of graphical buttons etc. This will insure a visitor using a Mac and a visitor using a PC actually see the same thing. | | Whatever you request the user to type in, make sure your don't force them to follow your required method of input. 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. | Let users enter data in the format they prefer. Try to come up with methods to format the information yourself before saving it. Allowing the user to enter their information in their own way will ease their experience on your site. | | Too many web sites have FAQs that list questions the company wished users would ask. No good. Infrequently asked questions undermine users' trust in the web site and damage their understanding of its navigation. | 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 web site feature. | | Users visit sites because there's something they want to accomplish -- maybe even buy your product. A poor quality web site 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 marketing jargon and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there. | Try to get an idea of why visitors will be coming to your site in the first place and give them the information they are looking for in an easy to understand format. | | If you provide many items on your web site don't force your visitors to view pages of long lists with no ability to sort through, or reduce the list by category. | One of the main usability guidelines for category pages is to let users cull items according to attributes of interest.
Useful culling requires four things.
- The site must support culling in the first place, and most don't.
- The culling 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 culling process must be simple so that users can focus their attention on attributes and listings, not on the mechanics of operating the site. | | Unfortunately, many sites only let users sort items by brand. So you can find, say, all Armani products, but not all red sweaters. | When doing this you must first figure out "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. | | In general, users remember when they've seen something interesting on a homepage. However, unless that homepage lists recent features and offers links to them in the archive, users will never be able to find what they're looking for on subsequent visits. | Create a way to easily search for archived home page information. | | Changing the URL when archiving content causes broken links and bookmarks for users. It also ruins any previously good search engine ranking you might have had. | You should archive all your old content on your web site. Archives add substantial value to a site with very little extra effort. |
PDF files cause a discord in web browsing. They change the abilities of the web browser with simple things like printing or saving documents.
| Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages. | Do's and Don'ts of site navigation
Entrepreneur.com June 10, 2004 article: "Once most first-time visitors get to your site they will only spend 10 seconds on before deciding whether or not it offers any value for them."
Avoid too many flashy graphics and nifty animation effects.
|
-Use only 2 or 3 colors throughout your site.
-Use only 1 or 2 fonts. Unless you have a reason, NO FANCY FONTS. Make chosen fonts consistent for headers or text.
-Only use a background image or color if it does not distract from reading. | | Each page should be laid out the same for ease of visitor navigation... |
-Categorize and simply have a link to every page.
-Make sure all pages have the navigation buttons and links in the exact same position.
-Make sure your Color, backgrounds, layout, buttons, fonts, etc. are the same on every page of your site. | | If a web site is difficult to use; if the homepage fails to clearly state what a company offers and what users can do on the site; if users get lost on a web site; if a web site's information is hard to read or doesn't answer users' key questions, they leave. |
Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
Efficiency: Once users have learned the design, how quickly can they perform tasks?
Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
Satisfaction: How pleasant is it to use the design? |
When you can see the color of your links change you can easily track your progress through a web site. Knowing your past and present locations in turn makes it easier to decide where to go next. Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.
| Make sure you use the same color scheme from page to page. Returning visitors will look for those different color links to quickly zero in on the information they found helpful in the past. | | Avoid allowing your users to get drawn down into some cul de sac and have no idea how they got their or how they can get back to the home page without typing in the URL again. | - it should never take more than three clicks to get from any one page to any other. | Active links to current pages cause three problems:
-If they click it, a link leading to the current page is an utter waste of users' time.
-Worse, such links cause users to doubt whether they're really at the location they think they're at.
-Worst of all, if users do follow these no-op links they'll be confused as to their new location, particularly if the page is scrolled back to the top.
| On every page you should turn off the current page's link and highlight it in such as way that indicates that it's the current location. | | 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 (like a JavaScript) that interferes with the browser’s standard behavior. | Best used when showing enlarged versions of images, or extended definitions of briefly shown information on the main page. | | Opening too many new windows can cause memory faults on a computer. Some anti-spam software will even prevent new windows from being opened. 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. | If you are using new windows as a means of navigation or captioning information, make sure you correctly use the <title> tag giving the user a chance to notice a new button in their task bar. | | Most of the time other service providers web sites are totally different looking than your web site. When a visitor goes to a new web site the need to re-evaluate if they should be staying there. Off site linking causes a loss of business. | Ask the service provider to format their information to look like your site. If they are unable or unwilling to format their site to look like yours then you need to take the information and format it yourself.
Or just don’t use that provider.
| | Users 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. | Consistency 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. The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. | |
