|
Web Design GuildlinesGuild Lines (synopsis) The following are excerpts from Dr. Jacob Nielsen’s website http://www.useit.com . Dr. Nielsen was usability lead for several design and redesign rounds of Sun's website and intranet (SunWeb), including the original SunWeb design in 1994. His earlier affiliations include Bellcore (Bell Communications Research), the Technical University of Denmark, and the IBM User Interface Institute at the T.J. Watson Research Center. The Internet Desktop http://www.useit.com/alertbox/9603.html The Internet Desktop will provide a framework for presentation applets that are optimized for each of the various data types accessed by the user. HTML will obviously be one such data type, and an HTML viewer will definitely be available. The Internet Desktop will provide navigation as a universal support mechanism that cuts across the presentation applets. For example, the Desktop's history mechanism will allow users to return to previously seen information objects no matter what presentation applet was used to display them: the history list, bookmark list, etc. will include Internet objects, email messages, and corporate documents intermixed according to the individual user's information access behavior (each person has a single consciousness leading to a linear user experience that can structure the history of information use). Navigation StructureThe Rise of the Sub-Site http://www.useit.com/alertbox/9609.html Single pages are obviously not sufficient as a structuring mechanism, and from the early days of the Web, I have advocated an emphasis on the site as an additional fundamental stucturing unit. Since a single click can take the user to the other end of the world, every page needs to provide users with a sense of place and tell them where they have landed. A recommended standard is to put a corporate or organizational logo in the upper left corner of the screen (upper right corner in countries using a right-to-left language). When clicked, this logo should take the user to the main home page for the site. Explicit recognition of the site as a structuring mechanism is important for Web usability, but most websites are much too large for the site level to provide the only structure. Much information can be hierarchically organized, and an explicit representation of the hierarchy can be added to the top of the page to provide additional context and navigation options. For example, the intranet for the hypothetical BigCo company might have the following list of the nested hierarchy leading to the home page for the Stockholm office: BigCoWeb -> Sales -> European Region -> Sweden -> Stockholm Office Each of the elements in the hierarchy list should be made a hyperlink to the appropriate top page for that level of the hierarchy. Note that the name of the lowest level of the hierarchy (here, "Stockholm Office") should not be a link when displayed on the top page for that level. Even the lowest-level name should be made active when displayed on a leaf page on that level. For information spaces that cannot easily be hierarchically structured, the sub-site can be used as a helpful additional structuring mechanism. Sub-sites can also be used in hierarchical information spaces to give particular prominence to a certain level of the hierarchy which is used as the sub-site designator. By "sub-site", I simply mean a collection of Web pages within a larger site that have been given a common style and a shared navigation mechanism. This collection of pages can be a flat space or it can have some internal structure, but in any case it should probably have a single page that can be designated the home page of the sub-site. Each of the pages within the sub-site should have a link pointing back to the sub-site home page as well as a link to the home page for the entire site. Also, the sub-site should have global navigation options (e.g., to the site home page and to a site-wide search) in addition to its local navigation. Lay Out and DesignInverted Pyramids in Cyberspace http://www.useit.com/alertbox/9606.html Journalists have long adhered to the inverse approach: start the article by telling the reader the conclusion ("After long debate, the Assembly voted to increase state taxes by 10 percent"), follow by the most important supporting information, and end by giving the background. This style is known as the inverted pyramid for the simple reason that it turns the traditional pyramid style around. Inverted-pyramid writing is useful for newspapers because readers can stop at any time and will still get the most important parts of the article. On the Web, the inverted pyramid becomes even more important since we know from several user studies that users don't scroll, so they will very frequently be left to read only the top part of an article. Very interested readers will scroll, and these few motivated souls will reach the foundation of the pyramid and get the full story in all its gory detail. Therefore, we would expect Web writers to split their writing into smaller, coherent pieces to avoid long scrolling pages. Each page would be structured as an inverted pyramid, but the entire work would seem more like a set of pyramids floating in cyberspace than as a traditional "article". Good example of inverted-pyramid site: The Ziff-Davis AnchorDesk starts with a paragraph-length summary of each story. Click on a link to get a page-length story and click again (if interested) for extensive background articles.Writing for the Web http://www.useit.com/alertbox/9703b.html The three main guidelines for writing for the Web are:
Short Texts - Reading from computer screens is about 25% slower than reading from paper. Scannability - users scan text and pick out keywords, sentences, and paragraphs of interest while skipping over those parts of the text they care less about.
Hypertext Structure – 1. Make text short without sacrificing depth of content by splitting the information up into multiple nodes connected by hypertext links. Each page can be brief and yet the full hyperspace can contain much more information than would be feasible in a printed article. Long and detailed background information can be relegated to secondary pages; similarly, information of interest to a minority of readers can be made available through a link without penalizing those readers who don't want it. 2. Hypertext should not be used to segment a long linear story into multiple pages: having to download several segments slows down reading and makes printing more difficult. Proper hypertext structure is not a single flow "continued on page 2"; instead split the information into coherent chunks that each focus on a certain topic. The guiding principle should be to allow readers to select those topics they care about and only download those pages. In other words, the hypertext structure should be based on an audience analysis. 3. Each hypertext page should be written according to the "inverse pyramid" principle and start with a short conclusion so that users can get the gist of the page even if they don't read all of it. Marginalia of Web Design http://www.useit.com/alertbox/9611.html Page Titles Many of these important uses of the page Different pages need different titles. It is very unpleasant to visit, say, seven pages with the same title and then try to go back to a specific page from the history list. A final point is to optimize titles for quick scanning. This implies moving information carrying terms toward the beginning of the title and preferably starting with a word that will match the user's needs when scanning down a menu or listing of titles. A classic mistake is to use a title like Welcome to MyCompany. It would be much better to call the page MyCompany - Home Page. In addition to titles, other ways of referring to Web pages include verbal and visual summaries. Normally, such summaries are very difficult to produce algorithmically. The main exception is the miniature as shown by the illustration to the right. The figure shows a miniature of this page, generated by scaling it to 15 percent of full size. In general, page miniatures are only good as representations for highly graphic pages or pages with very characteristic layout. Text Size and Color On the Web, blue text equals clickable text, so never make text blue if it is not clickable. It is also bad, though not quite as bad, to make text red or purple, since these two colors are often used to denote hypertext links that have already been visited. It is not recommended to change the font size of all the text on a page since the user must be assumed to have set the default font size in his or her browser to exactly the size that is most comfortable for that user on his or her monitor. Relevance-Enhanced Image Reduction: Better Thumbnails Scaling reduces the image so much that pictures with extensive detail wash out and become too crowded to be meaningful. Cropping preserves those details that are within the new viewport, but at the cost of losing the context of the image as a whole. My recommendation is to use a combination of cropping and scaling, resulting in a technique I call relevance-enhanced image reduction. For example, to get a thumbnail that is 10 percent of the original image, first crop the image to 32 percent of the original size and then scale the result to 32 percent. The final image will be 0.32 x 0.32 = 0.1 of the original. Using Link Titles to Help Users Predict Where They Are Going http://www.useit.com/alertbox/980111.html For example, the HTML code for making my name
(immediately above the headline) into an anchor is The only downside is that link titles will add approximately 0.1 seconds to the download time for a typical Web page over a modem connection. This is a rather harsh penalty, but worth paying because of the increased navigation usability for those users who do get to see the link titles. Guidelines For Link Titles
Do not assume that the link title will look the same for all users. Indeed, auditory browsers will read the text aloud and not display it visually. Different browsers will display link titles in very different ways, as shown in the figure. Guidelines for Multimedia on the Web: http://www.useit.com/alertbox/9512.html Never include a permanently moving animation on a web page since it will make it very hard for your users to concentrate on reading the text. Animation (can be used for the following) Video User studies of CD-ROM productions have found that users expect broadcast-quality production values and that users get very impatient with low-quality video. A special consideration for video (and spoken audio) is that any narration may lead to difficulty for international users as well as for users with a hearing disability. People may be able to understand written text in a foreign language because they have time to read it at their own speed and because they can look up any unknown words in a dictionary. The classic solution to these problems is to use subtitles but as shown in the following figure, subtitles require special attention on the web. … the subtitles in the letterbox are constructed by enlarging the video area for the movie file with a 24-pixels high black area. Doing so does not increase the file size proportionally since the black area compresses very nicely. Even so, it would be better to transmit the subtitles as ASCII (or Unicode) and have them rendered in the letterbox on the client machine: a perfect job for an applet. Audio Mood-setting audio should employ very quiet background sounds in order not to compete with the main information for the user's attention. Voice recordings can be used instead of video to provide a sense of the speaker's personality Non-speech sound effects can be used as an extra dimension in the user interface to inform users about background events Simple examples from web user interfaces are the use of a low-key clicking sound to emphasize when users click a button and the use of opposing sounds (cheeeek chooook) when moving in different directions through a navigation space. Response Time It is recommended that the file format and size are
indicated in parentheses after the link whenever you point to a file that would take more
than 15 seconds to download with the bandwidth available to most of your users. The feeling of directly manipulating objects on the screen requires 0.1 second response times. If users do not need to feel a direct physical connection between their actions and the changes on the screen, then response times of about 1.0 second become acceptable. So, for example, jumping to a new page or recalculating a spreadsheet should happen within a second. Response Time http://www.useit.com/papers/responsetime.html 0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result. 1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data. 10 Seconds is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect. Print Material http://www.useit.com/alertbox/9602.html It is an unfortunate fact that current computer screens lead to a reading speed that is approximately 25% slower than reading from paper. The reduced reading speed on computers can be compensated by good hypertext design that allows the user to read less information and to find it faster. A typical example is online help and documentation: because the information is right there on the computer, there is no need to spend time finding the hardcopy manual, and because of good search tools and hypertext links between related information, users can go directly to the one or two sections that contain the answer to their problem. In any case, our surveys have shown over and over again that users do like the ability to get long documents in hardcopy, which is why even online publishing systems need a print feature. My recommendation is to generate two version of all long web documents: one that is optimized for online viewing (is chunked appropriately into many files and has plenty of hypertext links) and one that is optimized for printing (has good layout and is in one piece). The print file should probably be in formats like PostScript or PDF. It is extremely important to denote any such files as being for printouts only and always supplement them with links to the same content in HTML for online viewing by users who want to browse or search a small part of the document. Top Ten Mistakes in Web Design http://www.useit.com/alertbox/9605.html 1. Using Frames - All of a sudden, you cannot bookmark the current page and return to it (the bookmark points to another version of the frameset), URLs stop working, and printouts become difficult. Even worse, the predictability of user actions goes out the door: who knows what information will appear where when you click on a link? 2. Gratuitous Use of Bleeding-Edge Technology - Using the latest and greatest before it is even out of beta is a sure way to discourage users: if their system crashes while visiting your site, you can bet that many of them will not be back. Don't use VRML if your data is N-dimensional since it is usually better to produce 2-dimensional overviews that fit with the actual display and input hardware available to the user. 3. Scrolling Text, Marquees, and Constantly Running Animations - Moving images have an overpowering effect on the human peripheral vision. <BLINK> is simply evil. 4. Complex URLs - A URL should contain human-readable directory and file names that reflect the nature of the information space. 5. Orphan Pages - Make sure that all pages include a clear indication of what web site they belong to since users may access pages directly without coming in through your home page. For the same reason, every page should have a link up to your home page as well as some indication of where they fit within the structure of your information space. 6. Long Scrolling Pages - Only 10% of users scroll beyond the information that is visible on the screen when a page comes up. 7. Lack of Navigation Support - Start your design with a good understanding of the structure of the information space and communicate this structure explicitly to the user. Provide a site map and let users know where they are and where they can go. Also, you will need a good search feature since even the best navigation support will never be enough. 8. Non-Standard Link Colors - Links to pages that have not been seen by the user are blue; links to previously seen pages are purple or red. Don't mess with these colors since the ability to understand what links have been followed is one of the few navigational aides that is standard in most web browsers. Consistency is key to teaching users what the link colors mean. 9. Outdated Information - In practice, maintenance is a cheap way of enhancing the content on your website since many old pages keep their relevance and should be linked into the new pages. 10. Overly Long Download Times - Traditional human factors guidelines indicate 10 seconds as the maximum response time before users lose interest. On the web, users have been trained to endure so much suffering that it may be acceptable to increase this limit to 15 seconds for a few pages. International Web Usability http://www.useit.com/alertbox/9608.html Most of the guidelines remain the same: don't use icons that give your users the finger (or the foot, or other gestures that are offensive in their culture), don't use visual puns (e.g., a picture of a dining table as the icon for a table of numbers), don't use baseball metaphors (except, obviously, at baseball sites), translate fully if you do translate, and so on. Make it clear up front if you are only interested in serving a local market to avoid wasting both parties' time. Always make it clear if different models, prices, or procedures apply in different countries. Any times listed on a web page should always at a minimum make it clear whether they are given in the AM/PM system or the 24-hour system (and if AM/PM, then these suffixes should be given) and which time zone they refer to. Time zone abbreviations (e.g, EDT) are not universally understood, so supplement them with an indication of the difference to GMT. Many users don't understand GMT either, so optimal usability would involve translating the time into local times in a few major locations (e.g., "the press conference starts 1:00 PM in New York (GMT -5), corresponding to 19:00 in Paris and 3:00 the next day in Tokyo"). If language choice is supported by a site, I recommend providing a link to the choice on every single page since users often go directly to pages from search services or bookmarks without passing through the home page. PrintingFor rich or large hyperspaces, I recommend providing a special version that can be downloaded and printed as a single document. Any file that is intended for printing must be able to accommodate the two most common page formats: A4 and 8.5x11 (U.S. Letter). To do so, the width of the page must fit on an A4 sheet and the height of the page must fit on an 8.5x11 sheet, since A4 is the narrowest format and 8.5x11 is the shortest format. It is recommended to leave a margin of at least half an inch (13 mm) for all four sides of the page to ensure that it will print on all printers and to facilitate photocopying. With half-inch margins, the printable area is 7 1/4 inches (18.5 cm) wide by 10 inches (25.4 cm) tall; with one-inch margins (preferred), the printable area would be 6 1/4 inches (15.9 cm) by 9 inches (22.9 cm). Accessible Design for Users With Disabilities http://www.useit.com/alertbox/9610.html Before discussing the difficulties disabled users may have in accessing Web information, we should note that online information provides many benefits compared with printed information: it is easy for people with poor eyesight to increase the font size, and text-to-speech conversion for blind users works much better for online text than for print. Visual Disabilities The most serious accessibility problems given the current state of the Web probably relate to blind users and users with other visual disabilities since most Web pages are highly visual. For example, it is quite common to see combinations of background and foreground colors that make pages virtually unreadable for colorblind users. Textual pages are reasonably easy to access for blind users since the text can be fed to a screen reader. Long pages are problematic since it is harder for a blind user to scan for interesting parts than it is for a sighted user. In order to facilitate scanning it is recommended to emphasize the structure of the page by proper HTML markup: use <H1> for the highest level heading, <H2> for the main parts of the information within the <H1>s, and <H3> and lower levels for even finer divisions of the information. By doing so, the blind user can get an overview of the structure of a page by having the <H1>s and <H2>s read aloud and can quickly skip an uninteresting section by instructing the screen reader to jump to the next lower-level heading. Most people already know about the use of ALT attributes to provide alternative text for images, though there are still many Web pages without ALTs. Some accessibility specialists advocate so-called described images, where text is provided to verbalize what a seeing user would see. All imagemaps should be client-side and should use ALT attributes for each of the link options so that a user who cannot see the image can have descriptions of the destination read as he or she moves the cursor around. There are still some browsers that only support server-side imagemaps, but client-side imagemaps are clearly the way to go in the future. In addition to completely blind users, there are many
users who can see but have reduced eyesight. These users typically need large fonts which
is a standard feature of most Web browsers. To support these users, never encode
information with absolute font sizes but use relative sizes instead. For example,
when using Style Sheets, do not set the Full support of users with reduced eyesight would require pages to look equally well at all font sizes. Doing so is often not practical, and it might be acceptable to make pages look slightly worse at huge font sizes as long as the basic page layout will still work. It is recommended to test pages with the default font set to 10, 12, and 14 point to ensure that the design is optimal for these common font sizes and then to make additional checks with default fonts of 18 and 24 points to make sure that the design still works at these accessibility-enhancing sizes. Auditory Disabilities People who are deaf or have other auditory disabilities rarely have problems on the Web since sound effects are usually totally gratuitous. Cognitive Disabilities People who have difficulty visualizing the structure of an information can be helped if the site designers have produced such a visualization for them in the form of a sitemap; they would be further aided if the browser updated the display of the sitemap with the path of the navigation and the location of the current page. Users with dyslexia may have problems reading long pages and will be helped if the design facilitates scanability by proper use of headings as noted above. Selecting words with high information content as hypertext anchors will help these users, as well as blind users, scan for interesting links (no "click here", please). Most search user interfaces require the user to type in keywords as search terms. Users with spelling disabilities (and foreign-language users) will obviously often fail to find what they need as long as perfect spellings are required. A first suggestion is to for search engines to include a spelling checker; other ideas from advanced information retrieval like query-by-example and similarity search can also help these users (and benefit everybody else at the same time). Top Ten Mistakes of Web Management http://www.useit.com/alertbox/9706b.html 1. Not Knowing Why - what the site should achieve. Granted, these days, you need a website simply to be considered a professionally run organization (not being on the Web is like not having a fax machine: people think you are a fly-by-night). Thus, it is OK to make a "business-card site" with a small amount of corporate image building, directions to your various facilities, and the annual report and other investor information. However, doing so is not the most effective use of the Web, and a site along these lines should only be built as a result of an explicit decision not to invest in active use of the Web for business. 2. Designing for Your Own VPs - Internally-focused sites cause companies to end up with home pages full of mission statements, photos of the CEO, and corporate history (all of which do fit on an "about this company" page; just not on the home page). Remember that your company is not the center of the universe for your customers. The site should be designed with customers' needs in mind and not to promote grandiose ideas of self-importance. Do not build a site that your top executives will love: they are not the target audience. 3. Letting the Site Structure Mirror Your Orgchart - The site structure should be determined by the tasks users want to perform on your site, even if that means having a single page for information from two very different departments. 4. Outsourcing to Multiple Agencies - If you outsource every new Web project to a new agency, your site will end up looking like one of those quilts assembled from patches by each of the participants in a protest march. Consistency is the key to usable interaction design: when all interface elements look and function the same, users feel more confident using the site because they can transfer their learning from one subsite to the next rather than having to learn everything over again for each new page. 5. Forgetting to Budget for Maintenance - The Web currently changes so rapidly that a major redesign is needed at least once per year simply to avoid a completely outdated look and to accommodate changing user expectations. 6. Treating the Web as a Secondary Medium - The only way to get great Web content is to have your staff develop the content for the Web first. Then, if you still have a need for printed collateral, transfer the text and images to a desktop publishing application and massage it into a form that is suited for print. Of course, your print materials will suffer from this procedure, so if you want great Web content and great brochures, you will have to have two teams develop two sets of content. 7. Wasting Linking Opportunities - Include their URLs in all advertising, TV commercials, press releases, and even in the products themselves. . Do not link to your homepage in your ads. Instead, link directly to the product page from the ad. 8. Treating Internet and Intranet Sites the Same – Example: I am appalled when I hear of intranet managers who put advertising on their site to pay for their equipment costs. If, for example, the value of an average employee's time is $1 per minute and users spend 3 seconds more per page because of the ads, then each ad costs the company 5 cents in lost employee productivity. 9. Confusing Market Research and Usability Engineering - A Web design is an interactive product, and therefore usability engineering methods are necessary to study what happens during the user's interaction with the site. 10. Underestimating the Strategic Impact of the Web - Ask your CTO and head of marketing what strategic thoughts they have relating to terms like "disintermediation", "virtual project teams", and "microtransactions." Search and You May Find - http://www.useit.com/alertbox/9707b.html As a rule of thumb, sites with more than about 200 pages should offer search. Guidelines for search include:
Our usability studies show that more than half of all users are search-dominant, about a fifth of the users are link-dominant, and the rest exhibit mixed behavior. First, there is obviously a need to support those users who don't like search or who belong to the mixed-behavior group. Second, users who get to a page through search still need structure to understand the nature of the page relative to the rest of the site. Search should be easily available from every single page on the site. Scoped Search - restricted to search that subsite only (the search scope). In general, I warn against scoped search since our observations have shown that users often don't understand the structure of sites. All scoped search pages must do two things:
Relegate Booleans to Advanced Search - I recommend minimal use of scoped search and no use of boolean search in the primary search interface. Advanced search is fine if offered on a different page than the simple search. The advanced search page can provide a variety of fancy options, including booleans, scopes, and various parametric searches (e.g., only find pages added or changed after a certain date). It is important to use an intimidating name like "advanced search" to scare off novice users from getting into the page and hurting themselves. Search systems can be made more usable by incorporating spelling checks (both for user queries and for document terms), by offering synonym expansion, by explicitly recognizing the concept of quality in addition to relevance, and by presenting results relative to the structure of the site. Loyalty on the Web http://www.useit.com/alertbox/9708a.html The classic way to increase loyalty on the Web is to have fresh content that changes on a predictable basis. Many sites even offer users an option to sign up for an email newsletter that reminds them when new material is available. Such update notifications are most valuable for sites that change at most once per week: any more frequent updates and the email becomes an annoyance for many users who will ask to be taken off the distribution list. Getting users to bookmark your site is almost as good as getting them to voluntarily receive your email. There is not much you can do to get users to bookmark your site, except making it possible to do so: no URL-eating frames, and no weird one-time-only links that do not work for subsequent visits. You can also create landmark pages that will be useful for repeat visits and thus tempt users to create bookmarks: for example, a page listing all the columns in a series, a page listing current best-sellers, or a page listing new products. Use a cookie rather than an explicit log-in sequence to track users unless your site has high security requirements. If log-in is needed, use the standard HTTP authentication mechanism rather than your own log-in screen: in many cases, users will then be able to have the browser remember the userid and password for them. Usability studies show that users almost never remember their passwords, so they typically write them down anyway. After several visits, the site will fit the user's needs so well that the user will be reluctant to move to another site that cannot offer the same service initially. The most traditional way to achieve this goal is to encourage the user to enter a user profile: for example, a portfolio listing on a stock site to allow one-click valuations, or keywords of interest on a news site to generate a personalized front page with the news of most interest to that user. Customization works better if the site can gather information about users unobtrusively. For example, Amazon.com asks users to enter a complete shipping address for their first order, but if they order again, they will discover that the server has saved their address, making their second transaction much faster.
|