Post on 12-Jan-2015
description
You must and you can: Android UI Patterns
Gabriele Mariotti
Droidcon Torino - 6/7 February 2014
ANDROID GUIDELINES
Droidcon Torino - 6/7 February 2014
• Should I follow them?
• Can I write a successful app without
following them?
• Users don’t know them
DEV
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Droidcon Torino - 6/7 February 2014
https://play.google.com/store/apps/details?id=ch.bitspin.timely
Timely by Bitspin
DEV
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Yahoo Weather
Droidcon Torino - 6/7 February 2014
https://play.google.com/store/apps/details?id=com.yahoo.mobile.client.android.weather
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Droidcon Torino - 6/7 February 2014
Timely by Bitspin
Installs1,000,000 - 5,000,000
Yahoo Weather
Installs5,000,000 - 10,000,000 Updated to December 2013
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Droidcon Torino - 6/7 February 2014
Timely by Bitspin Yahoo Weather
Updated to December 2013
They are guidelines not RULES, but...
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Droidcon Torino - 6/7 February 2014
Timely by Bitspin Yahoo Weather
Bitspin WeatherTimely by Yahoo
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Droidcon Torino - 6/7 February 2014
?
DEV
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Droidcon Torino - 6/7 February 2014
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)
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
Droidcon Torino - 6/7 February 2014
ANDROID GUIDELINES
• I am building a beautiful app
• I should follow design guidelines but...
• I can customize all views
• I can customize all behaviours
Droidcon Torino - 6/7 February 2014
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
Droidcon Torino - 6/7 February 2014
A user
If one of your user uninstalls your app….
....you will LOSE him for ever!
WHO IS RIGHT?
Droidcon Torino - 6/7 February 2014
My designers would like:
I AM WORRIED
Droidcon Torino - 6/7 February 2014
• something new
• a great app
My users would like: • an app easy to use
• a great app
Beautiful + easy to use
THEN?
Droidcon Torino - 6/7 February 2014
• 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???
Droidcon Torino - 6/7 February 2014
?
A basic and common example: ACTIONBAR
WHAT DOES IT MEAN???
Droidcon Torino - 6/7 February 2014
• Someone had an idea (a magic idea)
• Someone wasn’t afraid to be the first to introduce a new
component
ACTIONBAR BEFORE 2011...
• was first introduced by third party apps, not by Google.
• had different implementations and behaviours
Droidcon Torino - 6/7 February 2014
Imagine unexpected things
ACTIONBAR SINCE 2011...
• became an official standard pattern with its rules
• became a guideline
Droidcon Torino - 6/7 February 2014
Be consistent
• Don’t stop to evolve this component !!!Imagine unexpected things
DEV
YOU MUST: USE THE ACTIONBAR
• Use the ActionBar with its rules
• No Fake-ActionBar
• Customize your ActionBarhttp://jgilfelt.github.io/android-actionbarstylegenerator/)
Droidcon Torino - 6/7 February 2014
http://developer.android.com/design/patterns/actionbar.html
Follow guidelines
Be creative
DEV
ActionBars haven’t to be identical (..since 2011)
YOU MUST: CUSTOMIZE THE ACTIONBAR
Droidcon Torino - 6/7 February 2014
http://jgilfelt.github.io/android-actionbarstylegenerator/
DEV
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
FadingActionBar: Google introduced it in Google Play Music
Droidcon Torino - 6/7 February 2014
https://github.com/ManuelPeinado/FadingActionBar
DEV
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
NotBoringActionBar: Google introduced it in Google Play Newsstand
Droidcon Torino - 6/7 February 2014
https://github.com/flavienlaurent/NotBoringActionBar/
● Are they in guidelines?
● Did they break guidelines?
● What would have happen if they had not been
built by Google?
HOW MANY QUESTIONS…..
FadingActionBar, NotBoringActionBar...
Droidcon Torino - 6/7 February 2014
Be creative
Imagine unexpected things
THEN
Droidcon Torino - 6/7 February 2014
FadingActionBar, NotBoringActionBar…
Be reactive!! Use
them !!!
DEV
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
A transparent actionbar
Droidcon Torino - 6/7 February 2014
https://play.google.com/store/apps/details?id=flipboard.app
Be creative
DEV
YOU CAN: ACTIONBAR + STATUSBAR
Something new… IMMERSIVE FULLSCREEN MODE
• SYSTEM_UI_FLAG_IMMERSIVE
• SYSTEM_UI_FLAG_IMMERSIVE_STICKY
Droidcon Torino - 6/7 February 2014
http://developer.android.com/training/system-ui/immersive.html#sticky
DEV
YOU CAN: ACTIONBAR + STATUSBAR
A transparent actionbar + transparent status bar
Droidcon Torino - 6/7 February 2014
https://play.google.com/store/apps/details?id=com.b2cloud.cookscompanion
Be creative
Pay attention: I don’t think that all apps can use this feature.
DEV
YOU CAN: ACTIONBAR + STATUSBAR
CREATE A BACKGROUNG “TINT”
FOR NAVIGATION & STATUS BARS
Droidcon Torino - 6/7 February 2014
https://github.com/jgilfelt/SystemBarTint
Be creative
THEN?
Be reactive!! It is something new...then it can change quickly!
If it will become standard, change your code without breaking
the guidelines.
Droidcon Torino - 6/7 February 2014
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
Droidcon Torino - 6/7 February 2014
A basic and common example: NAVIGATION DRAWER
WHAT DOES IT MEAN???
Droidcon Torino - 6/7 February 2014
• “Facebook navigation”
• Side Navigation
• Fly in app menu
• Sliding menu
• ………….
NAVIGATION DRAWER BEFORE 2013
Droidcon Torino - 6/7 February 2014
• was first introduced by third party apps, not by Google.
• had different implementations and behaviours
NAVIGATION DRAWER BEFORE 2013
Droidcon Torino - 6/7 February 2014
• Someone had an idea (a magic idea)
• Someone wasn’t afraid to be the first to introduce a new
component Imagine unexpected things
NAVIGATION DRAWER SINCE 2013...
• became an official standard pattern with its rules
• became a guideline
• same behaviour
Droidcon Torino - 6/7 February 2014
Be consistent
• Don’t stop to evolve this component !!!Imagine unexpected things
DEV
YOU MUST: USE THE NAVIGATION DRAWER
• Use the Navigation Drawer with its rules
• No Fake-Navigation Drawer
• Customize your Navigation Drawer
Droidcon Torino - 6/7 February 2014
http://developer.android.com/design/patterns/navigation-drawer.html
Follow guidelines
Be creative
Navigation Drawers haven’t to be identical
YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER
Droidcon Torino - 6/7 February 2014
● Can I use a custom library instead of the official?
● Can I use a different icon?
● Can I use subtle animations or colored elements
inside my navigation drawer?
HOW MANY QUESTIONS…..
Navigation Drawer...
Droidcon Torino - 6/7 February 2014
Be creative and imagine unexpected things
Why????
Why????
Google please can you change it?
A little thought:
- built by Google: it is interesting…..
- built by unknown: ..eh?
what are you doing??
THERE CAN BE (FEW) EXCEPTIONS
Wait…!! I think to know what you would like to ask me!
Droidcon Torino - 6/7 February 2014
Why????
YOU CAN: THE 2nd GENERATION OF NAVIGATION DRAWER?
Droidcon Torino - 6/7 February 2014
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
WHAT DOES IT MEAN???
Droidcon Torino - 6/7 February 2014
DEV
YESTERDAY : PULL TO REFRESH
Droidcon Torino - 6/7 February 2014
https://github.com/chrisbanes/Android-PullToRefresh * deprecated!
It was a new pattern:
● Learned by users
● Not in guidelinesThey were creative
DEV
TODAY: ACTION BAR PULL TO REFRESH
Droidcon Torino - 6/7 February 2014
https://github.com/chrisbanes/ActionBar-PullToRefresh
A new pattern:
● Learned by users
● Not in guidelines
● No official codeBe reactive
Don’t be afraid to be the first to
integrate new gestures!
NEW GESTURES
Droidcon Torino - 6/7 February 2014
But use a wizard to explain NEW gesture
NEW GESTURES
Droidcon Torino - 6/7 February 2014
DEV
Something new… “Circa News” app.
NEW GESTURES:
Droidcon Torino - 6/7 February 2014
Be ready..
“Vertical swipe with pagination”
https://play.google.com/store/apps/details?id=cir.ca
DEV
Something new… “Tumblr” app.
NEW GESTURES:
Droidcon Torino - 6/7 February 2014
Be ready..
“Swipe back”
https://play.google.com/store/apps/details?id=com.tumblr
THE CHANGES SOMETIMES ARE VIRAL
Droidcon Torino - 6/7 February 2014
THE CHANGES SOMETIMES ARE VIRAL
Droidcon Torino - 6/7 February 2014
Also with guidelines….
Should I be reactive ?
Be ready..
CLOSING
Droidcon Torino - 6/7 February 2014
• 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:
Droidcon Torino - 6/7 February 2014
• 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!
Droidcon Torino - 6/7 February 2014
Thank you!
Gabriele Mariotti
gabri.mariotti@gmail.comwww.google.com/+GabrieleMariotti