Cheating The UX When There Is Nothing More To Optimize – Voxxed Days Thessaloniki

Slide 1

Slide 1 text

Cheating The UX   When There Is Nothing More To Optimize Voxxeddays Thessaloniki 2018 — Stéphanie Walter

Slide 2

Slide 2 text

UX & UI Designer Mobile expert. Pixel & CSS Lover for Arhs stephaniewalter.design @WalterStephanie

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Psychological time (perception of time in my brain) Objective time (the clock)

Slide 5

Slide 5 text

Human Perception of Speed

Slide 6

Slide 6 text

External factors might affect speed perception…

Slide 7

Slide 7 text

The tip of the iceberg: how fast can users interact with the content?

Slide 8

Slide 8 text

User State of Mind User profile Younger audience is more demanding Speed is perceived as faster by relaxed users Google and Awwwards study

Slide 9

Slide 9 text

User situation and the ROI for waiting

Slide 10

Slide 10 text

Speed perception impacts user satisfaction.

Slide 11

Slide 11 text

UI visual time response

Slide 12

Slide 12 text

0 - 300ms Instant UI visual response

Slide 13

Slide 13 text

Instant visual feedback on user micro-interactions

Slide 14

Slide 14 text

Providing the different states is the designer’s job

Slide 15

Slide 15 text

300ms - 1 second Delay can be noticed but it’s tolerable, no special feedback is necessary.

Slide 16

Slide 16 text

2 - 5 seconds Dynamic indeterminate loaders to show that the system is still working

Slide 17

Slide 17 text

“Everything is fine, the system is currently working”

Slide 18

Slide 18 text

It’s time to get creative

Slide 19

Slide 19 text

Show some brand personality ๏ training + le chat

Slide 20

Slide 20 text

More than 5 seconds Determinate progress indicators to keep user focused

Slide 21

Slide 21 text

๏ Explain what will take time and why

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

๏ Explain what will take time and why ๏ Show advanced dynamic progress indicator with current progression (% or steps) ๏ If possible, don’t block users

Slide 24

Slide 24 text

(Nielsen, 1994; Bouch, 2000) 10 seconds is about the limit for keeping the user's attention focused

Slide 25

Slide 25 text

The Seagull Loader

Slide 26

Slide 26 text

“We optimized every piece of code possible but users with big queries are still complaining”

Slide 27

Slide 27 text

A seagull replaces the boring spinner  — widely approved by users — ๏ While users wait for the search to finish, the interface displays useful information

Slide 28

Slide 28 text

While users wait for the search to finish, the interface displays useful information

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

It looks fast… Clever transitions and animations

Slide 31

Slide 31 text

Animated page transitions

Slide 32

Slide 32 text

Animate arrivals and departures via Val Head

Slide 33

Slide 33 text

It’s more satisfying to see the bar speed up towards the end. (Harrison, Amento, Kuznetsov et Bell - 2007 ) demo by Geoffrey C.

Slide 34

Slide 34 text

demo by Geoffrey C. Backwards decelerating ribbing significantly increased perceived performance (Harrison, Yeo et Hudson - 2010 )

Slide 35

Slide 35 text

On Demand Surveillance Video Loading

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Deconstructing the waiting timeline millisecond by millisecond. 2.

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Communicating and sharing the specifications with the development team. 3.

Slide 42

Slide 42 text

Step by step static states in design tool.

Slide 43

Slide 43 text

Specifications document for the developers

Slide 44

Slide 44 text

Faking it Building Optimistic UIs

Slide 45

Slide 45 text

Optimistic likes

Slide 46

Slide 46 text

Optimistic Home Alarm Status Switching

Slide 47

Slide 47 text

Trusting our API (and server) - providing optimistic instant feedbacks to the user 1.

Slide 48

Slide 48 text

We don’t wait for the server response to visually change the status in the interface

Slide 49

Slide 49 text

“But what will be the consequences of a system failure from a user perspective?”

Slide 50

Slide 50 text

Identifying possible failure cases and acting accordingly. 2.

Slide 51

Slide 51 text

Informing users that something went wrong (and helping them fix it if possible) 3.

Slide 52

Slide 52 text

In case of failure we notify the user and switch back to previous state

Slide 53

Slide 53 text

Smart User Distractions

Slide 54

Slide 54 text

GVBeestje crocodiles by Daniel Disselkoen in Amsterdam’s metro

Slide 55

Slide 55 text

upload starts Instagram uploads medias in the background while user fill the rest of the post

Slide 56

Slide 56 text

Skeleton screens and lazy loading * * Test it on your users

Slide 57

Slide 57 text

Pinterest has some really nice colorful placeholders

Slide 58

Slide 58 text

Be careful with content jumps & layout updates

Slide 59

Slide 59 text

Don’t overdue it …

Slide 60

Slide 60 text

Car Repair Image Gallery Loading

Slide 61

Slide 61 text

The mechanic takes pictures and records small videos to explain what needs to be repaired. Vidéo Privé Frontal 00:35 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35

Slide 62

Slide 62 text

Understanding the user context and user flow to enhance experience. 1.

Slide 63

Slide 63 text

๏ Data connexion in repair workshop can be really slow and wifi is often bad. ๏ Mechanics sometimes miss information because of latency, both network and human ๏ Mechanics share the same device.

Slide 64

Slide 64 text

Discussing and understanding technical scope and requirements. 2.

Slide 65

Slide 65 text

๏ Medias are deleted from the device once received by our service —> 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

Slide 66

Slide 66 text

Building the gallery step by step 3.

Slide 67

Slide 67 text

A Skeleton Grid   based on the number of medias (sent by JSON) Nouvelle Image Nouvelle Video Medias Précédent Suivant

Slide 68

Slide 68 text

A gallery of spinners is never a good solution

Slide 69

Slide 69 text

Media type thumbnails to fill the skeleton Medias

Slide 70

Slide 70 text

Pulsing animation   as loader

Slide 71

Slide 71 text

Progressively displaying media content as it loads

Slide 72

Slide 72 text

Visual feedbacks for time-out and loading failures. 00:35 Medias 00:35

Slide 73

Slide 73 text

No user flow interruption

Slide 74

Slide 74 text

Communicating what is expected with developers 4.

Slide 75

Slide 75 text

๏ Static mockups ๏ Timer to switch between each screen ๏ Really limited :/ Invision prototype for the developers

Slide 76

Slide 76 text

๏ A video animation of the expected flow (Flinto) ๏ Static mockups replaced by GIFs prepared in Photoshop

Slide 77

Slide 77 text

Too realistic fake prototypes might backfire during user testing…

Slide 78

Slide 78 text

What I learned ๏ Don’t use the same “fake prototype” for developers and for user testing ๏ If possible, test performance on an “coded” prototype with a real user connexion

Slide 79

Slide 79 text

Documentation for the developers:  ๏ Invision clickable prototype ๏ video animation of the flow ๏ written specifications

Slide 80

Slide 80 text

Wait, let’s slow down a little bit…

Slide 81

Slide 81 text

Do we ALWAYS want to make things faster?

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Wells Fargo’s eye-scan based log-in was too fast for users, they had to slow it down.

Slide 84

Slide 84 text

The Kayak Effect “Labour illusion”  Users value things more when they believe effort has been put into them

Slide 85

Slide 85 text

Making conversations with chatbots feel more natural: slow down response time   and add a typing indicator Image via Shan Shen

Slide 86

Slide 86 text

In the end …

Slide 87

Slide 87 text

We design and develop in privileged environments and sometimes need a “what is it like for our user” reality check.

Slide 88

Slide 88 text

Our developers use the network conditioner to simulate a bad connexion on the iPhone

Slide 89

Slide 89 text

Building a performant product is a team effort!

Slide 90

Slide 90 text

Designers and developers need to communicate and work together to come up with the best solution possible.

Slide 91

Slide 91 text

Perceived performance might not be the top priority on the roadmap. Be patient, start small, one step at a time.

Slide 92

Slide 92 text

We can’t all be Instagram, Twitter or Pinterest… And it’s okay.

Slide 93

Slide 93 text

UX & UI Designer Mobile expert. Pixel & CSS Lover for Arhs stephaniewalter.design @WalterStephanie Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)