We often wonder if we need to fully follow the official guidelines to make a beatiful app. Users don't know them, then why should we follow the guidelines?
Axa Assurance Maroc - Insurer Innovation Award 2024
Droidcon Italy: You must and you can: Android UI Patterns
1. You must and you can: Android UI Patterns
Gabriele Mariotti
Droidcon Torino - 6/7 February 2014
2. ANDROID GUIDELINES
•
•
Should I follow them?
Can I write a successful app without
following them?
•
Users don’t know them
Droidcon Torino - 6/7 February 2014
3. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Bitspin
DEV
https://play.google.com/store/apps/details?id=ch.bitspin.timely
Droidcon Torino - 6/7 February 2014
4. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Yahoo Weather
DEV
https://play.google.com/store/apps/details?id=com.yahoo.mobile.client.android.weather
Droidcon Torino - 6/7 February 2014
5. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Bitspin
Yahoo Weather
Installs
1,000,000 - 5,000,000
Installs
5,000,000 - 10,000,000
Updated to December 2013
Droidcon Torino - 6/7 February 2014
6. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Bitspin
Yahoo Weather
They are guidelines not RULES, but...
Updated to December 2013
Droidcon Torino - 6/7 February 2014
7. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Bitspin
Yahoo Weather
Droidcon Torino - 6/7 February 2014
8. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Yahoo
Bitspin Weather
Droidcon Torino - 6/7 February 2014
9. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
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
Droidcon Torino - 6/7 February 2014
10. 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
11. 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
Droidcon Torino - 6/7 February 2014
12. 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
Droidcon Torino - 6/7 February 2014
13. WHO IS RIGHT?
If one of your user uninstalls your app….
....you will LOSE him for ever!
Droidcon Torino - 6/7 February 2014
14. 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
Droidcon Torino - 6/7 February 2014
15. 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
Droidcon Torino - 6/7 February 2014
16. WHAT DOES IT MEAN???
Droidcon Torino - 6/7 February 2014
17. WHAT DOES IT MEAN???
A basic and common example: ACTIONBAR
Droidcon Torino - 6/7 February 2014
18. 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
Imagine unexpected things
Droidcon Torino - 6/7 February 2014
19. ACTIONBAR SINCE 2011...
•
•
•
became an official standard pattern with its rules
became a guideline
Be consistent
Don’t stop to evolve this component !!!
Imagine unexpected things
Droidcon Torino - 6/7 February 2014
20. 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
Droidcon Torino - 6/7 February 2014
21. YOU MUST: CUSTOMIZE THE ACTIONBAR
ActionBars haven’t to be identical (..since 2011)
DEV
http://jgilfelt.github.io/android-actionbarstylegenerator/
Droidcon Torino - 6/7 February 2014
22. YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
FadingActionBar: Google introduced it in Google Play Music
DEV
https://github.com/ManuelPeinado/FadingActionBar
Droidcon Torino - 6/7 February 2014
23. YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
NotBoringActionBar: Google introduced it in Google Play Newsstand
DEV
https://github.com/flavienlaurent/NotBoringActionBar/
Droidcon Torino - 6/7 February 2014
24. 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?
Imagine unexpected things
Droidcon Torino - 6/7 February 2014
26. YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
A transparent actionbar
DEV
Be creative
https://play.google.com/store/apps/details?id=flipboard.app
Droidcon Torino - 6/7 February 2014
27. 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
Droidcon Torino - 6/7 February 2014
28. YOU CAN: ACTIONBAR + STATUSBAR
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
Droidcon Torino - 6/7 February 2014
29. YOU CAN: ACTIONBAR + STATUSBAR
CREATE A BACKGROUNG “TINT”
FOR NAVIGATION & STATUS BARS
Be creative
DEV
https://github.com/jgilfelt/SystemBarTint
Droidcon Torino - 6/7 February 2014
30. 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
31. 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
32. WHAT DOES IT MEAN???
A basic and common example: NAVIGATION DRAWER
Droidcon Torino - 6/7 February 2014
33. NAVIGATION DRAWER BEFORE 2013
•
•
•
•
•
“Facebook navigation”
Side Navigation
Fly in app menu
Sliding menu
………….
Droidcon Torino - 6/7 February 2014
34. 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
Imagine unexpected things
Droidcon Torino - 6/7 February 2014
35. 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 !!!
Imagine unexpected things
Droidcon Torino - 6/7 February 2014
36. 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
Droidcon Torino - 6/7 February 2014
37. YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER
Navigation Drawers haven’t to be identical
Droidcon Torino - 6/7 February 2014
38. 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
Droidcon Torino - 6/7 February 2014
39. 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?
Droidcon Torino - 6/7 February 2014
40. YOU CAN: THE 2nd GENERATION OF NAVIGATION DRAWER?
Available soon….stay tune!
•
•
Add colors
Add subtle animations but look
out for potential gesture
conflict!
Droidcon Torino - 6/7 February 2014
41. WHAT DOES IT MEAN???
A basic and common example: NEW GESTURES and NEW
PATTERNS
Droidcon Torino - 6/7 February 2014
42. 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!
Droidcon Torino - 6/7 February 2014
43. 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
Droidcon Torino - 6/7 February 2014
44. NEW GESTURES
Don’t be afraid to be the first to
integrate new gestures!
Droidcon Torino - 6/7 February 2014
45. NEW GESTURES
But use a wizard to explain NEW gesture
Droidcon Torino - 6/7 February 2014
46. NEW GESTURES:
Something new… “Circa News” app.
“Vertical swipe with pagination”
Be ready..
DEV
https://play.google.com/store/apps/details?id=cir.ca
Droidcon Torino - 6/7 February 2014
47. NEW GESTURES:
Something new… “Tumblr” app.
“Swipe back”
Be ready..
DEV
https://play.google.com/store/apps/details?id=com.tumblr
Droidcon Torino - 6/7 February 2014
49. THE CHANGES SOMETIMES ARE VIRAL
Also with guidelines….
Should I be reactive ?
Be ready..
Droidcon Torino - 6/7 February 2014
50. 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
Droidcon Torino - 6/7 February 2014
51. 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!
Droidcon Torino - 6/7 February 2014