Droidcon Italy: You must and you can: Android UI Patterns

You must and you can: Android UI Patterns

Gabriele Mariotti

Droidcon Torino - 6/7 February 2014

ANDROID GUIDELINES


• Should I follow them?

• Can I write a successful app without

following them?

• Users don’t know them

DEV

CAN I WRITE A SUCCESSFUL APP WITHOUT FOLLOWING THEM?


https://play.google.com/store/apps/details?id=ch.bitspin.timely

Timely by Bitspin

https://play.google.com/store/apps/details?id=ch.bitspin.timely

DEV


Yahoo Weather


https://play.google.com/store/apps/details?id=com.yahoo.mobile.client.android.weather

https://play.google.com/store/apps/details?id=com.yahoo.mobile.client.android.weather&hl=en



Timely by Bitspin

Installs1,000,000 - 5,000,000

Yahoo Weather

Installs5,000,000 - 10,000,000 Updated to December 2013



Timely by Bitspin Yahoo Weather

Updated to December 2013

They are guidelines not RULES, but...



Timely by Bitspin Yahoo Weather

Bitspin WeatherTimely by Yahoo



?

DEV



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

https://plus.google.com/u/0/114892667463719782631/posts/PXGZ48VaqHz

ANDROID GUIDELINES

• Make a beautiful app

• Follow design guidelines

• Optimize your layouts

• Support multiple screens

• Be consistent with the platform


ANDROID GUIDELINES

• I am building a beautiful app

• I should follow design guidelines but...

• I can customize all views

• I can customize all behaviours


A señor developer

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


A user

If one of your user uninstalls your app….

....you will LOSE him for ever!

WHO IS RIGHT?


My designers would like:

I AM WORRIED


• something new

• a great app

My users would like: • an app easy to use

• a great app

Beautiful + easy to use

THEN?


• 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

WHAT DOES IT MEAN???


?

A basic and common example: ACTIONBAR



• 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


Imagine unexpected things

ACTIONBAR SINCE 2011...

• became an official standard pattern with its rules

• became a guideline


Be consistent

• Don’t stop to evolve this component !!!Imagine unexpected things

DEV

YOU MUST: USE THE ACTIONBAR

• Use the ActionBar with its rules

• No Fake-ActionBar

• Customize your ActionBarhttp://jgilfelt.github.io/android-actionbarstylegenerator/)


http://developer.android.com/design/patterns/actionbar.html

Follow guidelines

Be creative

http://jgilfelt.github.io/android-actionbarstylegenerator/


http://developer.android.com/design/patterns/actionbar.ht

DEV

ActionBars haven’t to be identical (..since 2011)

YOU MUST: CUSTOMIZE THE ACTIONBAR




DEV

YOU CAN: USE THE SECOND GENERATION OF ACTIONBAR

FadingActionBar: Google introduced it in Google Play Music


https://github.com/ManuelPeinado/FadingActionBar

https://github.com/ManuelPeinado/FadingActionBar

DEV


NotBoringActionBar: Google introduced it in Google Play Newsstand


https://github.com/flavienlaurent/NotBoringActionBar/

https://github.com/flavienlaurent/NotBoringActionBar/

● 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...


Be creative

Imagine unexpected things

THEN


FadingActionBar, NotBoringActionBar…

Be reactive!! Use

them !!!

DEV


A transparent actionbar


https://play.google.com/store/apps/details?id=flipboard.app

Be creative

https://play.google.com/store/apps/details?id=flipboard.app&hl=it

DEV

YOU CAN: ACTIONBAR + STATUSBAR

Something new… IMMERSIVE FULLSCREEN MODE

• SYSTEM_UI_FLAG_IMMERSIVE

• SYSTEM_UI_FLAG_IMMERSIVE_STICKY


http://developer.android.com/training/system-ui/immersive.html#sticky

http://developer.android.com/reference/android/view/View.html

http://developer.android.com/reference/android/view/View.html

http://developer.android.com/training/system-ui/immersive.html

DEV


A transparent actionbar + transparent status bar


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.

https://play.google.com/store/apps/details?id=com.b2cloud.cookscompanion

DEV


CREATE A BACKGROUNG “TINT”

FOR NAVIGATION & STATUS BARS


https://github.com/jgilfelt/SystemBarTint

Be creative

https://github.com/jgilfelt/SystemBarTint

THEN?

Be reactive!! It is something new...then it can change quickly!

If it will become standard, change your code without breaking

the guidelines.


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


A basic and common example: NAVIGATION DRAWER



• “Facebook navigation”

• Side Navigation

• Fly in app menu

• Sliding menu

• ………….

NAVIGATION DRAWER BEFORE 2013


• was first introduced by third party apps, not by Google.

• had different implementations and behaviours

NAVIGATION DRAWER BEFORE 2013


• Someone had an idea (a magic idea)

• Someone wasn’t afraid to be the first to introduce a new

component Imagine unexpected things

NAVIGATION DRAWER SINCE 2013...

• became an official standard pattern with its rules

• became a guideline

• same behaviour


Be consistent

• Don’t stop to evolve this component !!!Imagine unexpected things

DEV

YOU MUST: USE THE NAVIGATION DRAWER

• Use the Navigation Drawer with its rules

• No Fake-Navigation Drawer

• Customize your Navigation Drawer


http://developer.android.com/design/patterns/navigation-drawer.html

Follow guidelines

Be creative

http://developer.android.com/design/patterns/navigation-drawer.html

Navigation Drawers haven’t to be identical

YOU MUST: CUSTOMIZE THE NAVIGATION DRAWER


● 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...


Be creative and imagine unexpected things

Why????

Why????

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!


Why????

YOU CAN: THE 2nd GENERATION OF NAVIGATION DRAWER?


Available soon….stay tune!

• Add colors

• Add subtle animations but look

out for potential gesture

conflict!

A basic and common example: NEW GESTURES and NEW

PATTERNS



DEV

YESTERDAY : PULL TO REFRESH


https://github.com/chrisbanes/Android-PullToRefresh * deprecated!

It was a new pattern:

● Learned by users

● Not in guidelinesThey were creative

https://github.com/chrisbanes/Android-PullToRefresh

DEV

TODAY: ACTION BAR PULL TO REFRESH


https://github.com/chrisbanes/ActionBar-PullToRefresh

A new pattern:

● Learned by users

● Not in guidelines

● No official codeBe reactive

https://github.com/chrisbanes/ActionBar-PullToRefresh

Don’t be afraid to be the first to

integrate new gestures!

NEW GESTURES


But use a wizard to explain NEW gesture

NEW GESTURES


DEV

Something new… “Circa News” app.

NEW GESTURES:


Be ready..

“Vertical swipe with pagination”

https://play.google.com/store/apps/details?id=cir.ca

https://play.google.com/store/apps/details?id=cir.ca

DEV

Something new… “Tumblr” app.

NEW GESTURES:


Be ready..

“Swipe back”

https://play.google.com/store/apps/details?id=com.tumblr

https://play.google.com/store/apps/details?id=com.tumblr

THE CHANGES SOMETIMES ARE VIRAL


THE CHANGES SOMETIMES ARE VIRAL


Also with guidelines….

Should I be reactive ?

Be ready..

CLOSING


• 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

CLOSING

Remember:


• 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!


Thank you!

Gabriele Mariotti

[email protected]/+GabrieleMariotti

Droidcon Italy: You must and you can: Android UI Patterns

Technology

Transcript of Droidcon Italy: You must and you can: Android UI Patterns