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

Ingredients of Awesome app v2 - Droidcon Paris

005b3ccff562115ccb49c092038591b0?s=47 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.

005b3ccff562115ccb49c092038591b0?s=128

Taylor Ling

September 22, 2014
Tweet

Transcript

  1. Ingredients of Awesome app FOR REFERENCE USE ONLY

  2. Good to Great to Awesome FOR REFERENCE USE ONLY

  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
  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
  5. Animations/Transitions 1 FOR REFERENCE USE ONLY

  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
  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
  8. FOR REFERENCE USE ONLY

  9. FOR REFERENCE USE ONLY

  10. FOR REFERENCE USE ONLY

  11. FOR REFERENCE USE ONLY

  12. FOR REFERENCE USE ONLY

  13. Feedback 2 FOR REFERENCE USE ONLY

  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
  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
  16. Microinteractions – Dan Saffer TRIGGER RULES FEEDBACK LOOPS & MODES

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

    FOR REFERENCE USE ONLY
  18. Interaction feedback is very important to give the touch confidence.

    And always care about the touch area. FOR REFERENCE USE ONLY
  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
  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
  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
  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
  23. Acoustic and tactile feedback is equally important to give high

    quality feedback. FOR REFERENCE USE ONLY
  24. Help 3 FOR REFERENCE USE ONLY

  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
  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
  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
  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
  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
  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
  31. Cares about the default settings that you are putting in.

    95% of the users rely on the default settings. FOR REFERENCE USE ONLY
  32. Touch Gestures 4 FOR REFERENCE USE ONLY

  33. Touch Gestures 4 WHY Empower the user Enhance interactivity Natural

    manipulation Potentially quicker interaction FOR REFERENCE USE ONLY
  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
  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
  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
  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
  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
  39. Polish³ 5 FOR REFERENCE USE ONLY

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

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

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

    USE ONLY
  43. 1 5 4 3 2 Animations/Transitions Feedback Help Touch Gestures

    Polish, polish, polish FOR REFERENCE USE ONLY
  44. Perfection is not attainable, but if we chase perfection we

    can catch excellence. Vince Lombardi FOR REFERENCE USE ONLY
  45. Taylor Ling AndroidUIUX.com FOR REFERENCE USE ONLY