Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cheating The UX When There Is
Nothing More To Optimize
Smashing Conference Barcelona 2017 — Stéphanie Walter
UI & UX designer.
Mobile enthusiast Pixel and CSS Lover.
working in Luxembourg for
www.stephaniewalter.fr @WalterStephanie...
Psychological time
(perception of time in my brain)
Objective time
(the clock)
Speed Perception
“
“
Our consciousness lags 80 milliseconds
behind actual events. "When you think
an event occurs it has already
happened”
...
External factors might affect
speed perception…
How fast users can interact with the content
User profile:
Younger audience is more demanding
Google and Awwwards study
User State of Mind:
Speed is perceived as faster by relaxed users
Google and Awwwards study
User Situation - the ROI for waiting
Speed perception impacts user
satisfaction.
“People in passive waiting mode overestimate
waiting times by 36%.”
We need to help user go or stay in active mode.
Interface visual time response
0 - 300ms
Instant UI visual response
Instant visual feedback on user micro-interactions
Providing the states is a designer’s job
Styleguides are a good way to communicate micro-interactions and states
300ms - 1 second
Delay can be noticed but it’s tolerable, no special feedback is necessary.
2 - 5 seconds
Dynamic indeterminate loaders to show that the system is
still working
“Everything is fine, the system is currently working”
It’s time to be creative
Show some brand
personality
More than 5 seconds
Determinate progress indicators to keep user focused
• Show advanced dynamic
progress indicator
• Show advanced dynamic
progress indicator
• Explain what will take time
(and why)
• Show advanced dynamic
progress indicator
• Explain what will take time (and
why)
• Show current progression (% or
steps)
• Show advanced dynamic
progress indicator
• Explain what will take time (and
why)
• Show current progression (% or
steps)...
“
“
10 seconds is about the limit for keeping
the user's attention focused
(Nielsen, 1994; Bouch, 2000)
Seagull Loader
“We optimized every piece of code
possible but users with big queries
are still complaining”
A seagull replaces
the boring spinner —
widely approved by
the team —
• While users wait for the search to finish,
the int...
While users wait for
the search to finish,
the interface
displays useful
information
Visual illusions
Clever transitions and micro-interactions
Animated page transitions
Animate arrivals and departures
This will also give you more time to create the element server side.
via Val Head
Ease-out works
best for instant
reactions, menus,
buttons, to respond
to user input.
Ease-in works best
for prompt windows...
It’s more satisfying to see the bar speed up
towards the end.
(Harrison, Amento, Kuznetsov et Bell - 2007 )
Backwards decelerating ribbing significantly
increased perceived performance.
(Harrison, Yeo et Hudson - 2010 )
On Demand Surveillance Video
Loading
Discussing with the development
team to understand technical
constraints.
1.
How this works
Camera takes the video
and sends it to the server
Server reencodes the
video and sends it to the
app
The ap...
Deconstructing the waiting timeline
millisecond by millisecond.
2.
Deconstructing the wait on a timeline
Interface
Transition
300ms 2s 3 - 8s
Video player components
load on the screen with...
Communicating and sharing the
specifications with the development
team.
3.
Step by step static states in design tool.
Specifications document for the developers
Faking it
Building Optimistic UIs
Optimistic likes
Optimistic Home Alarm Status
Switching
Trusting your API (and server) -
providing optimistic instant
feedbacks to the user
1.
We don’t wait for the server to respond to visually change the
status on the interface
“But what will be the consequences
of a system failure from a user
perspective in a home surveillance
app?”
Identifying potential failure cases
and acting accordingly.
2.
Informing users that something went
wrong (and help them fix it if
possible)
3.
In case of failure: notifying the user and switching back to
previous state
Smart User Distractions
Ich bin schnappi das kleine krokodil
Instagram’s preemptive media uploading
upload starts here
• Preloading the UI for search
results when user interacts
with the search?
• Preloading next form steps?
Pre-load the nex...
Skeleton screens and progressively display content as it
arrives in the browser
Be careful with content jumps
Pinterest has some really nice colorful interface
placeholders
Car Repair Image Gallery
Understanding the user context and
user flow to enhance user
experience.
1.
• Data connexion in a
body repair workshop
can be really slow and
wifi is often bad.
• Mechanics sometimes
miss informatio...
Discussing and understanding
technical scope and requirements.
2.
• Medias are deleted from the
device once the file is sent
(so we need to load them again
when we edit a file).
• Size, me...
Building the gallery step by step
3.
A Skeleton Grid based on
the number of medias
Nouvelle Image Nouvelle Video
Medias
Précédent Suivant
Media type thumbnails to
fill the skeleton
Nouvelle Image Nouvelle Video
Medias
Précédent Suivant
A gallery of spinners
is never a good
solution
Pulsing animation as a
loader
Progressively displaying
media content as it loads
Visual feedbacks for time-
out and loading failures.
00:35
Nouvelle Image Nouvelle Video
Medias
Précédent Suivant
00:35
No user flow interruption:
users can interact with the
interface and take new
images while the gallery
loads in the backgr...
• Static mockups
• Timer to switch between each
screen
• Really limited: frame by frame
animation = long and tedious
Invis...
• Flinto to build the pulse
animation
• Static mockups
replaced by GIFs
prepared in Photoshop
(glitchy in Invision on mobi...
Too realistic fake prototypes
might backfire during user
testing…
• Using the same prototype for developers and
user testing does not always work.
• Maybe test performance on an HTML/CSS
p...
In the end…
Is faster always the best
solution?
“It can’t be THAT fast,
there must be a trick
somewhere”
- me, the first time I saw my
bank instant notification after
pay...
Designers and developers need to
communicate and work together to
come up with the best solution
possible.
Perceived performance might not
be the top priority on the
roadmap. Be patient, start small,
one step at a time.
We can’t all be Instagram, Twitter
or Pinterest… And it’s okay.
www.stephaniewalter.fr @WalterStephanie
Illustration by Laurence V.
Attribution-NonCommercial-NoDerivs 3.0 France (CC
BY-N...
Credits and thanks
• Icons:
• Optical-illusion
• Finish Line
• Magician
• Thanks Geoffrey Crofte and Damien Senger for the...
Cheating The UX When There Is Nothing More To Optimize
Cheating The UX When There Is Nothing More To Optimize
Cheating The UX When There Is Nothing More To Optimize
Upcoming SlideShare
Loading in …5
×

Cheating The UX When There Is Nothing More To Optimize

282 views

Published on

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.

https://blog.stephaniewalter.fr/en/cheating-ux-perceived-performance-and-user-experience/

Published in: Design
  • Be the first to comment

Cheating The UX When There Is Nothing More To Optimize

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

×