Human-Center

Design
Prepared by : Luong Viet Phong
Email: luongvietphong@ptithcm.edu.vn
What is interaction
design?
Interaction design is about developing
interactive products that are easy,
effective, and enjoyable to use from
the users’ perspective.
-WHO

-WHERE

-WHAT

-HOW
How do you optimize the users'
interactions with product, so that they
match the users' activities?
Human
Computer
Interaction
-Good design brings people joy.
-Bad design costs live, money, and time.
8.000.000 x 1000VND x 30 X 12
Design for people
- People’s talks, goals, and values drive
development
- Work with users throughout the process
- Access decisions from the vantage point
of users, their work, and their environment
- Pay attention to people’s abilities and
situations
- Talk to actual experts
The power of
prototype
- Prototyping is a strategy for efficiently
dealing with things that are hard to predict.
- The rights of prototype:
+ should not be required to be complete
+ should be easy to change
+ get to retire
- What do prototypes prototype?
+ Feel - What might it look like?
+ Implementation - What might it work
like?
+ Role - What might the experience be
like?
 The goal of
interaction design
Usability
-effective to use (effectiveness)
-Question: Is the system capable of
allowing people to learn well, carry out
their work efficiently, access the
information they need, buy the goods they
want, and so on?
Usability
-efficient to use (efficiency)
-Question: Once users have learned how
to use a system to carry out their tasks,
can they sustain a high level of
productivity?
Usability
-safe to use (safety)
-Question: Does the system prevent users
from making serious errors and, if they do
make an error, does it permit them to
recover easily?
Usability
-have good utility (utility)
-Question: Does the system provide an
appropriate set of functions that enable
users to carry out all their tasks in the
way they want to do them?
Usability
-easy to learn (learnability)
-Question: How easy is it and how long
does it take (i) to get started using a
system to perform core tasks and (ii) to
learn the range of operations to perform a
wider set of tasks?
Usability
-easy to remember how to use
(memorability)
-Question: What kinds of interface support
have been provided to help users
remember how to carry out tasks,
especially for systems and operations that
are used infrequently?
User experience
satisfying
enjoyable
fun
entertaining
helpful
User experience

motivating

aesthetically pleasing

supportive of creativity

rewarding

emotionally fulfilling
User experience

Usability
 Types of
interaction
Need finding
Participant observation
- What do people do?
- What values and goals do people have?
- How do these particular activities embedded in
larger ecology?
- What are similarities and differences across
people?
Interviewing
- Choosing participants
- Representative of target users
- Current users of similar systems
- Non-users
- Approximate if necessary
Interviewing
- Types of question to avoid
- Lead questions
- Need expertise
- What they would do/like/want in hypothetical
scenarios
- How often they do things
- How much they like things on absolute scale
- Binary question
Diary studies

Experience sampling

Questionnaires
Rapid prototyping
Low-fidelity
prototype
A low-fidelity prototype is one that does
not look very much like the final product. It
is used for exploration only.
Storyboarding
Prototype with index cards (paper
prototype)
Wizard of Oz
High-fidelity
prototype
High-fidelity prototyping uses materials
that you would expect to be in the final
product and produces a prototype that
looks much more like the final thing.
 Heuristic
evaluation
- Developed by Jakob Nielsen
- Help to find usability problems in a
design
- Small set of evaluators examine UI
- Can perform on working UI or sketches
Phases of Heuristic Evaluation
1. Pre-evaluation training
2. Evaluation
3. Severity rating
4. Debriefing
Evaluator’s Process
- Step through design several times
- Which principles?
- Use violations to redesign/fix problems
-
Nielsen’s ten heuristics
- Visibility of system status
- Match between System and World
- User control and Freedom
- Consistency and Standards
- Error prevention
- Recognition rather than Recall
- Flexibility and Efficiency of use
- Aesthetic and Minimalist design
- Help users to Recognize, Diagnose & Recover from errors
- Help & Documentation
Visibility of system status

Time
- Feedback depends on response time
- < 1s: just show outcome
- ~ 1s: feedback that activity is underway
- >> 1s: show factional progress; time
Visibility of system status

Space
Visibility of system status

Change
Visibility of system status

Action
Visibility of system status
Next
step
Visibility of system status
Completion
Match between System and World
Familiar
metaphor
Match between System and World
Familiar language
‘It is 404 error code. Please try different
URL.’
→
‘The Web page you requested is not
available. Please try different Web
address’
Match between System and World
Familiar category
Sài Gòn - TP Hồ Chí Minh
Dinh Độc Lập - Dinh Thống Nhất -
Match between System and World
Familiar choice
User control and Freedom
Freedom to Undo
User control and Freedom
Freedom to Explore
Consistency and Standards
Consistent layout
Consistency and Standards
Consistent names
- Check out
- Complete order
- Place order
- Finish
- Done
Consistency and Standards
Consistent choices
Error prevention
Prevent data loss
Error prevention
Prevent clutter
Error prevention
Prevent confusing flow
‘Do you want to delete file? Press cancel
to delete file.’
‘OK’ ‘Cancel’
Error prevention
Prevent bad input
Error prevention
Prevent unnecessary constraints
Recognition rather than Recall
Avoid codes
‘Press following code to order
001: Beef steak
010: Fried chicken
011: Salad
111: Chicken soup
’
Recognition rather than Recall
Avoid extra hurdles
Recognition rather than Recall
Recognition with preview
Flexibility and Efficiency of Use
Flexible shortcuts
Flexibility and Efficiency of Use
Flexible defaults with options
Flexibility and Efficiency of Use
Flexible ambient information
Flexibility and Efficiency of Use
Flexibility: Recommendation
Flexibility and Efficiency of Use
Flexibility: keep it relevant
Aesthetic and Minimalist design
Minimalist: above the fold
Aesthetic and Minimalist design
Minimalist: signal-to-noise
Aesthetic and Minimalist design
Minimalist Login
Aesthetic and Minimalist design
Minimalism: Redundancy
Aesthetic and Minimalist design
Minimalism: Functionality
Aesthetic and Minimalist design
Minimalism: Functionality
Recognize, Diagnose, & Recover from errors
Error: Make problem clear
Recognize, Diagnose, & Recover from errors
Error: Provide a solution.
Recognize, Diagnose, & Recover from errors
Error: Propose an alternative
Help
Help learning with example
Help
Help guide the way
Help
Help clearly