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? [email protected] [email protected]
/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