SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Responsive web sites receive increasing numbers of visitors from phones. The Canada.ca design team has been partnering with departments to improve citizen success on top online tasks, some of which get mostly-mobile visits. This talk highlights a set of ideas and design principles from mobile app design that we applied in two Canada.ca test-redesign-test projects with phone users.
Responsive web sites receive increasing numbers of visitors from phones. The Canada.ca design team has been partnering with departments to improve citizen success on top online tasks, some of which get mostly-mobile visits. This talk highlights a set of ideas and design principles from mobile app design that we applied in two Canada.ca test-redesign-test projects with phone users.
1.
@lisavation #GCDigital
Designing app-like
experiences on websites
Lisa Fast
2.
First job: UX design,
prototyping & usability
testing of phones
- All about INTERACTION
with only 20 characters on
display plus voice prompts
3.
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
5.
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
6.
•Perception
What we see
• Selective attention
What we focus on
7.
Oppenheimer, Meyvis and Davidenko via https://www.linkedin.com/pulse/evidence-really-dont-read-instructions-lisa-fast
24.
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
25.
Apps have a clear value
proposition – they
design to deliver
26.
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…
27.
Double burger wall of shame – did ANY of these designers look at it/test it in mobile?
28.
“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
34.
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
36.
Apps don’t have menus
Bars yes, navigation menus no
37.
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
38.
Remove
menu &
group links at
top – 20%
findability
increase
39.
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