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

Teaching your client Android design

or

Don’t be an iPhoneyKenton PriceNovoda Ltd

[email protected]

www.novoda.com

@LFT_Android

Audience

Developers

and

People that want a nice easy sessionto kick off their conference

Who is Kenton Price?

Co-founded Little Fluffy Toys Ltd in 2009Android specialist consultancy and software houseNow working at Novoda on The Sun MobileI don’t work for Google, but know them very wellSix 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)

428

Android:

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 SPsTry “DIPs are like pre-Retina pixels”Teach them responsive app designTeach them the Android Design GuidelinesLandscape mode is a first-class citizenHave 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 2014Material is the metaphorOne adaptive designUnified experience across multiple devicesColours, iconography, hierarchy are constant

Material Design tools

Tangiblesurfaces

Bold andintentional

design

Meaningfulmotion

Material Design disciplines

Visualdesign

Interaction design

Motiondesign

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 design3.5” phone5” phone7” tablet

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.4Customer is absolutely delighted, particularly with the onboarding (we went a bit overboard…)Has commissioned lots of follow-up work

Enormous brand - unbelievable market shareBBC identified the need for a weather appUnsure whether to go native or responsive webBBC was aware of criticism of its Android appsVisited London developer events to recruit for itBBC 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




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

James MetcalfeSenior Product ManagerBBC Future Media 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.

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 AndroidGet your graphic designers onboard with AndroidSuggest where Android can improve the productCompare to best-of-breed to argue your caseGet the Action Bar absolutely rightAdd Android-related flourishes and fun stuffGet a free ticket at iOSDevUK by talking about it

Thanks for listening!This presentation is available on

SlideShare

Kenton PriceNovoda Ltd

[email protected]

www.novoda.com

@LFT_Android