Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mind over Matter: Optimize Performance Without ...

Mind over Matter: Optimize Performance Without Code

Did you already optimize every. single. line. of. code. to be found on your website or mobile app? Are you getting tired of hearing about load times and TTFB(Time to first byte)? Do you need to remind the CEO you don’t have Pinterest’s or Instagram’s budget? Breathe, it’s OK we've all been there. Come and check out ways to use design techniques to influence the user’s perception of time. No magic tricks, instead I'll give you examples from real projects I worked on. In the end, it doesn't matter how fast your site loads, it's all about how fast your users perceive it to be.

Stéphanie Walter

July 17, 2019
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. 300ms - 1 second Delay can be noticed but it’s

    tolerable, no special feedback is necessary.
  2. ๏ Explain what will take time and why ๏ Show

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

    advanced dynamic progress indicator with current progression (% or steps) ๏ If possible, don’t block users
  4. It’s more satisfying to see the bar speed up towards

    the end. (Harrison, Amento, Kuznetsov et Bell - 2007 ) demo by Geoffrey C.
  5. 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
  6. 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
  7. 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
  8. ๏ 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
  9. A Skeleton Grid Media type thumbnails Pulsing animation as loader

    Progressively displaying medias content as they load Information from JSON file
  10. Everything in this talk is to enhance user perceived performance

    IN ADDITION 
 to your effort to actually speed your performance!
  11. We design and develop in privileged environments and sometimes need

    a “what is it like for our user” reality check.
  12. Perceived performance might not be the top priority on the

    roadmap. Be patient, start small, one step at a time.
  13. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie