Droidcon 2013: Crafting Unique, Delightful Apps

Dan Lew @danlew42 & Chris Arvin @meinhyperspeed, Expedia

• created a sample app to show ideas: http://goo.gl/XCyLWl
• default holo vs customized UI
• finding interesting ways to interact
• holo is great for developers, but need to extend it to add character
• designer should build on how android looks, feels & works
  • e.g. cards, vertically sliding content
• build from user’s prior Android experience
  • i.e. don’t put brand consistency ahead of platform consistency

animations

• android apps move: so should your mockups!
• really important for communication as a designer
• tools for designers: after effects, html/css + transforms, quartz composer (but steep learning curve)
• generally requires a little bit of coding knowledge but no too much
• animations gives lots of visual clues
  • e.g. expanding an item in a list to go to detail

working together

• developer first reaction is generally: how am I going to do this?
• takes a few minutes to start to get to grips — it will take more work…
• first need to really understand what the designer is going for
• interesting UI = a lot more development
• work on the big stuff first — usually the animation
  • makes sure that the view hierarchy is right
  • need to think a few steps ahead
• need to ensure that animation performs
  • use translations rather than layout changes
  • use GPU overlay to help with effects and performance
• communicate:
  • what’s going to be a challenge?
  • what can we make easier?
  • what do we have to cut entirely?
  • come up with 5-10 different options
• e.g. rounded corners done with 9 patch as quick fix

polishing

• developers often get it close enough but not quite right
• designer needs to communicate effectively
• communicate in dps not pixels
• adjust from what’s already in the app rather from mockups
• use relative measurements not absolutes
• annotate real screenshots
• e.g. make fonts 2dp smaller here, add 4dp padding there
• little play things:
  • e.g. expedia wait screen shows plane window with sky going past
  • rotating phone adjusts horizon; can close and open window

engaging UI

• really relying on images can set the tone of your app
• hotel detail done with parallax layers
  • encourages users to engage with the app
  • scrolling up and down enlarges areas

Q&A

• when designing, how far do you go for different densities?
  • simple design, start with single device
  • complex design, might want to ensure it works in a couple of densities
  • key is landscape: make sure it’s not totally different — don’t want to lose the user
  • but don’t avoid doing cool things in portrait just ‘cos you can’t do it in landscape
• working in dps
  • set the resolution in photoshop
  • or set the file to the full resolution
  • preview on device: skala preview or similar
• development environment
  • gradle -> hockeyapp
  • still using eclipse — android studio not quite stable enough yet
• pivotal labs experimenting with developer/designer pairing