Cheating the UX When There Is Nothing More to Optimize - PixelPioneers

Transcript

1. Cheating The UX When There Is
   Nothing More To Optimize
   Pixel Pioneers 2018 — Stéphanie Walter
   

   View Slide

2. UI & UX designer.
   Mobile enthusiast Pixel and CSS Lover.
   Currently working for
   stephaniewalter.design @WalterStephanie
   

   View Slide

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

   View Slide

4. Human Perception of Speed
   

   View Slide

5. External factors might affect speed
   perception…
   

   View Slide

6. How fast can users interact with the content?
   

   View Slide

7. User State of Mind
   User profile
   Younger audience is more demanding Speed is perceived as faster by relaxed users
   Google and Awwwards study
   

   View Slide

8. User Situation - the ROI for waiting
   

   View Slide

9. Speed perception impacts user
   satisfaction.
   

   View Slide

10. Interface visual time response
    

    View Slide

11. 0 - 300ms
    Instant UI visual response
    

    View Slide

12. Instant visual feedback on user micro-interactions
    

    View Slide

13. Providing states is the designer’s job
    

    View Slide

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

    View Slide

15. 2 - 5 seconds
    Dynamic indeterminate loaders to show that the
    system is still working
    

    View Slide

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

    View Slide

17. It’s time to get creative
    

    View Slide

18. Show some brand
    personality
    

    View Slide

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

    View Slide

20. ๏ Show advanced dynamic
    progress indicator
    

    View Slide

21. ๏ Show advanced dynamic progress
    indicator
    ๏ Explain what will take time (and
    why)
    

    View Slide

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

    View Slide

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

    View Slide

24. “
    “
    10 seconds is about the limit for
    keeping the user's attention focused
    (Nielsen, 1994; Bouch, 2000)
    

    View Slide

25. Seagull Loader
    

    View Slide

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

    View Slide

27. A seagull replaces the
    boring spinner — widely
    approved by the users —
    ๏ While users wait for the search to finish, the
    interface displays useful information
    

    View Slide

28. While users wait for
    the search to finish,
    the interface displays
    useful information
    

    View Slide

29. View Slide

30. It looks fast…
    Clever transitions and animations
    

    View Slide

31. Animated page transitions
    

    View Slide

32. Animate arrivals and departures
    via Val Head
    

    View Slide

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

    View Slide

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

    View Slide

35. Backwards decelerating ribbing significantly
    increased perceived performance.
    (Harrison, Yeo et Hudson - 2010 )
    

    View Slide

36. On Demand Surveillance Video
    Loading
    

    View Slide

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

    View Slide

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

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

    View Slide

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

41. View Slide

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

    View Slide

43. Step by step static states in design tool.
    

    View Slide

44. Specifications document for the developers
    

    View Slide

45. Faking it
    Building Optimistic UIs
    

    View Slide

46. Optimistic likes
    

    View Slide

47. Optimistic Home Alarm Status
    Switching
    

    View Slide

48. Trusting our API (and server) -
    providing optimistic instant
    feedbacks to the user
    1.
    

    View Slide

49. We don’t wait for the server to respond to visually
    change the status on the interface
    

    View Slide

50. “But what will be the consequences
    of a system failure from a user
    perspective?”
    

    View Slide

51. Identifying possible failure cases
    and acting accordingly.
    2.
    

    View Slide

52. Informing users that something went
    wrong (and helping them fix it if
    possible)
    3.
    

    View Slide

53. In case of failure: notifying the user and switching
    back to previous state
    

    View Slide

54. Smart User Distractions
    

    View Slide

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

    View Slide

56. Instagram’s preemptive media uploading
    upload starts here
    

    View Slide

57. Skeleton screens and progressively display content as it
    arrives in the browser
    

    View Slide

58. Pinterest has some really nice colorful interface
    placeholders
    

    View Slide

59. Be careful with content jumps & layout updates
    

    View Slide

60. Be careful not to overdue it …
    

    View Slide

61. Car Repair Image Gallery
    Loading
    

    View Slide

62. The mechanic takes photos and records small videos to
    explain what needs to be repaired.
    00:35
    00:35
    Nouvelle Image Nouvelle Video
    Medias
    Précédent Suivant
    00:35
    Vidéo Privé Frontal
    

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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
    

    View Slide

67. Building the gallery step by step
    3.
    

    View Slide

68. A Skeleton Grid based
    on the number of
    medias
    Nouvelle Image Nouvelle Video
    Medias
    Précédent Suivant
    

    View Slide

69. A gallery of spinners is
    never a good solution
    

    View Slide

70. Media type thumbnails to
    fill the skeleton
    Nouvelle Image Nouvelle Video
    Medias
    Précédent Suivant
    

    View Slide

71. Pulsing animation as
    loader
    

    View Slide

72. Progressively displaying
    media content as it
    loads
    

    View Slide

73. Visual feedbacks for
    time-out and loading
    failures.
    00:35
    Nouvelle Image Nouvelle Video
    Medias
    Précédent Suivant
    00:35
    

    View Slide

74. No user flow interruption:
    users can interact with the
    interface and take new
    images while the gallery
    loads in the background
    

    View Slide

75. Communicating what is expected
    with developers
    4.
    

    View Slide

76. ๏ Static mockups
    ๏ Timer to switch between
    each screen
    ๏ Really limited: frame by
    frame animation = long
    and tedious
    Invision prototype for
    the developers
    

    View Slide

77. ๏ Flinto to build the pulse
    animation
    ๏ Static mockups replaced by
    GIFs prepared in Photoshop
    (glitchy in Invision on mobile)
    

    View Slide

78. Too realistic fake prototypes
    might backfire during user
    testing…
    

    View Slide

79. ๏ Don’t use the same fake prototype for
    developers and user testing
    ๏ If possible, test performance on an
    “coded” prototype with a real user
    connexion
    What I learned
    

    View Slide

80. Documentation for the developers:

    ๏ Invision clickable prototype
    ๏ video animation of the flow
    ๏ written specs.
    

    View Slide

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

    View Slide

82. Do we ALWAYS need to make our
    interface faster?
    

    View Slide

83. “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.
    

    View Slide

84. Wells Fargo’s eye-scan based log-in was too fast for
    users, they had to slow it down.
    

    View Slide

85. The Kayak Effect
    The “labour illusion” - users value things more when they believe effort has been put into them
    

    View Slide

86. To make conversations with chatbots feel more natural: slow down
    response time and add a typing indicator
    Image via Shan Shen
    

    View Slide

87. In the end …
    

    View Slide

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

    View Slide

89. Our developers use the network conditioner to simulate a bad
    connexion on the iPhone
    

    View Slide

90. Building a performant product is a
    team effort!
    

    View Slide

91. Building Designers and developers
    need to communicate and work
    together to come up with the best
    solution possible.
    

    View Slide

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

    View Slide

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

    View Slide

94. stephaniewalter.design @WalterStephanie
    Attribution-NonCommercial-ShareAlike 4.0 International
    

    View Slide