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.

Transcript

1. Mind over Matter Stéphanie Walter - @walterstephanie Optimize Performance Without Code
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
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”
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
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