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

Cheating The UX When There Is Nothing More To Optimize

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
October 17, 2017

Cheating The UX When There Is Nothing More To Optimize

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. Yet, users still complain about the slowness. Let’s learn to use different design techniques and UX to work performance also at the level of user perception.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

October 17, 2017
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. Cheating The UX When There Is Nothing More To Optimize

    Smashing Conference Barcelona 2017 — Stéphanie Walter
  2. UI & UX designer. Mobile enthusiast Pixel and CSS Lover.

    working in Luxembourg for www.stephaniewalter.fr @WalterStephanie Illustration by Laurence V.
  3. None
  4. Psychological time (perception of time in my brain) Objective time

    (the clock)
  5. Speed Perception

  6. “ “ Our consciousness lags 80 milliseconds behind actual events.

    "When you think an event occurs it has already happened” David Eagleman
  7. External factors might affect speed perception…

  8. How fast users can interact with the content

  9. User profile: Younger audience is more demanding Google and Awwwards

    study
  10. User State of Mind: Speed is perceived as faster by

    relaxed users Google and Awwwards study
  11. User Situation - the ROI for waiting

  12. Speed perception impacts user satisfaction.

  13. “People in passive waiting mode overestimate waiting times by 36%.”

    We need to help user go or stay in active mode.
  14. Interface visual time response

  15. 0 - 300ms Instant UI visual response

  16. Instant visual feedback on user micro-interactions

  17. It’s the designer’s job Styleguides are a good way to

    communicate micro-interactions and states
  18. 300ms - 1 second Delay can be noticed but it’s

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

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

  21. It’s time to be creative

  22. Show some brand personality

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

    focused
  24. • Show advanced dynamic progress indicator

  25. • Show advanced dynamic progress indicator • Explain what will

    take time (and why)
  26. • Show advanced dynamic progress indicator • Explain what will

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

    take time (and why) • Show current progression (% or steps) • If possible, don’t block users
  28. “ “ 10 seconds is about the limit for keeping

    the user's attention focused (Nielsen, 1994; Bouch, 2000)
  29. Seagull Loader

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

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

    the team — • While users wait for the search to finish, the interface displays useful information
  32. While users wait for the search to finish, the interface

    displays useful information
  33. None
  34. Visual illusions Clever transitions and micro-interactions

  35. Animated page transitions

  36. Animate arrivals and departures This will also give you more

    time to create the element server side. via Val Head
  37. Ease-out works best for instant reactions, menus, buttons, to respond

    to user input. Ease-in works best for prompt windows and when you need to display information.
  38. It’s more satisfying to see the bar speed up towards

    the end. (Harrison, Amento, Kuznetsov et Bell - 2007 )
  39. Backwards decelerating ribbing significantly increased perceived performance. (Harrison, Yeo et

    Hudson - 2010 )
  40. On Demand Surveillance Video Loading

  41. Discussing with the development team to understand technical constraints. 1.

  42. 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
  43. Deconstructing the waiting timeline millisecond by millisecond. 2.

  44. Deconstructing the wait on a timeline 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
  45. None
  46. Communicating and sharing the specifications with the development team. 3.

  47. Step by step static states in design tool.

  48. Specifications document for the developers

  49. Faking it Building Optimistic UIs

  50. Optimistic likes

  51. Optimistic Home Alarm Status Switching

  52. Trusting your API (and server) - providing optimistic instant feedbacks

    to the user 1.
  53. We don’t wait for the server to respond to visually

    change the status on the interface
  54. “But what will be the consequences of a system failure

    from a user perspective in a home surveillance app?”
  55. Identifying potential failure cases and acting accordingly. 2.

  56. Informing users that something went wrong (and help them fix

    it if possible) 3.
  57. In case of failure: notifying the user and switching back

    to previous state
  58. Smart User Distractions

  59. Ich bin schnappi das kleine krokodil

  60. Instagram’s preemptive media uploading upload starts here

  61. • Preloading the UI for search results when user interacts

    with the search? • Preloading next form steps? Pre-load the next steps / pages based on user flow Use this with caution though…
  62. Skeleton screens and progressively display content as it arrives in

    the browser
  63. Be careful with content jumps

  64. Pinterest has some really nice colorful interface placeholders

  65. Car Repair Image Gallery

  66. Understanding the user context and user flow to enhance user

    experience. 1.
  67. • Data connexion in a body repair workshop can be

    really slow and wifi is often bad. • Mechanics sometimes miss information because of latency. • Some users share the same device.
  68. Discussing and understanding technical scope and requirements. 2.

  69. • Medias are deleted from the device once the file

    is sent (so 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
  70. Building the gallery step by step 3.

  71. A Skeleton Grid based on the number of medias Nouvelle

    Image Nouvelle Video Medias Précédent Suivant
  72. Media type thumbnails to fill the skeleton Nouvelle Image Nouvelle

    Video Medias Précédent Suivant
  73. A gallery of spinners is never a good solution

  74. Pulsing animation as a loader

  75. Progressively displaying media content as it loads

  76. Visual feedbacks for time- out and loading failures. 00:35 Nouvelle

    Image Nouvelle Video Medias Précédent Suivant 00:35
  77. No user flow interruption: users can interact with the interface

    and take new images while the gallery loads in the background
  78. • Static mockups • Timer to switch between each screen

    • Really limited: frame by frame animation = long and tedious Invision prototype for the developers
  79. • Flinto to build the pulse animation • Static mockups

    replaced by GIFs prepared in Photoshop (glitchy in Invision on mobile)
  80. Too realistic fake prototypes might backfire during user testing…

  81. • Using the same prototype for developers and user testing

    does not always work. • Maybe test performance on an HTML/CSS prototype on a real user connexion? • Short video of the whole interaction + written specifications to help developers understand interactions. • Be patient… What I learned
  82. In the end…

  83. Is faster always the best solution?

  84. “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. • blogger • ma banque
  85. Designers and developers need to communicate and work together to

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

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

    okay.
  88. www.stephaniewalter.fr @WalterStephanie Illustration by Laurence V. Attribution-NonCommercial-NoDerivs 3.0 France (CC

    BY-NC-ND 3.0 FR)
  89. Credits and thanks • Icons: • Optical-illusion • Finish Line

    • Magician • Thanks Geoffrey Crofte and Damien Senger for the animations and the help, Vitaly for the invite and the whole Smashing team for the amazing moments.