Académique Documents
Professionnel Documents
Culture Documents
Teknik Informatika
Fakultas Teknik
Universitas Surabaya
2020
Lecturer
NAS
• Class Activity 20%
• Project 40%
• UAS (written test) 40%
Cheating
• Cheating is not allowed by any means nor any
circumstances
• If you are caught, your final mark (NA) will be
void (0)
• For exams (UTS/UAS), this also means all courses
before the exam day will be void as well
Course Topics
• Interaction Design
• Understanding and Conceptualizing Interaction
• Cognitive Aspects
• Emotional Interaction
• Interfaces
• Data Gathering
• Data Analysis, Interpretation and Presentation
• The Process of Interaction Design
• Establishing Requirements
• Design, Prototyping and Construction
• Evaluation
Introduction
Good and Poor Design
What is Interaction Design?
The User Experience
The Process of Interaction Design
Interaction Design and the User Experience
Summary and Activity
Introduction
Interactive Products In
Everyday Use
Terima Kasih
Interactive Products
Products and services on
digital computer-based
systems which respond to
the user’s actions by
presenting content such as
text, moving image,
animation, video, audio,
and video games.
Investopedia (2014)
Think About This
• How many are actually easy, effortless, and
enjoyable to use?
• Most products that requires users to interact with
them, have been designed primarily with the
user in mind.
• Others, have been engineered primarily as
systems to perform set functions. While they may
work effectively, it can be difficult to used by real
people.
Why Interaction Design?
• One main aim of interaction design: to reduce the
negative aspect (frustration, annoyance), while
enhancing the positive aspects (enjoyment,
engagement)
Introduction
Good and Poor Design
What is Interaction Design?
The User Experience
The Process of Interaction Design
Interaction Design and the User Experience
Summary and Activity
Anywhere (using
PC/laptop/smartphone/
• Need to optimize the mobile devices)
interactions users have witha
product:
– So that they match the users’ activities and needs
What to Design
What is Interaction
Design?
What is Interaction Design
27
Relationship Between ID, HCI
and Other Fields
28
Relationship Between ID, HCI
and Other Fields
29
Relationship Between ID, HCI
and Other Fields
31
Introduction
Good and Poor Design
What is Interaction Design?
The User Experience
The Process of Interaction Design
Interaction Design and the User Experience
Summary and Activity
35
Example: Online Shopping
36
Introduction
Good and Poor Design
What is Interaction Design?
The User Experience
The Process of Interaction Design
Interaction Design and the User Experience
Summary and Activity
The Process of ID
Process of ID
39
Simple Interaction Design
Model
Why go to this length?
• Help designers:
– understand how to design interactive products
that fit with what people want, need and may
desire
– appreciate that one size does not fit all
e.g., teenagers are very different to grown-ups
– identify any incorrect assumptions they may
have about particular user groups
e.g., not all old people want or need big fonts
– be aware of both people’s sensitivities and their
capabilities
41
Introduction
Good and Poor Design
What is Interaction Design?
The User Experience
The Process of Interaction Design
Interaction Design and the User Experience
Summary and Activity
43
Which dialog box is more
safe?
44
User experience goals
Desirable aspects
satisfying helpful fun
enjoyable motivating provocative
engaging challenging surprising
pleasurable enhancing sociability rewarding
exciting supporting creativity emotionally fulfilling
entertaining cognitively stimulating
Undesirable aspects
boring unpleasant
frustrating patronizing
making one feel guilty making one feel stupid
annoying cutesy
childish gimmicky
46
Design principles
• Generalizable abstractions for thinking about
different aspects of design
48
1. Visibility
…you need to insert your room card in the slot
by the buttons to get the elevator to work!
How would you make this action more visible?
• make the card reader more obvious
• provide an auditory message, that says
what to do (which language?)
• provide a big label next to the card reader
that flashes when someone enters
• make relevant parts visible
• make what has to be done obvious
www.baddesigns.com
49
Visibility in App
User always aware the current status
2. Feedback
• Sending information back to the user about what
has been done
• Includes sound, highlighting, animation and
combinations of these
– e.g. when screen button clicked on provides
sound or red highlight feedback:
“click”
51
3. Constraints
52
Logical or ambiguous
design?
• Where do you plug the
mouse?
• Where do you plug the
keyboard?
• top or bottom
connector?
• Do the color coded
icons help?
www.baddesigns.com
53
How to design them more
logically
(i) A provides direct adjacent
mapping between icon and
connector
www.baddesigns.com
54
4. Consistency
• Design interfaces to have similar operations and
use similar elements for similar tasks
• For example:
– always use ctrl key plus first initial of the
command for an operation – ctrl+C, ctrl+S,
ctrl+O
• Main benefit is consistent interfaces are easier to
learn and use
56
When consistency breaks
down
• What happens if there is more than one command
starting with the same letter?
– e.g. save, spelling, select, style
58
Internal Consistency in
Website
• Color - The consistent use of colour across a site is the
most important element in maintaining a consistent feel
60
Material Design Guideline
used by Android, helps
developer maintain UI
consistency across
different products
Keypad numbers layout
• A case of external inconsistency
1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 0
62
Many Theories
On a rotary dial, 1 is at
the top right and zero
is on the bottom.
When designing the
new touch-tone
keypad, putting the 1
on the top-right didn't
make much sense,
because Western
writing is read from
left to right.
5. Affordances: to give a clue
• Refers to an attribute of an object that allows
people to know how to use it
– e.g. a mouse button invites pushing, a door
handle affords pulling
• Norman (1988) used the term to discuss the
design of everyday objects
• Since has been much popularised in interaction
design to discuss how to design interface objects
– e.g. scrollbars to afford moving up and down,
icons to afford clicking on
64
What does ‘affordance’ have to
offer interaction design?
• Interfaces are virtual and do not have affordances
like physical objects
• Norman argues it does not make sense to talk
about interfaces in terms of ‘real’ affordances
65
Activity
– Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with
them?
66
Example of Digital
Affordance
69
Activity
7
0