Scribd
Upload
21 views71 pages

ITUX5.210 Topic 5 - Responsive Design

This document discusses responsive and mobile-first design techniques, emphasizing the importance of creating websites that adapt to various screen sizes. It outlines common challenges faced in mobile design, such as cognitive load, typing difficulties, and user journey blockers, along with proposed solutions. Additionally, it highlights emerging mobile trends like augmented reality and artificial intelligence that can enhance user experience.

Uploaded by

jl273899295
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views71 pages

ITUX5.210 Topic 5 - Responsive Design

This document discusses responsive and mobile-first design techniques, emphasizing the importance of creating websites that adapt to various screen sizes. It outlines common challenges faced in mobile design, such as cognitive load, typing difficulties, and user journey blockers, along with proposed solutions. Additionally, it highlights emerging mobile trends like augmented reality and artificial intelligence that can enhance user experience.

Uploaded by

jl273899295
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 71

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

You might also like