2018 pixelpioneers Cheating The UX When There Is Nothing More To Optimize

2020-02-27 209浏览

1.Cheating The UX When There Is Nothing More To Optimize Pixel Pioneers 2018 — Stéphanie Walter
2.stephaniewalter.design @WalterStephanie UI & UX designer. Mobile enthusiast Pixel and CSS Lover. Currently working for
3.Objective time (the clock) Psychological time (perception of time in my brain)
4.Human Perception of Speed
5.External factors might affect speed perception…
6.How fast can users interact with the content?
7.Google and Awwwards study User profile Younger audience is more demanding User State of Mind Speed is perceived as faster by relaxed users
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 focused
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.๏ While users wait for the search to finish, the interface displays useful information A seagull replaces the boring spinner — widely approved by the users —
28.While users wait for the search to finish, the interface displays useful information
29.
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.1. Discussing with the development team to understand technical requirements.
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.2. Deconstructing the waiting timeline millisecond by millisecond.
40.Interface Transition Video player components load on the screen with a fade in transition Indeterminate waiting indicator Video plays as soon as loaded 300ms 2s 3 - 8s
41.
42.3. Communicating and sharing the specifications with the development team.
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.1. Trusting our API (and server) providing optimistic instant feedbacks to the user
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.2. Identifying possible failure cases and acting accordingly.
52.3. Informing users that something went wrong (and helping them fix it if possible)
53.In case offailure: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 Medias 00:35 00:35 Vidéo Privé Frontal Nouvelle Image Précédent Nouvelle Video Suivant
63.1. 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.2. Discussing and understanding technical scope and requirements.
66.00:35 Medias 00:35 00:35 Nouvelle Image Précédent Nouvelle Video Suivant ๏ 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
67.3. Building the gallery step by step
68.A Skeleton Grid based on the number of medias Medias Nouvelle Image Précédent Nouvelle Video Suivant
69.A gallery of spinners is never a good solution
70.Medias Media type thumbnails to fill the skeleton Nouvelle Image Précédent Nouvelle Video 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 Medias 00:35 Nouvelle Image Précédent Nouvelle Video Suivant
74.No user flowinterruption:users can interact with the interface and take new images while the gallery loads in the background
75.4. Communicating what is expected with developers
76.Invision prototype for the developers ๏ Static mockups ๏ Timer to switch between each screen ๏ Reallylimited:frame by frame animation = long and tedious
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.What I learned ๏ 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
80.Documentation for thedevelopers:๏ 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.Image via Shan Shen To make conversations with chatbots feel morenatural:slow down response time and add a typing indicator
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 okay.
94.stephaniewalter.design @WalterStephanie Attribution-NonCommercial-ShareAlike 4.0 International