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

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
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  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. User State of Mind User profile Younger audience is more

    demanding Speed is perceived as faster by relaxed users Google and Awwwards study
  4. 300ms - 1 second Delay can be noticed but it’s

    tolerable, no special feedback is necessary.
  5. ๏ Show advanced dynamic progress indicator ๏ Explain what will

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

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

    the user's attention focused (Nielsen, 1994; Bouch, 2000)
  8. A seagull replaces the boring spinner — widely approved by

    the users — ๏ While users wait for the search to finish, the interface displays useful information
  9. 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.
  10. It’s more satisfying to see the bar speed up towards

    the end. (Harrison, Amento, Kuznetsov et Bell - 2007 )
  11. 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
  12. 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
  13. We don’t wait for the server to respond to visually

    change the status on the interface
  14. 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
  15. ๏ 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.
  16. ๏ 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
  17. A Skeleton Grid based on the number of medias Nouvelle

    Image Nouvelle Video Medias Précédent Suivant
  18. Visual feedbacks for time-out and loading failures. 00:35 Nouvelle Image

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

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

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

    replaced by GIFs prepared in Photoshop (glitchy in Invision on mobile)
  22. ๏ 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
  23. “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.
  24. The Kayak Effect The “labour illusion” - users value things

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

    response time and add a typing indicator Image via Shan Shen
  26. We design and develop in privileged environments and sometimes need

    a “what is it like for our user” reality check.
  27. Perceived performance might not be the top priority on the

    roadmap. Be patient, start small, one step at a time.