$30 off During Our Annual Pro Sale. View Details »

Cheating the UX When There Is Nothing More to Optimize - PixelPioneers

Cheating the UX When There Is Nothing More to Optimize - PixelPioneers

You have optimised every line of code of your site or mobile app and used all the techniques at your disposal to have the fastest loading time possible. But you don’t have Instagram or Pinterest’s budget, right? Let's talk about perceived performance and influencing the users' perception of speed!

I take a look at a few projects I worked on to show how to use various design and UX techniques to improve web performance also at the level of user perception.

Stéphanie Walter

June 08, 2018

More Decks by Stéphanie Walter

Other Decks in Design


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

    Pixel Pioneers 2018 — Stéphanie Walter
  2. UI & UX designer. Mobile enthusiast Pixel and CSS Lover.

    Currently working for stephaniewalter.design @WalterStephanie
  3. Psychological time (perception of time in my brain) Objective time

    (the clock)
  4. Human Perception of Speed

  5. External factors might affect speed perception…

  6. How fast can users interact with the content?

  7. User State of Mind User profile Younger audience is more

    demanding Speed is perceived as faster by relaxed users Google and Awwwards study
  8. User Situation - the ROI for waiting

  9. Speed perception impacts user satisfaction.

  10. Interface visual time response

  11. 0 - 300ms Instant UI visual response

  12. Instant visual feedback on user micro-interactions

  13. Providing states is the designer’s job

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

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

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

  17. It’s time to get creative

  18. Show some brand personality

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

  20. ๏ Show advanced dynamic progress indicator

  21. ๏ Show advanced dynamic progress indicator ๏ Explain what will

    take time (and why)
  22. ๏ Show advanced dynamic progress indicator ๏ Explain what will

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

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

    the user's attention focused (Nielsen, 1994; Bouch, 2000)
  25. 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

    the 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. 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.
  34. It’s more satisfying to see the bar speed up towards

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

    Hudson - 2010 )
  36. On Demand Surveillance Video Loading

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

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

  40. 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
  41. None
  42. Communicating and sharing the specifications with the development team. 3.

  43. Step by step static states in design tool.

  44. Specifications document for the developers

  45. Faking it Building Optimistic UIs

  46. Optimistic likes

  47. Optimistic Home Alarm Status Switching

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

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

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

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

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

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

    to previous state
  54. Smart User Distractions

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

  56. Instagram’s preemptive media uploading upload starts here

  57. Skeleton screens and progressively display content as it arrives in

    the browser
  58. Pinterest has some really nice colorful interface placeholders

  59. Be careful with content jumps & layout updates

  60. Be careful not to overdue it …

  61. Car Repair Image Gallery Loading

  62. The mechanic takes photos and records small videos to explain

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

  64. ๏ 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.
  65. Discussing and understanding technical scope and requirements. 2.

  66. ๏ 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
  67. Building the gallery step by step 3.

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

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

  70. Media type thumbnails to fill the skeleton Nouvelle Image Nouvelle

    Video Medias Précédent Suivant
  71. Pulsing animation as loader

  72. Progressively displaying media content as it loads

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

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

    and take new images while the gallery loads in the background
  75. Communicating what is expected with developers 4.

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

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

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

  79. ๏ Don’t use the same fake prototype for developers and

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

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

  82. Do we ALWAYS need to make our interface faster?

  83. “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.
  84. Wells Fargo’s eye-scan based log-in was too fast for users,

    they had to slow it down.
  85. The Kayak Effect The “labour illusion” - users value things

    more when they believe effort has been put into them
  86. To make conversations with chatbots feel more natural: slow down

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

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

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

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

  91. Building Designers and developers need to communicate and work together

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

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

  94. stephaniewalter.design @WalterStephanie Attribution-NonCommercial-ShareAlike 4.0 International