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 ...
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Bitspin

DEV

https://play.google.com/store/apps/details?id...
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Yahoo Weather

DEV

https://play.google.com/store/apps/details?id=com...
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Bitspin

Yahoo Weather

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

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

Yahoo Weather

They are guidelines not RULES, but....
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Bitspin

Yahoo Weather

Droidcon Torino - 6/7 February 2014
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Timely by Yahoo

Bitspin Weather

Droidcon Torino - 6/7 February 2014
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
They are guidelines not RULES, but...
...consistency and conventions ...
ANDROID GUIDELINES

•
•
•
•
•

Make a beautiful app

Follow design guidelines
Optimize your layouts
Support multiple scree...
ANDROID GUIDELINES

•
•
•
•

I am building a beautiful app

I should follow design guidelines but...
I can customize all v...
ANDROID GUIDELINES

•
•
•
•

I want a beautiful app, an android beautiful app

I don’t know about design guidelines but......
WHO IS RIGHT?
If one of your user uninstalls your app….

....you will LOSE him for ever!

Droidcon Torino - 6/7 February 2...
I AM WORRIED
My designers would like:

•
•

something new
a great app

My users would like:

•
•

Beautiful + easy to use
...
THEN?

•
•
•
•
•
•

Follow guidelines

Be creative, but don’t reinvent the wheel
Be reactive, because standards can change...
WHAT DOES IT MEAN???

Droidcon Torino - 6/7 February 2014
WHAT DOES IT MEAN???
A basic and common example: ACTIONBAR

Droidcon Torino - 6/7 February 2014
ACTIONBAR BEFORE 2011...

•
•

•
•

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

had different implementation...
ACTIONBAR SINCE 2011...

•
•

•

became an official standard pattern with its rules

became a guideline

Be consistent

Do...
YOU MUST: USE THE ACTIONBAR

•
•
•

Use the ActionBar with its rules

No Fake-ActionBar

Follow guidelines

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

DEV

http://jgilfelt.github.io/androi...
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
FadingActionBar: Google introduced it in Google Play Music

DEV

https://g...
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
NotBoringActionBar: Google introduced it in Google Play Newsstand

DEV

ht...
HOW MANY QUESTIONS…..
FadingActionBar, NotBoringActionBar...
● Are they in guidelines?
● Did they break guidelines? Be cre...
THEN
FadingActionBar, NotBoringActionBar…

Be reactive!! Use them !!!

Droidcon Torino - 6/7 February 2014
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
A transparent actionbar

DEV

Be creative

https://play.google.com/store/a...
YOU CAN: ACTIONBAR + STATUSBAR
Something new… IMMERSIVE FULLSCREEN MODE

•
•

SYSTEM_UI_FLAG_IMMERSIVE
SYSTEM_UI_FLAG_IMME...
YOU CAN: ACTIONBAR + STATUSBAR
A transparent actionbar + transparent status bar
Be creative

Pay attention: I don’t think ...
YOU CAN: ACTIONBAR + STATUSBAR
CREATE A BACKGROUNG “TINT”

FOR NAVIGATION & STATUS BARS
Be creative

DEV

https://github.c...
THEN?

Be reactive!!
It is something new...then it can change quickly!
If it will become standard, change your code withou...
THERE CAN BE (FEW) EXCEPTIONS
Break the established patterns when needed

but don't break them just to be different

Don’t...
WHAT DOES IT MEAN???
A basic and common example: NAVIGATION DRAWER

Droidcon Torino - 6/7 February 2014
NAVIGATION DRAWER BEFORE 2013

•
•
•
•
•

“Facebook navigation”

Side Navigation
Fly in app menu
Sliding menu
………….
Droidc...
NAVIGATION DRAWER BEFORE 2013

•
•
•
•

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

had different implementa...
NAVIGATION DRAWER SINCE 2013...

•
•
•

•

became an official standard pattern with its rules

became a guideline

Be cons...
YOU MUST: USE THE NAVIGATION DRAWER

•
•
•

Use the Navigation Drawer with its rules

No Fake-Navigation Drawer

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

Droidcon Torino - 6/7 February 2014
HOW MANY QUESTIONS…..
Navigation Drawer...
● Can I use a custom library instead of the official? Why????
● Can I use a dif...
THERE CAN BE (FEW) EXCEPTIONS
Wait…!! I think to know what you would like to ask me!
A little thought:

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

•
•

Add colors
Add subtle animations but lo...
WHAT DOES IT MEAN???
A basic and common example: NEW GESTURES and NEW

PATTERNS

Droidcon Torino - 6/7 February 2014
YESTERDAY : PULL TO REFRESH
It was a new pattern:
● Learned by users

● Not in guidelines
They were creative

DEV

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

● Not in guidelines
● No official code
Be reactive
DE...
NEW GESTURES
Don’t be afraid to be the first to

integrate new gestures!

Droidcon Torino - 6/7 February 2014
NEW GESTURES
But use a wizard to explain NEW gesture

Droidcon Torino - 6/7 February 2014
NEW GESTURES:
Something new… “Circa News” app.
“Vertical swipe with pagination”
Be ready..

DEV

https://play.google.com/s...
NEW GESTURES:
Something new… “Tumblr” app.
“Swipe back”
Be ready..

DEV

https://play.google.com/store/apps/details?id=com...
THE CHANGES SOMETIMES ARE VIRAL

Droidcon Torino - 6/7 February 2014
THE CHANGES SOMETIMES ARE VIRAL
Also with guidelines….
Should I be reactive ?
Be ready..

Droidcon Torino - 6/7 February 2...
CLOSING

•
•

Write a great app, following Android guidelines

Break the established patterns when needed but don't break
...
CLOSING
Remember:

•
•
•
•

users expect apps to work in a certain way
customize your views but don’t build an ANTIPATTERN...
Gabriele Mariotti
gabri.mariotti@gmail.com
www.google.com/+GabrieleMariotti

Thank you!
Droidcon Torino - 6/7 February 201...
Upcoming SlideShare
Loading in …5
×

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

2,195 views

Published on

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?

Published in: Technology, Business
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,195
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
41
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

  1. 1. You must and you can: Android UI Patterns Gabriele Mariotti Droidcon Torino - 6/7 February 2014
  2. 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. 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. 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. 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. 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. 7. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Timely by Bitspin Yahoo Weather Droidcon Torino - 6/7 February 2014
  8. 8. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Timely by Yahoo Bitspin Weather Droidcon Torino - 6/7 February 2014
  9. 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. 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. 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. 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. 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. 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. 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. 16. WHAT DOES IT MEAN??? Droidcon Torino - 6/7 February 2014
  17. 17. WHAT DOES IT MEAN??? A basic and common example: ACTIONBAR Droidcon Torino - 6/7 February 2014
  18. 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. 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. 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. 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. 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. 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. 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
  25. 25. THEN FadingActionBar, NotBoringActionBar… Be reactive!! Use them !!! Droidcon Torino - 6/7 February 2014
  26. 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. 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. 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. 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. 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. 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. 32. WHAT DOES IT MEAN??? A basic and common example: NAVIGATION DRAWER Droidcon Torino - 6/7 February 2014
  33. 33. NAVIGATION DRAWER BEFORE 2013 • • • • • “Facebook navigation” Side Navigation Fly in app menu Sliding menu …………. Droidcon Torino - 6/7 February 2014
  34. 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. 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. 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. 37. YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER Navigation Drawers haven’t to be identical Droidcon Torino - 6/7 February 2014
  38. 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. 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. 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. 41. WHAT DOES IT MEAN??? A basic and common example: NEW GESTURES and NEW PATTERNS Droidcon Torino - 6/7 February 2014
  42. 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. 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. 44. NEW GESTURES Don’t be afraid to be the first to integrate new gestures! Droidcon Torino - 6/7 February 2014
  45. 45. NEW GESTURES But use a wizard to explain NEW gesture Droidcon Torino - 6/7 February 2014
  46. 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. 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
  48. 48. THE CHANGES SOMETIMES ARE VIRAL Droidcon Torino - 6/7 February 2014
  49. 49. THE CHANGES SOMETIMES ARE VIRAL Also with guidelines…. Should I be reactive ? Be ready.. Droidcon Torino - 6/7 February 2014
  50. 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. 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
  52. 52. Gabriele Mariotti gabri.mariotti@gmail.com www.google.com/+GabrieleMariotti Thank you! Droidcon Torino - 6/7 February 2014

×