Droidcon Italy: You must and you can: Android UI Patterns

You must and you can: Android UI Patterns
Gabriele Mariotti

Droidcon Torino - 6/7 February 2014

ANDROID GUIDELINES

•
•

Should I follow them?

Can I write a successful app without
following them?

•

Users don’t know them


CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Bitspin

DEV

https://play.google.com/store/apps/details?id=ch.bitspin.timely


Yahoo Weather

DEV

https://play.google.com/store/apps/details?id=com.yahoo.mobile.client.android.weather

Timely by Bitspin

Yahoo Weather

Installs
1,000,000 - 5,000,000

Installs
5,000,000 - 10,000,000
Updated to December 2013


Timely by Bitspin

Yahoo Weather

They are guidelines not RULES, but...
Updated to December 2013


Timely by Bitspin

Yahoo Weather


Timely by Yahoo

Bitspin Weather


They are guidelines not RULES, but...
...consistency and conventions are there to HELP your users. They help users
get things done and not worry about how to get things done.
Design guidelines are there to help you understand the consistency and
conventions, especially if you're not from around here.
Matias Duarte (Android design lead)

DEV

https://plus.google.com/u/0/114892667463719782631/posts/PXGZ48VaqHz


ANDROID GUIDELINES

•
•
•
•
•

Make a beautiful app

Follow design guidelines
Optimize your layouts
Support multiple screens
Be consistent with the platform

ANDROID GUIDELINES

•
•
•
•

I am building a beautiful app

I should follow design guidelines but...
I can customize all views
I can customize all behaviours

A señor developer

ANDROID GUIDELINES

•
•
•
•

I want a beautiful app, an android beautiful app

I don’t know about design guidelines but...
… I don’t like to learn new things
I want to use simply your app

A user

WHO IS RIGHT?
If one of your user uninstalls your app….

....you will LOSE him for ever!


I AM WORRIED
My designers would like:

•
•

something new
a great app

My users would like:

•
•

Beautiful + easy to use

an app easy to use
a great app

THEN?

•
•
•
•
•
•

Follow guidelines

Be creative, but don’t reinvent the wheel
Be reactive, because standards can change
Be consistent with platform
Listen to your users
Imagine unexpected things

WHAT DOES IT MEAN???


A basic and common example: ACTIONBAR


ACTIONBAR BEFORE 2011...

•
•

•
•

was first introduced by third party apps, not by Google.

had different implementations and behaviours
Someone had an idea (a magic idea)
Someone wasn’t afraid to be the first to introduce a new

component



ACTIONBAR SINCE 2011...

•
•

•

became an official standard pattern with its rules

became a guideline

Be consistent

Don’t stop to evolve this component !!!


YOU MUST: USE THE ACTIONBAR

•
•
•

Use the ActionBar with its rules

No Fake-ActionBar

Follow guidelines

Customize your ActionBar
http://jgilfelt.github.io/android-actionbarstylegenerator/)

Be creative
DEV

http://developer.android.com/design/patterns/actionbar.html


YOU MUST: CUSTOMIZE THE ACTIONBAR
ActionBars haven’t to be identical (..since 2011)

DEV

http://jgilfelt.github.io/android-actionbarstylegenerator/


YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
FadingActionBar: Google introduced it in Google Play Music

DEV

https://github.com/ManuelPeinado/FadingActionBar


NotBoringActionBar: Google introduced it in Google Play Newsstand

DEV

https://github.com/flavienlaurent/NotBoringActionBar/


HOW MANY QUESTIONS…..
FadingActionBar, NotBoringActionBar...
● Are they in guidelines?
● Did they break guidelines? Be creative
● What would have happen if they had not been
built by Google?


THEN
FadingActionBar, NotBoringActionBar…

Be reactive!! Use them !!!


A transparent actionbar

DEV

Be creative

https://play.google.com/store/apps/details?id=flipboard.app


YOU CAN: ACTIONBAR + STATUSBAR
Something new… IMMERSIVE FULLSCREEN MODE

•
•

SYSTEM_UI_FLAG_IMMERSIVE
SYSTEM_UI_FLAG_IMMERSIVE_STICKY

DEV

http://developer.android.com/training/system-ui/immersive.html#sticky


A transparent actionbar + transparent status bar
Be creative

Pay attention: I don’t think that all apps can use this feature.

DEV

https://play.google.com/store/apps/details?id=com.b2cloud.cookscompanion


CREATE A BACKGROUNG “TINT”

FOR NAVIGATION & STATUS BARS
Be creative

DEV

https://github.com/jgilfelt/SystemBarTint


THEN?

Be reactive!!
It is something new...then it can change quickly!
If it will become standard, change your code without breaking
the guidelines.


THERE CAN BE (FEW) EXCEPTIONS
Break the established patterns when needed

but don't break them just to be different

Don’t reinvent the wheel


A basic and common example: NAVIGATION DRAWER


NAVIGATION DRAWER BEFORE 2013

•
•
•
•
•

“Facebook navigation”

Side Navigation
Fly in app menu
Sliding menu
………….

NAVIGATION DRAWER BEFORE 2013

•
•
•
•

was first introduced by third party apps, not by Google.

had different implementations and behaviours
Someone had an idea (a magic idea)
Someone wasn’t afraid to be the first to introduce a new

component



NAVIGATION DRAWER SINCE 2013...

•
•
•

•

became an official standard pattern with its rules

became a guideline

Be consistent

same behaviour
Don’t stop to evolve this component !!!


YOU MUST: USE THE NAVIGATION DRAWER

•
•
•

Use the Navigation Drawer with its rules

No Fake-Navigation Drawer

Follow guidelines

Customize your Navigation Drawer
Be creative

DEV

http://developer.android.com/design/patterns/navigation-drawer.html


YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER
Navigation Drawers haven’t to be identical


HOW MANY QUESTIONS…..
Navigation Drawer...
● Can I use a custom library instead of the official? Why????
● Can I use a different icon? Why????
● Can I use subtle animations or colored elements
inside my navigation drawer?
Be creative and imagine unexpected things

THERE CAN BE (FEW) EXCEPTIONS
Wait…!! I think to know what you would like to ask me!
A little thought:

- built by Google: it is interesting…..
- built by unknown: ..eh?

what are you doing??
Why????

Google please can you change it?


YOU CAN: THE 2nd GENERATION OF NAVIGATION DRAWER?
Available soon….stay tune!

•
•

Add colors
Add subtle animations but look
out for potential gesture
conflict!

A basic and common example: NEW GESTURES and NEW

PATTERNS


YESTERDAY : PULL TO REFRESH
It was a new pattern:
● Learned by users

● Not in guidelines
They were creative

DEV

https://github.com/chrisbanes/Android-PullToRefresh * deprecated!


TODAY: ACTION BAR PULL TO REFRESH
A new pattern:
● Learned by users

● Not in guidelines
● No official code
Be reactive
DEV

https://github.com/chrisbanes/ActionBar-PullToRefresh


NEW GESTURES
Don’t be afraid to be the first to

integrate new gestures!


NEW GESTURES
But use a wizard to explain NEW gesture


NEW GESTURES:
Something new… “Circa News” app.
“Vertical swipe with pagination”
Be ready..

DEV

https://play.google.com/store/apps/details?id=cir.ca


NEW GESTURES:
Something new… “Tumblr” app.
“Swipe back”
Be ready..

DEV

https://play.google.com/store/apps/details?id=com.tumblr


THE CHANGES SOMETIMES ARE VIRAL


THE CHANGES SOMETIMES ARE VIRAL
Also with guidelines….
Should I be reactive ?
Be ready..


CLOSING

•
•

Write a great app, following Android guidelines

Break the established patterns when needed but don't break
them just to be different

•

Don’t be afraid to be the first to build unexpected things....
new patterns, new gestures, new views


CLOSING
Remember:

•
•
•
•

users expect apps to work in a certain way
customize your views but don’t build an ANTIPATTERN

test the user experience
Guidelines change and evolve…. Be reactive!


Gabriele Mariotti
gabri.mariotti@gmail.com
www.google.com/+GabrieleMariotti

Thank you!

Droidcon Italy: You must and you can: Android UI Patterns

Recommended

Recommended

More Related Content

Similar to Droidcon Italy: You must and you can: Android UI Patterns

Similar to Droidcon Italy: You must and you can: Android UI Patterns (20)

Recently uploaded

Recently uploaded (20)

Droidcon Italy: You must and you can: Android UI Patterns