My Android is not an iPhone
like any others
- Jérôme Van Der Linden -
Jérôme
Van Der Linden

Android Lint
Sonar Plugin

http://android-holo-colors.com

Quality Tools
For Android

jeromevdl

@j...
3
Disclaimer :
I’m not an Android FanBoy… :-)

4
Have you ever heard / said ?
Like iOS !

Respect the design
(ed. iPhone PSD)

This is not the good icon, take
the iPhone o...
Have you ever heard / said ?
Like iOS !

Respect the design
(ed. iPhone PSD)

This is not the good icon, take
the iPhone o...
Marketing
Designers
ex-iOS Developers
!

This is for you !

6
Android is not a second class system anymore !
!

You cannot just say : « OK now that iPhone app is created,
let’s replica...
?
8
?
8
!
9
!
9
Screen resolutions*
A 640x960 PSD is not enough.
Think dp, not px !

1136x960
320x480

* phones only

640x960

xxhdpi
xhdp...
Screen ratios

480

960

Think relative !
Pixel Perfect is not
possible.

320
540

100

11
Back to basics - tabs

http://developer.android.com/design/patterns/pure-android.html

Tabs go on top

12
Back to basics - back button

No back button on your app
The system (or the device)
provides one

http://developer.android...
Back to basics - up button

1

14
Back to basics - up button
Up button is not a back
button : goes 1 level up in
navigation hierarchy

1

2

http://develope...
Back to basics - up button
Up button is not a back
button : goes 1 level up in
navigation hierarchy

1

?
2

http://develo...
Back to basics : app icons

http://developer.android.com/design/style/iconography.html#launcher

15
Back to basics : app icons

No rounded square, no rule!
Feel free :-)

http://developer.android.com/design/style/iconograp...
Back to basics : system icons

Use platform icons to let users
recognize them.

http://developer.android.com/design/downlo...
Back to basics : share / open with

Do not limit the sharing
options to Twitter and Facebook

Use the system sharing Inten...
Back to basics : share / open with

Do not limit the sharing
options to Twitter and Facebook

Use the system sharing Inten...
Back to basics : splashscreen

18
Back to basics : splashscreen

Avoid splash screens !
http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-...
Avoid hidden features

Prefer a visible
arrow
Swipe in UITableView cell

Avoid long press and
others hidden features,
pref...
ActionBar : use it…
Icon and/or Title on the left
Actions on the right
No f*cking back button

iOS Navigation Bar

Android...
ActionBar : and use it again…

Do not leave the screen to
manipulate your data :
sort, filter, modify, delete
http://devel...
ActionBar : and again !

22
ActionBar : and again !

22
ActionBar : and again !
Search in the same screen
… in the ActionBar !

http://developer.android.com/training/search/setup...
Left menu is standard

Navigation Drawer is now a
standard component.
https://developer.android.com/design/patterns/naviga...
But Android is sad like the
Estonian Flag…
#33b5e5
Holo Dark
Holo Light

24
ActionBar : customize it

25
ActionBar : customize it

http://jgilfelt.github.io/android-actionbarstylegenerator
https://developer.android.com/training...
ActionBar : customize it

http://jgilfelt.github.io/android-actionbarstylegenerator
https://developer.android.com/training...
ActionBar : customize it

http://jgilfelt.github.io/android-actionbarstylegenerator
https://developer.android.com/training...
And the rest ? Customize too !
Adopt your branding :
colors, icons, fonts

Android is not only
blue

http://developer.andr...
Innovate !
Expedia

Yahoo! Weather

Grand St.

Timely

Flipboard
27
And go Further !

Widgets are typical Android feature.
Provide fast and easily any information.

28
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
Android is not a second class system anymore !
Users are demanding with app UI and UX, Android UI and UX
!
!
!
...
Be inspired
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

Pattrn
Eye In Sky Weather
Pocket
Timer
Grand st.
Pinterest
Press (rea...
Resources
http://developer.android.com/design/index.html
http://developer.android.com/guide/topics/ui/index.html
http://ww...
jeromevdl

@jeromevdl

+jerome van der linden

39
My Android is not an iPhone like any others (Mdevcon 2014)
Upcoming SlideShare
Loading in...5
×

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

623

Published on

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.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
623
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. My Android is not an iPhone like any others - Jérôme Van Der Linden -
  2. 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. 3
  4. 4. Disclaimer : I’m not an Android FanBoy… :-) 4
  5. 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. 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. 7. Marketing Designers ex-iOS Developers ! This is for you ! 6
  8. 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. 9. ? 8
  10. 10. ? 8
  11. 11. ! 9
  12. 12. ! 9
  13. 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. 14. Screen ratios 480 960 Think relative ! Pixel Perfect is not possible. 320 540 100 11
  15. 15. Back to basics - tabs http://developer.android.com/design/patterns/pure-android.html Tabs go on top 12
  16. 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. 17. Back to basics - up button 1 14
  18. 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. 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. 20. Back to basics : app icons http://developer.android.com/design/style/iconography.html#launcher 15
  21. 21. Back to basics : app icons No rounded square, no rule! Feel free :-) http://developer.android.com/design/style/iconography.html#launcher 15
  22. 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. 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. 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. 25. Back to basics : splashscreen 18
  26. 26. Back to basics : splashscreen Avoid splash screens ! http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/ 18
  27. 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. 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. 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. 30. ActionBar : and again ! 22
  31. 31. ActionBar : and again ! 22
  32. 32. ActionBar : and again ! Search in the same screen … in the ActionBar ! http://developer.android.com/training/search/setup.html 22
  33. 33. Left menu is standard Navigation Drawer is now a standard component. https://developer.android.com/design/patterns/navigation-drawer.html 23
  34. 34. But Android is sad like the Estonian Flag… #33b5e5 Holo Dark Holo Light 24
  35. 35. ActionBar : customize it 25
  36. 36. ActionBar : customize it http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html 25
  37. 37. ActionBar : customize it http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html 25
  38. 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. 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. 40. Innovate ! Expedia Yahoo! Weather Grand St. Timely Flipboard 27
  41. 41. And go Further ! Widgets are typical Android feature. Provide fast and easily any information. 28
  42. 42. Good or Bad ? 30
  43. 43. Good or Bad ? 30
  44. 44. Good or Bad ? 31
  45. 45. Good or Bad ? 31
  46. 46. Good or Bad ? 32
  47. 47. Good or Bad ? 32
  48. 48. Good or Bad ? 33
  49. 49. Good or Bad ? 33
  50. 50. Good or Bad ? 34
  51. 51. Good or Bad ? 34
  52. 52. Good or Bad ? 35
  53. 53. Good or Bad ? 35
  54. 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. 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. 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. 57. jeromevdl @jeromevdl +jerome van der linden 39
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×