Slide 1
Slide 1 text
Mind over Matter
Stéphanie Walter - @walterstephanie
Optimize Performance Without Code
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Psychological time
(perception of time in my brain)
Objective time
(the clock)
Slide 4
Slide 4 text
Speed perception impacts
user satisfaction.
Slide 5
Slide 5 text
Interface visual time response
Slide 6
Slide 6 text
0 - 300ms
Instant UI visual response
Slide 7
Slide 7 text
Instant visual feedback micro-interactions
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Micro-interactions
documented in the
style guide
Slide 10
Slide 10 text
300ms - 1 second
Delay can be noticed but it’s tolerable, no special feedback is necessary.
Slide 11
Slide 11 text
2 - 5 seconds
Indeterminate loaders to show that the system is still working
Slide 12
Slide 12 text
“Everything is fine,
the system is
currently working”
Slide 13
Slide 13 text
It’s time to get creative
Slide 14
Slide 14 text
Show some
brand personality
๏ training + le chat
Slide 15
Slide 15 text
More than 5 seconds
Determinate progress indicators to keep user focused
Slide 16
Slide 16 text
๏ Explain what will take time and
why
Slide 17
Slide 17 text
๏ Explain what will take time and
why
๏ Show advanced dynamic progress
indicator with current progression
(% or steps)
Slide 18
Slide 18 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 19
Slide 19 text
The Seagull Loader
Slide 20
Slide 20 text
“We optimized every piece of code
possible but users with big queries are
still complaining”
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
It looks fast…
Clever transitions and animations
Slide 23
Slide 23 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 24
Slide 24 text
Backwards decelerating ribbing significantly increased perceived performance
(Harrison, Yeo et Hudson - 2010 )
demo by Geoffrey C.
Slide 25
Slide 25 text
Canvas
animated page
transitions
Slide 26
Slide 26 text
JS & CSS animated
arrivals and
departures
via Val Head
Slide 27
Slide 27 text
The two things the browser can “cheaply” animate (no repaint)
CSS opacity & transform = ❤
Slide 28
Slide 28 text
Animations
might may some
people sick
Slide 29
Slide 29 text
On Demand Surveillance Video Loading
Slide 30
Slide 30 text
Discussing with the development
team to understand technical
requirements.
1.
Slide 31
Slide 31 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 32
Slide 32 text
Deconstructing the
waiting timeline
millisecond by millisecond.
2.
Slide 33
Slide 33 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 34
Slide 34 text
No content
Slide 35
Slide 35 text
Communicating and
sharing the specifications
with the development team.
3.
Slide 36
Slide 36 text
Static step by step states in design tool.
Slide 37
Slide 37 text
Specifications
document for
the developers
Slide 38
Slide 38 text
Faking it
Building Optimistic UIs
Slide 39
Slide 39 text
Optimistic likes
Slide 40
Slide 40 text
Optimistic Home Alarm
Status Switching
Slide 41
Slide 41 text
Optimistic
instant visual
response
Slide 42
Slide 42 text
Identifying possible failure
cases and acting accordingly.
Slide 43
Slide 43 text
In case of failure we notify the user and switch back to previous state
Slide 44
Slide 44 text
Smart User Distractions
Slide 45
Slide 45 text
GVBeestje crocodiles by Daniel Disselkoen in Amsterdam’s metro
Slide 46
Slide 46 text
upload starts here
Slide 47
Slide 47 text
Lazy loading +
placeholders
Slide 48
Slide 48 text
Display text fast,
color placeholder for
images
Slide 49
Slide 49 text
Skeleton technique
has its limits!
Slide 50
Slide 50 text
Car Repair
Image Gallery Loading
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
Understanding the user
context and user flow to
enhance experience.
1.
Slide 53
Slide 53 text
๏ Slow data connexion, bad
wifi
๏ Mechanics share the same
device
Slide 54
Slide 54 text
Discussing and
understanding technical
scope and requirements.
2.
Slide 55
Slide 55 text
๏ 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
Slide 56
Slide 56 text
Building the gallery step
by step
3.
Slide 57
Slide 57 text
A Skeleton Grid
Media type
thumbnails
Pulsing animation
as loader
Progressively
displaying medias
content as they load
Information from JSON file
Slide 58
Slide 58 text
The final result
Slide 59
Slide 59 text
Communicating what is
expected with developers
4.
Slide 60
Slide 60 text
Invision
prototype for
the developers
Slide 61
Slide 61 text
Wait, let’s slow down
a little bit…
Slide 62
Slide 62 text
Eye-scan based
log-in was too fast
for users
Slide 63
Slide 63 text
The Kayak Effect
“Labour illusion”
Slide 64
Slide 64 text
More natural
chatbot
conversations
Image via Shan Shen
Slide 65
Slide 65 text
With great powers…
Slide 66
Slide 66 text
Everything in this talk is to enhance user
perceived performance IN ADDITION
to your effort to actually speed your
performance!
Slide 67
Slide 67 text
Building ethical
products is part of
our job
Slide 68
Slide 68 text
We design and develop in privileged
environments and sometimes need a
“what is it like for our user” reality check.
Slide 69
Slide 69 text
Performance is a team
and communication
effort!
Slide 70
Slide 70 text
Perceived performance might not be
the top priority on the roadmap. Be
patient, start small, one step at a time.
Slide 71
Slide 71 text
We can’t all be
Instagram, Twitter or
Pinterest… And it’s okay.
Slide 72
Slide 72 text
UX & Product Designer
Mobile expert. Pixel & CSS Lover
stephaniewalter.design @WalterStephanie