Designing the Mobile User Experience

Designing the Mobile
User Experience
Nick Babich, UX Yerevan 2018

2
@101babich UX Yerevan 2018
DesignbyAramaztKalayjian

Here is what we will cover
Why mobile is important
Key design considerations
The danger of feature creep
Mobile trends
3

Why mobile?
4

June 29, 2007
9

What happened?
10

Three
Key
Changes
UX Yerevan 2018@101babich
14

#1
15

Smartphones
17

Smartphones
18

Mobile phones
19

#2
20

Lets play a game
21

5.1 billion
22

5.1 billion mobile
phone users
worldwide
23

By 2020 we will have 6B adults and
92% will cary smartphones
24

68%
25

68% of time is spent
on mobile
26

2 hours, 51 minutes
27

86 hours in month
28

Universal tool
30

Mobile is go-to for
problem solving tasks
31

People go to mobile first
when they need to solve
a problem
32

#3
33

The concept of
mobile app was born
34

Mobile apps are
modern products
35

2.8M 2.2M UX Yerevan 2018@101babich
37

Key
Mobile
Considerations
38

Problem #1
High cognitive load
39

Cognitive load, or amount of
mental processing power needed
to use your app. It affects how
easily users find content and
complete tasks.
40

#1. Visual clutter in UI
41

Too many objects
competing for user
attention
42

Solution:
Cut out the clutter
43

Users have a
clear path
44

! Keep content to a minimum (present the
user with only what they need to know).
! Keep interface elements to a minimum.
A simple design will keep the user at
ease with the product.
45

Techniques
●Complexity reduction (include only top-
priority features)
●Chunking (break tasks into bite-sized
chunks)
●Progressive disclosure
46

Design by Marvel
Chunking
(bite-sized
chunks)
47

Design by Ramotion
Progressive
disclosure
48

#2. Lack of strong
visual signifiers
49

Visual signifiers indicate the
possibility of action or importance
of certain UI object
50

•Use visual weight to convey
importance
•Provide feedback on interaction
51

Airbnb uses
visual weight to
convey
importance
52

Buttons respond
on user
interaction with
appropriate
visual feedback
53
Image by Vadim Gromov

#3. Using
unconventional patterns
54

DO NOT
reinvent the
wheel!
55

Solution:
Create familiar experience
56

Design by Ramotion
57
Use familiar
navigation
components

#3. Lack of help &
support
58

Can you tell
what to do to
fix this
problem?
59

Solution:
Design for failure
60

Any time you anticipate
individual needs, the
interaction will be valuable to
both company and consumer
61

#4. Using jargon and
technical terms in UI
63

Jargon in
‘Home
Search’
category
64

Commonly
used labels in
‘Home
Search’
category
65

#5. Introducing
inconsistency in UI
design
67

●Visual consistency
●Functional consistency
●External consistency (app is consistent
with other products)
Three types of consistency
68

What to do to make the app consistent
● Respect platform guidelines
● Do not mimic UI elements from other
platforms
● Keep the mobile app consistent with the
website
69

#6. High learning curve
during first-time
experience
70

The average app loses 77% of its
daily active users within the first
3 days post-install
Research by Andrew Chen
71

Solution:
Great first impression
72

Image by Joshua Porter
73

Techniques
● Contextual onboarding
● Progressive disclosure
74

@101babich
Contextual
onboarding in
Duolingo app
UX Yerevan 2018
75

#7. Bombarding users
with permission requests
76

Solution:
Ask for permission in the
context of action
78

How to ask for
permissions
Image by Google
79

Cluster create
context before
asking for
permissions
80

Problem #2
The need of typing
81

Typing on a small mobile screen
isn’t the most comfortable
experience. In fact, it’s often
error-prone.
82

Solution:
Minimize need of typing
83

Techniques
●Minimize total number of fields
●Use input masks
●Matching keyboard to the field
●Auto-complete fields
●Inline validation
84

Minimize
number of
fields
Image by Luke W
85

Provide
input masks
86

Match the
keyboard to
the required
text input
87

Use auto-
complete
88

Auto-
complete
paired with AI
89

Use inline
validation
90

Problem #3
Uncomfortable interactions
91

#1. Small touch targets
92

Design for
fingers, not
cursors
93

10 x 10 mm
is good touch
target
94

Spacing
between
elements
95

#2. Not considering
thumb zone
96

49% of people
hold their
smartphones
with one hand
98

Consider
thumb zone
99

#3. Accessibility issues
100

4.5% of the global
population experience
color-blindness (that is 1 in 12
men and 1 in 200 women)
101

102

103

Small typeface
104

Text should not be smaller than
11 points, even when the user
chooses the extra-small text size.
107

Be very careful with
animations and motion. Try to
make animations optional.
108

Problem #4
User Journey Blockers
109

#1. Too many steps
required to achieve a goal
110

Solution:
Minimize the number of taps
111

Biometric
authentication
Image by Chase Bank
112

#2. Blocking user flow
113

Design by Vitaly Dulenko
Too many
interruptions
happen
along the
way
114

People use mobile apps to get
something done, quickly. They
don’t want to be interrupted.
115

#3. Unpredictable ‘Back’ button
116

Back button should one-
step back button
117

#4. App does not keep user progress
118

Mobile experience is interruptive
119

#5. Unable to switch
device to continue journey
121

37% of users do research on
mobile but switch to desktop
to complete a purchase
122

Solution:
Make it possible to save state and
continue a journey on other device
123

Techniques
●Save for later
●Share the item (email)
124

#6. No offline experience
125

Pinterest does
not cache my
existing boards.
126

●Make sure your product works
when it isn’t connected to the
Internet at all
●Caching data
127

Feature Creep
128

129

Hippo Effect
130

131

132

More features ≠ More value
133

#1
134

KISS
135

136

Illustration by Anton Nikolov
138

#2
139

RPT Model
140

R Research
P Prototype
T Test
141

Prototype and validate
your design decisions
142

143

#3
144

Set a feature list and stuck
to it. Don't fall victim to
feature creep
145

Illustration by Intercom
146

Storyboarding can help
during feature debates
147

Illustration by Chelsea Hostetter
148

Mobile Trends
149

@101babich
#1
UX Yerevan 2018
150

Augmented Reality (AR)
UX Yerevan 2018
151

@101babich
Why AR and not VR?
UX Yerevan 2018
152

153UX Yerevan 2018@101babich
Using AR
Lenses in
Snapchat

154

Google Lens
feature called
style match
155

156

@101babich
#2
UX Yerevan 2018
157

Artificial Intelligence (AI)
158

@101babich
Smarter personalization
UX Yerevan 2018
159

160
Google News:
keep up with
news you
care about

@101babich
Emotional experience
UX Yerevan 2018
161

162
Face tracking
and expression
analysis in
mobile apps
Image by FacioMetrics (Facebook)

163
Pplkpr provides
recommendations
based on our
emotions.

165
Image labeling
Barcode scanning
Text recognition (OCR)
Landmark detection
Face detection

@101babich
#3
UX Yerevan 2018
166

Gestures
UX Yerevan 2018
167

168
Even the most
basic interactions
with a device
are gesture-based
now

@101babich UX Yerevan 2018@101babich UX Yerevan 2018
169

@101babich
#4
UX Yerevan 2018
170

Rounded corners
UX Yerevan 2018
171

172

@101babich
#5
UX Yerevan 2018
173

JOMO
174

175

@101babich
The Joy of Missing Out
UX Yerevan 2018
176

177

“Good design is innovative. Good design must be
useful. Good design is aesthetic design. Good design
makes a product understandable. Good design is
honest. Good design is unobtrusive. Good design is
long-lasting. Good design is consistent in every
detail. Good design is environmentally friendly. And
last but not least, good design is as little design as
possible.”
― Dieter Rams
180

181
Thank you!
@101babich
UX Yerevan 2018

Designing the Mobile User Experience

Designing the Mobile User Experience

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Designing the Mobile User Experience

Similar to Designing the Mobile User Experience(20)

Recently uploaded

Recently uploaded(20)

Designing the Mobile User Experience