Mind over Matter: Optimize Performance Without Code

Mind over Matter: Optimize Performance Without Code

Did you already optimize every. single. line. of. code. to be found on your website or mobile app? Are you getting tired of hearing about load times and TTFB(Time to first byte)? Do you need to remind the CEO you don’t have Pinterest’s or Instagram’s budget? Breathe, it’s OK we've all been there. Come and check out ways to use design techniques to influence the user’s perception of time. No magic tricks, instead I'll give you examples from real projects I worked on. In the end, it doesn't matter how fast your site loads, it's all about how fast your users perceive it to be.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

July 17, 2019
Tweet

Transcript

  1. Mind over Matter Stéphanie Walter - @walterstephanie Optimize Performance Without

    Code
  2. None
  3. Psychological time (perception of time in my brain) Objective time

    (the clock)
  4. Speed perception impacts user satisfaction.

  5. Interface visual time response

  6. 0 - 300ms Instant UI visual response

  7. Instant visual feedback micro-interactions

  8. None
  9. Micro-interactions documented in the style guide

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

    tolerable, no special feedback is necessary.
  11. 2 - 5 seconds Indeterminate loaders to show that the

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

  13. It’s time to get creative

  14. Show some brand personality ๏ training + le chat

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

    focused
  16. ๏ Explain what will take time and why

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

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

    advanced dynamic progress indicator with current progression (% or steps) ๏ If possible, don’t block users
  19. The Seagull Loader

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

    big queries are still complaining”
  21. None
  22. It looks fast… Clever transitions and animations

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

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

    Hudson - 2010 ) demo by Geoffrey C.
  25. Canvas animated page transitions

  26. JS & CSS animated arrivals and departures via Val Head

  27. The two things the browser can “cheaply” animate (no repaint)

    CSS opacity & transform = ❤
  28. Animations might may some people sick

  29. On Demand Surveillance Video Loading

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

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

  33. 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
  34. None
  35. Communicating and sharing the specifications with the development team. 3.

  36. Static step by step states in design tool.

  37. Specifications document for the developers

  38. Faking it Building Optimistic UIs

  39. Optimistic likes

  40. Optimistic Home Alarm Status Switching

  41. Optimistic instant visual response

  42. Identifying possible failure cases and acting accordingly.

  43. In case of failure we notify the user and switch

    back to previous state
  44. Smart User Distractions

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

  46. upload starts here

  47. Lazy loading + placeholders

  48. Display text fast, color placeholder for images

  49. Skeleton technique has its limits!

  50. Car Repair Image Gallery Loading

  51. Mechanics take pictures and record small videos to inform customers

    about additional repairs Vidéo Privé Frontal 00:35 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35
  52. Understanding the user context and user flow to enhance experience.

    1.
  53. ๏ Slow data connexion, bad wifi ๏ Mechanics share the

    same device
  54. Discussing and understanding technical scope and requirements. 2.

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

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

  57. A Skeleton Grid Media type thumbnails Pulsing animation as loader

    Progressively displaying medias content as they load Information from JSON file
  58. The final result

  59. Communicating what is expected with developers 4.

  60. Invision prototype for the developers

  61. Wait, let’s slow down a little bit…

  62. Eye-scan based log-in was too fast for users

  63. The Kayak Effect “Labour illusion”

  64. More natural chatbot conversations Image via Shan Shen

  65. With great powers…

  66. Everything in this talk is to enhance user perceived performance

    IN ADDITION 
 to your effort to actually speed your performance!
  67. Building ethical products is part of our job

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

    a “what is it like for our user” reality check.
  69. Performance is a team and communication effort!

  70. Perceived performance might not be the top priority on the

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

    okay.
  72. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie