Slide 1
Slide 1 text
Cheating The UX When There Is
Nothing More To Optimize
Smashing Conference Barcelona 2017 — Stéphanie Walter
Slide 2
Slide 2 text
UI & UX designer.
Mobile enthusiast Pixel and CSS Lover.
working in Luxembourg for
www.stephaniewalter.fr @WalterStephanie
Illustration by Laurence V.
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
Speed Perception
Slide 6
Slide 6 text
“
“
Our consciousness lags 80 milliseconds
behind actual events. "When you think
an event occurs it has already
happened”
David Eagleman
Slide 7
Slide 7 text
External factors might affect
speed perception…
Slide 8
Slide 8 text
How fast users can interact with the content
Slide 9
Slide 9 text
User profile:
Younger audience is more demanding
Google and Awwwards study
Slide 10
Slide 10 text
User State of Mind:
Speed is perceived as faster by relaxed users
Google and Awwwards study
Slide 11
Slide 11 text
User Situation - the ROI for waiting
Slide 12
Slide 12 text
Speed perception impacts user
satisfaction.
Slide 13
Slide 13 text
“People in passive waiting mode overestimate
waiting times by 36%.”
We need to help user go or stay in active mode.
Slide 14
Slide 14 text
Interface visual time response
Slide 15
Slide 15 text
0 - 300ms
Instant UI visual response
Slide 16
Slide 16 text
Instant visual feedback on user micro-interactions
Slide 17
Slide 17 text
It’s the designer’s job
Styleguides are a good way to communicate micro-interactions and states
Slide 18
Slide 18 text
300ms - 1 second
Delay can be noticed but it’s tolerable, no special feedback is necessary.
Slide 19
Slide 19 text
2 - 5 seconds
Dynamic indeterminate loaders to show that the system is
still working
Slide 20
Slide 20 text
“Everything is fine, the system is currently working”
Slide 21
Slide 21 text
It’s time to be creative
Slide 22
Slide 22 text
Show some brand
personality
Slide 23
Slide 23 text
More than 5 seconds
Determinate progress indicators to keep user focused
Slide 24
Slide 24 text
• Show advanced dynamic
progress indicator
Slide 25
Slide 25 text
• Show advanced dynamic
progress indicator
• Explain what will take time
(and why)
Slide 26
Slide 26 text
• Show advanced dynamic
progress indicator
• Explain what will take time (and
why)
• Show current progression (% or
steps)
Slide 27
Slide 27 text
• Show advanced dynamic
progress indicator
• Explain what will take time (and
why)
• Show current progression (% or
steps)
• If possible, don’t block users
Slide 28
Slide 28 text
“
“
10 seconds is about the limit for keeping
the user's attention focused
(Nielsen, 1994; Bouch, 2000)
Slide 29
Slide 29 text
Seagull Loader
Slide 30
Slide 30 text
“We optimized every piece of code
possible but users with big queries
are still complaining”
Slide 31
Slide 31 text
A seagull replaces
the boring spinner —
widely approved by
the team —
• While users wait for the search to finish,
the interface displays useful information
Slide 32
Slide 32 text
While users wait for
the search to finish,
the interface
displays useful
information
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Visual illusions
Clever transitions and micro-interactions
Slide 35
Slide 35 text
Animated page transitions
Slide 36
Slide 36 text
Animate arrivals and departures
This will also give you more time to create the element server side.
via Val Head
Slide 37
Slide 37 text
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.
Slide 38
Slide 38 text
It’s more satisfying to see the bar speed up
towards the end.
(Harrison, Amento, Kuznetsov et Bell - 2007 )
Slide 39
Slide 39 text
Backwards decelerating ribbing significantly
increased perceived performance.
(Harrison, Yeo et Hudson - 2010 )
Slide 40
Slide 40 text
On Demand Surveillance Video
Loading
Slide 41
Slide 41 text
Discussing with the development
team to understand technical
constraints.
1.
Slide 42
Slide 42 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 43
Slide 43 text
Deconstructing the waiting timeline
millisecond by millisecond.
2.
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Communicating and sharing the
specifications with the development
team.
3.
Slide 47
Slide 47 text
Step by step static states in design tool.
Slide 48
Slide 48 text
Specifications document for the developers
Slide 49
Slide 49 text
Faking it
Building Optimistic UIs
Slide 50
Slide 50 text
Optimistic likes
Slide 51
Slide 51 text
Optimistic Home Alarm Status
Switching
Slide 52
Slide 52 text
Trusting your API (and server) -
providing optimistic instant
feedbacks to the user
1.
Slide 53
Slide 53 text
We don’t wait for the server to respond to visually change the
status on the interface
Slide 54
Slide 54 text
“But what will be the consequences
of a system failure from a user
perspective in a home surveillance
app?”
Slide 55
Slide 55 text
Identifying potential failure cases
and acting accordingly.
2.
Slide 56
Slide 56 text
Informing users that something went
wrong (and help them fix it if
possible)
3.
Slide 57
Slide 57 text
In case of failure: notifying the user and switching back to
previous state
Slide 58
Slide 58 text
Smart User Distractions
Slide 59
Slide 59 text
Ich bin schnappi das kleine krokodil
Slide 60
Slide 60 text
Instagram’s preemptive media uploading
upload starts here
Slide 61
Slide 61 text
• 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…
Slide 62
Slide 62 text
Skeleton screens and progressively display content as it
arrives in the browser
Slide 63
Slide 63 text
Be careful with content jumps
Slide 64
Slide 64 text
Pinterest has some really nice colorful interface
placeholders
Slide 65
Slide 65 text
Car Repair Image Gallery
Slide 66
Slide 66 text
Understanding the user context and
user flow to enhance user
experience.
1.
Slide 67
Slide 67 text
• 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.
Slide 68
Slide 68 text
Discussing and understanding
technical scope and requirements.
2.
Slide 69
Slide 69 text
• 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
Slide 70
Slide 70 text
Building the gallery step by step
3.
Slide 71
Slide 71 text
A Skeleton Grid based on
the number of medias
Nouvelle Image Nouvelle Video
Medias
Précédent Suivant
Slide 72
Slide 72 text
Media type thumbnails to
fill the skeleton
Nouvelle Image Nouvelle Video
Medias
Précédent Suivant
Slide 73
Slide 73 text
A gallery of spinners
is never a good
solution
Slide 74
Slide 74 text
Pulsing animation as a
loader
Slide 75
Slide 75 text
Progressively displaying
media content as it loads
Slide 76
Slide 76 text
Visual feedbacks for time-
out and loading failures.
00:35
Nouvelle Image Nouvelle Video
Medias
Précédent Suivant
00:35
Slide 77
Slide 77 text
No user flow interruption:
users can interact with the
interface and take new
images while the gallery
loads in the background
Slide 78
Slide 78 text
• Static mockups
• Timer to switch between each
screen
• Really limited: frame by frame
animation = long and tedious
Invision prototype for
the developers
Slide 79
Slide 79 text
• Flinto to build the pulse
animation
• Static mockups
replaced by GIFs
prepared in Photoshop
(glitchy in Invision on mobile)
Slide 80
Slide 80 text
Too realistic fake prototypes
might backfire during user
testing…
Slide 81
Slide 81 text
• 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
Slide 82
Slide 82 text
In the end…
Slide 83
Slide 83 text
Is faster always the best
solution?
Slide 84
Slide 84 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.
• blogger
• ma banque
Slide 85
Slide 85 text
Designers and developers need to
communicate and work together to
come up with the best solution
possible.
Slide 86
Slide 86 text
Perceived performance might not
be the top priority on the
roadmap. Be patient, start small,
one step at a time.
Slide 87
Slide 87 text
We can’t all be Instagram, Twitter
or Pinterest… And it’s okay.
Slide 88
Slide 88 text
www.stephaniewalter.fr @WalterStephanie
Illustration by Laurence V.
Attribution-NonCommercial-NoDerivs 3.0 France (CC
BY-NC-ND 3.0 FR)
Slide 89
Slide 89 text
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.