Britt Barak14/2/2016
Android DesignTake 3
3
Britt BarakBritt Barak
Figure 8
Android AcademyWomen Techmakers
Largest Android Community
Android Academy - TLV
TLV - Android Academy
~ 2000 members Join Us:
Jonathan Yarkoni
Android Leader Ironsource
Android Academy Staff
Yonatan Levin
Android Google Developer
Expert
Britt Barak
Android LeadFigure8
Yossi Segev
Android Developer
Colu
Shahar Avigezer
Android DeveloperHello Heart
Community Mentors
Pairing - Stickers!
Developers red Designers green
Let the fun begin!
Material Design Principles
Today
What’s on the menu?- Bold Graphic Design- Meaningful Motion- Android Design Vision
Bold Graphic Design●Colors●Imagery
○Photography
○Iconography
Color
90 secondsFor Product Judgement
90% based on colors!
Brand recognition 80%
Learning 78%Comprehension 73%
Material Design Palette
Color Palette●Primary color - app’s personality●Accent color - draws attention
●TIP : 2-3 hues of primary + 1 accent color
Material Themes
●@android:style/Theme.AppCompat (dark version)@android:style/Theme.AppCompat.Light (light
version)@android:style/
Theme.AppCompat.Light.DarkActionBar
android:theme="@style/AppTheme"
Customize Native Widgets Color
Define Resources
colors.xml
<color name="indigo_300">#7986CB</color><color name="indigo_500">#3F51B5</color><color name="indigo_700">#303F9F</color><color name="pink_a200">#FF4081</color>
Define Resources
styles.xml<style name="AppTheme"
parent="Theme.AppCompat.Light"> <item name="colorPrimary">@color/indigo_500</item> <item name="colorPrimaryDark">@color/indigo_700</item> <item name="colorAccent">@color/pink_a200</item></style>
Coloring Programmatically
Tinting 21+
drawable.setTint(color);
Tinting
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable.mutate(), color);
Coloring Dynamically
Palette Class
Extracting palette from image
Palette Class
Extracting palette from image
VibrantVibrant DarkVibrant LightMutedMuted DarkMuted Light
Palette API
// Synchronous Palette p = Palette.from(bitmap).generate();
// Asynchronous Palette.from(bitmap).generate(new PaletteAsyncListener() { public void onGenerated(Palette p) { } });
Questions ?
Imagery
Imagery
Pictures are faster than words.
●Explain ideas●Clear context●Win attention
Imagery
Photography
Illustration
Iconography
Hi, I’m Drawable!And you are?
"something that can be drawn."
Drawable
Unlike a View- does not interact with the user.
Important types
- Bitmap- Nine patch- Vector - Shapes- StateList
BitmapDrawable
wraps a bitmapcan be tiled, stretched, or aligned.
BitmapDrawable
Nine patch
PNG image in which you can define stretchable regions
example
ShapeDrawable
draws primitive shapes:- Rectangle- Oval- Ring- Line
<shape android:shape="rectangle" > <corners android:radius="4dp" /> <stroke android:width="4dp" android:color="@color/stroke" /> <solid android:color="@color/fill"/> <padding android:left="20dp" android:top="20dp" android:right="20dp" android:bottom="20dp" /> </shape>
Questions ?
Photography
Imagery
Photography
Illustration
Iconography
Photos
●Specific to content●Personal●Inspiring
Remember
●Good quality●Not too heavy
○Out Of Memory Exceptions
●Scale types
Avatars and Thumbnails
Generally- are tap targetsRound - softer, people face shapePersonalization
RoundedBitmapDrawable drawable =
RoundedBitmapDrawableFactory
.create(getResources(), bitmap);
drawable.setCircular(true);
...and there’s a secret
Canvas canvas = new Canvas(destination);
canvas.drawBitmap(destination, 0, 0, null);
maskPaint.setXfermode(new PorterDuffXfermode(mode));
canvas.drawBitmap(source, 0 , 0 , maskPaint);
imageView.setImageBitmap(destination);
https://developer.android.com/reference/android/graphics/PorterDuffXfermode.html
Hero Image
Anchored in a prominent position●Draw in a user●Context about the content●Reinforce the brand.
Text & Icon Protection
●Shadow to icons / text●Overlay / scrim:
○Dark scrims : 20%-40% opacity
○Light scrims : 40%-60% opacity
●Blur image
Text & Icon Protection
Gradient Colored Shapes<shape android:shape="rectangle" > <corners android:radius="4dp" /> <stroke android:width="1dp" android:color="#0078a5" />
<gradient android:startColor="#0078a5" android:endColor="#00adee" android:angle="90"/> <padding android:left="8dp" android:top="2dp" android:right="8dp" android:bottom="2dp" /> </shape>
Gradient Colored Shapes<shape android:shape="rectangle" > <corners android:radius="4dp" /> <stroke android:width="1dp" android:color="#0078a5" />
<gradient android:startColor="#0078a5" android:endColor="#00adee"
android:gradientRadius="250" android:type="radial"/> <padding android:left="8dp" android:top="2dp" android:right="8dp" android:bottom="2dp" /> </shape>
Iconography
Next Session….
Option1: PNGs
Option2: Vector Graphics
1.Size - Single file2.Quality - Drawing instructions3.Animation
Do you mean SVG???
Not Exactly...
Vector Graphic
M - move toH- Horizontal lineV- Vertical lineL- Line toZ - Close path
●Uppercase - absolute, Lowercase - relative
Example
M 1,1
Example
M 1,1H 9
Example
M 1,1H 9V 9
Example
M 1,1H 9V 9H 1
Example
M 1,1H 9V 9H 1Z
SVG
VectorDrawable
A Word About Performance
- Size - max 200 x 200 dp- Different size / color → separate file.- FillType and conversion
- http://a-student.github.io/SvgToVectorDrawableConverter.Web/
Questions ?
Meaningful Motion
“I choose a lazy person to do a hard job. Because a lazy person will find
an easy way to do it.”
- Bill Gates
Animations Are Important
●Draws the eye●Instruct user●Continuous experience●User feedback●Delightful details
Today we’ll be cost - effective.
Meaningful Motion- Responsive
- The user controls the situation
- Instructive- The user know what’s happening
Responsive - the user as the prime mover
Why? - Perceived latency- Better ux (understanding how to interact)- Sense of user control
Touch Feedback
●Targets size : 48dp (7-9mm)●Feedback for ALL touchable elements
○ Standard button○ Ripples○ Selectors
Standard Button
Ripple & Elevation by default.
Ripple
Set background: ?android:attr/selectableItemBackground
?android:attr/selectableItemBackgroundBorderless
Recolor ● on android theme : colorControlHighlight
●(custom RippleDrwawble)
But that’s for L+
What can we do?
StateListDrawable (aka Selector)
Different images to represent the same graphic, depending on the state of the object.
<selector > <item android:state_pressed="false"
android:drawable="@color/bg_default" />
<item android:state_pressed="true" android:drawable="@color/
bg_pressed" />
</selector>
States
● android:state_pressed
● android:state_focused
● android:state_hovered
● android:state_selected
● android:state_checkable
● android:state_checked
● android:state_enabled
● android:state_activated
● android:state_window_focused
By the way...
Schedule
M T W T F S S
StateListAnimator
Animate View State Changes
android:stateListAnimator
https://developer.android.com/reference/android/animation/StateListAnimator.html
StateListAnimator
<selector>
</selector>
StateListAnimator
<selector> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="@android:integer/config_shortAnimTime" android:valueTo="2dp" android:valueType="floatType"/> </set> </item>//………. </selector>
animate translationZ when pressed<selector> <item android:state_pressed="true"> <!--...--> </item> <item android:state_pressed="false"> <set> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="0" android:valueType="floatType"/> </set> </item></selector>
animate translationZ when pressed<selector> <item android:state_pressed="true"> <!--...--> </item> <item android:state_pressed="false"> <set> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="0" android:valueType="floatType"/> </set> </item></selector>
ObjectAnimator
animating properties on target objects. <objectAnimator
android:propertyName="y"android:valueTo="200"android:valueType="floatType"android:duration="1000"android:repeatCount="1"android:repeatMode="reverse"/>
By Java Code:
ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();
Motion Best Practices:
- Keep it fast- Duration per distance (and screen size)- Natural curve- Natural movement (interpolator)- Don’t do it.
Duration
●Tablet 130% 390 ms●Normal 100% 300 ms●Wearable 70% 210 ms
Use Curved Motion
PathInterpolator based on a Bézier curve or a Path object. <pathInterpolator android:controlX1="0.4" android:controlY1="0" android:controlX2="1" android:controlY2="1"/>
Interpolator
Object are quicker close to final position@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml
Samples: github.com/googlesamples/android-Interpolatorhttps://material.io/guidelines/motion/material-motion.html
Questions ?
Delightful Details
API 21+ . Their attributes are can be animated.
Animated Vector Drawable
Vector Drawable
API 21+Drawables defined in XMLTheir attributes are can be animated.
http://developer.android.com/training/material/animations.html#AnimVector
https://github.com/udacity/ud862-samples/tree/master/TickCross
https://github.com/udacity/ud862-samples/tree/master/HeartFill
Reveal Effect
Reveal animations provide users visual continuity when you show or hide a group of UI elements. ViewAnimationUtils.createCircularReveal()
Questions ?
Continuous Experience
Relations between screens
Shared elementsActivity transitions
Activity Transitions
Asource
Bdestinati
on
1. Exit A
2. Enter B
3. Return B
4. Re-enter A
Transition Types
API 19+ :●AutoTransition
○ Fade in, change bounds, fade out
●Fade○ visibility
●ChangeBounds○ size&position
●TransitionSet
API 21+ :● Explode
○ visibility
●Slide○ enter/exit from an edge
●ChangeClipBounds○ Bounds & transforms
●ChangeImageTransform○ Bounds & transforms(scale types)
●ChangeTransform○ Bounds & transforms
●Content transition○Run anim on the content coming in / going out
●Shared element transition
Window transitions (between activities)
CreateIn xml file:
<autoTransition/>
<fade />
<changeBounds/>
…..
Specify Multiple Transitions(For example, this is AutoTransition)
<transitionSet android:transitionOrdering="sequential"> <fade android:fadingMode="fade_out" /> <changeBounds /> <fade android:fadingMode="fade_in" /></transitionSet>
Apply
Content transition:- Style- Calling activity- Called activity
Style<style name="BaseAppTheme" parent="android:Theme.Material"> <item name="android:windowActivityTransitions">true</item>
<item name="android:windowEnterTransition">@transition/explode</item> <item name="android:windowExitTransition">@transition/explode</item>
</style>
Calling ActivitystartActivity(intent);overridePendingTransition
(R.anim.slide_from_right, R.anim.slide_to_left);
finish();overridePendingTransition
(R.anim.slide_from_left, R.anim.slide_to_right);
Called Activity
Activity.java:getWindow().setEnterTransition(transition);getWindow().setExitTransition(transition);
Between View Hierarchies
TransitionManager.
beginDelayedTransition(rootView, transition);
https://developer.android.com/training/transitions/index.html
Shared element
Shared Element
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(this, view, "transitionName");startActivity(intent, options.toBundle());
Shared Element
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(this,
Pair.create(view1, "transName1"), Pair.create(view2, "transName2"));startActivity(intent, options.toBundle());
What Does It Do?(For example, this is the default)
<transitionSet android:transitionOrdering="sequential"> <changeBounds /> <changeTransform /> <changeClipBounds /> <changeImageTransform /></transitionSet>
Define Custom Transition<style name="BaseAppTheme" parent="android:Theme.Material">
<item name="android:windowSharedElementEnterTransition"> @transition/custom</
item> <item
name="android:windowSharedElementExitTransition">
@transition/custom</item>
</style>
Called Activity
Activity.java:getWindow().setSharedElementEnterTransition(transition);getWindow().setSharedElementExitTransition(transition);
Instructive Motion
Demonstrate Navigation:
scroll up a listviewpager slideshow drawer
Questions ?
But, How Do We Know
If The UX Is Good Enough?
Android Design Vision
Research: Predict Marriage Lasting
By watching couples for 15min. after wedding
Prof. John Gottman at the University of Washington
Research: Predict Marriage Lasting
By watching couples for 15min. after wedding - 94% accuracy
How??
How??
Success
Prof. John Gottman, Washington Uni.
15
How??
Failure
Prof. John Gottman, Washington Uni.
11
Workgroup Productiveness
Productive
Marcials Loanda
13
Positive to Negative Emotions
Barbara Fredrickson
13
Fill The Jars
Fill The Jars
HOW?
Android Creative Vision
Enchant me.Simplify my life.
Make me amazing.
Android Creative Vision
Dear Android,Enchant me.
Simplify my life.Make me amazing.
10x!!!Users.
Let’s Fill The Jars!
● Delight me in surprising ways
● Real objects are more fun that button and menus
● Let me make it mine
● Get to know me
Enchant MeSimplify My LifeMake me Amazing
Enchant Me
Delight me in surprising ways
Surface, animation, sound effect…Subtle effects contribute to a feeling of effortlessness
Real objects are more fun than buttons and menus
Reduces the cognitive effortMore emotionally satisfying
Let me make it mine
Customization that lets users ‘own’ the experience.
Get to know me
Learn users’ preferencesPrevious choices within easy reach
Get to know me
● Keep it brief● Pictures are faster than words● Decide for me but let me have
the final say● Only show what I need when I
need it● I should always know where I
am● Never lose my stuff● If it looks the same, it should
act the same● Only interrupt me if it’s
important
Enchant MeSimplify My LifeMake me Amazing
Simplify My Life
Keep it brief
Short phrases with simple words. People skip long sentences.
Keep it brief
Yossi Segev, Jonathan Yarkoni, Yonatan V. Levin and 74 others like this.
Pictures are faster than words
●Eye-catching ●Faster to understand than text●Words are longer
SET TIME AAJUSTAR HORÁRIO REGLAGES DE L'HEURE ZEITSPANNE AUSWÄHLEN
Decide for me but let me have the final say
Take your best guess and act rather than asking first. Allow for 'undo'.
Decide for me but let me have the final say
Decide for me but let me have the final say
Decide for me but let me have the final say
“Are you sure” implies that the user didn't think through
Only show what I need when I need it
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.
Navigation Drawers
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.
Runtime Permissions
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.
Contextual Tips Instead of Onboarding
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.
Contextual Tips Instead of Onboarding
They are not a substitute for good UX design!
Only for priority or difficult tasks
If you MUST use onboarding :It’s essential for first use
Allow users to skip it
I should always know where I am
Give users confidence.Make places in your app look distinct Transitions show relationships among screens.Progress feedback
Never lose my stuff
Save given data and let access it from anywhere. settings, personal touches, and creations across phones, tablets, and computers.
If it looks the same, it should act the same
Discern functional differences by making them visually distinct
Only interrupt me if it's important
●Shield people from unimportant minutiae. ●Interruption can be dispersing, taxing and
frustrating.
Only interrupt me if it's important
●Notifications ●Un-interrupting progressbar
● Give me tricks that work everywhere
● It’s not my fault● Sprinkle
encouragement● Do the heavy lifting for
me● Make important things
fast
Enchant MeSimplify My LifeMake me Amazing
Make Me Amazing
Give me tricks that work everywhere
Make an easy to learn app●Use ui patterns.●People love figuring out for themselves.
Gestures
●Touch ○→ example: select.
●Double touch ○→ example: zoom in
●Drag, Swipe, or Fling ○→ Example: Dismiss, scroll, tilt, etc.
Gestures
●Long press○ → Example: Select an elemen
● Long press is not used to display a contextual menu.
●Pinch open / close: zoom in / out
It's not my fault
When things go wrong - be niceUsers should feel smartClear instructions
verbs, short words, not technical,spare the unneeded details.
Fix behind the scenes if possible
It's not my fault
Insert your SIM card now.
You did not insert SIM card!
It's not my fault
It's not my fault - No Content
Avoiding completely empty states
Best matchTto handle a misspelled query without explicitly blaming on the user.
Sprinkle encouragement
Smaller easier steps instead of one complex taskFeedback on actions, even just a subtle glow.Use 2nd person, human approachable toneHumor - not always appropriate
Sprinkle encouragement
Just a sprinkle...
Do the heavy lifting for me
Make novices feel like experts
Do the heavy lifting for me
Predict what would the user want to do next
Make important things fast
Make the most important thing easy to find and fast to use
Make important things fast
Make the most important thing easy to find and fast to use
Words Are Powerful
Pay attention to:- Keep it brief- It’s not my fault- Sprinkle encouragement
Let’s View Some general Examples
Example- How to inform users?
Blocking Alert Dialog
Negative:●Keep it brief●It’s not my fault●Only interrupt me if it’s important
Toast
Negative:●Only interrupt me if it’s important●It’s not my fault
Snackbar
Positive:●Only interrupt me if it’s important●Do the heavy lifting for me●Decide for me but let me have the final say
Example- Rich Notifications
Rich Notifications
Positive:●Only interrupt me if it’s important●Make important things fast
Example- Phone (Dialer)
Phone -
Positive:●Get to know me●Let me make it mine●Pictures are faster than words●Make important things fast
Example- Expanding FAB
Expanding FAB
Positive:●Get to know me●Pictures are faster than words●Make important things fast●Only show what I need
when I need it
Any Questions?
So What Did We Have Today?
●Bold Graphic Design○Themes and colors
○Tinting
○Palette api
○Drawables
●Meaningful Motion○Touch feedback
○Object Animator
○Transitions
●Android Creative Vision