Gabriele Mariotti - You must and you can: Android UI Patterns
- 1. You must and you can: Android UI Patterns Gabriele Mariotti Android Conference Ancona – 15 April 2014
- 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. 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. 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. 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. 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. CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Android Conference Ancona - 15 April 2014 Timely by Bitspin Yahoo Weather
- 8. Bitspin WeatherTimely by Yahoo CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Android Conference Ancona - 15 April 2014
- 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. 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. 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. 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. If one of your user uninstalls your app…. ....you will LOSE him for ever! WHO IS RIGHT? Android Conference Ancona - 15 April 2014
- 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. 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. WHAT DOES IT MEAN??? Android Conference Ancona - 15 April 2014
- 17. A basic and common example: ACTIONBAR WHAT DOES IT MEAN??? Android Conference Ancona - 15 April 2014
- 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. 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. 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. 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. 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. 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. YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR Google Keep Android Conference Ancona - 15 April 2014
- 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. THEN Android Conference Ancona - 15 April 2014 FadingActionBar, NotBoringActionBar… Be reactive!! Use them !!!
- 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. 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. 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. 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. 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. 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. A basic and common example: NAVIGATION DRAWER WHAT DOES IT MEAN??? Android Conference Ancona - 15 April 2014
- 34. • “Facebook navigation” • Side Navigation • Fly in app menu • Sliding menu • …………. NAVIGATION DRAWER BEFORE 2013 Android Conference Ancona - 15 April 2014
- 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. 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. 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. Navigation Drawers haven’t to be identical YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER Android Conference Ancona - 15 April 2014
- 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. 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. 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. A basic and common example: NEW GESTURES and NEW PATTERNS WHAT DOES IT MEAN??? Android Conference Ancona - 15 April 2014
- 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. 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. 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. Don’t be afraid to be the first to integrate new gestures! NEW GESTURES Android Conference Ancona - 15 April 2014
- 47. But use a wizard to explain NEW gesture NEW GESTURES Android Conference Ancona - 15 April 2014
- 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. 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. THE CHANGES SOMETIMES ARE VIRAL Android Conference Ancona - 15 April 2014
- 51. THE CHANGES SOMETIMES ARE VIRAL Android Conference Ancona - 15 April 2014 Also with guidelines…. Should I be reactive ? Be ready..
- 52. THE CHANGES SOMETIMES ARE VIRAL Android Conference Ancona - 15 April 2014 Also with guidelines…. Should I be reactive ? Be ready..
- 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. 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. Android Conference Ancona - 15 April 2014 Thank you! Gabriele Mariotti gabri.mariotti@gmail.com www.google.com/+GabrieleMariotti