• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Design Principles

Design goals represent the destination you want to reach when you're finished building a Web site. Design principles guide you to that destination. The patterns in this book were guided by design principles, as well as by observation of what has worked well for customers. Here we present some basic design principles that you can use to tailor the patterns to your particular situation. Entire books could be written about these principles. The seven that we present are based on those from some of the most respected sources, specifically Ben Shneiderman's eight golden rules of interface design, Jakob Nielsen's ten heuristics, and Edward Tufte's musings on information presentation:

  1. Be consistent throughout. Consistency applies across several dimensions. Use a consistent sequence of actions to carry out similar tasks. Pages should have consistent color, layout, and fonts. For example, your NAVIGATION BAR (K2) should be in the same place on every page, and ACTION BUTTONS (K4) that do the same thing should appear in the same general location across different parts of the site. Use identical terms in different places across the site. Make your site consistent with the real world: Follow real-world conventions, and use FAMILIAR LANGUAGE (K11) by using terms that your customers will understand rather than technical jargon.

  2. Offer informative feedback. Make the status of the system visible, and keep your customers informed about what's going on. For example, this is the principle behind SECURE CONNECTIONS (E6), which lets customers know whether the information they are about to send over the Internet will be safe.

  3. Rely on recognition over recall. Short-term memory is the key limitation in human cognition. Reducing the short-term memory load is easy if people can recognize what they need to know from visible objects, actions, options, and directions. The memory load is much higher if they need to recall this information from memory with no visual aids. This is why a visual human–computer interface like that of the Macintosh or Windows is easier to learn than a command language–based interface like DOS. This is also why ACTION BUTTONS (K4) always have a textual label to go along with the graphical icon.

  4. Help customers prevent and recover from errors. Errors cause frustration, poor performance, and a lack of trust in your site. PREVENTING ERRORS (K12) will help avoid many of these problems. Unfortunately, no matter how well you design the site, humans will make occasional errors. Help people recover from errors by presenting MEANINGFUL ERROR MESSAGES (K13). Tell them what happened and how to recover, or better yet, offer to automatically carry out the steps that would help them recover from the error.

  5. Support customer control and freedom. Customers should sense that their actions determine the site's responses, and that they are not being forced down a fixed path. Providing MULTIPLE WAYS TO NAVIGATE (B1) is one example of how to support this attitude on your site. It also means that the customer is given easy exits, such as undo and redo, for mistaken choices. The browser's built-in Back and Forward buttons and LOCATION BREAD CRUMBS (K6) are both mechanisms that give customers easy exits on the Web.

  6. Help frequent customers use accelerators. Keyboard shortcuts are important for expert customers. Your site can support frequent actions automatically. For example, your site can store information such as shipping addresses so that your customers do not have to retype this information every time they come to that page. Design an ACCOUNT MANAGEMENT (H4) interface that makes it easy for your customer to see and change this stored information.

  7. Strive for aesthetic and minimalist design. Clean aesthetics make using your site a pleasing experience. A GRID LAYOUT (I1) is one common technique you can use to ensure that your site has a clean, understandable look. Well-designed type, images, and graphical elements communicate how the site works. Often visual elements are overused. If removal does no harm to the site, take out irrelevant information and graphics from all pages. Every extra element draws attention away from the ones that matter.[1]

    [1] As Edward Tufte says, “Graphical excellence is that which gives the viewer the greatest number of ideas in the shortest time, with the least ink in the smallest space.”



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint