Download - Ingredient of awesome app - DroidCon Paris 2014

Transcript
Page 1: Ingredient of awesome app - DroidCon Paris 2014

Ingredients of Awesome app

Page 2: Ingredient of awesome app - DroidCon Paris 2014

Good to Great to Awesome

Page 3: Ingredient of awesome app - DroidCon Paris 2014

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

Page 4: Ingredient of awesome app - DroidCon Paris 2014

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

Page 5: Ingredient of awesome app - DroidCon Paris 2014

Animations/Transitions1

Page 6: Ingredient of awesome app - DroidCon Paris 2014

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

Page 7: Ingredient of awesome app - DroidCon Paris 2014

Animations/Transitions1

RULES

Purposeful and Informative

Subtle yet noticeable

Buttery smooth (60fps)

Proper motion speed

Don’t overdo it

Page 8: Ingredient of awesome app - DroidCon Paris 2014

Feedback2

Page 9: Ingredient of awesome app - DroidCon Paris 2014

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

Page 10: Ingredient of awesome app - DroidCon Paris 2014

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

Page 11: Ingredient of awesome app - DroidCon Paris 2014

Microinteractions – Dan Saffer

TRIGGER RULES FEEDBACK LOOPS & MODES

Page 12: Ingredient of awesome app - DroidCon Paris 2014

Example: Overscroll Edge Effect

TRIGGER RULES FEEDBACK LOOPS & MODES

Page 13: Ingredient of awesome app - DroidCon Paris 2014

Interaction feedback is very important to give the touch confidence.

And always care about the touch area.

Page 14: Ingredient of awesome app - DroidCon Paris 2014

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.

Page 15: Ingredient of awesome app - DroidCon Paris 2014

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.

Page 16: Ingredient of awesome app - DroidCon Paris 2014

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.

Page 17: Ingredient of awesome app - DroidCon Paris 2014

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.

Page 18: Ingredient of awesome app - DroidCon Paris 2014

Acoustic and tactile feedback is equally important to give high quality feedback.

Page 19: Ingredient of awesome app - DroidCon Paris 2014

Help3

Page 20: Ingredient of awesome app - DroidCon Paris 2014

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

Page 21: Ingredient of awesome app - DroidCon Paris 2014

Help3

RULES

Help must be genuine

Help must be planned and timed well

Help must be simple and efficient

Help must be user-oriented

Page 22: Ingredient of awesome app - DroidCon Paris 2014

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.

Page 23: Ingredient of awesome app - DroidCon Paris 2014

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.

Page 24: Ingredient of awesome app - DroidCon Paris 2014

Confirmation is a must if the action is a critical one eg. Delete.

Do not ask for every actions though.

Page 25: Ingredient of awesome app - DroidCon Paris 2014

Help section always helps - even if it’s just 0.1% of the users will be using it.

And make it available offline.

Page 26: Ingredient of awesome app - DroidCon Paris 2014

Cares about the default settings that you are putting in. 95% of the users rely on the default settings.

Page 27: Ingredient of awesome app - DroidCon Paris 2014

Touch Gestures4

Page 28: Ingredient of awesome app - DroidCon Paris 2014

Touch Gestures4

WHY

Empower the user

Enhance interactivity

Natural manipulation

Potentially quicker interaction

Page 29: Ingredient of awesome app - DroidCon Paris 2014

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

Page 30: Ingredient of awesome app - DroidCon Paris 2014

Always explore simple yet efficient gestures that enhance interactivity. Touch screen isn’t just meant for tap.

Chrome is a great example.

Page 31: Ingredient of awesome app - DroidCon Paris 2014

Sensitive for gesture trend that enhance interaction experience.

Eg. Swipe to dismiss/delete is almost like a must-have gesture for item manipulation.

Page 32: Ingredient of awesome app - DroidCon Paris 2014

Avoid gesture conflict at all cost!

Bad example: In Rdio, full screen swipe calls Navigation Drawer, and it conflict with the progress slider.

Page 33: Ingredient of awesome app - DroidCon Paris 2014

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

Page 34: Ingredient of awesome app - DroidCon Paris 2014

Polish³5

Page 35: Ingredient of awesome app - DroidCon Paris 2014

From the moment the user launches the app…

Page 36: Ingredient of awesome app - DroidCon Paris 2014

…to a button, a line of text, a picture…

Page 37: Ingredient of awesome app - DroidCon Paris 2014

…until the user quit the app.

Everything counts.

Page 38: Ingredient of awesome app - DroidCon Paris 2014

1

5

4

3

2

Animations/Transitions

Feedback

Help

Touch Gestures

Polish, polish, polish

Page 39: Ingredient of awesome app - DroidCon Paris 2014

Perfection is not attainable, but if we chase perfection we can catch excellence.

Vince Lombardi

Page 40: Ingredient of awesome app - DroidCon Paris 2014

Taylor LingAndroidUIUX.com