How to approach designing for iOS and Android

9 December 2015

Barbara Wajda Interaction Designer

Holly Wall Interaction Designer

Nice to meet you.

ABN AMRO Jumbo

Bright Stamps

OR ?

2

1

1

2

OR ?

22

1 1

Design StrategiesChoosing your approach

Leading device strategy

Consequences of the leading device strategy

+ Less design work (at first)

+ Faster to market - build and release one platform first

- One platform will have to wait

- Higher risk of forcing patterns onto non-leading device

Custom design

- More development time

- Custom designed and developed everything

- Unpredictable behavior with OS updates

+ Most room for innovation

+ More design freedom but also more risk

Platform dedicated solutions

+ Strongest user experience across platforms

- More work - design twice

+ Less development time compared to custom solutions

+ Release at the same time

- Less consistency between designs thus more difficult to maintain

“Exactly 0% of your users care about ‘cross-

platform consistency’ and no, your product

manager does not count.”

Focus on functional consistency

not UI consistency

Major platform differences

Stack of activities

1

2

back button

up button

Hierarchy

2

1

3

Navigation bars

tab bar

hamburger /drawer menu

3

1

2

3

app/tool bar

4

tab bar

tool bar

navigation bar

21

33

Swipe between tabs

Overlapping gestures

Material design iOS 9

Designing for different screen sizes

Developer Advice

“Read the design guidelines…

Marnix Arnold iOS

“Read the design guidelines…

and then keep reading them.”Marnix Arnold

iOS

Body text

• Bullet

Slide title

“Try and use iOS and Android on a daily basis.”

Efren Fernandez Android

“Look at what you can do on each platform

before you start designing.”Tom Bartels

iOSRoderik Lagerweij

Android

May the force be with you…

• Use both iOS and Android on a daily basis

• Only clients & testers compare platforms

• Keep your developers close

• Know the iOS and Android guidelines

• But break the rules

Thank you!

More? Questions? Feedback? Share experience? barbara@icemobile.com holly@icemobile.com

/icemobile /icemobile/IceMobileAmsterdam

Slide 1: http://buildforsearch.com/google-apple-extend-rivalry-auto-industry/

Slide 6-8: Airbnb iOS and Android app

Slide 10-12: Instagram iOS and Android app

Slide 14: YouTube iOS and Android app

Slide 15: http://www.allstarskcpc.org/apply/

Slide 16: Snapchat iOS and Android app

Slide 17: http://lionssharedigital.com/design/5-signs-its-time-to-invest-in-a-new-logo-design/

Slide 18: Spendee iOS and Android app

Slide 19: http://www.trendtailors.com/gentlemen.html

Slide 20: http://www.engadget.com/2013/02/20/bbc-sport-app-android/

Slide 21: Poder PDA: http://www.pulseheadlines.com/wp-content/uploads/2015/09/Runtastic-Moment-collection.jpg

Slide 24-27: http://developer.android.com/design/patterns/navigation.html

Slide 29-35: ABN AMRO Mobiel Bankieren app

Slide 36: Facebook iOS app

Slide 37: https://design.google.com/articles/design-from-ios-to-android/

Photo credits

Slide 38: https://www.google.com/design/spec/layout/structure.html#structure-toolbars

Slide 39: Mail and Clock iOS apps

Slide 40: Clipboard Android app

Slide 41: Jumbo Android app

Slide 42: http://www.phonesreview.co.uk/2014/10/19/nexus-5-on-android-5-0-lollipop-vs-iphone-6-on-ios-8-review/

Slide 43: http://bgr.com/2015/11/07/2013-best-smartphones-iphone-5s-nexus-5-htc-one-m7/

Slide 44: http://citizenk9petcare.com/contact/

Slide 45-46: http://www.asha-labs.com/blog/

Slide 47: http://helpmyhelpdesk.com/how-many-devices-is-too-many/

Slide 49: http://bgr.com/2015/06/03/apple-vs-google-ios-android/

Photo credits