Design

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.
Categories
Published
of 58
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Related Documents
Share
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. Disclaimer : I’m not an Android FanBoy… :-) 4
  • 5. Have you ever heard / said ? Like iOS ! Respect the design (ed. iPhone PSD) This is not the good icon, take the iPhone one Androïd and iOS the same* * In France an android is « androïde » with a diaeresis idem as iPad 5
  • 6. Have you ever heard / said ? Like iOS ! Respect the design (ed. iPhone PSD) This is not the good icon, take the iPhone one Androïd and iOS the same* * In France an android is « androïde » with a diaeresis idem as iPad 5
  • 7. Marketing Designers ex-iOS Developers ! This is for you ! 6
  • 8. 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… 7
  • 9. ? 8
  • 10. ? 8
  • 11. ! 9
  • 12. ! 9
  • 13. Screen resolutions* A 640x960 PSD is not enough. Think dp, not px ! 1136x960 320x480 * phones only 640x960 xxhdpi xhdpi hdpi mdpi ldpi 960x1280 1080x1920 480x600 768x1280 768x1152 768x1024 720x1280 480x854 480x800 540x960 320x480 240x320 10
  • 14. Screen ratios 480 960 Think relative ! Pixel Perfect is not possible. 320 540 100 11
  • 15. Back to basics - tabs http://developer.android.com/design/patterns/pure-android.html Tabs go on top 12
  • 16. Back to basics - back button No back button on your app The system (or the device) provides one http://developer.android.com/design/patterns/navigation.html 13
  • 17. Back to basics - up button 1 14
  • 18. Back to basics - up button Up button is not a back button : goes 1 level up in navigation hierarchy 1 2 http://developer.android.com/design/patterns/navigation.html#up-vs-back 14
  • 19. Back to basics - up button Up button is not a back button : goes 1 level up in navigation hierarchy 1 ? 2 http://developer.android.com/design/patterns/navigation.html#up-vs-back 14
  • 20. Back to basics : app icons http://developer.android.com/design/style/iconography.html#launcher 15
  • 21. Back to basics : app icons No rounded square, no rule! Feel free :-) http://developer.android.com/design/style/iconography.html#launcher 15
  • 22. Back to basics : system icons Use platform icons to let users recognize them. http://developer.android.com/design/downloads/index.html#action-bar-icon-pack http://developer.android.com/design/style/iconography.html 16
  • 23. Back to basics : share / open with Do not limit the sharing options to Twitter and Facebook Use the system sharing Intent (ACTION_SEND) or ACTION_VIEW with appropriate mimetype 17
  • 24. Back to basics : share / open with Do not limit the sharing options to Twitter and Facebook Use the system sharing Intent (ACTION_SEND) or ACTION_VIEW with appropriate mimetype 17
  • 25. Back to basics : splashscreen 18
  • 26. Back to basics : splashscreen Avoid splash screens ! http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/ 18
  • 27. Avoid hidden features Prefer a visible arrow Swipe in UITableView cell Avoid long press and others hidden features, prefer a clickable element 19
  • 28. ActionBar : use it… Icon and/or Title on the left Actions on the right No f*cking back button iOS Navigation Bar Android ActionBar … but use it well ! ActionBar is contextual to the screen and is part of Android (do not reinvent the wheel) http://developer.android.com/guide/topics/ui/actionbar.html 20
  • 29. ActionBar : and use it again… Do not leave the screen to manipulate your data : sort, filter, modify, delete http://developer.android.com/guide/topics/ui/actionbar.html#Dropdown http://developer.android.com/guide/topics/ui/actionbar.html#SplitBar 21
  • 30. ActionBar : and again ! 22
  • 31. ActionBar : and again ! 22
  • 32. ActionBar : and again ! Search in the same screen … in the ActionBar ! http://developer.android.com/training/search/setup.html 22
  • 33. Left menu is standard Navigation Drawer is now a standard component. https://developer.android.com/design/patterns/navigation-drawer.html 23
  • 34. But Android is sad like the Estonian Flag… #33b5e5 Holo Dark Holo Light 24
  • 35. ActionBar : customize it 25
  • 36. ActionBar : customize it http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html 25
  • 37. ActionBar : customize it http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html 25
  • 38. ActionBar : customize it http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html https://github.com/ManuelPeinado/FadingActionBar 25
  • 39. And the rest ? Customize too ! Adopt your branding : colors, icons, fonts Android is not only blue http://developer.android.com/design/style/branding.html http://android-holo-colors.com/ 26
  • 40. Innovate ! Expedia Yahoo! Weather Grand St. Timely Flipboard 27
  • 41. And go Further ! Widgets are typical Android feature. Provide fast and easily any information. 28
  • 42. Good or Bad ? 30
  • 43. Good or Bad ? 30
  • 44. Good or Bad ? 31
  • 45. Good or Bad ? 31
  • 46. Good or Bad ? 32
  • 47. Good or Bad ? 32
  • 48. Good or Bad ? 33
  • 49. Good or Bad ? 33
  • 50. Good or Bad ? 34
  • 51. Good or Bad ? 34
  • 52. Good or Bad ? 35
  • 53. Good or Bad ? 35
  • 54. Conclusion 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/ :-) 36
  • 55. 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
  • 56. Resources http://developer.android.com/design/index.html http://developer.android.com/guide/topics/ui/index.html http://www.androiduipatterns.com/ Android Design in Action on Youtube 38
  • 57. jeromevdl @jeromevdl +jerome van der linden 39
  • Search
    Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks