Topic 5:
Responsive and
Mobile-First
Design
Objectives
In this topic we will cover:
• Adaptive and responsive design
techniques
• Mobile-first design approach
Adaptive and responsive design techniques
What is responsive design?
What is responsive design?
More than just a buzzword
The web design approach for building sites that adapt and are
optimized for a range of screen resolutions, sizes, and formats.
Common
breakpoints
For most screen sizes
• 320 px – Mobile portrait
• 480 px – Mobile landscape
• 600 px – Small tablet
• 768 px – Tablet portrait
• 1024 px – Tablet landscape/Netbook
• 1280 px & greater –
Desktop
Responsive
Vs
A d a p t i v e
We usually
meet in the
middle
Adaptive (fixed-width grid)
Navigation
Categories
Search
Ads =
gone
Categories
Categories
Images fit
Mobile-first design
approach
Why mobile?
We have about 6B adults and estimated 92%
carry smartphones
Mobile is go-to for problem solving
tasks
Key Mobile Considerations
Problem #1
High cognitive load
Cognitive load, or amount of
mental processing power
needed to use your app. It
affects how easily users find
content and complete tasks.
#a. Visual clutter in UI
Too many objects
competing for
user attention
Solution: Cut out the clutter
● Keep content to a minimum
(present the user with only
what they need to know).
Users have
a clear path ● Keep interface elements
to a minimum. A simple
design will keep the user
at
ease with the product.
Techniques
● Complexity
reduction (include
only top- priority
features)
● Chunking (break
tasks into bite-sized
chunks)
● Progressive
#b. Lack of strong visual signifiers
Visual signifiers indicate the possibility of action
or importance of certain UI object
Airbnb uses
• Use visual
visual weight
weight to to convey
importance
convey
importance
• Provide
feedback on
Buttons
respond on
user
interaction with
appropriate
visual feedback
#c. Using unconventional patterns
Use familiar
DO NOT navigation
components
reinvent
the
#d. Lack of help & support
Can you tell
what to do
to fix this
problem?
Solution: Design for failure
#e-1 Using jargon terms in UI
Always use
Commonly
used labels
in ‘Home
Search’
category
Jargon in
‘Home
Search’
category
#e-2 Using technical terms
in UI
#f. Introducing inconsistency in
UI design
Three types of consistency:
● Visual consistency
● Functional consistency
● External consistency (app is consistent with other
products)
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
#g. High learning curve during
first-time experience
The average app loses 77% of its daily
active users within the first 3 days
post-install
Solution:
Great first
impression
Techniques
● Contextual
onboarding
● Progressive disclosure
Contextual
onboarding
in Duolingo
app
#g. (continue) Bombarding users
with permission requests
How to ask for permissions
Solution: Ask for
permission in the
context of action
Problem #2
The need of typing
Typing on a small mobile
screen isn’t the most
comfortable experience. In
fact, it’s often error-prone.
Solution:
Minimize need
of typing
Techniques
• Minimize total number of fields
• Use input masks
• Matching keyboard to the field
• Auto-complete fields
• Inline validation
Minimize Provide
number input
of fields masks
Use auto-
Match the complete
keyboard to
the
required
text input
Problem #3
Uncomfortable interactions
#a. Small touch
targets
Design for
fingers,
not
cursors
10 x 10 mm
is good
touch target
Spacing
between
element
s
#b. Not considering thumb zone
Avoid the edges
#b. Not considering thumb zone
Consider
49% of thumb
people hold zone
their
smartphones
with one
hand
#c. Accessibility
issues
4.5% of the global population
experience
Color blindness (that is 1 in 12 men
and 1 in 200 women)
Small typeface
Text should not be smaller
than 11 points, even when the
user chooses the extra-small
text size.
Be very careful with
animations and motion. Try
to make animations
optional.
Problem #4 User Journey
Blockers
#a. Too many steps
required to achieve a goal
Solution:
Minimize
the number
of taps
Biometric authentication
#b. Blocking user flow
Too many
interruptio
ns happen
along the
way
People use mobile apps to get
something done, quickly. They
don’t want to be interrupted
#c. Unpredictable ‘Back’
button
Back button should
one-step back button
#d. App does not keep user
progress
#e. Unable to switch device
to continue journey
Solution:
Make it
37% of users possible to
do research save state and
on mobile continue a
but switch to journey on
desktop to another
●
device
Save for later
complete a ●Share the item (email)
purchase
#f. No offline experience
Pinterest does
not cache my
existing
boards.
#f. (cont..)No offline
experience
• Make sure your product
works when it isn’t
connected to the Internet at
all
• Caching data
Feature Creep
More
features ≠
More value
#
1
#
R
RPT Prototype
Research P T Test
Model
2
Prototype and validate
your design decisions
Set a feature list and
# stuck to it. Don't fall
victim to feature creep
3
Storyboarding can help during
feature debates
Illustration by Chelsea Hostetter
Mobile Trends
# Augmented Reality (AR)
1
Using AR
Lenses in
Snapchat
@101babich UX Yerevan 2018153
# Artificial Intelligence (AI)
2
Face tracking
and
expression
analysis in
mobile apps
Image by FacioMetrics (Facebook)
# Gestures
3
Even the most
basic
interactions
with a device
are gesture-
based now
# Rounded corners
4
# JOMO: The Joy of Missing Out
5
“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
