my android is not an iphone like any others (mdevcon 2014)
DESCRIPTION
This talk was about Android UX and design. Avoid mimic or replicate iOs screens on your Android apps, just try to respect the Google guidelines. You'll probably get better score on the Play Store, and better respect from your users.TRANSCRIPT
![Page 2: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/2.jpg)
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
![Page 4: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/4.jpg)
�4
Disclaimer : I’m not an Android FanBoy… :-)
![Page 5: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/5.jpg)
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
![Page 6: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/6.jpg)
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
![Page 7: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/7.jpg)
�6
Marketing Designers
ex-iOS Developers !
This is for you !
![Page 8: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/8.jpg)
�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…
![Page 9: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/9.jpg)
?
�8
![Page 10: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/10.jpg)
?
�8
![Page 11: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/11.jpg)
!
�9
![Page 12: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/12.jpg)
!
�9
![Page 13: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/13.jpg)
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
![Page 14: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/14.jpg)
Screen ratios48
0 960
320
540 100 �11
Think relative ! Pixel Perfect is not
possible.
![Page 15: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/15.jpg)
Back to basics - tabs
�12Tabs go on top
http://developer.android.com/design/patterns/pure-android.html
![Page 16: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/16.jpg)
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
![Page 17: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/17.jpg)
Back to basics - up button
�14
1
![Page 18: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/18.jpg)
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
![Page 19: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/19.jpg)
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
![Page 20: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/20.jpg)
Back to basics : app icons
�15http://developer.android.com/design/style/iconography.html#launcher
![Page 21: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/21.jpg)
Back to basics : app icons
�15
No rounded square, no rule! Feel free :-)
http://developer.android.com/design/style/iconography.html#launcher
![Page 22: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/22.jpg)
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
![Page 23: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/23.jpg)
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
![Page 24: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/24.jpg)
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
![Page 25: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/25.jpg)
Back to basics : splashscreen
�18
![Page 26: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/26.jpg)
Back to basics : splashscreen
�18
Avoid splash screens !http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/
![Page 27: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/27.jpg)
Avoid hidden features
�19
Swipe in UITableView cell
Prefer a visible arrow
Avoid long press and others hidden features,
prefer a clickable element
![Page 28: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/28.jpg)
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
![Page 29: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/29.jpg)
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
![Page 30: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/30.jpg)
ActionBar : and again !
�22
![Page 31: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/31.jpg)
ActionBar : and again !
�22
![Page 32: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/32.jpg)
ActionBar : and again !
�22
Search in the same screen … in the ActionBar !
http://developer.android.com/training/search/setup.html
![Page 33: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/33.jpg)
Left menu is standard
�23https://developer.android.com/design/patterns/navigation-drawer.html
Navigation Drawer is now a standard component.
![Page 34: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/34.jpg)
�24
But Android is sad like the Estonian Flag…
Holo Dark
Holo Light
#33b5e5
![Page 35: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/35.jpg)
ActionBar : customize it
�25
![Page 36: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/36.jpg)
ActionBar : customize it
�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html
![Page 37: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/37.jpg)
ActionBar : customize it
�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html
![Page 38: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/38.jpg)
ActionBar : customize it
�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html https://github.com/ManuelPeinado/FadingActionBar
![Page 39: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/39.jpg)
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
![Page 40: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/40.jpg)
Innovate !
�27
Expedia
Grand St.
Yahoo! Weather
Timely
![Page 41: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/41.jpg)
And go Further !
�28
Widgets are typical Android feature. Provide fast and easily any information.
![Page 42: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/42.jpg)
![Page 43: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/43.jpg)
Good or Bad ?
�30
![Page 44: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/44.jpg)
Good or Bad ?
�30
![Page 45: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/45.jpg)
Good or Bad ?
�31
![Page 46: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/46.jpg)
Good or Bad ?
�31
![Page 47: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/47.jpg)
Good or Bad ?
�32
![Page 48: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/48.jpg)
Good or Bad ?
�32
![Page 49: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/49.jpg)
Good or Bad ?
�33
![Page 50: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/50.jpg)
Good or Bad ?
�33
![Page 51: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/51.jpg)
Good or Bad ?
�34
![Page 52: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/52.jpg)
Good or Bad ?
�34
![Page 53: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/53.jpg)
Good or Bad ?
�35
![Page 54: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/54.jpg)
Good or Bad ?
�35
![Page 55: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/55.jpg)
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/ :-)
![Page 56: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/56.jpg)
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
![Page 57: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/57.jpg)
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
![Page 58: My Android is not an iPhone like any others (Mdevcon 2014)](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8068a4a7959671a8b4579/html5/thumbnails/58.jpg)
�39jeromevdl @jeromevdl +jerome van der linden