Android Design: Beyond the Guidelines

BEYOND THE GUIDELINES

Kevin Grant

Creating character and identity inyour Android applications

Thursday, November 7, 13

It’s still awesome

It’s still awesometumblr.com/jobs

ProblemAll basic apps look the same

All holo apps look the same

‣ Default styles are easy to implement

‣ ActionBar is really hard to customize

‣ Deviation isn’t encouraged

Weak Branding

(these could all be the same)

NewsNew York Times

Circa Currents

News Strong Branding

Flipboard Pulse

Users wants results, not rules

‣ Creativity is rewarded

‣ “Generally fit” into ecosystemis enough

‣ Don’t listen to Android design trolls

“Don’t port your iOS design to android”

This doesn’t mean design should not be a priority

Going to cover 3 topics today

‣ Say YES to your designers

‣ Make your applications WHIMSICAL

‣ Be a DESIGN LEADER

SAYING YES

Designers send payments to kevingrant5@gmail.com

Section 1

SAYING YES

Designers send payments to kevingrant5@gmail.com

Section 1

PROBABLY DO THAT

Wouldn’t it be great if...

What do you think about...

How hard would it be to...

Don’t be that guy

‣ Designers aren’t here to ruin the product or everyone’s lives (just yours)

Don’t be that guy

‣ Most of the time, they’re requests are reasonable, it just requires extra work

Don’t be that guy

‣ Most of the time, they’re requests are reasonable, it just requires extra work

‣ If your designer asks you to move a pixel, YOU ASK HOW HIGH.

Don’t be that guy

ExampleCan we increase the padding between the home icon and the back carrot?

Ugh, Google designed it this way for a reason

NoI’m sure there’s

something we can do, I’ll get back to you

ExampleCan we change the text color of a action button based on it’s state? E.G. FOLLOW should be white, UNFOLLOW should be gray.

You can’t really change the color of action bar text programmatically.

No Sure! It’s not as straightforward as

just changing the color, but we can

create a custom view and use that instead.

ExampleCan we add a cool flippy animation to our dialogs to make them feel like cards?

Unfortunately, animating dialogs isn’t supported very well and there isn’t much we can do.

NoHmm that could be tricky!, We can style an Activity to

look like a dialog and use Activity Transitions

Note to Designers

‣ We probably say no too often

Note to Designers

‣ Don’t hate on your developers! It’s not their fault! (Random fun stuff isn’t well supported)

Note to Designers

‣ We’re afraid to work on things that have unpredictable deadlines

Note to Designers

‣ We’re afraid to work on things that have unpredictable deadlines

‣ Work with your project managers to make sure that developers feel comfortable making design risks that might end up not being used

Case Study - Trending Tag

Can we have these little boxes, and inside the boxes, new posts come in from the left and right,

kind of like the Windows live tiles?

(me)Thursday, November 7, 13

Architecture

‣ HorizontalListView (Special touch interception for GingerBread)

Architecture

‣ Added as a Header to List

Architecture

‣ CustomViewSwitcher

Architecture

‣ Generates child views

Architecture

‣ Manages animations and state

Architecture

‣ Manages header tag

Architecture

‣ 7 types of child views

Architecture

‣ Stateless

Architecture

‣ Stateless

‣ Manages it’s own design

Architecture

IssuesAlways animating

‣ Since main screen is a ViewPager, the Animations were always running

‣ Animation implementation breaking other unrelated animations

‣ Header Views are never recycled

‣ always animating even if not visible

‣ Hurts scroll performance

The code sucks

The code sucksDoesn’t matter, still works

WhimsySection 2

Creative block?

Get drunk.

There is nothing fun about holo

Your app should be fun

There is nothing fun about holo

Use ColorsVine Rdio

Do unexpected things

Yelp Foursquare (iOS, but it’s still awesome)

Add meaningful animations

Pinterest Circa

(Check out 4.4 ListViewWindowCompat)

Add meaningless animations

Snapchat

its fun. We like to be delighted

Screen Action Items

- Actionable items outside of the ActionBar

Screen Action Items

- Unique experience of blending your passive content

Screen Action Items

- Provide unique branding

Screen Action Items

- Provide unique branding

- Great place to have “fun”

Screen Action Items

Screen Action Items can be difficult to integrate into existing code bases. Use case questions must be answered:

How’d we do it?

- Shoud view always be present?

How’d we do it?

- Shoud view always be present?- Hide on select or scroll?

How’d we do it?

- Every Activity (or fragment)?

How’d we do it?

- Every Activity (or fragment)?

- Moveable?

How’d we do it?

- Create Views Dynamically

How’d we do it?

- Add Views to DecorView for maximum flexibility

How’d we do it?

- Add Views to DecorView for maximum flexibility (getWindow().getDecorView())

How’d we do it?

- If targeting API < 11, position using left / top margins

How’d we do it?

- If targeting API < 11, position using left / top margins

- If targeting API >= 11, can position using setX / setY or using animators

How’d we do it?

What can I do today?

Add fun press states!

Growing Press State

Mileage may vary based on how you want to

detect “move outside”

Growing Press State continued

Use more than 2 values

Use Different interpolators

Cooler Transitions

Dialog Themed Activitysand Popup Components to

reduce Navigation Remorse

Facebook Tumblr

Action Animations make me feel special

What can I do today?Google+ Tumblr

Don’t be a follower

BE A DESIGN LEADERSection 3

Everything we have started as someones idea

‣ ViewPager

‣ Double-Tap to zoom

‣ ViewPager

‣ Slide to dismiss list-items

‣ ViewPager

‣ Slide to dismiss list-items

‣ Pretty much everything

Navigation DrawerRemember when this was socially unacceptable?

‣ Junk Drawer / Trash Drawer

‣ Sloppy Design

‣ Doing it wrong

Now it’s a leading navigation style

ESPN ScoreCenter

ESPN ScoreCenter Foursquare

ESPN ScoreCenter Foursquare Facebook

ESPN ScoreCenter Foursquare Facebook Spotify

In Every Google App

But what if I want to change it a bit

Generates a lot of rageThursday, November 7, 13

Until Google does it, then it’s fine

Pull To RefreshRemember when this was considered bad design

for Android?

Now it’s a behavior all users expect

show images of all the apps

Twitter Foursquare Path

Now it’s a behavior all users expect

show images of all the apps

Twitter Foursquare Path (the booger)

And Google added it into all of their productsNo official support yet =(

Gmail Google+ Drive

How does Chrome even fit in?

I dunno, but it’sawesome

What does this all mean?

Do something awesome

(but don’t use lens flares)

Swipe Back(stolen from iOS7)

iOS != Bad

Even though I like to pretend it does

iOS != Bad

Design for a tiny hand.

- Up Button too far away

- Up Button too far away- Back button provides no context

- Up Button too far away- Back button provides no context- Why not?

Swipe Back

How’d we do it

How’d we do itBefore launching any activity, capture the bitmap of the current window and save it in image cache.

Override setContentView in the receiving activity and set the bitmap on an ImageView behind the activity, on the DecorView

Open source coming soon!

Whatever you do:Be consistent

We Took our cues from Android...

And went a bit further

Wrapping up

‣ Say YES, it’s what makes our shit awesome

Wrapping up

‣ Be WHIMSICAL!

Wrapping up

‣ Be WHIMSICAL!‣ Be a DESIGN LEADER and push

beyond the guidelines

Wrapping up

“Good applications follow the guidelines,

better applications challenge them.”

Thank you!

kevingrant@tumblr.com

kevinthebigapple.tumblr.com

@kevingrant5

Android Design: Beyond the Guidelines

Design

Transcript of Android Design: Beyond the Guidelines

Securing Embedded User Interfaces: Android and Beyond

Android executable modeling: beyond android programming

Learn how to develop for Android, beyond the Hello World android app - Cape Town Android Meetup

Sepsis & Beyond…Guidelines & Objectives Goal-Directed Therapy Precon Sepsis and Beyond (N... · 1 Sepsis & Beyond…Guidelines & Goal-Directed Therapy Canadian Association of Critical

Introduction to Firebase with Android and Beyond...

Getting Your App Discovered: Android Market & Beyond

WHO Guidelines: 2010 and Beyond

hyponatremia treatment guidelines: 2012 and beyond

EXTENDING THE REACH OF ANDROID TO CONSUMER ELECTRONICS AND BEYOND

UXperts 2012: Connectivity Beyond the Web (Android), Friedger Müffke

Lately we've been tinkering with deplo ying Android beyond the

Android for Cars App Library design guidelines

Design guidelines for android developers

for Android Android Beyond Java1.droppdf.com/files/NuglB/android-beyond-java-0-3.pdf · It does not have to be that way, at least not completely. Unlike some mobile operating systems,

WHO Guidelines: 2010 and Beyond

GTU Guidelines for Project on Android

Android n and beyond

Android: Looking beyond the obvious

Android Design Guidelines 1.1

Android: Beyond basics - Veřejné služby Informačního ... · Android: Beyond basics Ing. David Vávra, Step Up Labs ... Students with basic Java knowledge ... (CALC_PACKAGE).resourceId("two")).click();