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

Prototypes

• 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

Agile

• 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?

Experience

• 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