You must and you can: Android UI Patterns
Gabriele Mariotti
Android Conference Ancona – 15 April 2014
ANDROID GUIDELINES
Android Conference Ancona - 15 April 2014
• Should I follow them?
• Can I write a successful app withou...
DEV
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Android Conference Ancona - 15 April 2014
https://play.google.com...
DEV
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Yahoo Weather
Android Conference Ancona - 15 April 2014
https://p...
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Android Conference Ancona - 15 April 2014
Timely by Bitspin
Installs
...
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Android Conference Ancona - 15 April 2014
Timely by Bitspin Yahoo Wea...
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Android Conference Ancona - 15 April 2014
Timely by Bitspin Yahoo Wea...
Bitspin WeatherTimely by Yahoo
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Android Conference Ancona - 15 April 2...
DEV
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Android Conference Ancona - 15 April 2014
They are guidelines not...
ANDROID GUIDELINES
• Make a beautiful app
• Follow design guidelines
• Optimize your layouts
• Support multiple screens
• ...
ANDROID GUIDELINES
• I am building a beautiful app
• I should follow design guidelines but...
• I can customize all views
...
ANDROID GUIDELINES
• I want a beautiful app, an android beautiful app
• I don’t know about design guidelines but...
• … I ...
If one of your user uninstalls your app….
....you will LOSE him for ever!
WHO IS RIGHT?
Android Conference Ancona - 15 Apr...
My designers would like:
I AM WORRIED
Android Conference Ancona - 15 April 2014
• something new
• a great app
My users wou...
THEN?
Android Conference Ancona - 15 April 2014
• Follow guidelines
• Be creative, but don’t reinvent the wheel
• Be react...
WHAT DOES IT MEAN???
Android Conference Ancona - 15 April 2014
A basic and common example: ACTIONBAR
WHAT DOES IT MEAN???
Android Conference Ancona - 15 April 2014
• Someone had an idea (a magic idea)
• Someone wasn’t afraid to be the first to introduce a new
component
ACTIONBAR BEFORE...
ACTIONBAR SINCE 2011...
• became an official standard pattern with its rules
• became a guideline
Android Conference Ancon...
DEV
YOU MUST: USE THE ACTIONBAR
• Use the ActionBar with its rules
• No Fake-ActionBar
• Customize your ActionBar
http://j...
DEV
ActionBars haven’t to be identical (..since 2011)
YOU MUST: CUSTOMIZE THE ACTIONBAR
Android Conference Ancona - 15 Apr...
DEV
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
FadingActionBar: Google introduced it in Google Play Music
Android Con...
DEV
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
NotBoringActionBar: Google introduced it in Google Play Newsstand
Andr...
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
Google Keep
Android Conference Ancona - 15 April 2014
● Are they in guidelines?
● Did they break guidelines?
● What would have happen if they had not been
built by Google?
HOW ...
THEN
Android Conference Ancona - 15 April 2014
FadingActionBar, NotBoringActionBar…
Be reactive!! Use them !!!
DEV
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
A transparent actionbar
Android Conference Ancona - 15 April 2014
http...
DEV
YOU CAN: ACTIONBAR + STATUSBAR
Something new… IMMERSIVE FULLSCREEN MODE
• SYSTEM_UI_FLAG_IMMERSIVE
• SYSTEM_UI_FLAG_IM...
DEV
YOU CAN: ACTIONBAR + STATUSBAR
A transparent actionbar + transparent status bar
Android Conference Ancona - 15 April 2...
DEV
YOU CAN: ACTIONBAR + STATUSBAR
CREATE A BACKGROUNG “TINT”
FOR NAVIGATION & STATUS BARS
Android Conference Ancona - 15 ...
THEN?
Be reactive!!
It is something new...then it can change quickly!
If it will become standard, change your code without...
THERE CAN BE (FEW) EXCEPTIONS
Break the established patterns when needed
but don't break them just to be different
Don’t r...
A basic and common example: NAVIGATION DRAWER
WHAT DOES IT MEAN???
Android Conference Ancona - 15 April 2014
• “Facebook navigation”
• Side Navigation
• Fly in app menu
• Sliding menu
• ………….
NAVIGATION DRAWER BEFORE 2013
Android C...
• was first introduced by third party apps, not by Google.
• had different implementations and behaviours
NAVIGATION DRAWE...
NAVIGATION DRAWER SINCE 2013...
• became an official standard pattern with its rules
• became a guideline
• same behaviour...
DEV
YOU MUST: USE THE NAVIGATION DRAWER
• Use the Navigation Drawer with its rules
• No Fake-Navigation Drawer
• Customize...
Navigation Drawers haven’t to be identical
YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER
Android Conference Ancona - 15 April ...
● Can I use a custom library instead of the official?
● Can I use a different icon?
● Can I use subtle animations or color...
Google please can you change it?
A little thought:
- built by Google: it is interesting…..
- built by unknown: ..eh?
what ...
YOU CAN: THE 2nd GENERATION OF NAVIGATION DRAWER?
Android Conference Ancona - 15 April 2014
Available soon….stay tune!
• A...
A basic and common example: NEW GESTURES and NEW
PATTERNS
WHAT DOES IT MEAN???
Android Conference Ancona - 15 April 2014
DEV
YESTERDAY : PULL TO REFRESH
Android Conference Ancona - 15 April 2014
https://github.com/chrisbanes/Android-PullToRefr...
DEV
TODAY: ACTION BAR PULL TO REFRESH
Android Conference Ancona - 15 April 2014
https://github.com/chrisbanes/ActionBar-Pu...
DEV
TOMORROW: SWIPEREFRESHLAYOUT
Android Conference Ancona - 15 April 2014
http://developer.android.com/reference/android/...
Don’t be afraid to be the first to
integrate new gestures!
NEW GESTURES
Android Conference Ancona - 15 April 2014
But use a wizard to explain NEW gesture
NEW GESTURES
Android Conference Ancona - 15 April 2014
DEV
Something new… “Circa News” app.
NEW GESTURES:
Android Conference Ancona - 15 April 2014
Be ready..
“Vertical swipe wi...
DEV
Something new… “Tumblr” app.
NEW GESTURES:
Android Conference Ancona - 15 April 2014
Be ready..
“Swipe back”
https://p...
THE CHANGES SOMETIMES ARE VIRAL
Android Conference Ancona - 15 April 2014
THE CHANGES SOMETIMES ARE VIRAL
Android Conference Ancona - 15 April 2014
Also with guidelines….
Should I be reactive ?
Be...
THE CHANGES SOMETIMES ARE VIRAL
Android Conference Ancona - 15 April 2014
Also with guidelines….
Should I be reactive ?
Be...
CLOSING
Android Conference Ancona - 15 April 2014
• Write a great app, following Android guidelines
• Break the establishe...
CLOSING
Remember:
Android Conference Ancona - 15 April 2014
• users expect apps to work in a certain way
• customize your ...
Android Conference Ancona - 15 April 2014
Thank you!
Gabriele Mariotti
gabri.mariotti@gmail.com
www.google.com/+GabrieleMa...
Upcoming SlideShare
Loading in...5
×

Gabriele Mariotti - You must and you can: Android UI Patterns

1,292
-1

Published on

Gabriele Mariotti - You must and you can: Android UI Patterns

ANdroid Conference - 15 Aprile 2014 - GDG Ancona

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

No Downloads
Views
Total Views
1,292
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Gabriele Mariotti - You must and you can: Android UI Patterns

  1. 1. You must and you can: Android UI Patterns Gabriele Mariotti Android Conference Ancona – 15 April 2014
  2. 2. ANDROID GUIDELINES Android Conference Ancona - 15 April 2014 • Should I follow them? • Can I write a successful app without following them? • Users don’t know them
  3. 3. DEV CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Android Conference Ancona - 15 April 2014 https://play.google.com/store/apps/details?id=ch.bitspin.timely Timely by Bitspin
  4. 4. DEV CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Yahoo Weather Android Conference Ancona - 15 April 2014 https://play.google.com/store/apps/details?id=com.yahoo.mobile.client.android.weather
  5. 5. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Android Conference Ancona - 15 April 2014 Timely by Bitspin Installs 1,000,000 - 5,000,000 Yahoo Weather Installs 5,000,000 - 10,000,000 Updated to December 2013
  6. 6. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Android Conference Ancona - 15 April 2014 Timely by Bitspin Yahoo Weather Updated to December 2013 They are guidelines not RULES, but...
  7. 7. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Android Conference Ancona - 15 April 2014 Timely by Bitspin Yahoo Weather
  8. 8. Bitspin WeatherTimely by Yahoo CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Android Conference Ancona - 15 April 2014
  9. 9. DEV CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Android Conference Ancona - 15 April 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
  10. 10. ANDROID GUIDELINES • Make a beautiful app • Follow design guidelines • Optimize your layouts • Support multiple screens • Be consistent with the platform Android Conference Ancona - 15 April 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 Android Conference Ancona - 15 April 2014 A señor developer
  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 Android Conference Ancona - 15 April 2014 A user
  13. 13. If one of your user uninstalls your app…. ....you will LOSE him for ever! WHO IS RIGHT? Android Conference Ancona - 15 April 2014
  14. 14. My designers would like: I AM WORRIED Android Conference Ancona - 15 April 2014 • something new • a great app My users would like: • an app easy to use • a great app Beautiful + easy to use
  15. 15. THEN? Android Conference Ancona - 15 April 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
  16. 16. WHAT DOES IT MEAN??? Android Conference Ancona - 15 April 2014
  17. 17. A basic and common example: ACTIONBAR WHAT DOES IT MEAN??? Android Conference Ancona - 15 April 2014
  18. 18. • 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 Android Conference Ancona - 15 April 2014 Imagine unexpected things
  19. 19. ACTIONBAR SINCE 2011... • became an official standard pattern with its rules • became a guideline Android Conference Ancona - 15 April 2014 Be consistent • Don’t stop to evolve this component !!! Imagine unexpected things
  20. 20. DEV YOU MUST: USE THE ACTIONBAR • Use the ActionBar with its rules • No Fake-ActionBar • Customize your ActionBar http://jgilfelt.github.io/android-actionbarstylegenerator/) Android Conference Ancona - 15 April 2014 http://developer.android.com/design/patterns/actionbar.html Follow guidelines Be creative
  21. 21. DEV ActionBars haven’t to be identical (..since 2011) YOU MUST: CUSTOMIZE THE ACTIONBAR Android Conference Ancona - 15 April 2014 http://jgilfelt.github.io/android-actionbarstylegenerator/
  22. 22. DEV YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR FadingActionBar: Google introduced it in Google Play Music Android Conference Ancona - 15 April 2014 https://github.com/ManuelPeinado/FadingActionBar
  23. 23. DEV YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR NotBoringActionBar: Google introduced it in Google Play Newsstand Android Conference Ancona - 15 April 2014 https://github.com/flavienlaurent/NotBoringActionBar/
  24. 24. YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR Google Keep Android Conference Ancona - 15 April 2014
  25. 25. ● 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... Android Conference Ancona - 15 April 2014 Be creative Imagine unexpected things
  26. 26. THEN Android Conference Ancona - 15 April 2014 FadingActionBar, NotBoringActionBar… Be reactive!! Use them !!!
  27. 27. DEV YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR A transparent actionbar Android Conference Ancona - 15 April 2014 https://play.google.com/store/apps/details?id=flipboard.app Be creative
  28. 28. DEV YOU CAN: ACTIONBAR + STATUSBAR Something new… IMMERSIVE FULLSCREEN MODE • SYSTEM_UI_FLAG_IMMERSIVE • SYSTEM_UI_FLAG_IMMERSIVE_STICKY Android Conference Ancona - 15 April 2014 http://developer.android.com/training/system-ui/immersive.html#sticky
  29. 29. DEV YOU CAN: ACTIONBAR + STATUSBAR A transparent actionbar + transparent status bar Android Conference Ancona - 15 April 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.
  30. 30. DEV YOU CAN: ACTIONBAR + STATUSBAR CREATE A BACKGROUNG “TINT” FOR NAVIGATION & STATUS BARS Android Conference Ancona - 15 April 2014 https://github.com/jgilfelt/SystemBarTint Be creative
  31. 31. THEN? Be reactive!! It is something new...then it can change quickly! If it will become standard, change your code without breaking the guidelines. Android Conference Ancona - 15 April 2014
  32. 32. 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 Android Conference Ancona - 15 April 2014
  33. 33. A basic and common example: NAVIGATION DRAWER WHAT DOES IT MEAN??? Android Conference Ancona - 15 April 2014
  34. 34. • “Facebook navigation” • Side Navigation • Fly in app menu • Sliding menu • …………. NAVIGATION DRAWER BEFORE 2013 Android Conference Ancona - 15 April 2014
  35. 35. • was first introduced by third party apps, not by Google. • had different implementations and behaviours NAVIGATION DRAWER BEFORE 2013 Android Conference Ancona - 15 April 2014 • Someone had an idea (a magic idea) • Someone wasn’t afraid to be the first to introduce a new component Imagine unexpected things
  36. 36. NAVIGATION DRAWER SINCE 2013... • became an official standard pattern with its rules • became a guideline • same behaviour Android Conference Ancona - 15 April 2014 Be consistent • Don’t stop to evolve this component !!! Imagine unexpected things
  37. 37. DEV YOU MUST: USE THE NAVIGATION DRAWER • Use the Navigation Drawer with its rules • No Fake-Navigation Drawer • Customize your Navigation Drawer Android Conference Ancona - 15 April 2014 http://developer.android.com/design/patterns/navigation-drawer.html Follow guidelines Be creative
  38. 38. Navigation Drawers haven’t to be identical YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER Android Conference Ancona - 15 April 2014
  39. 39. ● 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... Android Conference Ancona - 15 April 2014 Be creative and imagine unexpected things Why???? Why????
  40. 40. 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! Android Conference Ancona - 15 April 2014 Why????
  41. 41. YOU CAN: THE 2nd GENERATION OF NAVIGATION DRAWER? Android Conference Ancona - 15 April 2014 Available soon….stay tune! • Add colors • Add subtle animations but look out for potential gesture conflict!
  42. 42. A basic and common example: NEW GESTURES and NEW PATTERNS WHAT DOES IT MEAN??? Android Conference Ancona - 15 April 2014
  43. 43. DEV YESTERDAY : PULL TO REFRESH Android Conference Ancona - 15 April 2014 https://github.com/chrisbanes/Android-PullToRefresh * deprecated! It was a new pattern: ● Learned by users ● Not in guidelines They were creative
  44. 44. DEV TODAY: ACTION BAR PULL TO REFRESH Android Conference Ancona - 15 April 2014 https://github.com/chrisbanes/ActionBar-PullToRefresh A new pattern: ● Learned by users ● Not in guidelines Be reactive
  45. 45. DEV TOMORROW: SWIPEREFRESHLAYOUT Android Conference Ancona - 15 April 2014 http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html A new pattern: ● Official Code released in support library 19.1 ● It is like Google Now Be reactive
  46. 46. Don’t be afraid to be the first to integrate new gestures! NEW GESTURES Android Conference Ancona - 15 April 2014
  47. 47. But use a wizard to explain NEW gesture NEW GESTURES Android Conference Ancona - 15 April 2014
  48. 48. DEV Something new… “Circa News” app. NEW GESTURES: Android Conference Ancona - 15 April 2014 Be ready.. “Vertical swipe with pagination” https://play.google.com/store/apps/details?id=cir.ca
  49. 49. DEV Something new… “Tumblr” app. NEW GESTURES: Android Conference Ancona - 15 April 2014 Be ready.. “Swipe back” https://play.google.com/store/apps/details?id=com.tumblr
  50. 50. THE CHANGES SOMETIMES ARE VIRAL Android Conference Ancona - 15 April 2014
  51. 51. THE CHANGES SOMETIMES ARE VIRAL Android Conference Ancona - 15 April 2014 Also with guidelines…. Should I be reactive ? Be ready..
  52. 52. THE CHANGES SOMETIMES ARE VIRAL Android Conference Ancona - 15 April 2014 Also with guidelines…. Should I be reactive ? Be ready..
  53. 53. CLOSING Android Conference Ancona - 15 April 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
  54. 54. CLOSING Remember: Android Conference Ancona - 15 April 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!
  55. 55. Android Conference Ancona - 15 April 2014 Thank you! Gabriele Mariotti gabri.mariotti@gmail.com www.google.com/+GabrieleMariotti
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×