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

Crafting High Quality Feedback in App Design

Taylor Ling
March 07, 2015

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!

Taylor Ling

March 07, 2015
Tweet

More Decks by Taylor Ling

Other Decks in Design

Transcript

  1. Feedback in App Design
    Interaction

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  6. Feedback
    Why is important?

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Trigger Rules Loops
    Feedback
    Microinteractions - Dan Saffer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  19. Feedback
    When should/could occur?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Feedback
    When should/could occur?
    Showing
    progress

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Rules on crafting high quality feedback
    0
    1

    View full-size slide

  29. Rules on crafting high quality feedback
    0
    1

    View full-size slide

  30. Feedback must be immediate
    #1

    View full-size 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 full-size 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 full-size 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 full-size slide

  34. Feedback must be informative and meaningful
    #2

    View full-size 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 full-size 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 full-size slide

  37. Feedback quantity must be balanced
    #3

    View full-size 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 full-size slide

  39. Feedback weight must be planned
    #4

    View full-size 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 full-size 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 full-size slide

  42. Feedback must be prioritised
    #5

    View full-size 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 full-size slide

  44. Feedback must be easy to understand
    #6

    View full-size 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 full-size 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 full-size 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 full-size slide

  48. Feedback must not be confusing
    #7

    View full-size 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 full-size 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 full-size slide

  51. Feedback can be playful
    #8

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

  55. Feedback must not be misleading
    #10

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide