My Android is not an iPhone like any others

- Jérôme Van Der Linden -

Jérôme Van Der Linden

Android Lint Sonar Plugin

http://android-holo-colors.comQuality Tools For Android

jeromevdl @jeromevdl +jerome van der linden �2

�3

�4

Disclaimer : I’m not an Android FanBoy… :-)

Have you ever heard / said ?

�5

Like iOS !Respect the design

(ed. iPhone PSD)

Androïd and iOS the same* idem as iPad

This is not the good icon, take the iPhone one

* In France an android is « androïde » with a diaeresis

Have you ever heard / said ?

�5

Like iOS !Respect the design

(ed. iPhone PSD)

Androïd and iOS the same* idem as iPad

This is not the good icon, take the iPhone one

* In France an android is « androïde » with a diaeresis

�6

Marketing Designers

ex-iOS Developers !

This is for you !

�7

Android is not a second class system anymore ! !

You cannot just say : « OK now that iPhone app is created, let’s replicate it on Android »

!Users are demanding and want Android apps

!They will remind you if you forget…

?

�8

?

�8

!

�9

!

�9

Screen resolutions*

320x480 640x9601136x960

320x480 240x320480x800 540x960

720x1280

1080x1920

768x1024768x1280

480x854

480x600768x1152

960x1280

A 640x960 PSD is not enough. Think dp, not px !

�10

ldpi mdpihdpixhdpi

xxhdpi

* phones only

Screen ratios48

0 960

320

540 100 �11

Think relative ! Pixel Perfect is not

possible.

Back to basics - tabs

�12Tabs go on top

http://developer.android.com/design/patterns/pure-android.html

Back to basics - back button

�13

No back button on your app The system (or the device)

provides one

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

Back to basics - up button

�14

1

Back to basics - up button

�14

Up button is not a back button : goes 1 level up in

navigation hierarchy

http://developer.android.com/design/patterns/navigation.html#up-vs-back

1

2

Back to basics - up button

�14

Up button is not a back button : goes 1 level up in

navigation hierarchy

http://developer.android.com/design/patterns/navigation.html#up-vs-back

?

1

2

Back to basics : app icons

�15http://developer.android.com/design/style/iconography.html#launcher

Back to basics : app icons

�15

No rounded square, no rule! Feel free :-)

http://developer.android.com/design/style/iconography.html#launcher

Back to basics : system icons

�16http://developer.android.com/design/style/iconography.html

Use platform icons to let users recognize them.

http://developer.android.com/design/downloads/index.html#action-bar-icon-pack

Back to basics : share / open with

�17

Do not limit the sharing options to Twitter and Facebook

Use the system sharing Intent (ACTION_SEND) or ACTION_VIEW with appropriate mimetype

Back to basics : share / open with

�17

Do not limit the sharing options to Twitter and Facebook

Use the system sharing Intent (ACTION_SEND) or ACTION_VIEW with appropriate mimetype

Back to basics : splashscreen

�18

Back to basics : splashscreen

�18

Avoid splash screens !http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/

Avoid hidden features

�19

Swipe in UITableView cell

Prefer a visible arrow

Avoid long press and others hidden features,

prefer a clickable element

ActionBar : use it…

�20

iOS Navigation Bar

… but use it well ! ActionBar is contextual to the screen and is part of Android (do not reinvent the wheel)

Android ActionBar

Icon and/or Title on the left Actions on the right

No f*cking back button

http://developer.android.com/guide/topics/ui/actionbar.html

ActionBar : and use it again…

�21http://developer.android.com/guide/topics/ui/actionbar.html#SplitBar

Do not leave the screen to manipulate your data :

sort, filter, modify, delete

http://developer.android.com/guide/topics/ui/actionbar.html#Dropdown

ActionBar : and again !

�22

ActionBar : and again !

�22

ActionBar : and again !

�22

Search in the same screen … in the ActionBar !

http://developer.android.com/training/search/setup.html

Left menu is standard

�23https://developer.android.com/design/patterns/navigation-drawer.html

Navigation Drawer is now a standard component.

�24

But Android is sad like the Estonian Flag…

Holo Dark

Holo Light

#33b5e5

ActionBar : customize it

�25

ActionBar : customize it

�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html

ActionBar : customize it

�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html

ActionBar : customize it

�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html https://github.com/ManuelPeinado/FadingActionBar

And the rest ? Customize too !

�26http://developer.android.com/design/style/branding.html http://android-holo-colors.com/

Android is not only blue

Adopt your branding : colors, icons, fonts

Innovate !

�27

Expedia

Grand St.

Yahoo! Weather

Flipboard

Timely

And go Further !

�28

Widgets are typical Android feature. Provide fast and easily any information.

Good or Bad ?

�30

Good or Bad ?

�30

Good or Bad ?

�31

Good or Bad ?

�31

Good or Bad ?

�32

Good or Bad ?

�32

Good or Bad ?

�33

Good or Bad ?

�33

Good or Bad ?

�34

Good or Bad ?

�34

Good or Bad ?

�35

Good or Bad ?

�35

Conclusion

�36

Android is not a second class system anymore ! Users are demanding with app UI and UX, Android UI and UX !!!!!!!!Two solutions : 1/ Respect Android guidelines / do NOT clone iOS screens 2/ Innovate ! but respect 1/ :-)

Be inspired• Pattrn • Eye In Sky Weather • Pocket • Timer • Grand st. • Pinterest • Press (reader) • NYTimes • Expedia • Flipboard • TED • Timely • Circa • Etsy • airbnb • The Whole Pantry • Runtastic Heart Rate PRO • Tumblr • Umano • Yahoo! Weather

�37

Resources

�38

http://www.androiduipatterns.com/

http://developer.android.com/guide/topics/ui/index.html

http://developer.android.com/design/index.html

Android Design in Action on Youtube

�39jeromevdl @jeromevdl +jerome van der linden