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.

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