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

Mind over Matter: Optimize Performance Without Code

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. Mind over Matter
    Stéphanie Walter - @walterstephanie
    Optimize Performance Without Code

    View full-size slide

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

    View full-size slide

  3. Speed perception impacts
    user satisfaction.

    View full-size slide

  4. Interface visual time response

    View full-size slide

  5. 0 - 300ms
    Instant UI visual response

    View full-size slide

  6. Instant visual feedback micro-interactions

    View full-size slide

  7. Micro-interactions
    documented in the
    style guide

    View full-size slide

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

    View full-size slide

  9. 2 - 5 seconds
    Indeterminate loaders to show that the system is still working

    View full-size slide

  10. “Everything is fine,
    the system is
    currently working”

    View full-size slide

  11. It’s time to get creative

    View full-size slide

  12. Show some
    brand personality
    ๏ training + le chat

    View full-size slide

  13. More than 5 seconds
    Determinate progress indicators to keep user focused

    View full-size slide

  14. ๏ Explain what will take time and
    why

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. The Seagull Loader

    View full-size slide

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

    View full-size slide

  19. It looks fast…
    Clever transitions and animations

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Canvas
    animated page
    transitions

    View full-size slide

  23. JS & CSS animated
    arrivals and
    departures
    via Val Head

    View full-size slide

  24. The two things the browser can “cheaply” animate (no repaint)
    CSS opacity & transform = ❤

    View full-size slide

  25. Animations
    might may some
    people sick

    View full-size slide

  26. On Demand Surveillance Video Loading

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. Deconstructing the
    waiting timeline
    millisecond by millisecond.
    2.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Static step by step states in design tool.

    View full-size slide

  33. Specifications
    document for
    the developers

    View full-size slide

  34. Faking it
    Building Optimistic UIs

    View full-size slide

  35. Optimistic likes

    View full-size slide

  36. Optimistic Home Alarm
    Status Switching

    View full-size slide

  37. Optimistic
    instant visual
    response

    View full-size slide

  38. Identifying possible failure
    cases and acting accordingly.

    View full-size slide

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

    View full-size slide

  40. Smart User Distractions

    View full-size slide

  41. GVBeestje crocodiles by Daniel Disselkoen in Amsterdam’s metro

    View full-size slide

  42. upload starts here

    View full-size slide

  43. Lazy loading +
    placeholders

    View full-size slide

  44. Display text fast,
    color placeholder for
    images

    View full-size slide

  45. Skeleton technique
    has its limits!

    View full-size slide

  46. Car Repair
    Image Gallery Loading

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. ๏ Slow data connexion, bad
    wifi
    ๏ Mechanics share the same
    device

    View full-size slide

  50. Discussing and
    understanding technical
    scope and requirements.
    2.

    View full-size slide

  51. ๏ 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

    View full-size slide

  52. Building the gallery step
    by step
    3.

    View full-size slide

  53. A Skeleton Grid
    Media type
    thumbnails
    Pulsing animation
    as loader
    Progressively
    displaying medias
    content as they load
    Information from JSON file

    View full-size slide

  54. The final result

    View full-size slide

  55. Communicating what is
    expected with developers
    4.

    View full-size slide

  56. Invision
    prototype for
    the developers

    View full-size slide

  57. Wait, let’s slow down
    a little bit…

    View full-size slide

  58. Eye-scan based
    log-in was too fast
    for users

    View full-size slide

  59. The Kayak Effect
    “Labour illusion”

    View full-size slide

  60. More natural
    chatbot
    conversations
    Image via Shan Shen

    View full-size slide

  61. With great powers…

    View full-size slide

  62. Everything in this talk is to enhance user
    perceived performance IN ADDITION 

    to your effort to actually speed your
    performance!

    View full-size slide

  63. Building ethical
    products is part of
    our job

    View full-size slide

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

    View full-size slide

  65. Performance is a team
    and communication
    effort!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. UX & Product Designer
    Mobile expert. Pixel & CSS Lover
    stephaniewalter.design @WalterStephanie

    View full-size slide