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

9.3 - 10.3

Register :goo.gl/forms/STkeqW9fHGI1JAb52

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

http://youtube.com/v/cQzien5H2Do

“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