Crafting High Quality Feedback in App Design

My personal deck for 2014/2015.

One of the elements that most of the designers and developers tend to forget is the feedback – and every single feedback crafted in the app plays a important role (or more) in minimising user frustration and turn that into good user experience, regardless its effect size. Join this session to discover (or re-discover) the importance of feedback in interface design which can definitely help in crafting the next awesome app in the Play Store!

Transcript

1. Feedback in App Design
   Interaction
   

   View Slide

2. Feedback
   in UI Design
   The importance of
   What is ?
   

   View Slide

3. Feedback
   in UI Design
   The importance of
   WHY
   A way of letting users know that the system is
   working on your request
   A way to communicate with users about the
   result of an action
   A way to inform users about the hidden rules
   of the system
   in the physical world
   Traffic Light
   What is ?
   

   View Slide

4. way of letting the user know that the system is
   orking on your request
   way to communicate with the user about the
   sult of an action
   A way to inform the user about the hidden rules
   of the system
   Feedback in the physical world
   Lift
   Traffic Light
   Sometimes users of the traffic
   light system are uncertain about
   their next actions (to stop, to cross
   etc.), and thus wasted their time or
   even risk their lifes.
   Most of the time, it’s due to the
   insufficient feedback from the
   traffic light system (lack of count
   down timer, delayed feedback etc.)
   

   View Slide

5. Feedback in the physical world
   Traffic Light
   Traffic Light
   Lift (Elevator)
   How often you see people keep
   pressing the Close button after the
   first time, hoping the system receives
   that closing command?
   This is one example of the lack of
   feedback on the hidden rules (buffer
   time applied after the close button is
   pressed) that only the designer/
   engineer knows about it. Users have
   no idea at all, therefore they keep
   doing something unnecessary.
   

   View Slide

6. Feedback
   Why is important?
   

   View Slide

7. Feedback
   Why is important?
   Feedback provides reassurance, even sometimes
   it might be negative results
   Feedback helps in managing user expectation
   Feedback helps in learning and developing
   skilled behaviour
   in App Design
   

   View Slide

8. Why is important?
   Feedback provides reassurance, even sometimes
   it might be negative results
   Feedback helps in managing user expectation
   in App Design
   reason that causes user frustration
   #1
   Feedback
   

   View Slide

9. Feedback
   Why is important?
   in App Design
   Interactions happen on/in glass surface
   

   View Slide

10. Why is important?
    Interactions happen on/in glass surface
    No Physical Feedback
    

    View Slide

11. Why is important?
    Interactions happen on/in glass surface
    No Physical Feedback
    

    View Slide

12. Trigger Rules Loops
    Feedback
    Microinteractions - Dan Saffer
    

    View Slide

13. Rules Loops
    Feedback
    Trigger
    Manual
    System
    Button tapped?
    Gesture applied?
    Voice input?
    Errors?
    At the location?
    Incoming data?
    

    View Slide

14. Trigger
    Rules
    Loops
    Feedback
    What we
    designed and
    implemented -
    the users don’t
    know it most
    of the time
    

    View Slide

15. Trigger Rules Loops
    Feedback
    Some ways to
    communicate
    the rules to
    the users
    

    View Slide

16. Trigger Rules
    Loops
    Feedback
    and Modes
    One-off?
    Repetitive?
    What happen if
    there are
    interruptions?
    Does it behave
    differently at
    different mode?
    

    View Slide

17. Trigger Rules Loops
    Feedback
    Overscroll Edge Effect
    One good example of a microinteraction in Android.
    The trigger is about user input in scrolling the list and reached the top of the
    list. The rule on this microinteraction doesn’t allow the users to scroll beyond
    the top/bottom of the list. The feedback is that overscroll edge effect, giving
    hint to the users that they already reached the top. The loops in this case is
    about keep showing the effect to the users regardless of the number of
    overscroll attempt.
    

    View Slide

18. Trigger Rules Loops
    Feedback
    Vibration Mode (Manual Trigger via Volume button)
    Another good example of a microinteraction in Android.
    When you turn on the vibration mode via the volume button, 1st feedback you
    get is the subtle vibration from the device, indicating the vibration mode is
    now active.
    Follow up on that, when the users want to know if the vibration mode is active,
    they just have to check on the status bar and look for the vibration icon.
    

    View Slide

19. Feedback
    When should/could occur?
    

    View Slide

20. Feedback
    When should/could occur?
    After a
    manual
    trigger
    

    View Slide

21. Feedback
    When should/could occur?
    System
    initiated
    trigger
    

    View Slide

22. Feedback
    When should/could occur?
    System
    trigger that
    changed
    μinteraction
    

    View Slide

23. Feedback
    When should/could occur?
    Edge
    of rule
    

    View Slide

24. Feedback
    When should/could occur?
    System
    cannot
    execute
    command
    

    View Slide

25. Feedback
    When should/could occur?
    Showing
    progress
    

    View Slide

26. Feedback
    When should/could occur?
    Beginning
    or the end
    of process
    

    View Slide

27. Feedback
    When should/could occur?
    Beginning,
    the end or in
    the middle
    of mode
    switching
    

    View Slide

28. Rules on crafting high quality feedback
    0
    1
    

    View Slide

29. Rules on crafting high quality feedback
    0
    1
    

    View Slide

30. Feedback must be immediate
    #1
    

    View Slide

31. Feedback must be intelligible
    RULE 1
    Users expect something to happen
    after interaction
    Any delay, even slight delay can
    cause the users to give up
    Delayed feedback can cause
    undesired result due to multiple user
    attempts
    Feedback must be immediate
    #1
    

    View Slide

32. Feedback must be intelligible
    RULE 1
    Feedback must be immediate
    #1
    Users expect something to happen
    after interaction
    Any delay, even slight delay can
    cause the users to give up
    Delayed feedback can cause
    undesired result due to multiple user
    attempts
    

    View Slide

33. Feedback must be intelligible
    RULE 1
    Users expect something to happen
    after interaction
    Any delay, even slight delay can
    cause the users to give up
    Delayed feedback can cause
    undesired result due to multiple user
    attempts
    

    View Slide

34. Feedback must be informative and meaningful
    #2
    

    View Slide

35. Feedback must be intelligible
    RULE 1
    Convey what has happened and
    what the users can do about it
    Do not ever show error code that is
    not meaningful to the users
    As simple as possible, but not overly
    simple
    

    View Slide

36. Feedback must be intelligible
    RULE 1
    Convey what has happened and
    what the users can do about it
    Do not ever show error code that is
    not meaningful to the users
    As simple as possible, but not overly
    simple
    

    View Slide

37. Feedback quantity must be balanced
    #3
    

    View Slide

38. Feedback must be intelligible
    RULE 1
    Poor feedback can cause distraction
    and irritation to the users
    Too much feedback to the users can
    cause annoyance, and even
    ignorance from the users
    

    View Slide

39. Feedback weight must be planned
    #4
    

    View Slide

40. Feedback must be intelligible
    RULE 1
    Every action needs to be confirmed,
    but not everyone of them need to be
    intrusive
    Show heavy feedback to the users
    only for the irreversible actions eg.
    deletion, sending money, huge data
    usage etc.
    

    View Slide

41. Feedback must be intelligible
    RULE 1
    Every action needs to be confirmed,
    but not everyone of them need to be
    intrusive
    Show heavy feedback to the users
    only for the irreversible actions eg.
    deletion, sending money, huge data
    usage etc.
    

    View Slide

42. Feedback must be prioritised
    #5
    

    View Slide

43. Feedback must be intelligible
    RULE 1
    Too much feedback caused by every
    system trigger can be really
    disturbing
    Prioritise the feedback so that
    important signal can capture the
    users’ attention
    

    View Slide

44. Feedback must be easy to understand
    #6
    

    View Slide

45. Feedback must be intelligible
    RULE 1
    Use simple words to communicate
    the situation - easier to understand
    For animation, too many of them at
    the same time can cause confusion
    and the user will have hard time to
    understand - the core feedback must
    be easily noticed and understood
    

    View Slide

46. Feedback must be intelligible
    RULE 1
    BAD EXAMPLE
    Use simple words to communicate
    the situation - easier to understand
    For animation, too many of them at
    the same time can cause confusion
    and the user will have hard time to
    understand - the core feedback must
    be easily noticed and understood
    

    View Slide

47. Feedback must be intelligible
    RULE 1
    Use simple words to communicate
    the situation - easier to understand
    For animation, too many of them at
    the same time can cause confusion
    and the user will have hard time to
    understand - the core feedback must
    be easily noticed and understood
    

    View Slide

48. Feedback must not be confusing
    #7
    

    View Slide

49. Feedback must be intelligible
    RULE 1
    Feedback shown to the users must be
    correct, contextual and not confusing
    It’s not the job of the users to figure
    out what’s wrong when something
    happen (especially when there isn’t
    any input from the users)
    

    View Slide

50. Feedback must be intelligible
    RULE 1
    Feedback shown to the users must be
    correct, contextual and not confusing
    It’s not the job of the users to figure
    out what’s wrong when something
    happen (especially when there isn’t
    any input from the users)
    

    View Slide

51. Feedback can be playful
    #8
    

    View Slide

52. Feedback must be intelligible
    RULE 1
    Feedback
    Feedback such as loading doesn’t
    always have to be boring
    Mask the waiting experience and
    turn that into a delightful moment
    NOT an opportunity for you to show
    advertisement
    

    View Slide

53. Feedback can be unique and creative
    (but don’t sacrifice consistency)
    #9
    

    View Slide

54. Feedback must be intelligible
    RULE 1
    Feedback
    Unique feedback design helps
    establishing the brand, but do not
    sacrifice consistency if there is a
    common feedback pattern
    Familiar visual feedback pattern like
    snackbar, toast, dialog etc. can
    communicate information swiftly
    without learning
    

    View Slide

55. Feedback must not be misleading
    #10
    

    View Slide

56. Feedback must be intelligible
    RULE 1
    Less than a minute…
    Users are very calculative, especially
    on time
    It’s always good to predict the total
    time for long process, but try to
    overestimate so the users don’t get
    frustrated if it isn’t accurate as told
    

    View Slide

57. Feedback
    Immediate Informative Good Quantity Planned
    Prioritised Understandable Clear Playful
    Unique Honest
    

    View Slide

58. Taylor Ling
    Mobile Experience Designer @ Snappymob
    Google Expert for UX/UI
    Master of AndroidUIUX.com
    +taylorling
    @taylorling
    

    View Slide