gabriele mariotti - you must and you can: android ui patterns
DESCRIPTION
Gabriele Mariotti - You must and you can: Android UI Patterns ANdroid Conference - 15 Aprile 2014 - GDG AnconaTRANSCRIPT
![Page 1: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/1.jpg)
You must and you can: Android UI Patterns
Gabriele Mariotti
Android Conference Ancona – 15 April 2014
![Page 2: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/2.jpg)
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
![Page 3: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/3.jpg)
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
![Page 4: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/4.jpg)
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
![Page 5: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/5.jpg)
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Android Conference Ancona - 15 April 2014
Timely by Bitspin
Installs1,000,000 - 5,000,000
Yahoo Weather
Installs5,000,000 - 10,000,000 Updated to December 2013
![Page 6: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/6.jpg)
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...
![Page 7: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/7.jpg)
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Android Conference Ancona - 15 April 2014
Timely by Bitspin Yahoo Weather
![Page 8: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/8.jpg)
Bitspin WeatherTimely by Yahoo
CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?
Android Conference Ancona - 15 April 2014
?
![Page 9: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/9.jpg)
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
![Page 10: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/10.jpg)
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
![Page 11: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/11.jpg)
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
![Page 12: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/12.jpg)
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
![Page 13: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/13.jpg)
If one of your user uninstalls your app….
....you will LOSE him for ever!
WHO IS RIGHT?
Android Conference Ancona - 15 April 2014
![Page 14: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/14.jpg)
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
![Page 15: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/15.jpg)
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
![Page 16: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/16.jpg)
WHAT DOES IT MEAN???
Android Conference Ancona - 15 April 2014
?
![Page 17: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/17.jpg)
A basic and common example: ACTIONBAR
WHAT DOES IT MEAN???
Android Conference Ancona - 15 April 2014
![Page 18: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/18.jpg)
• 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
![Page 19: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/19.jpg)
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
![Page 20: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/20.jpg)
DEV
YOU MUST: USE THE ACTIONBAR
• Use the ActionBar with its rules
• No Fake-ActionBar
• Customize your ActionBarhttp://jgilfelt.github.io/android-actionbarstylegenerator/)
Android Conference Ancona - 15 April 2014
http://developer.android.com/design/patterns/actionbar.html
Follow guidelines
Be creative
![Page 21: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/21.jpg)
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/
![Page 22: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/22.jpg)
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
![Page 23: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/23.jpg)
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/
![Page 24: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/24.jpg)
YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR
Google Keep
Android Conference Ancona - 15 April 2014
![Page 25: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/25.jpg)
● 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
![Page 26: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/26.jpg)
THEN
Android Conference Ancona - 15 April 2014
FadingActionBar, NotBoringActionBar…
Be reactive!! Use
them !!!
![Page 27: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/27.jpg)
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
![Page 28: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/28.jpg)
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
![Page 29: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/29.jpg)
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.
![Page 30: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/30.jpg)
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
![Page 31: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/31.jpg)
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
![Page 32: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/32.jpg)
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
![Page 33: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/33.jpg)
A basic and common example: NAVIGATION DRAWER
WHAT DOES IT MEAN???
Android Conference Ancona - 15 April 2014
![Page 34: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/34.jpg)
• “Facebook navigation”
• Side Navigation
• Fly in app menu
• Sliding menu
• ………….
NAVIGATION DRAWER BEFORE 2013
Android Conference Ancona - 15 April 2014
![Page 35: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/35.jpg)
• 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
![Page 36: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/36.jpg)
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
![Page 37: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/37.jpg)
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
![Page 38: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/38.jpg)
Navigation Drawers haven’t to be identical
YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER
Android Conference Ancona - 15 April 2014
![Page 39: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/39.jpg)
● 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????
![Page 40: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/40.jpg)
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????
![Page 41: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/41.jpg)
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!
![Page 42: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/42.jpg)
A basic and common example: NEW GESTURES and NEW
PATTERNS
WHAT DOES IT MEAN???
Android Conference Ancona - 15 April 2014
![Page 43: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/43.jpg)
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 guidelinesThey were creative
![Page 44: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/44.jpg)
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
![Page 45: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/45.jpg)
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 NowBe reactive
![Page 46: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/46.jpg)
Don’t be afraid to be the first to
integrate new gestures!
NEW GESTURES
Android Conference Ancona - 15 April 2014
![Page 47: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/47.jpg)
But use a wizard to explain NEW gesture
NEW GESTURES
Android Conference Ancona - 15 April 2014
![Page 48: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/48.jpg)
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
![Page 49: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/49.jpg)
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
![Page 50: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/50.jpg)
THE CHANGES SOMETIMES ARE VIRAL
Android Conference Ancona - 15 April 2014
![Page 51: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/51.jpg)
THE CHANGES SOMETIMES ARE VIRAL
Android Conference Ancona - 15 April 2014
Also with guidelines….
Should I be reactive ?
Be ready..
![Page 52: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/52.jpg)
THE CHANGES SOMETIMES ARE VIRAL
Android Conference Ancona - 15 April 2014
Also with guidelines….
Should I be reactive ?
Be ready..
![Page 53: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/53.jpg)
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
![Page 54: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/54.jpg)
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!
![Page 55: Gabriele Mariotti - You must and you can: Android UI Patterns](https://reader038.vdocument.in/reader038/viewer/2022103015/54c806a94a79599c148b459a/html5/thumbnails/55.jpg)
Android Conference Ancona - 15 April 2014
Thank you!
Gabriele Mariotti
[email protected]/+GabrieleMariotti