Designing app-like responsive web experiences

Lisa Fast
Lisa FastPartner: UX Research & Strategy
@lisavation #GCDigital
Designing app-like
experiences on websites
Lisa Fast
First job: UX design,
prototyping & usability
testing of phones
- All about INTERACTION
with only 20 characters on
display plus voice prompts
Latest work: UX research, prototyping &
design for Canada.ca …. on phones
Some pages are mostly mobile
https://www.linkedin.com/pulse/mobile-crossover-here-everywhere-lisa-fast
I use Twitter app –
a lot
@lisavation
Instructions: We are interested in whether you actually take
the time to read the directions. So, in order to demonstrate
that you have read the instructions, please ignore the
question below. Instead, simply put your hand on your
opposite shoulder. Thank you.
Do you use the Facebook or Twitter app?
Yes – put your hand up
No
•Perception
What we see
• Selective attention
What we focus on
Oppenheimer, Meyvis and Davidenko via https://www.linkedin.com/pulse/evidence-really-dont-read-instructions-lisa-fast
Apps don’t show
Instructions
Designing app-like responsive web experiences
Designing app-like responsive web experiences
Apps show answers not
instructions
Only 2 of 9 participants
succeeded at exception tasks
All participants succeeded
Really need to instruct?
Try an interactive tour
Designing app-like responsive web experiences
Designing app-like responsive web experiences
Apps are scrollable
without needing
headings
Designing app-like responsive web experiences
Typical
government
web page
Information
Video removed
Show all
countries –
not some
Canada.ca travel advisories
– we knew this worked
Apps show answers
not links
Move
answer out
of link into
view
Zika experts added Low risk
once they saw the design
Apps are interactive
Filters
Someone typed in a
country name
Someone else typed in
”high”
App-like design
success rose
from 69% to
100%
https://gc-proto.github.io/health-
1/validation/services/diseases/zika-virus.html
Apps make important
things FIT
Designing app-like responsive web experiences
Someone typed in a
country name
Designing app-like responsive web experiences
Designing app-like responsive web experiences
Success rates across 7
weather tasks rose from
33% to 72% with more
app-like design
16 phone participants in October on baseline & 16 in
November 2017 on redesigned app-like prototype
Designing app-like responsive web experiences
Apps have a clear value
proposition – they
design to deliver
Designing app-like responsive web experiences
P6 Baseline: “Oh no -
starting from Scenario H
(the home page) is the
worst!” (like others, didn’t
ever get that she was using
home page of Gov Can site)
Value
proposition not
clear because
top tasks in
Hamburger.
Searchburger
helps but still…
Double burger wall of shame – did ANY of these designers look at it/test it in mobile?
“Facebook found that not only
did engagement go up when
they moved from a
“hamburger” menu to a
bottom tab bar in their iOS
app, but several other
important metrics went up as
well.”
https://www.lukew.com/ff/entry.asp?1945
https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8
Design 1: Quick fix
Make it visible:
Menu as buttons
and
Title for page
Design 2: Swipe
Not as visible:
Swipe for menu
and
Search visible
Title for page
Findability
success rose
from 66% to
90%
Problem with
swipe
Only 3
of 16
swiped
Can’t tell there are more
- No affordance of swipe
despite using Chrome dev
tools to set up so at least
one would be split at the
edge
- iPhone 7 view
affordance
affordance
No affordance
Apps don’t have menus
Bars yes, navigation menus no
Left menu site just
doesn’t work like an app
Menu is on left in
desktop view
People usually missed menu at bottom of page
Remove
menu &
group links at
top – 20%
findability
increase
Make your site like an app
• No instructions – make it simple or use a tour
• Answers not information – make it personal
• Scrolling is ok as long as context is clear
• Show answers – not links
• Make it interactive – fit their needs
• Think value proposition - make important things fit
• Make top tasks obvious – out of the hamburger
• Don’t use left menus for navigation
Questions?
@lisavation
lisa@vation.ca
lisa.fast@tbs-sct.gc.ca
1 of 50

Recommended

AWS re:Invent 2016: Leading Enterprise Innovation at Startup Speed (ENT207) by
AWS re:Invent 2016: Leading Enterprise Innovation at Startup Speed (ENT207)AWS re:Invent 2016: Leading Enterprise Innovation at Startup Speed (ENT207)
AWS re:Invent 2016: Leading Enterprise Innovation at Startup Speed (ENT207)Amazon Web Services
970 views57 slides
7 deadly sins for your app by
7 deadly sins for your app7 deadly sins for your app
7 deadly sins for your appDavide Di Cillo
1K views9 slides
Collaborating Effectively with Developers by
Collaborating Effectively with DevelopersCollaborating Effectively with Developers
Collaborating Effectively with DevelopersJayde Ly
777 views19 slides
Critical analysis 4 by
Critical analysis 4Critical analysis 4
Critical analysis 4sijjal
126 views8 slides
Designing mobile apps by
Designing mobile appsDesigning mobile apps
Designing mobile appsAnna Cook (she/her)
72 views23 slides
Checklist for Iphone App Design by
Checklist for Iphone App Design Checklist for Iphone App Design
Checklist for Iphone App Design MobilePhoneApps4U
980 views37 slides

More Related Content

What's hot

Media Evaluation Question 4 by
Media Evaluation Question 4Media Evaluation Question 4
Media Evaluation Question 4Serena Maya
188 views10 slides
Gabe's My Creative Life Project #2 by
Gabe's My Creative Life Project #2Gabe's My Creative Life Project #2
Gabe's My Creative Life Project #2Gabe Montoya
62 views33 slides
Leading Enterprise Innovation at Startup Speed by
Leading Enterprise Innovation at Startup SpeedLeading Enterprise Innovation at Startup Speed
Leading Enterprise Innovation at Startup SpeedAmazon Web Services
223 views55 slides
Dead & Emerging Tech Panel by
Dead & Emerging Tech PanelDead & Emerging Tech Panel
Dead & Emerging Tech Panelamanda etches
527 views16 slides
Designing Augmented Reality Experiences for Mobile by
Designing Augmented Reality Experiences for MobileDesigning Augmented Reality Experiences for Mobile
Designing Augmented Reality Experiences for MobileTryMyUI
1.4K views69 slides
Paulius Papreckis - Mobile UX: Unified vs Native by
Paulius Papreckis - Mobile UX: Unified vs NativePaulius Papreckis - Mobile UX: Unified vs Native
Paulius Papreckis - Mobile UX: Unified vs NativePaulius Papreckis
144 views77 slides

What's hot(20)

Media Evaluation Question 4 by Serena Maya
Media Evaluation Question 4Media Evaluation Question 4
Media Evaluation Question 4
Serena Maya188 views
Gabe's My Creative Life Project #2 by Gabe Montoya
Gabe's My Creative Life Project #2Gabe's My Creative Life Project #2
Gabe's My Creative Life Project #2
Gabe Montoya62 views
Dead & Emerging Tech Panel by amanda etches
Dead & Emerging Tech PanelDead & Emerging Tech Panel
Dead & Emerging Tech Panel
amanda etches527 views
Designing Augmented Reality Experiences for Mobile by TryMyUI
Designing Augmented Reality Experiences for MobileDesigning Augmented Reality Experiences for Mobile
Designing Augmented Reality Experiences for Mobile
TryMyUI1.4K views
Paulius Papreckis - Mobile UX: Unified vs Native by Paulius Papreckis
Paulius Papreckis - Mobile UX: Unified vs NativePaulius Papreckis - Mobile UX: Unified vs Native
Paulius Papreckis - Mobile UX: Unified vs Native
Paulius Papreckis144 views
While UX Becomes Hot, Stay Cool by Yeli Tong
While UX Becomes Hot, Stay CoolWhile UX Becomes Hot, Stay Cool
While UX Becomes Hot, Stay Cool
Yeli Tong310 views
From mobile browser to mobile app by Ryan Stewart
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
Ryan Stewart1.9K views
Strategic Approach to Theme Design by Cody Landefeld
Strategic Approach to Theme DesignStrategic Approach to Theme Design
Strategic Approach to Theme Design
Cody Landefeld1.7K views
While UX Becomes Hot, Stay Cool by Yeli Tong
While UX Becomes Hot, Stay CoolWhile UX Becomes Hot, Stay Cool
While UX Becomes Hot, Stay Cool
Yeli Tong1.1K views
Webapps: introduction and publishing on Firefox OS by Jorge Ferreiro
Webapps: introduction and publishing on Firefox OSWebapps: introduction and publishing on Firefox OS
Webapps: introduction and publishing on Firefox OS
Jorge Ferreiro952 views
Design for Life of Human Being by Afif Bimantara
Design for Life of Human BeingDesign for Life of Human Being
Design for Life of Human Being
Afif Bimantara409 views
Electron Toronto by APIGarage
Electron TorontoElectron Toronto
Electron Toronto
APIGarage287 views
Debugging and deploying with phone gap by Ryan Stewart
Debugging and deploying with phone gapDebugging and deploying with phone gap
Debugging and deploying with phone gap
Ryan Stewart4.6K views
Designing Mobile Apps with HTML5 & CSS3 by Johannes Ippen
Designing Mobile Apps with HTML5 & CSS3Designing Mobile Apps with HTML5 & CSS3
Designing Mobile Apps with HTML5 & CSS3
Johannes Ippen16.3K views
Social Media Project: Tumblr by SabrinaAlpino
Social Media Project: TumblrSocial Media Project: Tumblr
Social Media Project: Tumblr
SabrinaAlpino83 views
The Fastest Pivot You'll Ever Make by Dane Petersen
The Fastest Pivot You'll Ever MakeThe Fastest Pivot You'll Ever Make
The Fastest Pivot You'll Ever Make
Dane Petersen603 views
Getting The Vibe from Facebook Application by Sartika Kurniali
Getting The Vibe from Facebook ApplicationGetting The Vibe from Facebook Application
Getting The Vibe from Facebook Application
Sartika Kurniali491 views
Practical APP-lications: Mobile App Planning and Analytics by John Kreicbergs
Practical APP-lications: Mobile App Planning and AnalyticsPractical APP-lications: Mobile App Planning and Analytics
Practical APP-lications: Mobile App Planning and Analytics
John Kreicbergs838 views
Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi... by Mozza
Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi...Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi...
Organic Acquisition: How To Acquire A Million Users With Zero Marketing (mobi...
Mozza3.6K views

Similar to Designing app-like responsive web experiences

LX Mobile Web Teardown by
LX Mobile Web TeardownLX Mobile Web Teardown
LX Mobile Web TeardownRaviteja Govindaraju
117 views84 slides
Designing Websites With a Mobile First Approach by
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDan Moriarty
1.6K views71 slides
Answers not Information by
Answers not InformationAnswers not Information
Answers not InformationLisa Fast
209 views43 slides
Android Material Design Quick Presentation by
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick PresentationDeimantas Brandišauskas
5.5K views59 slides
10 Pitfalls to Avoid in Creating RIAs by
10 Pitfalls to Avoid in Creating RIAs10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAsEffectiveUI
476 views53 slides
10 Pitfalls to Avoid in Creating RIAs by
10 Pitfalls to Avoid in Creating RIAs10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAsEffective
367 views53 slides

Similar to Designing app-like responsive web experiences(20)

Designing Websites With a Mobile First Approach by Dan Moriarty
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First Approach
Dan Moriarty1.6K views
Answers not Information by Lisa Fast
Answers not InformationAnswers not Information
Answers not Information
Lisa Fast209 views
10 Pitfalls to Avoid in Creating RIAs by EffectiveUI
10 Pitfalls to Avoid in Creating RIAs10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAs
EffectiveUI476 views
10 Pitfalls to Avoid in Creating RIAs by Effective
10 Pitfalls to Avoid in Creating RIAs10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAs
Effective367 views
IQb project (Rubiks cube size projector) by mc04451431
IQb project (Rubiks cube size projector)IQb project (Rubiks cube size projector)
IQb project (Rubiks cube size projector)
mc04451431296 views
Business Values of PWAs by UXDXConf
Business Values of PWAsBusiness Values of PWAs
Business Values of PWAs
UXDXConf110 views
Six tips for better mobile ux design by Denis Riftin
Six tips for better mobile ux designSix tips for better mobile ux design
Six tips for better mobile ux design
Denis Riftin121 views
Uxpin mobile UI Design Patterns 2014 by Jessie Doan
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014
Jessie Doan 3.6K views
How to Create a Great Mobile App Experience by Chris Beaman
How to Create a Great Mobile App ExperienceHow to Create a Great Mobile App Experience
How to Create a Great Mobile App Experience
Chris Beaman424 views
A Guide for Anyone Who Wants to Turn App Development Idea into Reality by IndianAppDevelopers
A Guide for Anyone Who Wants to Turn App Development Idea into RealityA Guide for Anyone Who Wants to Turn App Development Idea into Reality
A Guide for Anyone Who Wants to Turn App Development Idea into Reality
A smart guide to app development by Emma Mitchell
A smart guide to app developmentA smart guide to app development
A smart guide to app development
Emma Mitchell320 views

Recently uploaded

TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc
176 views29 slides
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ... by
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...ShapeBlue
171 views28 slides
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueShapeBlue
224 views7 slides
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...ShapeBlue
178 views15 slides
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...ShapeBlue
199 views20 slides
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And... by
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...ShapeBlue
108 views12 slides

Recently uploaded(20)

TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc176 views
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ... by ShapeBlue
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
ShapeBlue171 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue224 views
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by ShapeBlue
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
ShapeBlue178 views
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by ShapeBlue
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
ShapeBlue199 views
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And... by ShapeBlue
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
ShapeBlue108 views
"Running students' code in isolation. The hard way", Yurii Holiuk by Fwdays
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
Fwdays36 views
The Power of Generative AI in Accelerating No Code Adoption.pdf by Saeed Al Dhaheri
The Power of Generative AI in Accelerating No Code Adoption.pdfThe Power of Generative AI in Accelerating No Code Adoption.pdf
The Power of Generative AI in Accelerating No Code Adoption.pdf
Saeed Al Dhaheri39 views
Digital Personal Data Protection (DPDP) Practical Approach For CISOs by Priyanka Aash
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOs
Priyanka Aash162 views
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue265 views
LLMs in Production: Tooling, Process, and Team Structure by Aggregage
LLMs in Production: Tooling, Process, and Team StructureLLMs in Production: Tooling, Process, and Team Structure
LLMs in Production: Tooling, Process, and Team Structure
Aggregage57 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue137 views
"Surviving highload with Node.js", Andrii Shumada by Fwdays
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
Fwdays58 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue225 views
Optimizing Communication to Optimize Human Behavior - LCBM by Yaman Kumar
Optimizing Communication to Optimize Human Behavior - LCBMOptimizing Communication to Optimize Human Behavior - LCBM
Optimizing Communication to Optimize Human Behavior - LCBM
Yaman Kumar38 views
Transcript: Redefining the book supply chain: A glimpse into the future - Tec... by BookNet Canada
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
BookNet Canada41 views
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by ShapeBlue
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
ShapeBlue162 views

Designing app-like responsive web experiences