Ingredients of Awesome app
Good to Great to Awesome
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
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
Animations/Transitions1
Animations/Transitions1
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
Animations/Transitions1
RULES
Purposeful and Informative
Subtle yet noticeable
Buttery smooth (60fps)
Proper motion speed
Don’t overdo it
Feedback2
Feedback2
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
Feedback2
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
Microinteractions – Dan Saffer
TRIGGER RULES FEEDBACK LOOPS & MODES
Example: Overscroll Edge Effect
TRIGGER RULES FEEDBACK LOOPS & MODES
Interaction feedback is very important to give the touch confidence.
And always care about the touch area.
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.
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.
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.
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.
Acoustic and tactile feedback is equally important to give high quality feedback.
Help3
Help3
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
Help3
RULES
Help must be genuine
Help must be planned and timed well
Help must be simple and efficient
Help must be user-oriented
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.
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.
Confirmation is a must if the action is a critical one eg. Delete.
Do not ask for every actions though.
Help section always helps - even if it’s just 0.1% of the users will be using it.
And make it available offline.
Cares about the default settings that you are putting in. 95% of the users rely on the default settings.
Touch Gestures4
Touch Gestures4
WHY
Empower the user
Enhance interactivity
Natural manipulation
Potentially quicker interaction
Touch Gestures4
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
Always explore simple yet efficient gestures that enhance interactivity. Touch screen isn’t just meant for tap.
Chrome is a great example.
Sensitive for gesture trend that enhance interaction experience.
Eg. Swipe to dismiss/delete is almost like a must-have gesture for item manipulation.
Avoid gesture conflict at all cost!
Bad example: In Rdio, full screen swipe calls Navigation Drawer, and it conflict with the progress slider.
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
Polish³5
From the moment the user launches the app…
…to a button, a line of text, a picture…
…until the user quit the app.
Everything counts.
1
5
4
3
2
Animations/Transitions
Feedback
Help
Touch Gestures
Polish, polish, polish
Perfection is not attainable, but if we chase perfection we can catch excellence.
Vince Lombardi
Taylor LingAndroidUIUX.com