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

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.

Adf9d2ff835ce50638fbbc69f3d5183a?s=128

Jérôme Van Der Linden

March 08, 2014
Tweet

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

  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.
  42. None
  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