Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing app-like responsive web experiences

89 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Designing app-like responsive web experiences

  1. 1. @lisavation #GCDigital Designing app-like experiences on websites Lisa Fast
  2. 2. First job: UX design, prototyping & usability testing of phones - All about INTERACTION with only 20 characters on display plus voice prompts
  3. 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. 4. I use Twitter app – a lot @lisavation
  5. 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. 6. •Perception What we see • Selective attention What we focus on
  7. 7. Oppenheimer, Meyvis and Davidenko via https://www.linkedin.com/pulse/evidence-really-dont-read-instructions-lisa-fast
  8. 8. Apps don’t show Instructions
  9. 9. Apps show answers not instructions
  10. 10. Only 2 of 9 participants succeeded at exception tasks
  11. 11. All participants succeeded
  12. 12. Really need to instruct? Try an interactive tour
  13. 13. Apps are scrollable without needing headings
  14. 14. Typical government web page Information
  15. 15. Video removed
  16. 16. Show all countries – not some Canada.ca travel advisories – we knew this worked
  17. 17. Apps show answers not links
  18. 18. Move answer out of link into view Zika experts added Low risk once they saw the design
  19. 19. Apps are interactive
  20. 20. Filters Someone typed in a country name Someone else typed in ”high”
  21. 21. App-like design success rose from 69% to 100% https://gc-proto.github.io/health- 1/validation/services/diseases/zika-virus.html
  22. 22. Apps make important things FIT
  23. 23. Someone typed in a country name
  24. 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. 25. Apps have a clear value proposition – they design to deliver
  26. 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. 27. Double burger wall of shame – did ANY of these designers look at it/test it in mobile?
  28. 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. 29. https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8
  30. 30. Design 1: Quick fix Make it visible: Menu as buttons and Title for page
  31. 31. Design 2: Swipe Not as visible: Swipe for menu and Search visible Title for page
  32. 32. Findability success rose from 66% to 90%
  33. 33. Problem with swipe Only 3 of 16 swiped
  34. 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. 35. affordance affordance No affordance
  36. 36. Apps don’t have menus Bars yes, navigation menus no
  37. 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. 38. Remove menu & group links at top – 20% findability increase
  39. 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. 40. Questions? @lisavation lisa@vation.ca lisa.fast@tbs-sct.gc.ca

×