Computing and SE II
Chapter 10: HCI (Human Computer Interface )
Design
Er-Yu Ding
Software Institute, NJU
Main Contents
1.
2.
3.
4.
Why HCI Design?
Objectives of HCI Design
Basics of HCI Design
Golden Principles and Rules of HCI
Design
5. Process of HCI Design
1.Why HCI Design?
——What is HCI?
• UI design is not just about the
arrangement of media on a screen
• It’s designing an entire experience for
people, hence a “look and feel”
• Psychology: building a mental model
• Ergonomics: facilitating navigation
1.Why HCI Design?
——Mental Model: An
Example (1)
1.Why HCI Design?
——Mental Model: An
Example (2)
1.Why HCI Design?
——Mental Model: An
Example (3)
1.Why HCI Design?
• System users often judge a system by its
interface rather than its functionality.
– User interfaces should be designed to match the
skills, experience and expectations of its anticipated
users.
• A poorly designed interface can cause a user to
make catastrophic errors.
– A poor UI is often a reason why so many software
systems are never used.
• “A user interface is well-designed when the
program behaves exactly how the user thought
it would.” – Joel Spolsky
1.Why HCI Design?
——We remember only the bad!
• A good interface should be transparent
• Bad interfaces cause user frustration
– “What was this product designer thinking?”
GOOD
BAD
2. Objectives of HCI Design
——What is a good HCI interface
• A good HCI interface
designdesign encourage
an easy, natural, and engaging
interaction between a user and a
system.
• It allows users to carry our their
required tasks.
• With a good user interface, users
forget
theygood
are using
a computer.
How
to that
judge
or bad?
Usability!
2. Objectives of HCI Design
—— Usability attributes of an
• Usability is not
a single, oneinterface
dimensional property of a user
interface
– Learnability: learn easily, user can do
things with it in little time
– Efficiency: skilled users can use it with
great efficiency
– Memorability: interrupted users can
continual use it ,do not need to starting
from scratch
– Errors: little errors, resume quickly from
2. Objectives of HCI Design
—— Learn Curve
2. Objectives of HCI Design
—— Memory
• Involves encoding and recalling
knowledge and acting appropriately
• We don’t remember everything –
involves filtering and processing
• Context is important in affecting our
memory
• We recognize things much better than
being able to recall things
– The rise of the GUI over command-based
interfaces
2. Objectives of HCI Design
—— Human Factors in Interface
• Limited short-term memory
Design
– People can instantaneously remember about 7 items of
information. If you present more than this, they are more liable
to make mistakes.
• People make mistakes
– When people make mistakes and systems go wrong,
inappropriate alarms and messages can increase stress and
hence the likelihood of more mistakes.
• People are different
– People have a wide range of physical capabilities. Designers
should not just design for their own capabilities.
• People have different interaction preferences
– Some like pictures, some like text.
3. Basics of HCI Design
——User-System interaction
• Two problems must be addressed in
interactive systems design
– How should information from the user be provided
to the computer system?
– How should information from the computer
system be presented to the user?
• User interaction and information
presentation may be integrated
through a coherent framework such
as a user interface metaphor.
3. Basics of HCI Design
—— Interaction styles
• Direct manipulation
– Easiest to grasp with immediate feedback
– Difficult to program
• Menu selection
– User effort and errors minimized
– Large numbers and combinations of choices a problem
• Form fill-in
– Ease of use, simple data entry
– Tedious, takes a lot of screen space
• Command language
– Easy to program and process
– Difficult to master for casual users
• Natural language
– Great for casual users
– Tedious for expert users
3. Basics of HCI Design
—— An Example of Direct
manipulation
Control
panel interface
Grid
Busy
Title
JSD. example
Method
JSD
Type
Network
Units
cm
Selection
Process
Reduce
Full
OUIT
PRINT
NODE
LINKS
FONT
LABEL
EDIT
3. Basics of HCI Design
—— Direct manipulation
• Advantages:
– Users feel in control of the computer and are not
intimidated by it.
– User learning time is relatively short.
– User get immediate feedback on their actions.
Mistakes can often be detected and corrected
quickly.
• Problems:
– How can an appropriate information model and
metaphors be derived?
– Given that users have a large information space,
how can they navigate around that space and always
aware of their current position?
3. Basics of HCI Design
—— Menu Systems
• pull-down menus:
– predictable, but need more
screen space
– display the menu title.
– User can select commands
through this menu.
• pop-up menus:
– flexible, tailorable, may cause
user surprise
– -They are associated with entities
(such as a field).
– Selecting the entity then clicking
a mouse button --> cause the
Pull-down menu
Pop-up menu
Walking menu
3. Basics of HCI Design
—— Menu Systems
• Advantages:
– Users do not need to know the command
names.
– Typing efforts is minimal.
– Some user errors can be avoid.
– Context-dependent help can be provided.
• Problems:
– Actions which involve logical conjunction
(and)
or disjunction (or) are awkward to represent
– Take care the structure of large menus.
3. Basics of HCI Design
—— Form-based interface
• Advantage
– For structured data representation and
filling in
• Problems
NE W BOOK
Title
Author
– Just for structured
data representation and
ISBN
filling in
Price
Publisher
Publication
date
Edition
Number of
copies
Classification
Date of
purchase
Loan
status
Order
status
•
3. Basics of HCI Design
——Command-line
Advantages:
interfaces
– Implementation is easy and simple due to the
–
–
–
–
–
language processing.
It can support very complex systems with a lot of
commands.
User interface needs a little effort.
Typing efforts is minimal.
Some user errors can be avoid.
Context-dependent help can be provided.
• Problems:
– Users must learn and remember all commands.
– Hard to learn the system and not easy for operations.
•
3. Basics of HCI Design
—— Natural language
The user types
a
command
in
a
interfaces
natural language. Generally, the
vocabulary is limited and these
systems are confined to specific
application domains (e.g. timetable
enquiries)
• NL processing technology is now good
enough to make these interfaces
effective for casual users but
experienced users find that they
3. Basics of HCI Design
—— Multiple user interfaces
Gr aphical user
interface
Command
language
interface
GUI
manager
Command
language
interpreter
Operating system
Interaction
style
Main advantages
Main dis adva ntages
Appli cation
exampl es
Dir ect
manipulation
Fast and intuiti ve
interaction
Easy to learn
May be hard to impleme nt.
Only suit able wher e there is a
visual metapho r for tasks and
objects.
Video games
CAD systems
Menu
selection
Avo ids user error
Little typing required
Slow for expe rienc ed users.
Can become complex if many
menu options.
Most gener alpurpose systems
Form f ill-i n
Sim ple data entry
Easy to learn
Checkable
Takes up a lot of screen space.
Cause s problems whe re user
options do no t match the form
fi elds.
Stock cont rol,
Persona l l oan
processing
Comm and
language
Powe rful and fl exible
Hard to learn.
Poor error manage ment.
Operating systems ,
Comm and and
control systems
Natural
language
Acc essible to casual
users
Easil y extended
Requi res more typing.
Natural la nguage und erstand ing
systems are un reli able.
Info rmation
retrieval systems
3. Basics of HCI Design
—— Interface Types
• Batch: without interaction
– Copy, email-message, etc.
• Command: one-dimension interface
– For skilled users with fixed tasks
• Full screen: two-dimension interface
– form, menu, navigation key
– For skilled users with limited number tasks
• Graphics screen: two and half dimension interface
– Window, menu, icon, position devices (mouse, etc.)
– Object-oriented, operate directly
• Next generation in the future: three or more dimensions
interface
– Additional dimensions: time, voice, etc.
– More facilitative, more personalization
4. Golden Principles and Rules of HCI
Design
Golden
• Place ——
the user
in controlRules
• Reduce the user’s memory load
• Be consistent
4. Golden Principles and Rules of HCI Design
—— Place the User in Control
• Define interaction modes in a way that does
not force a user into unnecessary or
undesired actions.
• Provide for flexible interaction.
• Allow user interaction to be interruptible
and undoable.
• Streamline interaction as skill levels
advance and allow the interaction to be
customized.
• Hide technical internals from the casual
user.
4. Golden Principles and Rules of HCI
Design
——
• Reduce
Reduce demand
on
short-term
the User’s Memory Load
memory.
• Establish meaningful defaults.
• Define shortcuts that are intuitive.
• The visual layout of the interface
should be based on a real world
metaphor.
• Disclose information in a progressive
fashion.
4. Golden Principles and Rules of HCI
Design
——
Make
thethe
Interface
• Allow
the user
to put
current task
into a meaningful
context.
Consistent
• Maintain consistency across a family
of applications.
• If past interactive models have
created user expectations, do not
make changes unless there is a
compelling reason to do so.
4. Golden Principles and Rules of HCI
Design
——
• CompactTen
andPrinciples
natural dialogue
（1）
– Design graph and color
– Few is much
•
•
•
•
Using user language
Least memory needed for user
Consistent
Feedback
4. Golden Principles and Rules of HCI
Design
IdentifyTen
exit Principles
clear
——
（2）
•
•
•
•
•
Shortcut
Good error message
Avoid mistake
Help and document
4. Golden Principles and Rules of HCI
Design
——
• Obtrusive
Assistance
Which
Rules
is there?
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
• If your program model is nontrivial,
it’s probably wrong
Click here
This window comes to top!
(“invisible sheets” in Excel)
4. Golden Principles and Rules of HCI
Design
——
• BadWhich
Wizards
Rules is there?
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
XEROX’s GUI (1981)
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
• How do the following screen objects afford?
– What if you were a novice user?
– Would you know what to do with them?
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
phones, remote controls
calculators, computer keypads
4. Golden Principles and Rules of HCI
Design
—— Which Rules is there?
click
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
floating menu bar
huge system tray
How many users want these?
4. Golden Principles and Rules of HCI
Design
—— Which Rules is there?
vs.
(30% usability)
(100% usability)
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
vs.
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
vs.
vs.
(no dialog)
Which is better for an intimidated user?
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
4. Golden Principles and Rules of HCI Design
—— Which Rules is there?
5. Process of HCI Design
——Four basic activities
• There are four basic activities in
interaction design:
1. Identifying needs and establishing
requirements
2. Developing alternative designs
3. Building interactive versions of the
designs
4. Evaluating designs
5. Process of HCI Design
—— User Interface Design Process
5. Process of HCI Design
—— Interface Analysis
• Interface analysis means understanding
– User
• Individual characteristics
• User groups
• Frequency of usage
– Work
• Task features
• Time constraints
• Errors
– Content
• Figure , graph or text
– Environment
• General environment factors
• Organization
• Curture
5. Process of HCI Design
—— Interface Analysis:
• Why do we need to understand users?
User
– Interacting with technology is cognitive
• We need to take into account cognitive
processes involved and cognitive limitations of
users
– We can provide knowledge about what
users can and cannot be expected to do
• Identify and explain the nature and causes of
problems users encounter
– Supply theories, modeling tools, guidance
and methods that can lead to the design of
better interactive products
•
5. Process of HCI Design
——
Interface
Analysis:
Usage profiles
– Novice or first-time users
– Knowledgeable intermittent users
– Expert frequent users
• User characteristics
–
–
–
–
–
–
–
–
–
Age
Gender
Physical abilities
Education
Cultural or ethnic background
Training
Motivation
Goals
Personality
User
•
•
•
•
•
•
•
•
•
•
•
•
•
5. Process of HCI Design
—— Interface Analysis: User
Are users trained professionals, technician, clerical, or manufacturing workers?
What level of formal education does the average user have?
Are the users capable of learning from written materials or have they expressed
a desire for classroom training?
Are users expert typists or keyboard phobic?
What is the age range of the user community?
Will the users be represented predominately by one gender?
How are users compensated for the work they perform?
Do users work normal office hours or do they work until the job is done?
Is the software to be an integral part of the work users do or will it be used only
occasionally?
What is the primary spoken language among users?
What are the consequences if a user makes a mistake using the system?
Are users experts in the subject matter that is addressed by the system?
Do users want to know about the technology the sits behind the interface?
5. Process of HCI Design
—— Interface Analysis:
Work
• What tasks will
a user of the system
perform?
– High level - why people use the system
– Low level - tasks involved in using the
system
• Tasks define basic interaction style
– HCI design should be transparent to
user
– Business(user model ) .VS.
5. Process of HCI Design
—— Interface Analysis:
• Task profiles
Work
– Decomposition into multiple middle-level task
actions, which are refined into atomic actions
– task frequencies of use
– matrix of users and tasks helpful
• Interaction styles
– Direct manipulation
– Menu selection
– Form fillin
– Command language
– Natural language
5. Process of HCI Design
—— Interface Analysis: Work
• Task Analysis and Modeling
– Use-cases define basic interaction
– Task elaboration refines interactive tasks
– Object elaboration identifies interface
objects (classes)
– Workflow analysis defines how a work
process is completed when several people
(and roles) are involved
– Layered representation according to task
refinements
5. Process of HCI Design
—— Interface Analysis: Work
• Answers the following questions …
– What work will the user perform in specific
circumstances?
– What tasks and subtasks will be performed as
the user does the work?
– What specific problem domain objects will
the user manipulate as work is performed?
– What is the sequence of work tasks—the
workflow?
– What is the hierarchy of tasks?
5. Process of HCI Design
—— Interface Analysis:
• Terminology
• Prompts
Content
• Menus
• Help screens
• Color
• Layout
• Capitalization
• Fonts
• Most frequently violated
5. Process of HCI Design
—— Interface Analysis:
• Are different types of data assigned to consistent
geographic locations on the screen (e.g., photos
always appear in the upper right hand corner)?
• Can the user customize the screen location for
content?
• Is proper on-screen identification assigned to all
content?
• If a large report is to be presented, how should it
be partitioned for ease of understanding?
• Will mechanisms be available for moving directly
to summary information for large collections of
data.
• Will graphical output be scaled to fit within the
bounds of the display device that is used?
Content
5. Process of HCI Design
—— Interface Analysis:
Content
Shape
5. Process of HCI Design
—— Interface Analysis:
Content
1
4
0
2
10
3
Dial with needle
Pie chart
Thermometer
Horizontal bar
Dynamic information display
20
•
5. Process of HCI Design
——
Interface
Analysis:
Color Use Guidelines
Content
– Limit the number of colors and be conservative in
their use.
• No more than 4 or 5 colors in a window.
– Use color change to show a change in system status.
– Use color to support the task that users are trying to
perform.
• Color should emphasize the most important data.
– Use color coding in a thoughtful and consistent way.
• Using red to indicate success is probably not a good idea.
– Be careful about color pairings.
• E.g. Dark blue on black is not a good choice.
– Avoid associating meaning with colors.
5. Process of HCI Design
—— Interface Analysis:
• SystemsEnvironments
model
• Physical environments
• Culture ambience
5. Process of HCI Design
—— Interface Analysis:
Environments
• System model
– Global
– Temporary
– Background
• Physical environments
– Color
– Noice
– Etc.
5. Process of HCI Design
—— Interface Analysis:
•
Environments
Cultural constraints
– Learned arbitrary conventions
5. Process of HCI Design
—— Interface Analysis:
• Cultural constraints
Environments
– How/what to represent the target culture?
– Should designs impose foreign values?
5. Process of HCI Design
—— Interface Design Steps
• Using information developed during
interface analysis, define interface objects
and actions (operations).
• Define events (user actions) that will cause
the state of the user interface to change.
Model this behavior.
• Depict each interface state as it will actually
look to the end-user.
• Indicate how the user interprets the state of
the system from information provided
through the interface.
5. Process of HCI Design
——Prototyping HCI Interfaces
• High-fidelity: implement it in Flash
• Low-fidelity: use paper, glue, index cards, tape,
colored markers
• Advantages of low-fidelity prototype?
– Easy and inexpensive to build
– Easy and cheap to change, many times
• Disadvantages of low-fidelity prototype?
– Don’t simulate computer response time accurately
5. Process of HCI Design
——Prototyping HCI Interfaces:An example
5. Process of HCI Design
—— Interface Design Patterns
• Patterns are available for
– The complete UI
– Page layout
– Forms and input
– Tables
– Direct data manipulation
– Navigation
– Searching
– Page elements (Wizard)
– e-Commerce
5. Process of HCI Design
——HCI Design Issues
•
•
•
•
Response time
Help facilities
Error handling
Menu and command
labeling
• Application accessibility
• Internationalization
5. Process of HCI Design
——HCI Design Evaluation
• Some evaluation of a user interface
design
should be carried out to assess its
suitability
• Full scale evaluation is very expensive
and
impractical for most systems
• Ideally, an interface should be
evaluated against a usability
specification. However, it is rare for
5. Process of HCI Design
—— Simple evaluation
Questionnaires for user feedback
techniques
•
• Video recording of system use and
subsequent tape evaluation.
• Instrumentation of code to collect
information
about facility use and user errors.
• The provision of a grip button for online user
feedback.
5. Process of HCI Design
—— Design Evaluation Cycle
The End
• Next Lecture
– Software Construction