advertisement

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

100 %
0 %
advertisement
Information about My Android is not an iPhone like any others (Mdevcon 2014)
Design

Published on March 8, 2014

Author: jeromevdl

Source: slideshare.net

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

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 @jeromevdl +jerome van der linden 2

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 one Androïd and iOS the same* * In France an android is « androïde » with a diaeresis idem as iPad 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

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 replicate it on Android » ! Users are demanding and want Android apps ! They will remind you if you forget… 7

? 8

? 8

! 9

! 9

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

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.com/design/patterns/navigation.html 13

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://developer.android.com/design/patterns/navigation.html#up-vs-back 14

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

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/iconography.html#launcher 15

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

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

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

Back to basics : splashscreen 18

Back to basics : splashscreen Avoid splash screens ! http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/ 18

Avoid hidden features Prefer a visible arrow Swipe in UITableView cell Avoid long press and others hidden features, prefer a clickable element 19

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

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

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.html 22

Left menu is standard Navigation Drawer is now a standard component. https://developer.android.com/design/patterns/navigation-drawer.html 23

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/basics/actionbar/styling.html 25

ActionBar : customize it http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html 25

ActionBar : customize it http://jgilfelt.github.io/android-actionbarstylegenerator https://developer.android.com/training/basics/actionbar/styling.html https://github.com/ManuelPeinado/FadingActionBar 25

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

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 ! ! ! ! ! ! ! ! Two solutions : 1/ Respect Android guidelines / do NOT clone iOS screens 2/ Innovate ! but respect 1/ :-) 36

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

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

jeromevdl @jeromevdl +jerome van der linden 39

#33b5e5 presentations

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Can an iPhone user learn to love Android? | Macworld

I’ve been using an iPhone for a few years, but I’ve always been curious about Android. Not because I didn’t like my iPhone, but I wanted to know if I ...
Read more

Four Reasons To Switch From Android To iPhone - Forbes

... I switched back to iPhone this month. I liked my Android ... 2014: See this post on ... supports Pandora and Stitcher on iOS and not on ...
Read more

iPhone vs Android: Which Smartphone Should You Buy?

iPhone vs Android: Which Smartphone Should You Buy? ... Android was not a very easy piece of ... It is difficult to recommend either iPhone or Android ...
Read more

5 great Android apps that do amazing things the iPhone can’t

5 great Android apps that do amazing things the iPhone ... use it in any other apps. Swype for Android ... my iPhone won’t ...
Read more

6 Android Phones Better Than The iPhone 6

Type something like iphone 6s vs galaxy ... focused actions through its customised Android OS. Image: © 2014 ... the iPhone 6 is not water ...
Read more

Apple iPhone 6 review - CNET - Product reviews and prices ...

This is my first time seeing CNET's iPhone 6 review ... my switch to Android (my 2nd ... not exactly delicate, but, like any other ...
Read more

Wheres My Droid - Android Apps on Google Play

How do I use it for my phone, not the tablet? ... like a person sending up a flair. ... Quickly locate iPhone,Android phone.
Read more

iPhone Vs Android Comparison: What it’s like to switch ...

... the iPhone and switching to Android is ... any sense of strong emotion towards Android, ... shop and not come away looking like justin ...
Read more

iPhone: Activating My iPhone - Apple

Any new contacts I add will not be ... (I am going from an android to an iphone 4S. My contacts ... (is T mobile contract free iPhone work with other ...
Read more