Slide 1
Slide 1 text
Ingredients of Awesome app
FOR REFERENCE USE ONLY
Slide 2
Slide 2 text
Good to Great to Awesome
FOR REFERENCE USE ONLY
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Animations/Transitions
1
FOR REFERENCE USE ONLY
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Animations/Transitions
1
RULES
Purposeful and Informative
Subtle yet noticeable
Buttery smooth (60fps)
Proper motion speed
Don’t overdo it
FOR REFERENCE USE ONLY
Slide 8
Slide 8 text
FOR REFERENCE USE ONLY
Slide 9
Slide 9 text
FOR REFERENCE USE ONLY
Slide 10
Slide 10 text
FOR REFERENCE USE ONLY
Slide 11
Slide 11 text
FOR REFERENCE USE ONLY
Slide 12
Slide 12 text
FOR REFERENCE USE ONLY
Slide 13
Slide 13 text
Feedback
2
FOR REFERENCE USE ONLY
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
Microinteractions – Dan Saffer
TRIGGER RULES FEEDBACK LOOPS & MODES
FOR REFERENCE USE ONLY
Slide 17
Slide 17 text
Example: Overscroll Edge Effect
TRIGGER RULES FEEDBACK LOOPS & MODES
FOR REFERENCE USE ONLY
Slide 18
Slide 18 text
Interaction feedback is very important
to give the touch confidence.
And always care about the touch area.
FOR REFERENCE USE ONLY
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Acoustic and tactile feedback is equally
important to give high quality feedback.
FOR REFERENCE USE ONLY
Slide 24
Slide 24 text
Help
3
FOR REFERENCE USE ONLY
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
Confirmation is a must if the
action is a critical one eg. Delete.
Do not ask for every actions
though.
FOR REFERENCE USE ONLY
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Cares about the default settings that
you are putting in. 95% of the users
rely on the default settings.
FOR REFERENCE USE ONLY
Slide 32
Slide 32 text
Touch Gestures
4
FOR REFERENCE USE ONLY
Slide 33
Slide 33 text
Touch Gestures
4
WHY
Empower the user
Enhance interactivity
Natural manipulation
Potentially quicker interaction
FOR REFERENCE USE ONLY
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
Polish³
5
FOR REFERENCE USE ONLY
Slide 40
Slide 40 text
From the moment the user launches
the app…
FOR REFERENCE USE ONLY
Slide 41
Slide 41 text
…to a button, a line of text, a picture…
FOR REFERENCE USE ONLY
Slide 42
Slide 42 text
…until the user quit the app.
Everything counts.
FOR REFERENCE USE ONLY
Slide 43
Slide 43 text
1
5
4
3
2
Animations/Transitions
Feedback
Help
Touch Gestures
Polish, polish, polish
FOR REFERENCE USE ONLY
Slide 44
Slide 44 text
Perfection is not attainable, but if we chase
perfection we can catch excellence.
Vince Lombardi
FOR REFERENCE USE ONLY
Slide 45
Slide 45 text
Taylor Ling
AndroidUIUX.com
FOR REFERENCE USE ONLY