Droidcon IT 2014: You must and you can: Android UI Patterns

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?

Transcript

1. You must and you can: Android UI Patterns Gabriele Mariotti Droidcon Torino - 6/7 February 2014
2. 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
3. DEV CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Droidcon Torino - 6/7 February 2014 Timely by Bitspin https://play.google.com/store/apps/details?id=ch.bitspin.timely
4. DEV Yahoo Weather CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Droidcon Torino - 6/7 February 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? Droidcon Torino - 6/7 February 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? Droidcon Torino - 6/7 February 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? Droidcon Torino - 6/7 February 2014 Timely by Bitspin Yahoo Weather
8. Bitspin Weather Timely by Yahoo CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM? Droidcon Torino - 6/7 February 2014 ?
9. 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
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 Droidcon Torino - 6/7 February 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 Droidcon Torino - 6/7 February 2014 A user
13. If one of your user uninstalls your app…. ....you will LOSE him for ever! WHO IS RIGHT? Droidcon Torino - 6/7 February 2014
14. 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
15. 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
16. WHAT DOES IT MEAN??? Droidcon Torino - 6/7 February 2014 ?
17. A basic and common example: ACTIONBAR WHAT DOES IT MEAN??? Droidcon Torino - 6/7 February 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 Droidcon Torino - 6/7 February 2014 Imagine unexpected things
19. 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
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/) Droidcon Torino - 6/7 February 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 Droidcon Torino - 6/7 February 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 Droidcon Torino - 6/7 February 2014 https://github.com/ManuelPeinado/FadingActionBar
23. 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/
24. • 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
25. THEN Droidcon Torino - 6/7 February 2014 FadingActionBar, NotBoringActionBar… Be reactive!! Use them !!!
26. 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
27. 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
28. 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.
29. 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
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. A basic and common example: NAVIGATION DRAWER WHAT DOES IT MEAN??? Droidcon Torino - 6/7 February 2014
33. • “Facebook navigation” • Side Navigation • Fly in app menu • Sliding menu • …………. NAVIGATION DRAWER BEFORE 2013 Droidcon Torino - 6/7 February 2014
34. • 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
35. 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
36. 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
37. Navigation Drawers haven’t to be identical YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER Droidcon Torino - 6/7 February 2014
38. • 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????
39. 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????
40. 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!
41. A basic and common example: NEW GESTURES and NEW PATTERNS WHAT DOES IT MEAN??? Droidcon Torino - 6/7 February 2014
42. 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 guidelines They were creative
43. 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 code Be reactive
44. Don’t be afraid to be the first to integrate new gestures! NEW GESTURES Droidcon Torino - 6/7 February 2014
45. But use a wizard to explain NEW gesture NEW GESTURES Droidcon Torino - 6/7 February 2014
46. 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
47. 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
48. THE CHANGES SOMETIMES ARE VIRAL Droidcon Torino - 6/7 February 2014
49. THE CHANGES SOMETIMES ARE VIRAL Droidcon Torino - 6/7 February 2014 Also with guidelines…. Should I be reactive ? Be ready..
50. 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
51. 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!
52. Droidcon Torino - 6/7 February 2014 Thank you! Gabriele Mariotti gabri.mariotti@gmail.com www.google.com/+GabrieleMariotti