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.

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