ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Teaching Your Client Android Design, or, Don't Be An iPhoney

?Download as PPTX, PDF?
?
K
Kenton Price

This document discusses teaching clients proper Android design by avoiding direct ports from iOS ("iPhoney") apps. It emphasizes that Android apps should be designed specifically for Android, following Material Design guidelines and principles like responsive design. The document outlines issues with pixel-perfect designs across devices and provides case studies of successfully transitioning apps like The Sun Mobile and BBC Weather from iOS to high-quality Android apps by adding recommended Android features and patterns.

1 of 47
Downloaded 16 times
Teaching your client Android design or Don¡¯t be an iPhoney Kenton Price Novoda Ltd kenton@novoda.com www.novoda.com @LFT_Android
Audience Developers and People that want a nice easy session to kick off their conference
Who is Kenton Price? Co-founded Little Fluffy Toys Ltd in 2009 Android specialist consultancy and software house Now working at Novoda on The Sun Mobile I don¡¯t work for Google, but know them very well Six apps featured on Play Store / Android Market
Why the hell am I at an iOS conference? Last autumn I gave this talk at Droidcon, the community-led Android developer conference iOSDevUK organisers approached me afterwards saying it¡¯s the best iOS to Android talk they¡¯ve seen, and they decided to inflict it upon you all
The problem You are given designs for the iPhone ¡°But that¡¯s just like Android, right?¡± Rid the world of these iPhoney apps now!
The problem Android users want Android apps Android users can tell when it¡¯s an iPhone port Android users will slate you if you¡¯re a lazy sod
The problem with graphic designers Designers design to the pixel in Photoshop Pixel-perfect designs for one 640p device ...and one for its shorter predecessor ...that¡¯s just like its low-res 320p granny
The problem with pixel-perfect You can make two pixel-perfect designs for iPhone But for Android...
Device screen resolutions iPhone: 3 (and 2 are duplicates) Android: 428
Pixel-perfect for Android is impossible ¡ñ Use principles of responsive web design ¡ñ Define stretch areas, horizontally & vertically ¡ñ Use spacers ¡ð View width/height=0dp, layout_weight=1/2/3 etc. ¡ñ Define boundary points ¡ð different designs kick in when larger than this height and/or width ¡ð doesn¡¯t work for Gingerbread and earlier
The problem with designers (ct¡¯d) Designers talk in pixels, not DIPs or SPs ¡ñ Everything in Android should only be designed in DIPs (density-independent pixels), text in SPs (scalable pixels) They measure to font baseline, not font padding ¡ñ Helvetica and Roboto look similar but have very different padding
Designers need to learn Android Teach them DIPs and then SPs Try ¡°DIPs are like pre-Retina pixels¡± Teach them responsive app design Teach them the Android Design Guidelines Landscape mode is a first-class citizen Have an intervention - confiscate their iPhones
Big no-no¡¯s iPhoney icons Carets of contention Back button of doom Big up, big down(er)
Keep it 100% Android ¡°above the line¡± Use the Action Bar to the full Use standard Android icons wherever available Use Android navigation patterns Use Action Bar action modes e.g. search mode
Action Bar action mode in action
Get the Action Bar absolutely right ¡ñ Ensure Up button works right everywhere ¡ñ Use 70/30 rule for action buttons ¡ð If needed 70% of the times that you open the app, show it as an action, else put in the overflow menu ¡ñ Official Android navigation drawer ¡ð Don¡¯t be tempted to do anything clever-clever
Avoid developer art: nail your specs
Material Design Announced at Google I/O in June 2014 Material is the metaphor One adaptive design Unified experience across multiple devices Colours, iconography, hierarchy are constant
Material Design tools Tangible surfaces Bold and intentional design Meaningful motion
Material Design disciplines Visual design Interaction design Motion design
Material Design across devices
Material Design further information www.google.com/design/guidelines www.google.com/design plus.google.com/+googledesign
Use Google¡¯s Developer Advocates Nick Butcher and Richard Hyndman Long-term supporters of European dev community Loop them in early with your projects Watch Android Design In Action on YouTube Loads of high-quality training online
Case Study: The Sun Mobile The Sun saw an earlier version of this talk at Droidcon last year They approached Google to seek advice on how to rewrite their app as a proper native Android app Google recommended my company Novoda
The Sun Mobile: iOS to Android
Responsive design 3.5¡± phone 5¡± phone 7¡± tablet
Teaching Your Client Android Design, or, Don't Be An iPhoney
Teaching Your Client Android Design, or, Don't Be An iPhoney
Burger menu = Android navigation drawer
Add Android extras: here, a Daydream
The Sun Mobile: reactions Feedback is creeping up from its prior trough - was 2.9, now 3.4 Customer is absolutely delighted, particularly with the onboarding (we went a bit overboard¡­) Has commissioned lots of follow-up work
Case study: BBC Weather Enormous brand - unbelievable market share BBC identified the need for a weather app Unsure whether to go native or responsive web BBC was aware of criticism of its Android apps Visited London developer events to recruit for it BBC approached LFT to work on-site in London
Case study: BBC Weather Visual designs created by a 3rd party Soho agency Designs were unmistakably iPhone designs
BBC Weather: from the design agency
BBC Weather: from the design agency
BBC Weather: from the design agency
Case study: BBC Weather Worked with product owners and UI / UX team Identified areas that should be more Android-y Acted as an Android cheerleader Suggested extra features we could add
Add fun Android stuff ¡ñ NFC support ¡ð So many reviews picked up on this! ¡ñ New Android features: ¡ð Lock screen widgets ¡ð Daydream mode ¡ð DashClock integration ¡ñ No need to shout about it ¡ð Early adopters will do that for you ¡ð They love finding Easter eggs
Reviewers and users will thank you ¡°As well as looking clean and crisp on Android and iOS, the Android version has a few clever extra features inside it, like support for the awesome DashClock ecosystem that lets you add a mini forecast to the lock screen of phones running Android 4.2 or higher, share your location data via NFC, plus there¡¯s a very pretty Home screen widget to use. The BBC does it better on Android for once.¡± Gizmodo
User response to BBC Weather Ratio of 5* to 1* reviews is 100 to 1
User response to BBC Weather
Google response to BBC Weather Repeatedly featured on Play Store UK
Google response to BBC Weather One of just 17 apps (from over a million on Play Store) featured in The Best Apps of 2013
Client response to BBC Weather For products and organisations they usually know Android is important but it has not always been clear what makes an app Android. That is changing, but we needed the guidance of someone who knows what it is to be Android. It is not easy to find... Through design guidelines and quality demonstration together we managed to change perceptions within the BBC of what is important to Android, and also shown what is possible. Often by proving why it would be wrong to do it any other way...and when you do, our audience will be vocal in telling us about it. The benefits of Android should sell themselves... and great demonstrations of what is Android really helped sell the changes. This has been widely noted as one of the most successful app launches, and future App developments are to follow from what we learned. James Metcalfe Senior Product Manager BBC Future Media Weather
Market response to BBC Weather Number one free app amongst all apps on Play Store UK Above Facebook, WhatsApp, Candy Crush and Skype (for a few days, anyway)
Summary Get your product manager onside with Android Get your graphic designers onboard with Android Suggest where Android can improve the product Compare to best-of-breed to argue your case Get the Action Bar absolutely right Add Android-related flourishes and fun stuff Get a free ticket at iOSDevUK by talking about it
Thanks for listening! This presentation is available on ºÝºÝߣShare Kenton Price Novoda Ltd kenton@novoda.com www.novoda.com @LFT_Android

More Related Content

Teaching Your Client Android Design, or, Don't Be An iPhoney

  • 1. Teaching your client Android design or Don¡¯t be an iPhoney Kenton Price Novoda Ltd kenton@novoda.com www.novoda.com @LFT_Android
  • 2. Audience Developers and People that want a nice easy session to kick off their conference
  • 3. Who is Kenton Price? Co-founded Little Fluffy Toys Ltd in 2009 Android specialist consultancy and software house Now working at Novoda on The Sun Mobile I don¡¯t work for Google, but know them very well Six apps featured on Play Store / Android Market
  • 4. Why the hell am I at an iOS conference? Last autumn I gave this talk at Droidcon, the community-led Android developer conference iOSDevUK organisers approached me afterwards saying it¡¯s the best iOS to Android talk they¡¯ve seen, and they decided to inflict it upon you all
  • 5. The problem You are given designs for the iPhone ¡°But that¡¯s just like Android, right?¡± Rid the world of these iPhoney apps now!
  • 6. The problem Android users want Android apps Android users can tell when it¡¯s an iPhone port Android users will slate you if you¡¯re a lazy sod
  • 7. The problem with graphic designers Designers design to the pixel in Photoshop Pixel-perfect designs for one 640p device ...and one for its shorter predecessor ...that¡¯s just like its low-res 320p granny
  • 8. The problem with pixel-perfect You can make two pixel-perfect designs for iPhone But for Android...
  • 9. Device screen resolutions iPhone: 3 (and 2 are duplicates) Android: 428
  • 10. Pixel-perfect for Android is impossible ¡ñ Use principles of responsive web design ¡ñ Define stretch areas, horizontally & vertically ¡ñ Use spacers ¡ð View width/height=0dp, layout_weight=1/2/3 etc. ¡ñ Define boundary points ¡ð different designs kick in when larger than this height and/or width ¡ð doesn¡¯t work for Gingerbread and earlier
  • 11. The problem with designers (ct¡¯d) Designers talk in pixels, not DIPs or SPs ¡ñ Everything in Android should only be designed in DIPs (density-independent pixels), text in SPs (scalable pixels) They measure to font baseline, not font padding ¡ñ Helvetica and Roboto look similar but have very different padding
  • 12. Designers need to learn Android Teach them DIPs and then SPs Try ¡°DIPs are like pre-Retina pixels¡± Teach them responsive app design Teach them the Android Design Guidelines Landscape mode is a first-class citizen Have an intervention - confiscate their iPhones
  • 13. Big no-no¡¯s iPhoney icons Carets of contention Back button of doom Big up, big down(er)
  • 14. Keep it 100% Android ¡°above the line¡± Use the Action Bar to the full Use standard Android icons wherever available Use Android navigation patterns Use Action Bar action modes e.g. search mode
  • 15. Action Bar action mode in action
  • 16. Get the Action Bar absolutely right ¡ñ Ensure Up button works right everywhere ¡ñ Use 70/30 rule for action buttons ¡ð If needed 70% of the times that you open the app, show it as an action, else put in the overflow menu ¡ñ Official Android navigation drawer ¡ð Don¡¯t be tempted to do anything clever-clever
  • 17. Avoid developer art: nail your specs
  • 18. Material Design Announced at Google I/O in June 2014 Material is the metaphor One adaptive design Unified experience across multiple devices Colours, iconography, hierarchy are constant
  • 19. Material Design tools Tangible surfaces Bold and intentional design Meaningful motion
  • 20. Material Design disciplines Visual design Interaction design Motion design
  • 22. Material Design further information www.google.com/design/guidelines www.google.com/design plus.google.com/+googledesign
  • 23. Use Google¡¯s Developer Advocates Nick Butcher and Richard Hyndman Long-term supporters of European dev community Loop them in early with your projects Watch Android Design In Action on YouTube Loads of high-quality training online
  • 24. Case Study: The Sun Mobile The Sun saw an earlier version of this talk at Droidcon last year They approached Google to seek advice on how to rewrite their app as a proper native Android app Google recommended my company Novoda
  • 25. The Sun Mobile: iOS to Android
  • 26. Responsive design 3.5¡± phone 5¡± phone 7¡± tablet
  • 29. Burger menu = Android navigation drawer
  • 30. Add Android extras: here, a Daydream
  • 31. The Sun Mobile: reactions Feedback is creeping up from its prior trough - was 2.9, now 3.4 Customer is absolutely delighted, particularly with the onboarding (we went a bit overboard¡­) Has commissioned lots of follow-up work
  • 32. Case study: BBC Weather Enormous brand - unbelievable market share BBC identified the need for a weather app Unsure whether to go native or responsive web BBC was aware of criticism of its Android apps Visited London developer events to recruit for it BBC approached LFT to work on-site in London
  • 33. Case study: BBC Weather Visual designs created by a 3rd party Soho agency Designs were unmistakably iPhone designs
  • 34. BBC Weather: from the design agency
  • 35. BBC Weather: from the design agency
  • 36. BBC Weather: from the design agency
  • 37. Case study: BBC Weather Worked with product owners and UI / UX team Identified areas that should be more Android-y Acted as an Android cheerleader Suggested extra features we could add
  • 38. Add fun Android stuff ¡ñ NFC support ¡ð So many reviews picked up on this! ¡ñ New Android features: ¡ð Lock screen widgets ¡ð Daydream mode ¡ð DashClock integration ¡ñ No need to shout about it ¡ð Early adopters will do that for you ¡ð They love finding Easter eggs
  • 39. Reviewers and users will thank you ¡°As well as looking clean and crisp on Android and iOS, the Android version has a few clever extra features inside it, like support for the awesome DashClock ecosystem that lets you add a mini forecast to the lock screen of phones running Android 4.2 or higher, share your location data via NFC, plus there¡¯s a very pretty Home screen widget to use. The BBC does it better on Android for once.¡± Gizmodo
  • 40. User response to BBC Weather Ratio of 5* to 1* reviews is 100 to 1
  • 41. User response to BBC Weather
  • 42. Google response to BBC Weather Repeatedly featured on Play Store UK
  • 43. Google response to BBC Weather One of just 17 apps (from over a million on Play Store) featured in The Best Apps of 2013
  • 44. Client response to BBC Weather For products and organisations they usually know Android is important but it has not always been clear what makes an app Android. That is changing, but we needed the guidance of someone who knows what it is to be Android. It is not easy to find... Through design guidelines and quality demonstration together we managed to change perceptions within the BBC of what is important to Android, and also shown what is possible. Often by proving why it would be wrong to do it any other way...and when you do, our audience will be vocal in telling us about it. The benefits of Android should sell themselves... and great demonstrations of what is Android really helped sell the changes. This has been widely noted as one of the most successful app launches, and future App developments are to follow from what we learned. James Metcalfe Senior Product Manager BBC Future Media Weather
  • 45. Market response to BBC Weather Number one free app amongst all apps on Play Store UK Above Facebook, WhatsApp, Candy Crush and Skype (for a few days, anyway)
  • 46. Summary Get your product manager onside with Android Get your graphic designers onboard with Android Suggest where Android can improve the product Compare to best-of-breed to argue your case Get the Action Bar absolutely right Add Android-related flourishes and fun stuff Get a free ticket at iOSDevUK by talking about it
  • 47. Thanks for listening! This presentation is available on ºÝºÝߣShare Kenton Price Novoda Ltd kenton@novoda.com www.novoda.com @LFT_Android

Editor's Notes

  • #6: You get iPhone designs, or are told to copy an iPhone app.
  • #7: PhoneGap apps or WebView apps or responsive web apps. All terrible. Users will call you out on it.
  • #8: 640p device? We¡¯ve been on 1080p devices for a year now. Didn¡¯t we do 720p devices two years ago?
  • #10: From analytics figures in the BBC Weather app, this is what we found for the first month.
  • #12: Device-independent pixels / scalable pixels. Baseline is the bottom of the regular characters, the tails of G¡¯s and Y¡¯s go below the baseline. Designers work with gapsbetween elements according to the baseline. Android includes these tails in the size of a TextView plus some extra padding top and bottom too.
  • #13: Device-independent pixels / scalable pixels. Designers might understand you if you refer to low-res pre-Retina pixels.
  • #14: I found this in an early beta of the product I¡¯ve recently moved to. The big up has gone from this beta now.
  • #15: Android navigation: instead of iPhone¡¯s bottom-tabs, you should pretty much always use a ViewPager. Remember Android buttons tend to be near the bottom of the screen and the bottom tabs interfere with this.
  • #18: Such an important slide! Everything spec¡¯d in a fully responsive design so that a developer can just code it without guesswork.
  • #32: My favourite feedback: ¡°OK on my phone. Rubbish on my iPad - nothing but problems.¡±
  • #37: Helvetica is an Apple font, on Macs but not Windows, and definitely not on Android.
AboutCopyright
? 2025 ºÝºÝߣ