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