Gabriele Mariotti - You must and you can: Android UI Patterns ANdroid Conference - 15 Aprile 2014 - GDG Ancona

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