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

4.
I use Twitter app –
a lot
@lisavation

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

8.
Apps don’t show
Instructions

9.
Apps show answers not
instructions

10.
Only 2 of 9 participants
succeeded at exception tasks

11.
All participants succeeded

12.
Really need to instruct?
Try an interactive tour

13.
Apps are scrollable
without needing
headings

14.
Typical
government
web page
Information

15.
Video removed

16.
Show all
countries –
not some
Canada.ca travel advisories
– we knew this worked

17.
Apps show answers
not links

18.
Move
answer out
of link into
view
Zika experts added Low risk
once they saw the design

19.
Apps are interactive

20.
Filters
Someone typed in a
country name
Someone else typed in
”high”

21.
App-like design
success rose
from 69% to
100%
https://gc-proto.github.io/health-
1/validation/services/diseases/zika-virus.html

22.
Apps make important
things FIT

23.
Someone typed in a
country name

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

29.
https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8

30.
Design 1: Quick fix
Make it visible:
Menu as buttons
and
Title for page

31.
Design 2: Swipe
Not as visible:
Swipe for menu
and
Search visible
Title for page

32.
Findability
success rose
from 66% to
90%

33.
Problem with
swipe
Only 3
of 16
swiped

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

35.
affordance
affordance
No affordance

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

40.
Questions?
@lisavation
lisa@vation.ca
lisa.fast@tbs-sct.gc.ca