cs413_design06.ppt

User Interaction Design Guidance

Standards

Guidelines

Style Guides

The user should not have to adapt to the interface

cs413_design06.ppt

Human Factors Information

User interaction standards

Official, publicly available documents

Give requirements for user interaction design

Enforceable by contract or by law

Very general wordingHard to determine whether the standard has been met

“The content of displays within a system shall be presented in a consistent, standardized manner.”

cs413_design06.ppt

Human Factors Information

User interaction standards

Who determines the standards?

Who interprets the standard?

Who decides the standard has been met?

Standards are:

Very generalVery simpleInterpretative

Draw attention to the development of the user interface

cs413_design06.ppt

Human Factors Information

User interaction design guidelines

Differ from standards:

Not legally enforcedOften contradictoryNot specific to a single

organizationPublished in books, reports,

articlesCross a broad spectrum of

user interaction design

Empirically derived and/or validated

Based on educated opinion and/or experience

Serve as suggestions – not demands

cs413_design06.ppt

Human Factors Information

guidelines

Are general in their applicability

Require interpretation

Main advantage:

Flexible guidance

Establishes design goals and decisions

(draws attention to the interface)

cs413_design06.ppt

Human Factors Information

Commercial style guides

Commercially produced

Commercial product

Provides concrete and useful framework for design

Typically Includes

Description of specific interaction:

“look” (appearance)“feel” (behavior)

cs413_design06.ppt

Examples:

•User interface guidelines from Apple

•Common User Access (CUA)/IBM

•OpenLook from AT&T

•Motif from OSF

cs413_design06.ppt

Definition v.s. explanation in guidelines

•Pop-up menus:Contain push buttons, radio buttons, or

check buttonsCan have selections that lead to dialog

boxes or other controlsAre always presented

Vertical columnAssociated with a particular area

of the screen.

•Advantage of pop-up menusRequire no mouse travelPop-up at the current mouse location Take up no screen space until they are

displayedProvide no visual cue to their existence

cs413_design06.ppt

Tradeoff issues:

Between a pop-up menu and push buttons

Both provide users with quick access to application functions.

•Pop-up menus Preferable when users are focused on

their work areasMoving the mouse between a control

panel and the work area would be distracting

cs413_design06.ppt

Guidelines

Know your users

•Practice user-centered design

•Study user population and understand their behavior

•Ask them to describe their tasks and goals

•Perform task analysis and user requirements

•Involve the user via participatory design

•Ask users to provide mock-ups of interface design

cs413_design06.ppt

“To err is human; to forgive is by design.”

•Design for errors

•Provide legal choicesGray out illegal choices

•Provide key completion

•Match parentheses

Partener with users•Keep the locus of control with the user

•Users are in charge, not the machine

•Understand the division of labor

•Help the user get started with the system

•Most users are impatient

•Don’t rely on a long readme documents and ‘help’ screens

cs413_design06.ppt

Consistency

•In look, feel, functions

•The principle of least astonishment

KISS principle

•Keep it simple and stimulating

•Not simple to do

•Many designers cannot help giving users all the widgets they can offer

•Hacker’s chauvinistic syndrome

cs413_design06.ppt

Interaction designers:•Make an effort to keep simple tasks easy

•Make complex tasks possible

•Sensible to human cognitive characteristics

•Account for human memory limitations

•Give the user frequent closure on tasks

Memory problems•Memory is what people forget with

•Our short-term memory can be measured roughly by the famous “seven plus or minus two chunks” rule (Miller, 1956).

•The duration of our short-term memory is really short

cs413_design06.ppt

Task closure•Allow users to perform a task without having to distract their attention by

• Forcing them to work in different windows

• Traversing a long list of choice items

• Help them focus

• Provide clear cues for context switching

The top-down approach •User divides tasks into subtasks

•Then divides subtasks into subsubtasks

•Solve a small unit of the problem

•Would have to do backtracking to come to upper levels in order to proceed

cs413_design06.ppt

Let the user recognize, rather than having to recall

•Commonality in design

•User comfortability

•More expedient system usage

Cognitive directness

•Minimizing mental transformations

•Use meaningful letters for accelerator-keys

cs413_design06.ppt

Use informative feedback

•Closed-loop communication

•Better than open loop

•Users can gauge the effects of their actions

Appropriate status indicators

•Time device when an operator requires waiting

•A continuously moving (or animated) device

•Help users relax

Use positive, encouraging error messages

•“505 hex 0001F9 doublewords of storage were not recovered.” Secretaries discovered that none of the professors seemed to know for sure what this message meant.

•“Fatal error, run aborted.”

•“Catatrophic error, logged with operator.”

•“(sign of a bomb) Error type 11 has occured, Restart.”

cs413_design06.ppt

Constructive and informative messages

Allow users to learn and correct their behavior E.g., syntax error, entry out of allowable

range

•Give positive, specific, constructive, user-centered messages.

Do not anthropomorphize

•Attributing human characteristics to nonhuman objects, such as cars or computers

•Results can be patronizing, irritating, deceitful

GET the user’s ATTENTION judiciously

•Can be over and misused

•Only two levels of intensity of text on a single screen

•Underlining, bold, inverse video sparingly

cs413_design06.ppt

No more than four different font sizes on a single screen

Fonts with a serif are easier to read(serifs help a user’s eye glide across the text)

•THE SPEED FOR READING UPERCASE LETTERS IS MORE THAN 10% SLOWER

•NO MORE THAN 4 DIFFERENT COLORS ON A SINGLE SCREEN

•NO MORE THAN SEVEN DIFFERENT COLORS THROUGHOUT A SINGLE APPLICATION

•Blue should not be used for text: one of the hardest colors to read

•A constant bright background for long periods of time can cause eye strain

cs413_design06.ppt

LAB/Homework:

Find five web sites that you consider poorly designed.

Find five web sites that you consider well designed.

Be prepared to have them display on the screen and describe your thoughts.