Detailed design

The detailed design communicates how the interactive system will actually appear to users. Preece et al in Interaction Design divide detailed design into two components:

• Information design -- creating the display so that users successfully perceive it and make sense of it.
• Interaction design -- creating the interface so that users can successfully conduct their tasks

Our text (McCracken and Wolfe) emphasize information design since its focus is on Web sites.

Information design principles

For information design, our text (p. 83) presents four principles:

• Proximity. Keep related items together. Note the Gestalt principle by the same name.
• Alignment. Related items should line up on a page. Note that this is a special case of the continuity Gestalt principle.
• Consistency. Related items should have a similar appearance. Compare this design principle to the similarity design principle. Consistency for page layouts also helps users find information.
• Contrast. Make unrelated items look different.

This is an excellent web site for demonstrating Gestalt principles applied to information design. Note that it uses alternate terminology to describe the principles.

For testing the visual organization of a page, Mullet and Sano (from Designing Visual Interfaces) suggest the "squint test:" close one eye complete and squint with the other eye. View the page. Related items should appear together.

Grouping by screen or page

• Tabbed pages
• Links
• Advanced dialog boxes

Preece, Rogers and Sharp(in Interaction Design) suggest organizing items so that fewer than 8 are grouped together.

General Design Principles

Ben Shneiderman presents a list of general principles for creating detailed designs. Compare these principles to Jakob Nielsen's evaluation heuristics

Here is Shneiderman's list:

• Strive for consistency
• Enable frequent users to use shortcuts
• Offer informative feedback
• Design dialogs to yield closure
• Offer error prevention and simple error handling
• Permit easy reversal of actions
• Support internal locus of control
• Reduce short-term memory load

Selecting widgets

Examples of widgets (also called user controls) are

• Text fields
• Drop-down menus
• Buttons
• Selection lists
• Radio buttons

We will discuss how these are used in various applications and if the user controls were appropriately chosen for the type of interaction. Here are some examples for discussion:

• Campus connect
• Travelocity
• Currency conversion
• SAS Manual (may require password)