Android design for iOS converters

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

21. Material Design across devices

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 SlideShare
Kenton Price
Novoda Ltd
kenton@novoda.com
www.novoda.com
@LFT_Android