Design Principles of

Human-Computer Interaction

Paul Pop
Embedded Systems Laboratory
Department of Computer and Information Science
Linköpings universitet

1 of 40
March 20, 2001
 Outline

■ Design process
■ What is design?
■ Traditional Waterfall Model vs. User-Centered Design

■ Design principles, guidelines, rules and standards

■ Know the users and their tasks
■ Choose the right interaction model
■ Psychological principles of design
■ The eight golden rules of interface design
■ User interface guidelines

■ Summary

Design Principles of HCI 2 of 40

Paul Pop March 20, 2001
 What is Design?

■ In general...
■ “Finding the right physical components of a physical structure.”
■ “A goal-directed problem-solving activity.”
■ “A creative activity – it involves bringing into being something
new and useful that has not existed previously.”

■ Design is a process...
■ “Engineering design is the use of scientific principles, technical
information and imagination in the definition of a mechanical
structure, machine of system to perform pre-specified functions
with the maximum economy and efficiency.”

Design Principles of HCI 3 of 40

Paul Pop March 20, 2001
 Design Process: The Waterfall Model

Requirements
Requirements
analysis
analysis and
and
definition
definition

System
System and
and
software design
software design

Implementation
Implementation
and
and unit
unit testing
testing

Integration
Integration and
and
system testing
system testing

Design Principles of HCI 4 of 40

Paul Pop March 20, 2001
 Problems with the Waterfall Model

■ Unrealistic: requirements are often incomplete and ambiguous.

■ In practice, the stages overlap and there is feedback from a
stage to the previous stage(s).
■ The software process is not a simple linear model but involves a
sequence of iterations of the development activities.
■ Maintenance is an important stage, up to 60% of the total effort.
■ Etc.

■ Main problem: not user-centered

■ It is impossible to completely understand and express user
requirements until a large amount of design has already been done.

Design Principles of HCI 5 of 40

Paul Pop March 20, 2001
 Designing HCI

■ HCI design model should:

■ be user-centered and involve users as much as possible
so that they can influence the design,

■ integrate knowledge and expertise from the different

disciplines that contribute to HCI design,

■ be highly iterative so that testing can be done to check

that the design does indeed meet users’ requirements.

Design Principles of HCI 6 of 40

Paul Pop March 20, 2001
 The Star Life Cycle

Task
Task analysis/
analysis/
Implementation
Implementation functional
functional analysis
analysis

Requirements
Requirements
Prototyping
Prototyping Evaluation
Evaluation specification
specification

Conceptual
Conceptual design/
design/
formal design
formal design

Design Principles of HCI 7 of 40

Paul Pop March 20, 2001
 User Centered Design

■ External analysis
■ Know the users,
■ Know their tasks.

■ Design and prototype

■ Design to fit the system to the users and their tasks.

■ Evaluate and iterate

■ Evaluate the design,
■ Iterate until a good design is achieved.

Design Principles of HCI 8 of 40

Paul Pop March 20, 2001
 Know the Users and their Tasks

■ Know the users:

■ Novice and first time users,
■ Knowledgeable intermittent users,
■ Expert frequent users.

■ Know their tasks:

■ Tasks: sequence of operations.
■ Should be determined before the design proceeds.
■ Design or implementation convenience should not dictate system
functionality, features.

Design Principles of HCI 9 of 40

Paul Pop March 20, 2001
 Choose the Interaction Style(s)

■ Interaction styles:
■ Direct manipulation,
■ Menu selection,
■ Form fill-in,
■ Command language,
■ Natural language.

■ When users and tasks are diverse,

blend several interaction styles.

Design Principles of HCI 10 of 40

Paul Pop March 20, 2001
 Interaction Styles, Cont.
Advantages Disadvantages
Direct Manipulation
Visually presents task concepts May be hard to program
Allows easy learning, retention May require graphics display and pointing devices
Allows errors to be avoided, encourages exploration
Affords high subjective satisfaction
Menu selection
Shortens learning, reduces keystrokes Presents danger of many menus
Structures decision making May slow frequent users
Allows easy support of error handling Consumes screen space, requires rapid display rate
Form fill-in
Simplifies data entry, requires modest training Consumes screen space
Gives convenient assistance
Permits use of form-management tools
Command language
Is flexible, appeals to power users Has poor error handling
Supports user initiative Requires substantial training and memorization
Allows convenient creation of user-defined macros
Natural language
Relives burden of learning syntax Requires clarification dialog
May require more keystrokes, may not show context
Is unpredictable

Design Principles of HCI 11 of 40

Paul Pop March 20, 2001
 Design, Prototype, Evaluate
■ Create a design using:
■ Principles of interaction,
■ Graphics design principles,
■ Following guidelines.
■ Implement prototypes to:
■ Test the design,
■ Choose between alternatives,
■ Minimize the cost of experimentation.
■ Evaluate the usability requirements:
■ Learnability,
■ Speed of performance,
■ Rate of errors by users,
■ Retention over time,
■ Subjective satisfaction.

Design Principles of HCI 12 of 40

Paul Pop March 20, 2001
 Design Principles

■ Sources of design principles:

■ Cognitive psychology,
■ Graphic design,
■ Designer’s knowledge and experience.
■ Types of design support:
■ Design principles
“High level” recommendations based on well established knowledge about human
behaviour.
■ Design standards
Generally stated requirements, imposed in some formal way.
■ Design guidelines
Generally stated recommendations for user interface software,
adopted by agreement among practitioners.
■ Design rules
Explicit design specifications that do not require interpretation by design practitioners.

Design Principles of HCI 13 of 40

Paul Pop March 20, 2001
 Norman’s Seven Principles

■ “Seven principles for transforming difficult tasks into simple ones”:

1. Use both knowledge in the world and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible.
4. Get the mappings right.
5. Exploit the power of constraints, both natural and artificial.
6. Design for error.
7. When all else fails, standardize.

Design Principles of HCI 14 of 40

Paul Pop March 20, 2001
 3. Make Things Visible
■ Gulf of execution:
the distance between the users goals and the means of achieving them
through the system.

■ Gulf of evaluation:
the distance between the system’s behaviour and the user’s goals.
■ Bridge the gulfs of execution and evaluation:
reduce the discrepancy between the user’s goals and the system’s physical
state and form.
Gulf of
execution

Physical User’s
system goals

Gulf of
evaluation

Design Principles of HCI 15 of 40

Paul Pop March 20, 2001
 4. Get the Mappings Right

Design Principles of HCI 16 of 40

Paul Pop March 20, 2001
 Shneiderman’s Eight Golden Rules

■ “Shneiderman’s eight golden rules of interface design”:

1. Strive for consistency.
2. Enable frequent users to use shortcuts.
3. Offer informative feedback.
4. Design dialogs to yield closure.
5. Offer error prevention and simple error handling.
6. Permit easy reversal of actions.
7. Support internal locus of control.
8. Reduce short-term memory load.

Design Principles of HCI 17 of 40

Paul Pop March 20, 2001
 Consistency

■ Frequently violated, difficult to follow.

■ Many forms of consistency:
■ Consistent sequences of actions in similar situations.
■ Identical terminology across: prompts, menus, help screens.
■ Consistent color, layout, capitalization, fonts.

■ Exceptions:
■ Echoing of passwords.
■ Confirmation of the delete command.

Design Principles of HCI 18 of 40

Paul Pop March 20, 2001
 Consistency, Cont.

Seven types of scrollbars under UNIX.

Design Principles of HCI 19 of 40

Paul Pop March 20, 2001
 Consistency, Cont.
“consistency makes the interface familiar and predictable”,
The Windows User Interface Guidelines for Software Design, Microsoft Press

Design Principles of HCI 20 of 40

Paul Pop March 20, 2001
 Consistency, Cont.

■ Stupid consistency:
■ Cancel any function in Quicken's Turbo Tax, and
the program will thoughtfully tell you that you
cancelled the function.

■ GIFAnimator is “too consistent”:

■ Two controls in Windows applications do not have
mnemonics assigned to them: the OK and Cancel buttons.
■ Both command buttons have built-in keyboard access.
■ Advantage: it frees up the characters to be used as
mnemonics elsewhere in the application.

Design Principles of HCI 21 of 40

Paul Pop March 20, 2001
 Shortcuts

■ Enable frequent users to use shortcuts:

■ Abbreviations,
■ Special keys,
■ Hidden commands,
■ Macros,
■ Short response times,
■ Fast display rates.

Design Principles of HCI 22 of 40

Paul Pop March 20, 2001
 Feedback

■ Offer informative feedback:

■ For every user action, there should be system feedback.
■ For frequent and minor actions the response can be modest.
■ For infrequent and major actions the response should be more substantial.
■ Show changes on the visual represetation of the objects of interest.

Design Principles of HCI 23 of 40

Paul Pop March 20, 2001
 Feedback, Cont.

Design Principles of HCI 24 of 40

Paul Pop March 20, 2001
 Design Dialogs to Yield Closure

■ Dialogs should have:

■ beginning, select “File->Open”
■ middle, complete the dialog
■ end. press “Open”

■ The informative feedback at the competition of a group of actions:

■ gives operators the satisfaction of accomplishment,
■ a sense of relief,
■ the signal to drop contingency plans and options from their minds,
■ an indication that they can prepare for the next group of actions.

Design Principles of HCI 25 of 40

Paul Pop March 20, 2001
 Error Prevention and Handling

■ Error prevention:
■ Design the system so that users cannot make a serious error.
■ Use menu selection instead of form fill-in.
■ When using forms, do not allow alphabetic characters in numeric fields.
■ For command lines: correct matching pairs, complete sequences, etc.

■ Error handling:
■ What happened?
■ Why did it happened?
■ How serious is it?
■ How can it be fixed?

Design Principles of HCI 26 of 40

Paul Pop March 20, 2001
 Error Messages

■ cc:Mail
When the user clicks on the OK button,
cc:Mail terminates, which seems to indicate
that having 'No Error' is a serious error in
cc:Mail.

■ NetInfo
Messages warning of success are not
restricted to the Windows operating
system.

Design Principles of HCI 27 of 40

Paul Pop March 20, 2001
 Error Messages, Cont.

■ MTC Diag, a power management application

■ What happened?
■ Why did it happened?
■ How serious is it?
■ How can it be fixed?

Design Principles of HCI 28 of 40

Paul Pop March 20, 2001
 Error Messages, Cont.

Design Principles of HCI 29 of 40

Paul Pop March 20, 2001
 Easy Reversal of Actions

■ Actions should be reversible:

■ Relieves anxiety.
■ Encourages exploration of unfamiliar options.

■ Undo/Redo:
■ a single action,
■ a data-entry task,
■ complete group of actions, etc.

Design Principles of HCI 30 of 40

Paul Pop March 20, 2001
 Easy Reversal of Actions, Cont.

■ Microsoft's SQL Server 6.5

■ If you select more than 20 lines of text from the query window, and then
accidentally hit delete, you get this apparently helpful error message
where you can hit "No" to avoid the delete.

■ However, hitting "No" actually causes the Delete operation to continue,

but destroys the Undo buffer in the process, leaving no means of
cancelling an accidental delete.

Design Principles of HCI 31 of 40

Paul Pop March 20, 2001
 Locus of Control

■ Support internal locus of control:

■ Avoid acausality.
■ Users: initiators rather than the responders to actions.

■ Problems:
■ Surprising system actions.
■ Tedious sequences of data entry.
■ Difficulty of obtaining necessary information.
■ Inability to produce the action desired.

Design Principles of HCI 32 of 40

Paul Pop March 20, 2001
 Locus of Control, Cont.

■ eZip Wizard
Even the relatively simple process of adding or removing a file
becomes an interrogation:
What do you want to do?
What options do you want?
What name do you want to use? etc.

Design Principles of HCI 33 of 40

Paul Pop March 20, 2001
 Locus of Control, Cont.

■ Microsoft Outlook Express 5.0

Why should somebody want Outlook to delete a randomly-selected
piece of mail?

Design Principles of HCI 34 of 40

Paul Pop March 20, 2001
 Locus of Control, Cont.

■ Ak-Mail
When the user attempts to delete a mail folder, the program requires the
user to type the response "YES" into the text box
('Y' will not suffice; the OK button is disabled until all three letters are typed).

Design Principles of HCI 35 of 40

Paul Pop March 20, 2001
 Reduce Short-Term Memory Load

■ Humans can remember:

■ “Seven-plus or minus-two chunks”,
New stimuli push out old plans.
■ 1-2 things.

■ Keep displays simple.

■ Consolidate multiple page displays.
■ Allow sufficient training.
■ Online access to command-syntax forms, abbreviations, codes, etc.
■ Don’t make users note down codes:
■ If it has been already entered, the computer should know it.

Design Principles of HCI 36 of 40

Paul Pop March 20, 2001
 Nielsen’s Heuristics

■ Nielsen’s ten usability heuristics:

1. Visibility of system status.
2. Match between system and the real world.
3. User control and freedom.
4. Consistency and standards.
5. Error prevention.
6. Recognition rather than recall.
7. Flexibility and efficiency of use.
8. Aesthetic and minimalist design.
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation.

Design Principles of HCI 37 of 40

Paul Pop March 20, 2001
 Guidelines
■ Microsoft Windows User Experience
http://msdn.microsoft.com/library/books/winguide/welcome.htm

■ Java Look and Feel Design Guidelines

http://java.sun.com/products/jlf/dg/higtitle.alt.htm

■ Macintosh Human Interface Guidelines

http://www.devworld.apple.com/techpubs/mac/
HIGuidelines/HIGuidelines-2.html

Design Principles of HCI 38 of 40

Paul Pop March 20, 2001
 Guidelines, Cont.

Design Principles of HCI 39 of 40

Paul Pop March 20, 2001
 Summary

■ Design process
■ What is design?
■ Traditional Waterfall Model vs. User-Centered Design

■ Design support
■ Users, tasks, interaction model
■ Norman’s seven principles
■ Shneiderman’s eight golden rules of interface design
■ Nielsen’s ten heuristics
■ User interface guidelines

Design Principles of HCI 40 of 40

Paul Pop March 20, 2001