Cs413_design02.ppt GUI Design The User Controls Navigation Traditional GUI design the designer can control where the user can go gray out menu options that are not applicable display a modal dialog box that takes over the computer until the user has answered the question On the Web the user fundamentally controls navigation users can take paths that were never intended they can jump straight into a site from a search engine without going through the home page. users also control their own bookmark menu create a customized interface to a site

Cs413_design02.ppt GUI Design Web designers accommodate and support user-controlled navigation sites that feel harsh and dominating you force users through set paths prevent people from linking to certain pages Better to design for freedom of movement Example, put a logo (linked to the home page) on every page to provide context and navigation for users who have gone straight to that page.

Cs413_design02.ppt GUI Design Part of a Whole A traditional application an enclosed user interface experience the user is "in" a single application at any given time only that application's commands and interaction conventions are active users spend long periods of time in each application become familiar with its features and design On the Web users move between sites at a rapid pace the borders between different designs (i.e., sites) are very fluid rare for users to spend more than a few minutes at a any given site users navigation frequently takes them from site to site to site as they follow the hyperlinks

Cs413_design02.ppt GUI Design Because of rapid movement Users feel that they are using the Web as a whole rather than any specific site Users do not want to read any manuals or help for individual sites but demand the ability to use a site on the basis of the Web conventions Usability Studies users complain bitterly whenever they are exposed to sites with too diverging ways of doing things the Web as a whole has become a genre and each site is interpreted relative to the rules of the genre

Cs413_design02.ppt GUI Design Traditional GUIs are also part of a whole The balance between individual design and the whole tilts in favor of the whole for Web designs Designers should use their interface vocabulary to build sites that fit this whole Design to fit into the whole Acknowledge that your site is not the center of the users' universe Acknowledge that the user is going to move between sites Make it easy for them to use each new site as they go

Cs413_design02.ppt GUI Design Causes of Bad GUI Design Forgetting the User Developers design for what they know, not what the users know Important in the interface because it immediately makes the user feel incapable of using the product Not Giving Users Control controlling the user is completely contradictory to event-driven design the user rather than the software should dictate what events will occur empowering for the user Too Many Features Overloaded and/or busy pages Especially the Home Page Confusing Intimidating Inconsistent appearance

Cs413_design02.ppt GUI Design GUI Successes More intuitive than character-based systems use real-world metaphors bitmaps of Visa and MasterCard logos graphical representation was intuitive helped users to learn the application faster Speed and responsiveness handled via the GUI design and not the hardware can be the make-or-break factor in determining an application's acceptability appearance of speed in several ways avoid repainting the screen field validations occur on a whole-screen basis instead of on a field-by-field basis design features that give the power user the ability to enter each field of each data record rapidly (mnemonics, accelerator keys, and toolbar buttons with meaningful icons)

Cs413_design02.ppt GUI Design GUI Successes Dos And Don'ts Understand People applications must reflect the perspectives and behaviors of their users developers must first understand people because we all share common characteristics people learn more easily by recognition than by recall provide a list of data values to select from rather than have the users key in values The average person can recall about 2,000 to 3,000 words, yet can recognize more than 50,000 words.

Cs413_design02.ppt GUI Design GUI Successes Dos And Don'ts Be Careful Of Different Perspectives Use a general perspective for icons Not all users will recognize “creative” icon meanings Design for Clarity develop and use a list of reserved words common complaint is that certain terms are not clear or consistent one screen may say "Item," while the next screen says "Product," and a third says "Merchandise" lack of consistency ultimately leads to confusion and frustration for users.

Cs413_design02.ppt GUI Design GUI Successes Design for Consistency consistent behavior throughout the application build upon a user's prior knowledge provide the user with as many consistent behaviors as possible each new and exciting experience you provide in the software can become an anxiety-inducing experience Provide Visual Feedback knowing how much longer a given operation will take most users like to have a message dialog box with a progress indicator displayed when operations are going to take longer than seven to ten seconds Provide Audible Feedback audible feedback can be annoyance used too much useful in cases where you need to warn the user of an impending serious problem allow users to disable audio feedback

Cs413_design02.ppt GUI Design GUI Successes Keep Text Clear Concise wording of text labels, user error messages, and one-line help messages Provide Traceable Paths an intuitive menu structure from which to launch features flatten the menu structure and avoid more than two levels of cascading menus provide a descriptive title bar Provide Keyboard Support keyboards are a common fixture provide an efficient means to enter text and data keyboard accelerators accelerators should be easy to access and limited to one or two keys (such as F3 or Ctrl-P). Provide complete and equal keyboard and mouse support for all menu and window operations

Cs413_design02.ppt GUI Design GUI Successes Control Design Controls are the visual elements that let the user interact with the application Choose the appropriate control for each user task