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.

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.
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
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
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.