Tuesday 29 September 2009

OverTheAir '09: Modelling the User Experience

Bryan Rieger — yiibu

Bryan comes from a theatre and animation background and was sorely disappointed by the tools available for designing interactive services. He and his partner Stephanie have developed a lightweight prototyping mechanism for interactive mobile services. I like the idea — especially the bit about throwing away lots of ideas in order to explore.

Tools for traditional animation

  • scripts & storyboards —> models & layouts
  • adding structure, but always changing
  • dope sheets, now known as timelines
  • pencil tests
  • animatics — complete but not finished
    • stills set to music/voice over, possibly panned and scanned

Tools for Mobile design

  • wireframes and… more wireframes
  • what are they?
    • layout, behaviour and flow all in one document
  • are we expecting too much from one document?
  • Bryan started dropping little nonsense text on the descriptions of wireframes to see if anyone was reading them — turns out nobody was!
  • documentation gets bigger and bigger but not readable
  • document management != design


  • where do you start and where do you stop
  • paper -> HTML -> Flash -> Python, Java, …
    • the more you get to development, the more people don’t want to tear it down
    • developers (and those who manage them) should learn the value of the spike — a throwaway prototype that you really do throw away
  • want to get something more concrete than paper but has limitations
    • really difficult to share
    • usually requires some mediation


  • iterations are good for design
  • you can explore more, develop new different ideas and throw away bad ones
  • how can I make lots of mistakes? how can I get visibility of the project as a whole?

Integrating knowledge from animation

  • applying animatics to wireframes
    • want something interactive, but still sketched
    • and the sketched part must include the flow and behaviour as well as the layout
  • disposable data models:
    • views, states and events
    • views and states are scanned in from paper prototypes
    • events switch from state to state or to different views
    • creating these is relatively easy, esp. using Fireworks as a tool
    • Fireworks allows you to create multiple states side by side, all based on a single view
  • can switch in different JPEGs really easily — iterate visual design
  • can easily alter model (flow & behaviour) by changing XML
    • at the moment, the XML is hand-built
  • player built using Mobile Processing, so runs on real devices (as JavaME midlet)
    • same player for any design — just load and go
  • models (including graphics) take about 1 day to create
    • so can create 60+ models over several weeks
  • is this system similar to Cascade Breeze, or PhoneGap?


  • created lots of documentation up front, but then started culling pages
  • shipped prototypes with the documentation
  • created 60+ models — allowed change
  • took 2 designers 9 weeks of work
  • led to clearer wireframes
    • but didn’t replace them — this is an additional tool
  • much greater user testing since lots of people could use it
  • slowly refining the tool:
    • adding gestures and touch interactivity
  • don’t model the whole app — just specific flows

No comments: