Tuesday 29 October 2013

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

No comments: