Ingredients of Awesome App

There are an increasing number of apps that come with great design nowadays, and most of the carefully crafted apps resonate with the Android users due to their great and consistent User Experience (UX) design. Many developers and designers try hard to create an app with great UX by largely referring to the Android Design Guideline, however, to make remarkable UX design is certainly more than that, and often they missed certain important items from their check list. If you want to check if your app(s) is heading the right direction to awesomeness, be sure to check out this ‘advanced’ check list in making awesome Android apps.

Note: This is a modified version of the decks that I used for my presentation in DroidCon Tunisia to ensure every deck is readable (the original one have many animations and movements which doesn't help in reading the main content).

Transcript

1. Ingredients of Awesome app
   DROIDCON TUNISIA
   ©Taylor Ling 2014
   

   View Slide

2. Introduction
   

   View Slide

3. Introduction
   Taylor Ling
   +taylorling
   @taylorling
   

   View Slide

4. Introduction
   Malaysia
   Tunisia
   ~13 hours flight time
   

   View Slide

5. Good to Great to Awesome
   

   View Slide

6. Good? Great? Awesome?
   GOOD GREAT AWESOME
   Stable
   Uses Best Practices
   User-tested
   Runs 4.0 and above
   Provides solid experience
   Remove everything
   Branding and Consistency
   Variation
   Polish
   Guenther Beyer
   http://bit.ly/androiddesigngtg
   

   View Slide

7. Ingredients of Awesome app
   

   View Slide

8. Ingredients of Awesome app
   • Subtle, yet noticeable
   • Buttery smooth, but not too fast/too slow
   • Purposeful and/or Informative
   • Don’t overdo it (because it kills)
   Ingredient #1 Animations
   

   View Slide

9. Ingredients of Awesome app
   Great, it is removed! OK, something is added. I got it.
   

   View Slide

10. Ingredients of Awesome app
    OK, this is checked.
    Checked.
    Last spam checked. Ready to delete.
    

    View Slide

11. Ingredients of Awesome app
    Selected Item
    

    View Slide

12. Ingredients of Awesome app
    OK, now I’ve back to
    homescreen.
    Great.
    Wait, what the heck
    have just happen?
    

    View Slide

13. Ingredients of Awesome app
    Evgeny Belyaev
    bit.ly/upscaleandroid
    Upscale Android
    

    View Slide

14. Ingredients of Awesome app
    Ingredient #2 Feedback
    • Interaction
    • Dialog
    • Error Message
    • Loading
    • Navigation
    • Empty State
    TRIGGER RULES FEEDBACK LOOPS
    & MODES
    FEEDBACK
    Microinteractions – Dan Saffer
    

    View Slide

15. Ingredients of Awesome app
    Example: Overscroll Edge Effect
    TRIGGER RULES FEEDBACK LOOPS
    & MODES
    

    View Slide

16. Ingredients of Awesome app
    Interface/Interaction feedback is
    very important to give the touch
    confidence.
    And care about the touch area.
    

    View Slide

17. Ingredients of Awesome app
    Give sufficient touch area. You are
    designing for finger, not needle.
    

    View Slide

18. Ingredients of Awesome app
    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.
    

    View Slide

19. Ingredients of Awesome app
    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, tell them what’s the solution
    as well.
    Better yet, try not to allow them to
    execute the error.
    Screenshot is not allowed for security purpose.
    

    View Slide

20. Ingredients of Awesome app
    Loading indicator tells the user
    something is working at the
    background due to the selection – 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.
    

    View Slide

21. Ingredients of Awesome app
    Visual Feedback for Navigation give
    the immediate impression to the user
    about the app structure, and in some
    cases, allow them to focus on app
    navigation.
    It’s not the job of the user to remember
    the app hierarchy.
    

    View Slide

22. Ingredients of Awesome app
    Empty state must be handled properly
    so the user knows what is needed to
    be done to fill it up. Give them that
    action(s).
    It’s not the job of the user to figure out
    why it is empty.
    

    View Slide

23. • Quick Tutorial
    • Allow Undo/Skip
    • Provide Helps
    • Confirmation
    Ingredients of Awesome app
    Ingredient #3 Help
    

    View Slide

24. Ingredients of Awesome app
    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.
    

    View Slide

25. Ingredients of Awesome app
    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.
    

    View Slide

26. Ingredients of Awesome app
    Help section helps.
    And make it offline if possible.
    

    View Slide

27. Ingredients of Awesome app
    Confirmation is a must if the
    action is a critical one eg.
    Delete.
    Do not ask for every actions
    though.
    

    View Slide

28. Ingredients of Awesome app
    Ingredient #4 Gesture
    • One important part that provides awesome user
    experience
    • Empowers the user, make them feel like a wizard in
    control – enhance interactivity
    • Must coupled with great corresponding animations
    

    View Slide

29. Ingredients of Awesome app
    Always explore simple yet efficient
    gestures that enhance interactivity.
    Touch screen isn’t just meant for
    tap.
    Chrome for Android set a great
    example.
    

    View Slide

30. Ingredients of Awesome app
    Sensitive for gesture trend that
    enhance user experience.
    Eg. Swipe to dismiss/delete is
    almost like a must-have gesture for
    item manipulation.
    

    View Slide

31. Ingredients of Awesome app
    Look out for potential gesture
    conflict!
    Bad example: In Rdio, full screen
    swipe calls Navigation Drawer, and it
    conflict with the progress slider.
    

    View Slide

32. Ingredients of Awesome app
    Don’t be afraid to be the first to
    integrate and test new 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
    

    View Slide

33. Ingredients of Awesome app
    Ingredient #5 Polish, polish, polish
    

    View Slide

34. Ingredients of Awesome app
    Every single details can make or
    break the user experience.
    From the moment the user launch
    the app…
    

    View Slide

35. Ingredients of Awesome app
    Every single details can make or
    break the user experience.
    …to a button, a line of text, a picture…
    Circle button widget for Android By Markus Hi
    https://github.com/markushi/android-circlebutton
    

    View Slide

36. Ingredients of Awesome app
    Every single details can make or
    break the user experience.
    …until the user quit the app.
    Everything counts.
    

    View Slide

37. Ingredients of Awesome app
    1
    User always change app Settings and customize
    according to their preferences.
    doesn’t
    UX MYTH
    

    View Slide

38. Ingredients of Awesome app
    1
    95%
    5%
    These users
    always using
    application with
    default settings.
    These users
    explore and
    customize from
    default settings.
    Always care about the default settings.
    UX MYTH
    

    View Slide

39. User love to learn new things.
    Ingredients of Awesome app
    2
    doesn’t
    UX MYTH
    User only learn when it is a must to achieve their
    goal. Learning is hard; users are lazy. They want
    to learn once and applies everywhere. They don’t
    want to think.
    

    View Slide

40. Ingredients of Awesome app
    2
    UX MYTH
    CONSISTENCY
    FAMILIARITY
    

    View Slide

41. User have no patience, they can’t wait .
    Ingredients of Awesome app
    3
    UX MYTH
    Well Informed Worthwhile Delightful
    

    View Slide

42. User doesn’t know what they want.
    Ingredients of Awesome app
    4
    UX MYTH
    User doesn’t know what they need and how
    to achieve what they want.
    

    View Slide

43. Want
    Ingredients of Awesome app
    4
    UX MYTH
    Need
    Awesome things happen here
    

    View Slide

44. Ingredients of Awesome app
    One Few more things…
    

    View Slide

45. Ingredients of Awesome app
    Attention to details shows that you
    care about the user and their
    experiences using your product.
    

    View Slide

46. Ingredients of Awesome app
    Embrace design is the way to go.
    

    View Slide

47. Ingredients of Awesome app
    Always ready to support user like there’s no tomorrow because
    user base is your most important asset.
    24x7
    

    View Slide

48. Closing
    

    View Slide

49. Ingredients of Awesome app
    Perfection is not attainable, but if we chase perfection we
    can catch excellence.
    Vince Lombardi
    

    View Slide

50. Ingredients of Awesome app
    Taylor Ling
    AndroidUIUX.com
    androiduiux@gmail.com
    Shot me question now if you have any!
    

    View Slide