Design Specifications and Guidelines - Window Management

  • Article

Web-Application Interface

The Web provides a well-established model for moving between multiple views or documents using navigation mechanisms, such as hyperlinks and commands, such as Back and Forward. The Windows platform enables you to include the richness of the Web in a locally run application.

Web-Style Design

You can incorporate Web access into a Web-style application interface in any of the following ways:

  • Run your application within the browser.
  • Include the WebBrowser control to display HTML content.
  • Mimic the Web form of presentation and navigation.

Consistency

Although Web-style applications allow for greater expression and freedom of design, the need for consistency still applies and should be adhered to, particularly in the following areas:

  • Consistency with common operating system interface conventions — for example, in Windows, a navigational hyperlink is indicated when the pointer changes to the pointing hand image as the user moves over the defined link area.
  • Consistency with de facto industry Web conventions — for example, the terms "home," "back," and "forward" already have an accepted meaning among users and should be used consistently in your application's design.
  • Internal consistency — layout and navigational interfaces need to be consistent from page to page. Common elements such as headers, footers, navigation aids, fonts, color, and general layout conventions should be presented in a manner consistent with their purpose.

A key success factor of any Web-style design is its support for navigation and organization. Always give users a clear indication of where they are and how they can get to where they want to go.

To design your navigation, begin by dividing the functionality into separate activities and tasks, and determine both their relationships and the paths to them. Then map your navigational design. A central context or home page is a useful and consistent starting point, and an important reference point for user navigation. Try to achieve a good balance between breadth and depth. Avoid a very shallow hierarchy that forces the user to backtrack to a particular page in order to move to others. Such a design makes navigation not only tiresome but annoying. However, making the user navigate through multiple levels of menus before getting to information can also be annoying.

When you provide access to a page from multiple locations, avoid the assumption that the user is coming from a single context. Label all contexts so users know where they are.

When your application is not operating directly in the browser, provide your own navigation bar for the user. Make sure that the Forward and Back commands work properly, and maintain an internal history log. Users rarely understand exactly what these commands will do other than take them forward or back with respect to the current location.

Avoid relying only on the basic navigation controls. Many users have difficulty predicting what the Back command will do because the command sometimes goes back to the same level and sometimes up a level depending on the navigational design. Therefore, you may need to provide additional navigation controls that more directly navigate within a specific level. Be careful not to confuse Next and Previous with the Back and Forward commands.

The Next and Previous commands imply navigation at the same level. In some situations, the user may have difficulty understanding the difference between the Next and Back commands, so be specific in defining your application's general navigational controls. For example, instead of a Previous button, use a descriptive reference label such as "Selecting a Product." You can also use thumbnail graphics (screen miniatures) to represent previous pages.

You must also choose whether to implement supplemental interfaces for gathering parameters as new pages in the navigational stack or in a separate dialog box window. To decide, consider the flow of the task and the importance of maintaining a centralized context.

Page Design

In a Web-style design, a page is the span of information that can be viewed in a window. It often does not correspond to the size of a printed page. Because pages are viewed on-screen, design your pages and their size to take this into account. A good rule of thumb is to limit the page size to a single maximized window. Usability studies have shown that users have difficulty reading and retaining information in documents that require extensive scrolling, or they may not see content located outside the current view.

The screen resolution you design for depends on your target audience. While many users now use an 800 x 600 display, if you want to reach the maximum number of users, target a 640 x 480 display. If you need to provide scrollable information, create an embedded list rather than making the entire page scrollable. Similarly, design your page horizontally to fit within a maximized window.

Because you can embed commands directly into pages, conventional menus — that is, a menu bar on the page's window — might seem extraneous. However, menus are valuable for presenting global commands, supporting primary navigation, and documenting keyboard shortcuts. Similarly, consider including shortcut menus. They can be useful to provide quick access to actions for a single object. Avoid designing menus as part of the content of a page, because they can be difficult for users to find.

Keep in mind that the user can override the formatting of any Web-based application or document you host in the browser. Make sure your application remains usable when the user adjusts the color, font, and accessibility options in Internet Explorer, as these will affect how your application is displayed.

In Web-style applications, you can include both hyperlinks and command buttons in your interface. As a general rule, use hyperlinks for navigating to locations and buttons for carrying out actions.

Because you can include links to other documents, let users know when they will be going outside the local context. Otherwise, users may get disoriented and have difficulty returning to the previous context. You may want to consider placing such links in a separate location or otherwise distinguishing them on the page rather than mixing them with the internal content. For example, you can include a graphic or description that makes a link to another document obvious.

Avoid navigational dead ends. Provide links that allow the user to return to the previous page. At a minimum, consider a link back to a primary navigation page, such as the home page or the table of contents page.

Finally, when you design any Web-based application or content, be sure to follow the standards set by the World Wide Web consortium for accessibility of Web content. This will ensure that your application is accessible to the widest possible range of users and that it is compatible with automation tools. For more information, see the Microsoft Accessibility Web site at https://www.microsoft.com/enable.

Design Trade-offs

Web-style design offers many benefits, including richer visual expression and hyperlink navigation conventions. It also provides for a more document-oriented, rather than application-centered, design. However, like workbooks, a Web-style application design limits views to a single window. It also requires that you provide a secondary navigational interface and offers more cumbersome and restricted keyboard access.

Fundamentals of Designing User Interaction

Windows Interface Components

Design Specifications and Guidelines

Appendixes and References