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

Ingredients of Awesome app v2 - Droidcon Paris

Taylor Ling
September 22, 2014

Ingredients of Awesome app v2 - Droidcon Paris

A version 2 of my previous presentation on this topic with some additional Whys and Rules for each ingredient.

Taylor Ling

September 22, 2014
Tweet

More Decks by Taylor Ling

Other Decks in Design

Transcript

  1. Ingredients of Awesome app
    FOR REFERENCE USE ONLY

    View full-size slide

  2. Good to Great to Awesome
    FOR REFERENCE USE ONLY

    View full-size slide

  3. GOOD GREAT AWESOME
    Stable
    Uses Best Practices
    User-tested
    Runs 4.0 and above
    Provides solid experience
    Guenther Beyer
    http://bit.ly/androiddesigngtg
    Revise everything
    Branding and Consistency
    Variation
    Polish
    FOR REFERENCE USE ONLY

    View full-size slide

  4. AWESOME
    Supports user goals with frustration-free experiences
    Provides customer delight
    Provides sufficient help for potential blockers
    Empower the users and build positive relationship
    Make them feel magical
    FOR REFERENCE USE ONLY

    View full-size slide

  5. Animations/Transitions
    1
    FOR REFERENCE USE ONLY

    View full-size slide

  6. Animations/Transitions
    1
    WHY
    Provide continuity experience
    Capture and focus attention
    Provide feedback for interactions
    Give information - Spatial Relationship, Functionality
    Help user in perceiving the changes without heavy processing
    FOR REFERENCE USE ONLY

    View full-size slide

  7. Animations/Transitions
    1
    RULES
    Purposeful and Informative
    Subtle yet noticeable
    Buttery smooth (60fps)
    Proper motion speed
    Don’t overdo it
    FOR REFERENCE USE ONLY

    View full-size slide

  8. FOR REFERENCE USE ONLY

    View full-size slide

  9. FOR REFERENCE USE ONLY

    View full-size slide

  10. FOR REFERENCE USE ONLY

    View full-size slide

  11. FOR REFERENCE USE ONLY

    View full-size slide

  12. FOR REFERENCE USE ONLY

    View full-size slide

  13. Feedback
    2
    FOR REFERENCE USE ONLY

    View full-size slide

  14. Feedback
    2
    WHY
    Interactions happens on/in the glass surface – no physical feedback
    To communicate hidden rules
    To let the user know the system is working on your request
    To provide seamless experience
    FOR REFERENCE USE ONLY

    View full-size slide

  15. Feedback
    2
    RULES
    Feedback must be informative
    Feedback must have proper number
    Feedback must be planned and prioritized
    Feedback must be immediate
    Feedback can be visual, acoustic, tactile
    FOR REFERENCE USE ONLY

    View full-size slide

  16. Microinteractions – Dan Saffer
    TRIGGER RULES FEEDBACK LOOPS & MODES
    FOR REFERENCE USE ONLY

    View full-size slide

  17. Example: Overscroll Edge Effect
    TRIGGER RULES FEEDBACK LOOPS & MODES
    FOR REFERENCE USE ONLY

    View full-size slide

  18. Interaction feedback is very important
    to give the touch confidence.
    And always care about the touch area.
    FOR REFERENCE USE ONLY

    View full-size slide

  19. Dialog is a very direct way of giving
    information or capture attention. But it
    can be annoying.
    Minimize the usage and use it wisely.
    And don’t confuse the user.
    FOR REFERENCE USE ONLY

    View full-size slide

  20. Error Message tells the user why
    something isn’t work – but don’t just tell
    them why it doesn’t work, if it’s possible,
    give them the solution/possible action as
    well.
    Better yet, try not to allow them to execute
    the error.
    FOR REFERENCE USE ONLY

    View full-size slide

  21. Loading indicator tells the user something
    is working at the background based on
    the request – but do give them options or
    inform them if it’s taking too long.
    Also try to mask the time-wasting loading
    into a delightful experience.
    Better yet, try to avoid loading by eg.
    Preload.
    FOR REFERENCE USE ONLY

    View full-size slide

  22. Empty state must be handled properly so
    the user knows what is needed to be done
    next. Give them that action(s).
    It’s not the job of the user to figure out why
    it is empty.
    FOR REFERENCE USE ONLY

    View full-size slide

  23. Acoustic and tactile feedback is equally
    important to give high quality feedback.
    FOR REFERENCE USE ONLY

    View full-size slide

  24. Help
    3
    FOR REFERENCE USE ONLY

    View full-size slide

  25. Help
    3
    WHY
    Users are lazy and don’t like to think
    Users require waypoint
    Users curious about the value
    Users need help to operate professional application
    Users always rely on default settings
    FOR REFERENCE USE ONLY

    View full-size slide

  26. Help
    3
    RULES
    Help must be genuine
    Help must be planned and timed well
    Help must be simple and efficient
    Help must be user-oriented
    FOR REFERENCE USE ONLY

    View full-size slide

  27. Quick Tutorial gives brief introduction
    of the value of the app to the user
    (read: not on how to use the app).
    And do allow the user to skip it.
    FOR REFERENCE USE ONLY

    View full-size slide

  28. Users sometimes regret for their
    action, so if it’s possible, allow them to
    Undo – For less critical stuffs, it can be
    as forgivable as possible.
    And make it easy to undo.
    FOR REFERENCE USE ONLY

    View full-size slide

  29. Confirmation is a must if the
    action is a critical one eg. Delete.
    Do not ask for every actions
    though.
    FOR REFERENCE USE ONLY

    View full-size slide

  30. Help section always helps - even if it’s
    just 0.1% of the users will be using it.
    And make it available offline.
    FOR REFERENCE USE ONLY

    View full-size slide

  31. Cares about the default settings that
    you are putting in. 95% of the users
    rely on the default settings.
    FOR REFERENCE USE ONLY

    View full-size slide

  32. Touch Gestures
    4
    FOR REFERENCE USE ONLY

    View full-size slide

  33. Touch Gestures
    4
    WHY
    Empower the user
    Enhance interactivity
    Natural manipulation
    Potentially quicker interaction
    FOR REFERENCE USE ONLY

    View full-size slide

  34. Touch Gestures
    4
    RULES
    Gestures must coupled with great corresponding animations
    Gestures should not be the only interaction for a certain task
    Gestures must not have conflicts
    Gestures must be discoverable
    FOR REFERENCE USE ONLY

    View full-size slide

  35. Always explore simple yet efficient
    gestures that enhance interactivity.
    Touch screen isn’t just meant for tap.
    Chrome is a great example.
    FOR REFERENCE USE ONLY

    View full-size slide

  36. Sensitive for gesture trend that
    enhance interaction experience.
    Eg. Swipe to dismiss/delete is almost
    like a must-have gesture for item
    manipulation.
    FOR REFERENCE USE ONLY

    View full-size slide

  37. Avoid gesture conflict at all cost!
    Bad example: In Rdio, full screen swipe
    calls Navigation Drawer, and it conflict
    with the progress slider.
    FOR REFERENCE USE ONLY

    View full-size slide

  38. Don’t be afraid to explore and integrate
    gestures to enhance usability!
    Example: Double swipe is currently at
    system level only, but it can be very well
    integrated in app interaction as well!
    Carbon for Twitter
    FOR REFERENCE USE ONLY

    View full-size slide

  39. Polish³
    5
    FOR REFERENCE USE ONLY

    View full-size slide

  40. From the moment the user launches
    the app…
    FOR REFERENCE USE ONLY

    View full-size slide

  41. …to a button, a line of text, a picture…
    FOR REFERENCE USE ONLY

    View full-size slide

  42. …until the user quit the app.
    Everything counts.
    FOR REFERENCE USE ONLY

    View full-size slide

  43. 1
    5
    4
    3
    2
    Animations/Transitions
    Feedback
    Help
    Touch Gestures
    Polish, polish, polish
    FOR REFERENCE USE ONLY

    View full-size slide

  44. Perfection is not attainable, but if we chase
    perfection we can catch excellence.
    Vince Lombardi
    FOR REFERENCE USE ONLY

    View full-size slide

  45. Taylor Ling
    AndroidUIUX.com
    FOR REFERENCE USE ONLY

    View full-size slide