Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cheating The UX When There Is Nothing More To Optimize – Voxxed Days Thessaloniki

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
November 19, 2018

Cheating The UX When There Is Nothing More To Optimize – Voxxed Days Thessaloniki

You have optimized every line of code of your site / mobile application, used all the techniques at your disposal to have the fastest loading time possible. I bet you also don’t Instagram or Pinterest’s budget, right? Let’s take a look at a few projects I worked on to learn how to use different design techniques and UX to work performance also at the level of user perception

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

November 19, 2018
Tweet

Transcript

  1. Cheating The UX 
 When There Is Nothing More To

    Optimize Voxxeddays Thessaloniki 2018 — Stéphanie Walter
  2. UX & UI Designer Mobile expert. Pixel & CSS Lover

    for Arhs stephaniewalter.design @WalterStephanie
  3. None
  4. Psychological time (perception of time in my brain) Objective time

    (the clock)
  5. Human Perception of Speed

  6. External factors might affect speed perception…

  7. The tip of the iceberg: how fast can users interact

    with the content?
  8. User State of Mind User profile Younger audience is more

    demanding Speed is perceived as faster by relaxed users Google and Awwwards study
  9. User situation and the ROI for waiting

  10. Speed perception impacts user satisfaction.

  11. UI visual time response

  12. 0 - 300ms Instant UI visual response

  13. Instant visual feedback on user micro-interactions

  14. Providing the different states is the designer’s job

  15. 300ms - 1 second Delay can be noticed but it’s

    tolerable, no special feedback is necessary.
  16. 2 - 5 seconds Dynamic indeterminate loaders to show that

    the system is still working
  17. “Everything is fine, the system is currently working”

  18. It’s time to get creative

  19. Show some brand personality ๏ training + le chat

  20. More than 5 seconds Determinate progress indicators to keep user

    focused
  21. ๏ Explain what will take time and why

  22. ๏ Explain what will take time and why ๏ Show

    advanced dynamic progress indicator with current progression (% or steps)
  23. ๏ Explain what will take time and why ๏ Show

    advanced dynamic progress indicator with current progression (% or steps) ๏ If possible, don’t block users
  24. (Nielsen, 1994; Bouch, 2000) 10 seconds is about the limit

    for keeping the user's attention focused
  25. The Seagull Loader

  26. “We optimized every piece of code possible but users with

    big queries are still complaining”
  27. A seagull replaces the boring spinner
 — widely approved by

    users — ๏ While users wait for the search to finish, the interface displays useful information
  28. While users wait for the search to finish, the interface

    displays useful information
  29. None
  30. It looks fast… Clever transitions and animations

  31. Animated page transitions

  32. Animate arrivals and departures via Val Head

  33. It’s more satisfying to see the bar speed up towards

    the end. (Harrison, Amento, Kuznetsov et Bell - 2007 ) demo by Geoffrey C.
  34. demo by Geoffrey C. Backwards decelerating ribbing significantly increased perceived

    performance (Harrison, Yeo et Hudson - 2010 )
  35. On Demand Surveillance Video Loading

  36. Discussing with the development team to understand technical requirements. 1.

  37. How this works Camera takes the video and sends it

    to the server Server reencodes the video and sends it to the app The app displays the video and users can play it
  38. Deconstructing the waiting timeline millisecond by millisecond. 2.

  39. Interface Transition 300ms 2s 3 - 8s Video player components

    load on the screen with a fade in transition Indeterminate waiting indicator Video plays as soon as loaded
  40. None
  41. Communicating and sharing the specifications with the development team. 3.

  42. Step by step static states in design tool.

  43. Specifications document for the developers

  44. Faking it Building Optimistic UIs

  45. Optimistic likes

  46. Optimistic Home Alarm Status Switching

  47. Trusting our API (and server) - providing optimistic instant feedbacks

    to the user 1.
  48. We don’t wait for the server response to visually change

    the status in the interface
  49. “But what will be the consequences of a system failure

    from a user perspective?”
  50. Identifying possible failure cases and acting accordingly. 2.

  51. Informing users that something went wrong (and helping them fix

    it if possible) 3.
  52. In case of failure we notify the user and switch

    back to previous state
  53. Smart User Distractions

  54. GVBeestje crocodiles by Daniel Disselkoen in Amsterdam’s metro

  55. upload starts Instagram uploads medias in the background while user

    fill the rest of the post
  56. Skeleton screens and lazy loading * * Test it on

    your users
  57. Pinterest has some really nice colorful placeholders

  58. Be careful with content jumps & layout updates

  59. Don’t overdue it …

  60. Car Repair Image Gallery Loading

  61. The mechanic takes pictures and records small videos to explain

    what needs to be repaired. Vidéo Privé Frontal 00:35 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35
  62. Understanding the user context and user flow to enhance experience.

    1.
  63. ๏ Data connexion in repair workshop can be really slow

    and wifi is often bad. ๏ Mechanics sometimes miss information because of latency, both network and human ๏ Mechanics share the same device.
  64. Discussing and understanding technical scope and requirements. 2.

  65. ๏ Medias are deleted from the device once received by

    our service —> we need to load them again when we edit a file. ๏ Size, media type, number of medias is sent in a JSON file, ๏ Thumbnails are loaded from Amazon S3 00:35 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35
  66. Building the gallery step by step 3.

  67. A Skeleton Grid 
 based on the number of medias

    (sent by JSON) Nouvelle Image Nouvelle Video Medias Précédent Suivant
  68. A gallery of spinners is never a good solution

  69. Media type thumbnails to fill the skeleton Medias

  70. Pulsing animation 
 as loader

  71. Progressively displaying media content as it loads

  72. Visual feedbacks for time-out and loading failures. 00:35 Medias 00:35

  73. No user flow interruption

  74. Communicating what is expected with developers 4.

  75. ๏ Static mockups ๏ Timer to switch between each screen

    ๏ Really limited :/ Invision prototype for the developers
  76. ๏ A video animation of the expected flow (Flinto) ๏

    Static mockups replaced by GIFs prepared in Photoshop
  77. Too realistic fake prototypes might backfire during user testing…

  78. What I learned ๏ Don’t use the same “fake prototype”

    for developers and for user testing ๏ If possible, test performance on an “coded” prototype with a real user connexion
  79. Documentation for the developers:
 ๏ Invision clickable prototype ๏ video

    animation of the flow ๏ written specifications
  80. Wait, let’s slow down a little bit…

  81. Do we ALWAYS want to make things faster?

  82. “It can’t be THAT fast, there must be a trick

    somewhere” 
 - me, the first time I saw my bank instant notification after paying in a shop.
  83. Wells Fargo’s eye-scan based log-in was too fast for users,

    they had to slow it down.
  84. The Kayak Effect “Labour illusion”
 Users value things more when

    they believe effort has been put into them
  85. Making conversations with chatbots feel more natural: slow down response

    time 
 and add a typing indicator Image via Shan Shen
  86. In the end …

  87. We design and develop in privileged environments and sometimes need

    a “what is it like for our user” reality check.
  88. Our developers use the network conditioner to simulate a bad

    connexion on the iPhone
  89. Building a performant product is a team effort!

  90. Designers and developers need to communicate and work together to

    come up with the best solution possible.
  91. Perceived performance might not be the top priority on the

    roadmap. Be patient, start small, one step at a time.
  92. We can’t all be Instagram, Twitter or Pinterest… And it’s

    okay.
  93. UX & UI Designer Mobile expert. Pixel & CSS Lover

    for Arhs stephaniewalter.design @WalterStephanie Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)