- The document discusses differences between Android and iOS app design, arguing that Android apps should not simply mimic the iPhone interface but rather respect Android design guidelines and leverage unique Android features. - Key recommendations include using the action bar properly, supporting various screen sizes and ratios, utilizing Android-specific elements like widgets and the navigation drawer, and innovating beyond just copying the iOS look and feel. - Developers are encouraged to customize their apps with branding colors, icons and fonts while still adhering to basic Android paradigms for navigation, icons and shared intents.

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

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

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

58. jeromevdl
@jeromevdl
+jerome van der linden
39