My Android is not an iPhone like any others (Mdevcon 2014)
description
Transcript of My Android is not an iPhone like any others (Mdevcon 2014)
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
�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
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