Editor's note: Douglas van Duyne is a principal at Naviscent LLC, which recently partnered with Oracle in the design of future Applications user interfaces, and is the lead author of The Design of Sites (2003). I invited Doug to contribute a multipart blog describing the process he uses to design the user experience. This is the first of three blogs which will appear monthly in this space.
Our seven principles of Web design are intended to guide you to the destination you want to reach when you are finished building a Web site.
The seven design principles are as follows:
1. Be consistent throughout.
2. Offer informative feedback.
3. Rely on recognition over recall.
4. Help customers avoid and recover from errors.
5. Support customer control and freedom.
6. Help frequent customers use accelerators.
7. Strive for aesthetic and minimalist design.
1. Be Consistent Throughout
Consistency applies throughout the entire Web site, which encompasses several dimensions. Similar tasks should use a consistent sequence of actions throughout the entire site.
For example, you should place the navigation bar in the same place on each page. This helps the customers reach important parts of the Web site in a structured, organized, and understandable manner. There are three common types of navigation bars, as follows:
· Top-running navigation bar A top-running navigation bar stretches across the top of a Web page, as shown in the figure below. This type of navigation bar often functions as the top-level navigation, linking directly to different subsites or categories.
· Side-running navigation bar The common practice is to place a side-running navigation bar down the left side of a Web page, even on sites that you design for languages that read from right to left. These navigation bars provide more room for labels than top-running navigation bars. Their purpose is often to present second-level navigation, providing links within a subsite.
· Top-and-left navigation bar This navigation bar is sometimes referred to as an inverted L, because it resembles an upside-down letter L. The bar runs across the top and down the left side of a Web page. The top-running portion provides navigation across departments or subsites, and the side-running portion provides deep navigation within the current subsite.
Navigation bar consistency. Mixing these navigation bars within a single site leads to confusion for users, as they grope their way around the site, looking for the link that they need. By keeping the location of the bar consistent, it becomes second nature for users to look in a specific place for navigation links. The need for consistency also applies to the use of colors, fonts, and layouts throughout the pages of a site. A unified appearance reinforces the user's comfort at remaining in the same place. Pages with wildly divergent appearances might make users think that they've wandered into another site. You can implement the site's appearance manually or through the use of style sheets. Creating style sheets makes it easier to generate changes to the Web site later. The best practice is to separate the content and navigation code from that which provides the design and the layout, as shown in the figure below. Separating content and navigation code (missing connector to Screen Reader) This technique enables you to easily reuse the content and navigation code to build different designs as needed. For example, if you need a separate version of a site for mobile devices, you can use the same content and navigation code, and create a mobile style sheet to apply to it. If you have to create site pages that are most likely to be printed, you can create a print style sheet. Building Web sites in this manner, with customer's needs in mind, makes the sites more usable for everyone. Make sure that task-critical action buttons are distinct and located in the same general position across different parts of the site, so that customers can find them with ease. When working on a task, customers looking at a Web site can become frustrated if they can't figure out the next step. Because Web pages "fold" in different places (due to a browser's window size), the best practice is to place critical action buttons as close to the top of a page as possible, without being at the absolute top, as shown in the following figure. Placement of task-critical action buttons - Current page to the next page. Use identical terms throughout the Web site. Follow real-world conventions and use familiar terminology, rather than technical jargon. Stick to terms that your customers will understand. Interview and observe test customers to make sure that they understand the Web site. Use the information that you gather from this test group to create content and links that are understandable and predictable to your customers. Applying customer terminology. The next blog entry will continue our discussion with the remaining principles
