My Android is not an iPhone like any others (Mdevcon 2014)

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

1. My Android is not an iPhone like any others - Jérôme Van Der Linden -
2. Jérôme Van Der Linden Android Lint Sonar Plugin http://android-holo-colors.com Quality Tools For Android jeromevdl @jeromevdl +jerome van der linden 2
4. 4 Disclaimer : I’m not an Android FanBoy… :-)
5. 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. 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
7. 6 Marketing Designers ex-iOS Developers ! This is for you !
8. 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…
9. ? 8
10. ? 8
11. ! 9
12. ! 9
13. Screen resolutions* 320x480 640x960 1136x960 320x480 240x320 480x800 540x960 720x1280 1080x1920 768x1024 768x1280 480x854 480x600 768x1152 960x1280 A 640x960 PSD is not enough. Think dp, not px ! 10 ldpi mdpi hdpi xhdpi xxhdpi * phones only
14. Screen ratios 480 960 320 540 100 11 Think relative ! Pixel Perfect is not possible.
15. Back to basics - tabs 12 Tabs go on top http://developer.android.com/design/patterns/pure-android.html
16. 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
17. Back to basics - up button 14 1
18. 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
19. 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
20. Back to basics : app icons 15 http://developer.android.com/design/style/iconography.html#launcher
21. Back to basics : app icons 15 No rounded square, no rule! Feel free :-) http://developer.android.com/design/style/iconography.html#launcher
22. Back to basics : system icons 16 http://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
23. 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
24. 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
25. Back to basics : splashscreen 18
26. Back to basics : splashscreen 18 Avoid splash screens ! http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/
27. Avoid hidden features 19 Swipe in UITableView cell Prefer a visible arrow Avoid long press and others hidden features, prefer a clickable element
28. 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
29. ActionBar : and use it again… 21 http://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
30. ActionBar : and again ! 22
31. ActionBar : and again ! 22
32. ActionBar : and again ! 22 Search in the same screen … in the ActionBar ! http://developer.android.com/training/search/setup.html
33. Left menu is standard 23 https://developer.android.com/design/patterns/navigation-drawer.html Navigation Drawer is now a standard component.
34. 24 But Android is sad like the Estonian Flag… Holo Dark Holo Light #33b5e5
35. ActionBar : customize it 25
36. ActionBar : customize it 25 http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html
37. ActionBar : customize it 25 http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html
38. ActionBar : customize it 25 http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html https://github.com/ManuelPeinado/FadingActionBar
39. And the rest ? Customize too ! 26 http://developer.android.com/design/style/branding.html http://android-holo-colors.com/ Android is not only blue Adopt your branding : colors, icons, fonts
40. Innovate ! 27 Expedia Grand St. Yahoo! Weather Flipboard Timely
41. And go Further ! 28 Widgets are typical Android feature. Provide fast and easily any information.
43. Good or Bad ? 30
44. Good or Bad ? 30
45. Good or Bad ? 31
46. Good or Bad ? 31
47. Good or Bad ? 32
48. Good or Bad ? 32
49. Good or Bad ? 33
50. Good or Bad ? 33
51. Good or Bad ? 34
52. Good or Bad ? 34
53. Good or Bad ? 35
54. Good or Bad ? 35
55. 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/ :-)
56. 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
57. 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
58. 39 jeromevdl @jeromevdl +jerome van der linden