Ingredient of awesome app - DroidCon Paris 2014

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

description 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. Speaker: Taylor Ling I am very passionate about User Experience (UX), not so much on the ethnography part, but more on the User Interface execution that can directly influence UX and Usability, particularly on the mobile devices (Android always come first!). I am currently the GDE for UX/Design, and enjoy going around the world to share my experience on UI/UX Design. Currently crafting pixels at

Transcript of Ingredient of awesome app - DroidCon Paris 2014

  • 1. Ingredients of Awesome app

2. Good to Great to Awesome 3. GOOD GREAT AWESOMEStableUses Best PracticesUser-testedRuns 4.0 and aboveProvides solid experienceRevise everythingBranding and ConsistencyVariationPolishGuenther Beyer 4. AWESOMESupports user goals with frustration-free experiencesProvides customer delightProvides sufficient help for potential blockersEmpower the users and build positive relationshipMake them feel magical 5. 1 Animations/Transitions 6. 1 Animations/TransitionsWHYProvide continuity experienceCapture and focus attentionProvide feedback for interactionsGive information - Spatial Relationship, FunctionalityHelp user in perceiving the changes without heavy processing 7. 1 Animations/TransitionsRULESPurposeful and InformativeSubtle yet noticeableButtery smooth (60fps)Proper motion speedDont overdo it 8. 2 Feedback 9. 2 FeedbackWHYInteractions happens on/in the glass surface no physical feedbackTo communicate hidden rulesTo let the user know the system is working on your requestTo provide seamless experience 10. 2 FeedbackRULESFeedback must be informativeFeedback must have proper numberFeedback must be planned and prioritizedFeedback must be immediateFeedback can be visual, acoustic, tactile 11. TRIGGER RULES FEEDBACK LOOPS & MODESMicrointeractions Dan Saffer 12. Example: Overscroll Edge EffectTRIGGER RULES FEEDBACK LOOPS & MODES 13. Interaction feedback is very importantto give the touch confidence.And always care about the touch area. 14. Dialog is a very direct way of givinginformation or capture attention. But itcan be annoying.Minimize the usage and use it wisely.And dont confuse the user. 15. Error Message tells the user whysomething isnt work but dont just tellthem why it doesnt work, if its possible,give them the solution/possible action aswell.Better yet, try not to allow them to executethe error. 16. Loading indicator tells the user somethingis working at the background based onthe request but do give them options orinform them if its taking too long.Also try to mask the time-wasting loadinginto a delightful experience.Better yet, try to avoid loading by eg.Preload. 17. Empty state must be handled properly sothe user knows what is needed to be donenext. Give them that action(s).Its not the job of the user to figure out whyit is empty. 18. Acoustic and tactile feedback is equallyimportant to give high quality feedback. 19. 3 Help 20. 3 HelpWHYUsers are lazy and dont like to thinkUsers require waypointUsers curious about the valueUsers need help to operate professional applicationUsers always rely on default settings 21. 3 HelpRULESHelp must be genuineHelp must be planned and timed wellHelp must be simple and efficientHelp must be user-oriented 22. Quick Tutorial gives brief introductionof the value of the app to the user(read: not on how to use the app).And do allow the user to skip it. 23. Users sometimes regret for theiraction, so if its possible, allow them toUndo For less critical stuffs, it can beas forgivable as possible.And make it easy to undo. 24. Confirmation is a must if theaction is a critical one eg. Delete.Do not ask for every actionsthough. 25. Help section always helps - even if itsjust 0.1% of the users will be using it.And make it available offline. 26. Cares about the default settings thatyou are putting in. 95% of the usersrely on the default settings. 27. 4 Touch Gestures 28. 4 Touch GesturesWHYEmpower the userEnhance interactivityNatural manipulationPotentially quicker interaction 29. 4 Touch GesturesRULESGestures must coupled with great corresponding animationsGestures should not be the only interaction for a certain taskGestures must not have conflictsGestures must be discoverable 30. Always explore simple yet efficientgestures that enhance interactivity.Touch screen isnt just meant for tap.Chrome is a great example. 31. Sensitive for gesture trend thatenhance interaction experience.Eg. Swipe to dismiss/delete is almostlike a must-have gesture for itemmanipulation. 32. Avoid gesture conflict at all cost!Bad example: In Rdio, full screen swipecalls Navigation Drawer, and it conflictwith the progress slider. 33. Dont be afraid to explore and integrategestures to enhance usability!Example: Double swipe is currently atsystem level only, but it can be very wellintegrated in app interaction as well!Carbon for Twitter 34. 5 Polish 35. From the moment the user launchesthe app 36. to a button, a line of text, a picture 37. until the user quit the app.Everything counts. 38. 12345Animations/TransitionsFeedbackHelpTouch GesturesPolish, polish, polish 39. Perfection is not attainable, but if we chaseperfection we can catch excellence.Vince Lombardi 40. Taylor