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 Slide

  2. View Slide

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

    View Slide

  4. Speed perception impacts
    user satisfaction.

    View Slide

  5. Interface visual time response

    View Slide

  6. 0 - 300ms
    Instant UI visual response

    View Slide

  7. Instant visual feedback micro-interactions

    View Slide

  8. View Slide

  9. Micro-interactions
    documented in the
    style guide

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. It’s time to get creative

    View Slide

  14. Show some
    brand personality
    ๏ training + le chat

    View Slide

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

    View Slide

  16. ๏ Explain what will take time and
    why

    View Slide

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

    View Slide

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

    View Slide

  19. The Seagull Loader

    View Slide

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

    View Slide

  21. View Slide

  22. It looks fast…
    Clever transitions and animations

    View Slide

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

    View Slide

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

    View Slide

  25. Canvas
    animated page
    transitions

    View Slide

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

    View Slide

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

    View Slide

  28. Animations
    might may some
    people sick

    View Slide

  29. On Demand Surveillance Video Loading

    View Slide

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

    View Slide

  31. 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 Slide

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

    View Slide

  33. 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 Slide

  34. View Slide

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

    View Slide

  36. Static step by step states in design tool.

    View Slide

  37. Specifications
    document for
    the developers

    View Slide

  38. Faking it
    Building Optimistic UIs

    View Slide

  39. Optimistic likes

    View Slide

  40. Optimistic Home Alarm
    Status Switching

    View Slide

  41. Optimistic
    instant visual
    response

    View Slide

  42. Identifying possible failure
    cases and acting accordingly.

    View Slide

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

    View Slide

  44. Smart User Distractions

    View Slide

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

    View Slide

  46. upload starts here

    View Slide

  47. Lazy loading +
    placeholders

    View Slide

  48. Display text fast,
    color placeholder for
    images

    View Slide

  49. Skeleton technique
    has its limits!

    View Slide

  50. Car Repair
    Image Gallery Loading

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  55. ๏ 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 Slide

  56. Building the gallery step
    by step
    3.

    View Slide

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

    View Slide

  58. The final result

    View Slide

  59. Communicating what is
    expected with developers
    4.

    View Slide

  60. Invision
    prototype for
    the developers

    View Slide

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

    View Slide

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

    View Slide

  63. The Kayak Effect
    “Labour illusion”

    View Slide

  64. More natural
    chatbot
    conversations
    Image via Shan Shen

    View Slide

  65. With great powers…

    View Slide

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

    to your effort to actually speed your
    performance!

    View Slide

  67. Building ethical
    products is part of
    our job

    View Slide

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

    View Slide

  69. Performance is a team
    and communication
    effort!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide