Transcript Cs413_design02 - Site design by THE RESOURCE CENTER

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
Cs413_design02.ppt