3. What is Human-Computer Interaction
Interaction design, navigation design,
information architecture
Human factors and senses
The role of cognition, memory and
emotions
Design and prototyping
The processes of evaluation (testing)
and analysis
5. Fully online. Only in English
14 weeks of lectures and practices
2 assignments. Though, you will have
some smaller tasks on Practices that
will not be graded.
Grading:
• Assignment 1: 30%
• Assignment 2: 30%
• Final exam: 40%
• + Extra points
Office hours:
• TBA, Calendly link will be sent later
7. Microsoft Teams as a main platform
Figma as your working environment
Discord for group communication and
announcements
Behance. Dribbble or Uplabs for your
portfolio
Additionally: Youtube, TikTok and
Telegram for some fun stuff and for
challenges that might potentially help
you gain extra points.
9. What is design?
- Achieving goals within constraints
- Goals - purposes
Who is it for, Why do they want it
- Constraints:
Materials, platforms, finance, expertise
- Trade-offs
- We design interactions not just interfaces
- We design interventions not just artefacts
Think about whole flow not just a moment.
11. Universal rules for HCI
Understand your material
Understand technology
Limitations, capacities, tools, platforms
Understand people
Psychological/social aspects
Human error
Context
https://makeagif.com/gif/-y25hcl
12.
13. What is User experience?
According to Nielsen Norman Group
"User experience" encompasses
all aspects of the end-user's
interaction with the company, its
services, and its products.
Don Norman (the term inventor) explains what
is UX: https://voutu.be/9BdtGiolN4E?t=1Q
15. - Why?
- Motivations
- Values and views
- What?
- Functionality
- Features
- How?
- Accessibility
- Aesthetics
The subjects of UX
The Why, What and How of UX Design
r ^ r ^ r
WHY
—^
WHAT
— >
HOW
Motivations Functionality Accessibility
Values and views Features Aesthetics
jA1 L S L л
it ппилглпмtaara
' FOUNDATION INTERACTION-DESJGN.ORG
https://www.interaction-design.org/literature/topics/ux-design
16. 7 factors that affect UX
According to Peter Morville a product must be:
1. Useful: has a purpose for its target customer
2. Usable: users can effectively and efficiently achieve their end objectives
3. Findable: a product and its content are easy to find
4. Credible: users can trust to the product
5. Desirable: by branding, image, identity, aesthetics and emotional design.
6. Accessible: users of a full range of abilities can use it
7. Valuable: a product must have a value for a user
https://www.interaction-design.org/literature/article/the-7-factors-that-influence-user-experience
19. What is Human-Computer Interaction
Interaction design, navigation design,
information architecture
Human factors and senses
The role of cognition, memory and
emotions
Design and prototyping
The processes of evaluation (testing)
and analysis
21. Fully online. Only in English
14 weeks of lectures and practices
2 assignments. Though, you will have
some smaller tasks on Practices that
will not be graded.
Grading:
• Assignment 1: 30%
• Assignment 2: 30%
• Final exam: 40%
• + Extra points
Office hours:
• TBA, Calendly link will be sent later
23. Microsoft Teams as a main platform
Figma as your working environment
Discord for group communication and
announcements
Behance. Dribbble or Uplabs for your
portfolio
Additionally: Youtube, TikTok and
Telegram for some fun stuff and for
challenges that might potentially help
you gain extra points.
25. What is design?
- Achieving goals within constraints
- Goals - purposes
Who is it for, Why do they want it
- Constraints:
Materials, platforms, finance, expertise
- Trade-offs
- We design interactions not just interfaces
- We design interventions not just artefacts
Think about whole flow not just a moment.
27. Universal rules for HCI
Understand your material
Understand technology
Limitations, capacities, tools, platforms
Understand people
Psychological/social aspects
Human error
Context
https://makeagif.com/gif/-y25hcl
28.
29. What is User experience?
According to Nielsen Norman Group
"User experience" encompasses
all aspects of the end-user's
interaction with the company, its
services, and its products.
Don Norman (the term inventor) explains what
is UX: https://voutu.be/9BdtGiolN4E?t=1Q
31. - Why?
- Motivations
- Values and views
- What?
- Functionality
- Features
- How?
- Accessibility
- Aesthetics
The subjects of UX
The Why, What and How of UX Design
r ^ r ^ r
WHY
—
^
WHAT
—
>
HOW
Motivations Functionality Accessibility
Values and views Features Aesthetics
jA1 L S L л
it ппилглпм taara
' FOUNDATION INTERACTION-DESJGN.ORG
https://www.interaction-design.org/literature/topics/ux-design
32. 7 factors that affect UX
According to Peter Morville a product must be:
1. Useful: has a purpose for its target customer
2. Usable: users can effectively and efficiently achieve their end objectives
3. Findable: a product and its content are easy to find
4. Credible: users can trust to the product
5. Desirable: by branding, image, identity, aesthetics and emotional design.
6. Accessible: users of a full range of abilities can use it
7. Valuable: a product must have a value for a user
https://www.interaction-design.org/literature/article/the-7-factors-that-influence-user-experience
33. UX process
1. Understand your users and the brand
2. Do research through observations,
interviews, surveys, focus groups.
3. Analyze it using personas, journey
maps, user stories.
4. Create a design with help of
wireframes, visual elements etc.
5. Launch a product using different
approaches as soft-launch, internal.
6. Analyze again by testing it to create
even better experience.
34. The UX process
Understand
I Research I
Щ Analyze Щ
Щ Design I
Щ Launch Щ
Analyze again
https://www.invisionapp.com/inside-design/6-stages-ux-process/
35. UX vs and Ul
UX is a general term, while Ul is more
specific, i.e. Ul is a subfield within UX.
- UX defines the whole experience
- Ul defines look, feel and usability
But in terms of speciality, they require
different sets of skills.
36. User research
Usability testing
Personas
jrmation architecture
Interaction design
Workflows
Copywriting
Low-fidelity
Wireframing
Prototyping
Usability
Accessibility
UI
Visual design
Interface design
Colors
Layout
Branding
Typography
Graphics
High-fidelity
https://www.ventera.com/news/insight/what-makes-ux-different-ui
37. Further reading
- The Definition of User Experience (UX) by Nielsen Norman Group
- User Experience Design by Peter Morville
- What is User Experience (UX) Design? (InteractionDesign Foundation)
- What is User Interface (UI) Design? (Interaction DesignFoundation)
- The UX design process in 6 stages by Invision App
- Crash Course: UI Design
- Principles of Interaction Design: What It Takes to Create Positive Human-
Computer Interactions
- Design should be for people, not for designers
39. What is Interaction Design?
According to interaction-
design.org:
It is the design of the
interaction between users
and products.
https://uxdesign.cc/10-steps-to-interaction-design
6abe778cb8b8
40. 5 dimensions of Interaction Design
Visual
1 Text Representations
2. Visual representations
3. Physical objects or space
4. Time (animation)
5. Behaviour (reaction)
Behavior
Physical Objects
or
Space
Time
41. 5 DIMENSIONS OF INTERACTION DESIGN
О О О
Application Form
Г Ъ в в * | h M t o W
f ■■! r m . i f W ЧМц Ч***Н1Л *Л-*а-1П i-Л -Ч Ч*-+ К1
il Iii'Hb *■!
Ш Ш
42. 1D: Text
All the text users see on an interface from button
labels to description of your product or service.
Text should be meaningful and easy to understand
Your interface should "speak".
Where teams
design together
Ш
https://www.figma.com/
Figma helps teams create, test, and ship better
designs from start to finish.
О See how it works
43. 2D: Visual representations
All the graphical elements
that users interact with, such
as images, icons, switches,
buttons etc.
Buttons
Dropdown
Button
https://www.usability.gov/how-to-and-
tools/methods/user-i nterface-elements.html
Toggles
44. A button indicates an action
upon touch and is typically
labeled using text, an icon,
or bolh,
The dropdown
bLitton consists of a button
Ihat when clicked displays a
drop-down list of mutually
exclusive items.
A toggle button allows the
user to change a setting
45. 3D: Physical objects or/and space
A medium between user and an
interface, as smartphone,
laptop, control panel, as well as
what space is around users
while they are using it.
https://commons.wikimedia.org/wiki/File:Fukushima_1
Power_Plant_control_room.jpg#globalusage
46. 4D: Time
About media that changes with
time and interactions that happen
during time. Also it is about how
long users spend.
https://www.youtube.com/watch?v=-
161NEOeqkw&ab_channel=Apple
47.
48. 5D: Behaviour
- The mechanism of using
- Interface reactions to user
actions and feedback
https://www.nngroup.com/articles/errors-forms-design-
guidelines/
49. Password Reset
Enter your new password for your Slack account,
New Password
Ф
Very wtik
Confirm New Password
Ф
Change my password
50. Further Reading
- Interaction Design topic on Interaction Design Foundation
- Interaction Design Basics by usability.gov
- Interaction Design topic on Nielsen Norman Group
- What is Interaction Design & How Does it Compare to UX?
52. 5 stages of design thinking process
1. Empathise: What user
needs/wants?
2. Define: Analyse what you
have found
3. Ideate
4. Prototype
5. Test
Author/Copyright holder: Teo Yu Siang and
Interaction Design Foundation. Copyright terms
and licence: CC BY-NC-SA 3.0
Design Thinking: A 5 Stage Process
Empathise H Define H Ideate H Prototype
» о г т ш с г а и р ш ш
r FO ITN D A TIO N INTERACTION DESIGN ORG
I
53. Stage 1. Empathise: What user needs/wants?
Observe people
Interview people
Look at existing solutions
Ethnographic research
https://unsplash.com/photos/RDpE-tPg5MM
https://unsplash.com/photos/JaoVGh5aJ3E
54. Stage 2. Define: Analyse what you have found
Sorting, ordering, structuring
Information architecture, sitemaps
User flows and maps
https://productschool.com/blog/product-
management-2/user-flows-vs-user-journeys/
https://knowyourmeme.com/photos/1430367-
pepe-silvia
55. - Brainstorm all the ideas you have
- Think "outside the box"
- Look for alternatives
Stage 3. Ideate
https ://gi phy.com/gifc/26ufbjVtvdCai koP6/html5
57. - Rapidly build some inexpensive, scale
down version of your solution
- Different types of prototypes: paper,
sketch, interactive, programmed
Stage 4. Prototype
http://babich.biz/the-magic-of-paper-prototyping/
58.
59. - Test it with target users
- Analyse it
- Go back to earlier stages to
refine your design
Stage 5. Test
https://medium.eom/@viv_kay/the-secret-weapo n-
every-ux-designer-needs-97c64cd6cb7b
60.
61. Other frameworks
- Heart, Head and Hand - Frog Design - What x 4
- IDEO's Deep-Dive - Explore - What is? Exploring the
- Understand - Converge current reality
- Observe - Support - What if? Envisioning
- Visualise - HCD - Human Alternative Futures
- Evaluate Centred Design - What wows? Getting users
- Implement - Hear to help us make some
- Design Council of the UK: 4 D’s - Create tough choices
- Discover - Deliver - What works? Making it
- Define - The LUMA System work in-market, and as a
- Develop - Looking, business
- Deliver - Understanding
- Making
62. Further reading
- Design Thinking on Nielsen Norman Group
- Empathy Mapping: The First Step in Design Thinking
- UX Visualization Techniques
- Ideation for Everyday Design Challenges
Prototyping on Interaction Design Foundation
64. Fundamental Principles of Interaction
1. Affordances
2. Signifiers
3. Constraints
4. Mapping
5. Feedback
http://web.stanford.edu/~rldavs/educ236/readings/doet/text/ch01.html
65. Affordances
An affordance is a relationship between the
properties of an object and the capabilities of the
agent that determine just how the object could
possibly be used. A chair affords (“is for”) support
and, therefore, affords sitting.
— Don Norman, The Design of Everyday Things
On the photo is a result of AI design by
https://philippschmitt.com/work/chair
68. Signifiers
Signifiers define where the action might be done. Or as Don Norman says:
Affordances determine what actions are possible. Signifiers communicate
where and how the action should take place.
https://uxdesign.cc/what-is-an-affordance-6b60f2de79f2 https://dribbble.com/shots/7402280-Button-Animation
71. Constraints
A sense of limit that holds users from
doing certain actions:
- Physical: i.e. physical limits
- Semantic or Logical: limitations of
possible actions based on logic or
meaning
- Cultural: conventions shared by a
cultural group
72. t o s n u s & Cams N e w s p a p e r
https://www. pinterest.com/pi n/1386264947513113 32/
74. Mapping
It explains how data relates to other data, in other
words, relationship between control and effect/result.
https://readwithsteve.wordpress.com/2016/02/09/bad-design-is-all-around-you/ https://t.me/uxfromhell/361
77. Feedback
A reaction to an action, i.e. some
information that is sent back to a
user as an answer to their action. It
could be visual, tactile, audio,
verbal or a combination of them.
79. *« 1 / 1 - + и =3 n ib c D efault Q.
1: ashu(ffiashutosh: - ▼
ashu@ ashutosh:-$ | -
5
https://www.geeksforgeeks.org/basic-system-controls-with-terminal-in-linux/
80. M y S h u v n
Listening
< S >
О
о
O i*cov« r
https://medium.eom/@gisela.abrigo/se
crets-to-achieve-a-more-emotional-ui-
design-1 b04d4b83e04
81. Further reading
- The Design of Everyday Things by Don Norman. Chapter 1
- Bad design analysis
- Interaction design principles, conventions and standards
Strongly recommend to read
The Design of Everyday Things by Donald Norman
Even if you are not planning to become a designer. The book is very fundamental
and will help you to widen your worldview!
PDF version
83. Usability
According to Interaction Design Foundation: Usability is a
measure of how well a specific user in a specific context can
use a product/design to achieve a defined goal effectively,
efficiently and satisfactorily
https://www.interaction-design.org/ U S S b i l i t y i f l V O l V G S
4 С? С A
Navigation Familiarity Consistency Error prevention
<S> ч /
Feedback Visual clarity Flexibility &
efficiency
|7 « Д К С . Л n n r n n t n DCSKIN
FOUNDATION INTERACTIO
N-O
ESIG
N.O
RG
84. 5 Characteristics of Usable Products
- Effectiveness:
- Does it do the right thing?
- Does it get things done?
- Efficiency
- Does it do that with a minimum effort?
- Engagingness/Satisfaction
- Does it make you feel good?
- Do you feel happy?
- Error Tolerance
- Does it help you to avoid mistakes?
- Does it help you to recover from the errors?
- Ease of Learning
- Is it easy to learn?
https://usabilitygeek.com/
85. Effectiveness
It is all about getting things done in a most
accurate and effective way possible.
Google
Q,
G w g le -u e n 1здеу ftp c e ii тусер
Google ^оычры: English руснмй
87. Efficiency
It is all about getting things
done in a most accurate and
effective way possible.
https://ru.wikipedia.org/wiki/IPod_classic
88. When user finds the product pleasant
and gratifying to use.
Engagingness/Satisfaction
https://apple.com/
89. Л TV Shows MoWes My Ust
/ » / .
щ I* 1
**
the
social
dilemma
Preview s
ft OB- .il v ■ ■
а да
О
https://mobbin.design/apps/ https://netflix.com/
duolingo#BL6wgvRpvahqR
cJNLsFS
90. Error Tolerance
According to Whitney Quesenbery
providing error tolerance requires:
- Restricting opportunities to do the
wrong thing.
- Offering the opportunity to “redo”.
- Assume everyone is going to do
things you don’t expect them to do.
https://dribbble.com/shots/3826932-Call-Request-Form
https://support.gitkraken.com/working-with-commits/undo-and-redo/
91. Call Request Information 1
О«0» «см* M«C rtomurtton «
D
O
W
fth* CM
М
а
м
»*
2 3 /0 9 0 0 1 7 9 2 0 AM
Cancel
1 ----------------------- f#i I'lifk'raL'on
0 С „ ± V
Undo Redo Fetch Push Branch
/ / WIP 0 1
| M erge pull request # 16 00 from im plausible/bug;
| M erge pull request #1603 from rcjsuen/reset-ch<
b) Remove ssl and crypto dependency on non-elect
Check param eters before perform ing reset
92. Ease of Learning
The product is intuitive and simple to use
and mostly match user's mental model.
Braun KM-3 Food mixer, 1957
https://www.core77.com/posts/24950/A-History-of-Braun-Design
Part-4-Kitchen-Appliances
93. Further reading
- What is Usability?
- An Introduction to Usability
- Usability 101: Introduction to Usability
- Usability Evaluation Basics
- Designing for the mental model
96. #1: Visibility of system status
The system should always keep
users informed about what is going
on, through appropriate feedback
within reasonable time.
F ir b i M ain e *
Jane
Labi Name '
Doe
Email Addrt-fr* '
janedoe
РШ*» mw * address,
fw в
о
сатр
!*,
98. #2: Match between system and the real world
Follow real-world conventions, making
information appear in a natural and
logical order, speak user's language.
After
"We'tl mail yo u a chet к for
the remaining balance.'
https://en.wikipedia.org/wiki/File:Pointing_hand_cursor_vector.svg
https://www.theloquitur.com/look-up-and-speak-up-against-scrolling-the-new-smoking/
https://www.secretstache.com/blog/ux-writing/
99. #3: User control and freedom
A sense of control by providing an
"emergency exit" for some accidents
or a ability to undo/redo their actions.
о
Undo
GitKraken
С ± . ± V>
Redo Fetch Push Branch
*
/ / WIP 0 1
M erge pull request # 1 6 0 0 from im plausible/bugi
M erge pull request # 16 03 from rcjsuen/reset-ch<
Remove ssl and crypto dependency on non-elect
Check param eters before perform ing reset
О
Л
Ш
А
.. Щ
message X
Бухта -
Forgot your password?
Don't worry. Resetting your password is easy, just tell us the email
address you registered with Zoom.
https://support.gitkraken.com/working-with-commits/undo-and-redo/
https://support.zoom.us/hc/en-us/articles/115005171726-Forgot-My-Password
100. #4: Consistency and standards
Users should not have to wonder whether different
words, situations, or actions mean the same thing.
Follow platform conventions.
https://docs.microsoft.com/en-
us/wi ndows/uwp/design/style/icons
https://uxwritinghub.com/ux-writing-amsterdam/
https://gifer.com/en/M4su
102. #6: Recognition rather than recall
Minimize the user's memory load by making
objects, actions, and options visible.
> v П- П - ^ - T
«
[ | Rectangle R
/ Line L
iS
Arrow
Cover
О EJiips-e 0
Sozde A Polygon
III Kit
^ Star
У ЯГ
чЦ
Gr
aпи
Place Image 0 3£K
https://en.wikipedia.org/wiki/Yield sign
https://www.figma.com
103. #7: Flexibility and efficiency of use
Accelerators may often speed up the interaction
for the expert user such that the system can cater
to both inexperienced and experienced users.
Allow users to tailor frequent actions.
Select All XA
Select None
Select All with Same Properties
Select All with Same Fill
Select All with Same Stroke
Select All with Same Effect
Select All with Same Text
Select All with Same Font
Е£5№
пЕш1 Too*» VJow Zoom Text Shape Sc1
eel.on Guitar
(told
□ a t a il Ai.gr: (.nit
□ □ □
□ a T lK tA U fn C H IH
ODD
□ a ГеИ Akgn ftgM
0 0 0
□ □ a Tejfl Afcflh JuStifiM
0 0 0
Craaftv Llnft
н и
https://www.figma.com
http://kaspi.kz/
104. #8: Aesthetic and minimalist design
Do not overwhelm a user with an irrelevant https://www.notion.so/
https://store.google.com/product/google home speaker
information and keep it simple and minimal. https://unsplash.com/photos/DU3bnkBY1N8
105. #9: Help users recognize, diagnose, and recover
from errors
Error messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a solution.
* CE
Create your account
Name
asdasd1231
10/50
Phone
21fsad
Please enter a valid phone number.
Login
N eed a M ailch im p account? Create an account
^ Sorry, that password isn't right. We can help you recover
vour password.
https://twitter.com/signup https://login.mailchimp.com/login/post/
107. Further reading
- 10 Usability Heuristics for User Interface Design
- 10 Usability Heuristics That All UI Designers Should Know (with examples)
- KISS (Keep it Simple, Stupid)
- The UX of LEGO Interface Panels
- What’s More to Design in a Chair
- What is the ’hot’ on the left, ’cold’ on the right convention in plumbing based
on?
109. The perception
The perception is organization,
identification, and interpretation of
sensory information. Then it goes to
cognition.
P erception
Cognition
t
World
https://medium.com/@ avmair/cognition-and-perception-in-hci-e134e3b4401f
111. Interoception (sensing the inside)
- Pain (e.g. headache)
- Feeling (e.g. hunger, thirst)
- Proprioception or kinesthesia
(sense of self-movement and
body position)
Taste
112. Vision and the eye
- Half of the brain dedicated for the vision
- Major sense
- Brain mostly fills in the images you see
Fovea
- Centre of vision
- Mainly cones
- Needs a focus
Peripheral vision
- Mainly rods
- Detects movements, catches attention
113. Foveal system: 100% acuity
Peripheral system:
poor acuity, receptors
grouped for high
compression
Peripheral system for general holistic impression of the situation.
Foveal system for hiqh quality details.
https://commons.wikimedia.org/wiki/File:Double_system_e.jpg
114. Vision and the eye. Sensation and perception
- Sensation: direct light impact on retina
- Perception: what we feel we see (optical illusions)
Ebbinghaus illusion
https://en.wikipedia.org/wiki/EbbinghausJllusion#/
media/File:Mond-vergleich.svg
Cafe wall illusion
https://en.wikipedia.org/wiki/File:Caf%C3
%A9_wall.svg
Ponzo illusion
https://en.wikipedia.org/wiki/Optica
l_illusion#/media/File:Ponzo_illusio
n.gif
115. Hearing and the ear
- Kind of the second the most important sense
- Hearing helps to construct or fill missing
parts jointly with vision
- Though, less used in User Interface
- Might be annoying
- Less directional than vision and more diffuse
The ear
- Widest hearing freq: ~20Hz to ~20KHz
- Changes with ageing
https://thum bs.gfycat.com/TatteredAlarmingAm phiu
ma-size restricted.gif
116. Touch
- Mostly companion for other senses
- The skin is a sensor
- Most of our devices are touchable
- Learn ergonomics
https://alistapart.com/article/how-we-hold-our-gadgets/
118. Further reading
- Cognition and Perception in HCI
- Visual perception in user experience design
- Sound Advice: A Quick Guide to Designing UX Sounds
- How touch impacts UX
- The Human Body as Touchscreen Replacement
- Design and Disaster Onboard Air France Flight 447
- User-Centric Design - The Lessons of 3 Mile Island
- Designing the Sound of Electric Cars: BMW Vision M Next | BMW USA
- Wireframe (podcast by AdobeXD) episode on sound UX
- Sound and Health: Hospitals (podcast)
120. What is Gestalt?
The Gestalt (form, shape in German) principles
attempt to describe how people perceive visual
elements when certain conditions apply.
https://www.mirror.co.uk/news/uk-news/clouds-that-look-like-things-brilliant-847008
https://www.quora.com/What-are-the-weirdest-moving-optical-illusion-GIFs
121.
122. Principle of Emergence
People tend to identify elements first in
their general outlined form. Our brain
recognises a simple, well-defined object
quicker than a detailed one.
https://www.format.com/magazine/resources/photography/silhouette-photography
123. Principle of Reification
People can recognize objects even if some parts are
missing, our brain has an ability to fill the gaps.
W W F
httpsy/workJvector[ogo.com/down(oade<J/rtwf httpsy/www.broadwayworld.com/bwwtv/tvnetworfcs/USA/lwjQ
https://www.shivangpatwa.com/logo-design
124. Principle of Multi-Stability
It is an ability to interpret some
ambiguous visuals in more
than one way in order to make
sense of it.
https://www.creativevisualart.com/2013/09/13/ukr
anian-painter-masters-the-art-of-optical-illusion-
two-paintings-in-one
https://curiokids.net/understanding-optical-
illusions-with-rene-magritte/?lang=en
125.
126. People can identify objects
independently of their scale,
transformations (rotation, size)
Principle of Invariance
https://www.freepik.com/premium-vector/bitcoin-
gold-coin-different-angles-animation-vector-
bitcoin-set-finance-money-currency-bitcoin-
illustration-digital-currency_5771474.htm
127.
128. Law of Proximity
Elements arranged close to each
other are perceived as more related
than those placed further apart.
https://www.nngroup.com/articles/gestalt-proximity/
130. Law of Common Region
Similarly to the Proximity principle,
elements placed within the same
region are perceived as grouped.
https://www.nngroup.com/articles/common-region/
132. Law of Figure-Ground
Figure-ground organization structures the
perceptual field into a figure (standing out at
the front of the perceptual field) and a
background (receding behind the figure).
Figure - Ground
• • •
https://uxmisfit.com/2019/04/23/ui-design-in-practice-gestalt-principles/
https://dribbble.com/shots/2364488-Card-Swipe-Concept
133. Law of Similarity
Design elements that appear
similar in some way — sharing
the same shape, color or size
— are perceived as related.
O Rooms Video chai with friends О
<J 4 . & # k * & &
https://www.nngroup.com/articles/gestalt-similarity/
https://www.tacebook.com/
134.
135. Law of Symmetry (Order)
Symmetrical elements perceived as
belonging together regardless of
their distance.
https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
136. UX Collective
Curated stories on
user experience,
visual, and product
design.
'
Follow
1*
11?
Q 1
П
https://uxdesign.cc/a-list-of-design-concepts-
every-ux-ui-designer-should-learn-7e2d8412b391
137. Law of Continuation
Our perception tends to see object
arranged in lines or curves as more
related.
Continuation
• •
https://uxmisfit.com/2019/04/23/ui-design-in-practice-gestalt-principles/
139. Law of Common Fate
Elements moving towards the same direction are perceived as more
related than those moving in different directions, or not moving at all.
https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
140. Further reading
- Gestalt principles in UI design
- Proximity Principle in Visual Design
- Similarity Principle in Visual Design
- The Principle of Common Region: Containers Create Groupings
- UI Design in Practice: Gestalt Principles
- Gestalt Psychology and Why It’s Essential for Good Design (video)
142. The memory
The memory is a data storage inside
of human brain (hi, Captain).
- Sensory memory: the momentic
memory that attached to senses
- Short-term memory: the RAM of
human brain
- Long-term memory: a storage
for lifelong memories
144. Sensory memory
Continuously overwritten memory that attached to our senses.
Has a very short lifetime:
- Iconic memory: visual stimuli
- Echoic memory: aural stimuli
- Haptic memory: tactile stimuli
https ://www. pocketprep. com/how-sensory-memo ry-
and-your-5-senses-can-improve-study-effectiveness/
Created by Basti Steinhauer
from Noun Project
145. Short-term memory
- aka "Working memory"
- Capacity: 7 (+/- 2) chunks (Miller's The Magical
Number Seven, Plus or Minus Two)
e.g.
146. Long-term memory
- All the knowledge we know
- Slowly created (rehearsal) and decayed
- Capacity rather huge (unlimited probably)
148. Further reading
- How Human Memory Works: Tips for UX Designers
- Designing with memory in mind
- Memory Recognition and Recall in User Interfaces
- Working Memory and External Memory
- Short-Term Memory and Web Usability
- Priming and User Interfaces
- The Magical Number Seven, Plus or Minus Two
- How Memory Functions
150. Cognition
According to Don Norman,
1. Experiential
a. Perception
b. Attention
c. Memory
d. Learning
2. Reflective
a. Problem-solving
b. Decisionmaking
c. Reasoning
151. there are two modes of cognition
Gather and store information
To act upon that info
152. Human thinking
Logical thinking? Rather reasoning
- We think using the world
- We fit our thoughts, plans into some context
Conscious
- Linear
- No multitasking (rather switching) priming
- Could be easily interrupted / https://afycat.com/distinctpertinentferret
Unconscious
- Non-linear, fuzzy
- Intuitive, associative
I
f t
155. Norman's execution evaluation cycle
E.g. reading a book by Don Norman
1. Forming a Goal
I can’t read my book because the room is dimly
lit. I need more light in order to read my book.
2. Intention to Act
There is a light next to my chair. Turning on the
light would allow me to read my book.
3. Planning the Action
I need to reach over and turn on the light.
4. Executing the Action
I reach over to turn on the light.
5. Feedback from the Action
The light turns on.
6. Interpret the Feedback
I am now able to see the text and can read my book.
7. Evaluate the Outcome
Positive - I’m able to read my book. No further
action is needed.
Negative - The light doesn’t work. The Action Cycle
is either repeated or a new goal is formed.
156. Human error
Slips
- When user accidently does wrong action
Mistakes
- When user does not understand the system
(or has a wrong goal) and therefore does the
wrong action
2018 Hawaii false missile alert
https://www.theverae.com /2018/1/16/16896368/hawaii-
false-missile-alert-system-confusing-interface-poor-design
https://www.fi nedininalovers.com/article/need-cuttina-board-use-ipad
157. Further reading
- What Is a Mental Model? (video)
- Match Between the System and the Real World: The 2nd Usability Heuristic
Explained
- Minimize Cognitive Load to Maximize Usability
- What the Erroneous Hawaiian Missile Alert Can Teach Us About Error
Prevention
- The Two UX Gulfs: Evaluation and Execution
Usability Heuristic 5: Error Prevention
159. Emotional design
“Everything has a personality: everything sends an emotional signal. Even where
this was not the intention of the designer, the people who view the website infer
personalities and experience emotions.”
— Don Norman, Grand Old Man of User Experience
Watch the video
https://www.uxsharelab.com/emotionally-intelligent-design-your-mobile-app-needs-a-soul/
160. Emotional design
Emotional Design is Design that Anticipates
and Accommodates Users’ Needs and
Responses. According to Don Norman there
are 3 levels:
1. Visceral
Users’ gut reactions to or their first impressions
of your design
2. Behavioral
Users subconsciously evaluate how your design
helps them achieve goals, and how easily.
3. Reflective
Afterthey encounter your design, users will
consciously judge its performance and benefits,
including value for money
162. Emotions in interfaces
Emotions as a primary goal
- Art, games, entertainment (the purpose is to give emotions)
- Might need some functional support (good TV remote, game
controller, player)
Emotions are not primary goal
- Still can help to make experience much better; to enjoy it
- Duolingo (gamification); Facebook likes etc.
5 in a row! Welt done!
*
https://www.invsionapp.com/inside-design/duolingo-redesign/
https://unsplash.com/photos/MxVkWPiJALs
163. Emotions in interfaces: Input-Output
- Eliciting emotions: creating an emotion
(excitement for travelling; feeling of trust to
insurance company)
- Detecting an emotion: language; mood;
facial expression; action (e.g. fast scrolling
up and down or circling the cursor often
says that user is frustrated);
- Responding: e.g. making game level
easier if you detect some frustration; offer
help if users showed that they lost etc.
https://giphv.com/explore/computer-crash
https://svnthesis-it.co.uk/resolving-it-problems/
164. Designing for peak experience
- "Good enough" (average) products:
- Things that going to be shared
- Corporate, gov office systems
- Things people choose for us (when it is essential to fit everybody)
- Peak products:
- Things we choose for ourselves
- Tailored products
Good enough things never wins
It is essential to design
for particular audience
https://medium.com/@avimair/why-is-emotion
so-important-in-ux-1db4945cfdb5 _____________________________________________________
Spectrum oFdifferent users
Onepeak produce
165. Experience and enchantment
This concept brought by McCarthy and Wright
tries to describe how people experience things
There are 4 threads:
1. Sensual (visual, aural, tactile)
a. E.g. Drinking a tea. What is cup's material?
How it looks? How it smells? Temperature?
2. Emotional (feelings, relationships)
a. Associations with people, memories, mood
3. Compositional (integrity, coherence)
a. Part of identity: its role in his/her life;
4. Spatio-temporal (time, location)
a. Associations with time, some place
https://www.tula-samovar.com/stati-o-samovarah/kak-rastopit-samovar-na-(
https://peakd.eom/tea/@lemniscate/trying-out-a-new-place-for-delicious-tea
166.
167. Experience and enchantment: Sense-making
1. Anticipation -> waiting for something
2. Connecting -> emotions, feelings when smth
happens
3. Interpreting -> interpreting your emotions
(expectation/reality)
4. Reflecting -> reflecting on your experience
either afterwards or at the moment
5. Appropriating -> associations, influence on you
or your life
6. Recounting -> having memories; telling others
https://www.globaltimes.cn/content/742236.shtml
https ://gfycat .com/teemi ngeasygoi ngflatfish
168. Further reading
- Don Norman: Emotional Design (video)
- Emotional Design
- The Psychological Basis for UI Design Rules (video)
- Why is emotion so important in UX?
- The design of emotions and emotional intelligence
- The Peak-End Rule: How Impressions Become Memories
- User Empowerment and the Fun Factor
- Good Design is Human (Wireframe podcast by Adobe Xd)
170. Behavioural Design
[wiki]: It is a subfield within design which is concerned with how design can
shape, or be used to influence human behaviour.
https://www.uralskweek.kz/2019/11/14/vsyo-chto-vy-
xoteli-znat-o-nalogooblozhenii-na-kaspi-kz/ Japan fans clean stadium after devastating loss
171. The Fogg Behavior Model
It shows that three elements must converge
at the same moment for a behavior to occur:
Motivation, Ability, and a Prompt. When a
behavior does not occur, at least one of
those three elements is missing.
Example 1
Example 2
https://behaviormodel.org/
173. The Hook Model
1. Trigger
a. Internal
b. External
2. Action
3. Variable reward
4. Investment
Trigger
2. External trigger - What gets the
user to the product?
1 . Internal trigger * What does
the user really want?
Investment
5. What is the 'bit of work' done
to increase the likelihood of
returning?
https:// nirandfar.com
Action
3. What is the simplest behavior
in anticipation of reward?
Variable Reward
4. Is th e re w a rd fu lfillin g , y e t
leaves th e u ser w a n tin g m ore?
N IR EYAL
NirAndFar.com
@nireyal
174. Further reading
- What is Behavioural Design?
- Behaviour Change By Design (video)
- Changing behaviour by design (TED Talk)
- Fogg Behavior Model
- [UX Read] Hooked — How to Build Habit-Forming Products
10 Behavior Patterns for UX Design
176. Dark Patterns
Dark Patterns are tricks used in websites and apps that make you do things that
you didn't mean to, like buying or signing up for something.
Examples are:
- Disguised ads
- Trick questions
- Roach motel
- Misdirections
- and more (see here)
https://signalinc.com/ethical-ux-and-dark-patterns/
177. Disguised ads
(Ol IrutoguuK
ЗЭ-разм етки появились
на двух пеш еходны х
переходах в Алматы
O Q V •• Я
О Liked by beeeo.continued and 7 4S7 other*
•tmeTytoday Необычная разметка с
30-зффе«тем появилась на двух перекр nvy*
Ф ^^**b
,e i
Ads that look exactly
as other content to
make you click on it.
https://google.com
https://instagram.com
smart tv X ■ Q.
Q. Барлыгы 0 Суреттер В Бвйие Q Maps : Баска Каплуплрынм* Кураллар
Шамамеи 3 570 ОООООО нотиже <0.56 оекунд)
Жарнама • www sulpak.kz/ * 8 (7272) 33 30 00
SmartТУ;Даиатить вАлматы- интернет магазин"SuiR
als!
Покупайте онлайн с бесплатной доставкой на выходя из дона Большой ассортимент
товаров от самых топовых брендов Все новинки моделей у нас! Официальная гарантия
Бонусы при покупке Болев 122 тысячи товаров Возврат/Обмен 14 дней
9 Алматы Манайда 13 орын бар
Ноутбуки Мониторы
Покупайте Надежные Ноутбуки Большой выбор Гарантия качества
В Рассрочку по Выгодным Ценам Быстрая доставка, Заказывайте1
Планшеты Смартфоны
Покупайте Планшеты по Выгодной Цене Большой выбор Топовых Брендов
Обходитесь Без Лишних Трат По Приятным Ценам
ш,wAlpedia.org >wAI >Smart TV * Осы беттт аудар
Smart TV — Википедия
Smart TV (рус Умное телевидение), или Connected TV — технология интеграции
интернета и цифровых интерактивных сервисов а современные
Определение История идеи Технология Российский рынок
178. Roach Motel
The design makes it very easy
for you to get into a certain
situation, but then makes it hard
for you to get out of it (e.g. a
subscription).
https://darkpatterns.org/types-of-dark-pattern/roach-motel.html
https://spottheunsubscribe.tumblr.com/post/143591230031/note
the-unsubscribe-link-is-even-grayed-out
180. Trick questions
Using confusing language to steer
users into making certain choices.
https://darkpatterns.org/types-of-dark-pattern/trick-questions.html
https://www.zdnet.com/article/user-intertace-dark-patterns
becomi ng-common-on-onli ne-sto res/
182. Ethical Design
A design that respects Human
Rights, Human Efforts and Human
Experience.
Ethical Design Manifesto (video)
https://2017.ind.ie/ethical-design/
183. Respect
H u m an E x p e rie n ce
Delightful
Functional, H u m an E ffort
c o n ve n ie n t & reliab le
D ecen tralised , private, o p e n ,
in te ro p e ra b le , accessible, secure &
sustainable
H u m an Rights
184. What ethical design should be like?
DESIGN IS [ IMMERSIVE ]
It should be
- Empowering
- Finite
- Inclusive
- Resilient
- Respectful
- Thoughtful
- Transparent
https://medium.com/google-design/design-is-63274a236ef2
185. Empowering
Value for people > revenue it generates
Give control and freedom
Give people the control they need to manage
the algorithms that shape their experiences.
Provide privacy and anonymity
Give people the control they need to manage
privacy and anonymity.
Hide elements until needed
Technology should augment human ability
without disrupting our lives.
Promote awareness
Promote usage awareness to encourage
healthier digital habits.
186. https://telearam.ora/
https://instaaram.com/
12:10 В в * J 82« 1209
<г Чатты баптау 5 X Your Activity
E
idм
о
й У
шЖ
О
П time on instafltanri
Баптау 17,
Тумпре*!ын|ццосылуы
« э
DailyAverage
A
v
P
tfЛ
П
Р1(P
V
i с
гкэ
r.| noriffc
lW
|ic;nn
ктрмягмрешил*МрМКонм
р fY
h
c-С
1
Ц
СL
*
1
■
“ p
til >
LК
*-* H
'JfU
3
liK
J
«.олданбадагыбраузер
Direct Share
О
*9
5
4w
eek
« О
м
кврсету
■
'fem
ey'июрма*еачгы■xrtapa _
Анимация к,осу О
tpi змоджи 0 *
Дауысхатжазуушшжакындату в О
С»
Daily Reminder Is On
Enterбэсып. ж|6еру
Y
cm
rdailyrem
inder laset lor 10mi:.лез
Галеренгасактау о Edil Rem
inder
Кашыцтык.влшем! Шакырым
Стикер мен маска
188. Inclusive
Design with accessibility in mind
- Make your team as diverse as possible
Different backgrounds will help to build inclusive
designs
- Design for disabilities first
A design solution for the disabled often results in a
feature that everyone can benefit from.
- Give more advanced control over
accessibility
To help people experience the product in the most
convenient way appropriate forthem
189. Mac OS Accessibility settings
<
U
A
ccessibility
Ф Cvervtow
ОVaiceOvcT
Inwcr? ctrtgr*
R edurt moiMon
Zoom Incr&isfr conlraat
Display
^(Khjw transparency
Differentiate Vfllhoui cotor
D
j S£*KT> Display contrast
I-(O fK fip tle n s
MormaJ
Л Audio
m Cflfl*iOi>S
Calar fillers
Млк*т>нтг
S haw A ccessibility sla lu s in nlfrnu bar
190. Resilient
The design that anticipates the potential
for abuse and cares about the well-being
of the most vulnerable ones.
- Provide content control
Enable people to control who has access to
their information and the content they share.
- Enable community moderation
Community moderation enables people to
protect themselves against malicious intent.
- Focus on edge-cases
https://twitter.com/
https://facebook.com/
191. * Report an issue
Help us understand the problem What issue with ®habc_com
are you reporting?
I'm oof in ftrtilad m M s account
Ift tuapaciooi or ipam
It appear* tfxHr account Is hacked
They'ra protending to bo mo or aomoorto also
Thao TWoota aro abuaho or hateful
Their profile Info and/or Imagao Include abuslva or hatafui content
Covered by Netzwerkdurchmetzunpageoetz
They're oKpreealng Intention# of ее*-harm or euidde
Колданыстагы cia ке рееткем телефон нем1р!н юмдер каре
глады?
This applies to people who can't see your phone number on your
profile.
И ] л.и-.ф • К
Ф ЭркiM
1 : iL
. д-оста&цыч aotviiitJ outside of Facehopk to link to your
1vr .1; floerap
Д ток. эна мйн
192. 15 30 a ^ J 58% •
<r Push notifications #
Photo tegs В
Moments
Broadcasts В
Followers and contacts
New followers
Contact joins Twitter
Direct M essages
Direct Messages
Message reactions
Recommendations from Twitter
Topics В
Respectful
It respects people, their time, attention, well
being.
- Make notifications customisable
Allow users to customize from whom, when and how
they can receive notifications to minimize unwanted
interruptions.
- Respect and Adapt to Context
Technology should respect and adapt to user
context.
https://twitter.com/
https://gmail.com/
193. Thoughtful
The design uses friction to prevent abuse,
protect privacy, and steer people towards
healthier digital habits.
- Manual/Algorithmic Speed Bumps
Use confirmation dialogs to help prevent error, avoid
unintentional actions, and promote critical thought.
- Encourage moderation
https://uxdesign.cc/are-you-sure-you-want-to-do-this-microcopy-for-confirmation-
dialogues-1d94a0f73ac6
194. Delete for all eternity?
You'll lose all responses collected by this typeform. We can't
recover them once you delete.
Are you sure you want to perm anently delete this typeform?
Cancel Yes, delete it
195. Transparent
Transparent design is clear about intentions,
honest in actions and free of dark patterns.
Right to Know
Right to know exactly what they are signing up
for
Data Transparency and Access to Data
What data is being collected, why, and an
access to it
- The Right to be Forgotten
Provide the ability to permanently delete the
data
- Avoid Misdirection
Easy Exit
197. Further reading
- Dark Patterns
- Ethical UX and Dark Patterns
- Study of over 11,000 online stores finds ’dark patterns’ on 1,254 sites
- Ethical Design Manifesto
- A Designer’s Code of Ethics
- Humane by Design
- Design Ethically
- The world needs a tech diet; here is how designers can help
- It’s Time for Digital Products to Start Empowering Us
201. Aesthetic Usability Effect
Attractive things work better
— Don Norman.
People often perceive aesthetically
pleasing design as design that’s more
usable.
https://www.mtpplc.com/blog/can-apple-sustain-their-competitive-advantage/
202.
203. In order to keep users' attention and to
increase productivity system should
provide feedback within 400ms.
Doherty Threshold
https://www.behance.net/gallery/103091631/Revolut-UIUX-App-Enhancement
204. №
4t ■id♦
£5,100
Spent Ihis (nonEh
m GBP Budget
Set your bueoet goat
Category
Shopping £3,200
32 IfonSMtiOrtS 344
Groceries £1,307
Otransae tiotfs 144
Restaurant; £900
IS (rarisictitms UK
^ Health £100
2 Transactions 1QX
ts .It e?
A
A
*tyb<* p
-jgw
»
*
r
205. Fitt's Law
The time to acquire a target is a
function of the distance to and size
of the target. In other words, the
longer the distance and the smaller
the target’s size, the longer it takes.
http://uxbert.com/ux-psychology-principles-design-ux/
https://www.interaction-design.org/literature/article/fitts
importance-of-size-and-distance-in-ui -design
206. Апиг user can cflrct
I
X jC
fBackup my files (recommended) ' П ' Save my settings
ч /
Area user can cteJc
I
11 | Backup my files (recommended)I Save my settings
FITTS1LAW
MT * a + b> iogj ( 2 £ )
MT - The movement time
з - The intercept
b ■The slope
D ■The distance between the
origin and the target
W - The width of t he target
™ № ]]V n O ? tlJTER*CIBN-BE3ICH.DHG
207. The time it takes to make a
decision increases with the
number and complexity of
choices (aka Choice overload).
Hick's Law
https://blog.crobox.com/article/choice-overload
https://www.designorate.com/hicks-law-building-
usable-navigations/
6KAND by To^
S « r O f c K 4 f T o o N i
Hick’s Law
RT = a + b log2 (n)
R
Tis the Reaction Time
(n) is the number of stimuli
“a” and "b” are constants
208. Jakob's Law
Users prefer your site to work
the same way as all the other
sites they already know.
Follow standards and well-
known patterns.
https://userinyertace.com/
209. User Inyerface
a b a g a a r frustration
Hi and welcom e to User Inyerface,
a challenging exploration of
user interactions and design patterns.
To play the game, sim ply fill in the form
as fast and accurate as possible.
210. The average person can only
keep 7 (plus or minus 2) items
in their working memory.
Miller’s Law
https://designundisciplined.wordpress.com/2017/07/03/ux-laws/
212. Occam’s Razor
When faced with two equally good
hypotheses, always choose the simpler.
https://giphy.com/giis/season-6-the-simpsons-6x10-l2JdSxKfQhreOGdag
https://automaticaddison.com/occams-razor-and-machine-learning/
213. Further reading
- Laws of UX
- UX Laws with practical examples
- A summary & commentary of Don Norman’s article “Emotion & Design:
Attractive things work better ”
- Fitts’s Law: The Importance of Size and Distance in UI Design
- Choice Overload Impedes User Decision-Making
- Jakob’s Law of Internet User Experience
215. It states that, for many events, roughly
80% of the effects come from 20% of
the causes. So, focus the majority of
effort on the areas that will bring the
largest benefits to the most users.
Pareto Principle
https://www.teodesk.com/blog/the-pareto-principal-are-you-
wasti ng-80-of-your-ti m el
217. Parkinson’s Law
Any task will inflate until all of the available time is
spent. It is a good idea to have some time constraints.
Effort
Time Allowed
https://medium.com/@ke.sawyerr/parkinsons-law-the-secret-reason-your-competition-
making-more-money-than-you-in-less-time-75e2c378160c
https://www.joshmorony.com/how-to-create-an-accurate-timer-for-phaser-games/
llDEKJ
T P E M В
E I °S E L
S U S К E
H A R О О
о о
I L Н A R
218. Peak-End Rule
People judge an experience largely
based on how they felt at its peak
and at its end, rather than the total
sum or average of every moment of
the experience. And remember that
people recall negative experiences
more vividly than positive ones.
https://advanced-hindsight.com/blog/b-e-for-dogs-peak-end-rule/
220. Postel’s Law
Be liberal in what you accept, and
conservative in what you send. Be
empathetic, flexible, and tolerant to
any number of actions the user
could possibly take. This means
accepting variable input from users,
translating input to meet the
requirements, defining boundaries
for input, and providing clear
feedback to the user.
https://advanced-hindsight.com/blog/b-e-for-dogs-peak-end-rule/
222. Relent
on
Serial Position Effect
Users have a propensity to best remember the first and last items in a series.
primacy recency
T*ne
Serial
- —.oo- _ primacy
https://blog.prototypr.io/psychology-in-design-part-1-cdc63229cbe4
223. Tesler's Law
aka The Law of Conservation of
Complexity, states that for any
system there is a certain amount of
complexity which cannot be reduced.
So, someone has to deal with it, if
not the designers/manufacturers, it
will be the users.
https://blog.prototypr.io/apple-in-violation-of-teslers-law-b405c89c11c6
224. С Э ' С Э S*e3 9 й
l i
С
ф
1
1
1■ ■ ■ b aaJ
«лс«idim HDMI ^
а = -
----------------------ь
225. aka The Isolation Effect, predicts that
when multiple similar objects are
present, the one that differs from the
rest is most likely to be remembered.
Von Restorff effect
https://www.convertize.com/glossary/von-restorff-effect/
227. Zeigarnik Effect
People remember uncompleted or interrupted tasks better than completed tasks.
Use progress bars for complex tasks to visually indicate when a task is
incomplete, and thus increase the likelihood it will be completed.
:=
—
1 To-do Hide completed items. Delete...
33%
Make budget
Find discount code
Vdd an item
https://help.trello.com/article/737-adding-checklists-to-cards
228. Further reading
- The Pareto Principle and Your User Experience Work
- A designer’s guide to Parkinson’s Law of Triviality
- The Peak-End Rule: How Impressions Become Memories
- Why We Hate Not Finishing What We Start
232. Field Study & Contextual Enquiry
Field study is about going out and observing
users “in the wild”. It might include
ethnographic research, interviews,
observations and contextual enquiry.
https://unsplash.com/photos/ABGaVhJxwDQ
233. Interviews and surveys
Interviewing and surveying target users and stakeholders as
well as sales, support team members to gather more
information about pains, requirements and constraints
- User interview
- Stakeholder interview
https ://giphy.com/ex plore/jobinterview
234. Looking through data from analytics
(Google Analytics, Yandex Metrics) and
gather information about the usage, user
behaviour, demographics etc.
Analytics Review
https://dribbble.com/shots/4012238-Data-Analytics-Animation
235.
236. Heuristic Evaluation
Analysing existing product in accordance
with 10 Heuristics to indicate and the
most obvious and critical design issues
https ://www. pinterest. com/pin/4919479592742 83325/
237. 10 Usability Heuristics
О Visibility
Show system status, tell
what's happening
u r „
IP Freedom
Provide good defaults & undo
A Error Prevention
Help users avoid making
mistakes
^ Mapping
Use familiar metaphors &
language
Consistency
Use same interface and
language throughout
Recognition
Make information easy to
discover
X Flexibility
Make advanced tasks fluid
and efficient
Minimalism
Provide only necessary
information in an elegant way
Error Recovery ф Help
Help users recognize, diago Use proactive and in-place
nize and recover from errors hints to guide users
238. Competitive Analysis & Literature Review
Performing an audit/review of
competing websites and apps
Reviewing related research papers,
scientific articles, literature etc.
https://weeklywall.com/global-automotive-green-
tires-industry-market-competitive-analysis-2020-
2026/
241. Further reading
- The 9 Rules of Design Research
- The 7 Deadly Sins of UX Research
- UX Research Cheat Sheet
- UX Methods Bank
- Universal Methods of Design (book)
- Most Common UX Design Methods and Techniques
- When to Use Which UX Research Method (video)
- UX Investigation: what we can learn from Poirot’s murder mysteries
243. UX deliverables
Deliverables are
tangible artifacts that
designers produce to
communicate ideas
and structure the work
https://www.nngroup.com/articles/
common-ux-delivera bles/
244. Static wireframe and mockup
Wireframe — also known as a
page schematic or screen
blueprint, and it is a visual
guide that represents the
skeletal framework of a
website or an application.
https://medium.muz.li/how-to-succeed-in-
wireframe-design-2ab3cd5c4bc9
245.
246. Interactive prototype
A prototype is an experimental model of an idea.
Or as Tom Wujec says:
“Prototyping is the conversation you have with
your ideas.”
http://uxmelisa.com/which-prototyping-tool-to-use-for-each-scenario/
247. Flowchart and user flow
In UX design a flowchart is a
visual representation of user
flows. It is a process diagram
that creates by using a set of
standard symbols and
connecting lines.
https://www.casestudy.club/joumal/ux-flowchart
248. Sitemap and information architecture
Sitemaps are a hierarchical
diagram showing the structure
of a website or application.
https://uxmentor.me/sitemaps-the-beginners-guide/
249. Journey map
A journey map is a visualization of
the process that a person goes
through in order to accomplish a goal.
https://www.nngroup.com/articles/journey-mapping-101/
250. CUSTOMER JOURNEY MAP Example
E X P EC TA T IO N S
S*«nail*: Мпнр n w f t f c -.m li* Пи jAi j i
l^cajrkj p
L
mШ ш ш » larпоАруиМнЛК
ш
л
ш
с
и пД гр ъфця tawts,
LR
tH
tw
cm
w
rifrfw
i
».№
йпгpflnnrtcis
k* nsw p4w
Ji ЙЛГ.^Ф'Ь (М И Л if {Ш
■MTV
4 . R t t t f l£ h n CWnjUIYifi
jnd<
г
Е
-р
г>й
п
.^iunrl
5
.И
ч#гC
irfiM
ULJriiii
tr+bvkpHQ
lIB
tem
pw
t0
Р
?Ч
П
%
L Liih C u f t t K CUiiti 10
irilth
#P
i-iih
t<i
■J-O
jpngA
ip_niJ
f.fjiJ M d n * » V .
m la
tpumtul !hn <«iirf1n
•ffvtrtfpnimhi
IBe-eSrfhr ##*Г
IN TE RN AL O W NE R S H I P + METRICS
■IL-nttoA
T.-: -Lirrrt-з^
*Сд
д
аишвддо1<
ik!|
«
1П№
Ц
Л&
4№
1
NN/g
251. Personas
Personas are fictional
representations and generalizations
of a cluster of your target users who
exhibit similar attitudes, goals, and
behaviors in relation to your product.
https://xtensio.com/user-persona/
252. User Persona Type
Goals
A«to «>& »*«*««
■ О м co*-< *x*lot> eW «
Motivation
A^ r MOO
v**Ljcbrm
W
U
trto
dtodvetc
U xao o n C<y Stme
ChereOtr A
rcttotype
Personality
■
E4to*<t
Т
*ягм
п
о
■
Mag
Kton
■
AUW
■
P
to
te
A
to
Q
Frustrations
» T * » < r w ^ n m u w w M S W t o K M
Bio
T*» too «hgud be • lAprt (uragiac* to 0**&Ъ е to* %лт
puw
yiMuMKMi«emolvwrMtV|fiMdagt«ie«
or**r«uM
<«to»w«yN tomcofvotmrtvme
/ем
•tod acQw endadd tw tow * dvtato to*
•to* ЬММ MA em eau% of «to u**rs p e n t* * e tc of
MuitofmMrrdidcuMwdycu
Stor^uoonpi
Brands & Influencers
Preferred Channels
O na* * Sotto Мим
253. Further reading
- Which UX Deliverables Are Most Commonly Created and Shared?
- A Complete List Of UX Deliverables
- How To Succeed In Wireframe Design
- Sitemaps - The Beginner’s Guide
- Journey Mapping 101
Why Personas Fail
