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

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

11. Apps show answers not
instructions

12. Only 2 of 9 participants
succeeded at exception tasks

13. All participants succeeded

14. Really need to instruct?
Try an interactive tour

17. Apps are scrollable
without needing
headings

19. Typical
government
web page
Information

20. Video removed

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

22. Apps show answers
not links

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

24. Apps are interactive

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

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

27. Apps make important
things FIT

29. Someone typed in a
country name

32. 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

34. Apps have a clear value
proposition – they
design to deliver

36. 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…

37. Double burger wall of shame – did ANY of these designers look at it/test it in mobile?

38. “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

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

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

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

42. Findability
success rose
from 66% to
90%

43. Problem with
swipe
Only 3
of 16
swiped

44. 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

45. affordance
affordance
No affordance

46. Apps don’t have menus
Bars yes, navigation menus no

47. 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

48. Remove
menu &
group links at
top – 20%
findability
increase

49. 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

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