Tap Dancing on Paper

tapdancing

When it comes to creating a user experience specification for a website, it\’s usually a straight forward exercise. You create wireframe diagrams and show the web pages in different states.

But how do you specify user interactions for a touch-screen that\’s ever-changing, highly interactive and has unpredictable curious creatures influencing the user navigation?

This was the challenge I recently faced when working on a touch-screen game for Auckland Museum\’s latest exhibition, Wonderland – The Magic of the Rose\’.

Using touch-screen technology The Pollinator\’ allows visitors to tap into\’ the amazing world of insects and pollination.

Designed and developed by Click Suite, this is an interactive within the exhibition (which runs until 16th April 2010). It allows visitors to tap on a virtual rose which would attract the nearest flying insect (a honey bee, monarch or the native hoverfly).

The goal we\’ve set visitors is to pollinate six roses in a row.

Achieving this takes a little bit of knowledge, timing and strategy to ensure that their roses will be successfully pollinated every time.

To discover which insect is the most effective pollinator, visitors can listen to Miranda Harcourt telling the story of each insect while exploring it in crystal-clear 3-D.

The never-ending rose garden can also be navigated in spectacular 3-D and allows visitors to take a peek inside each rose to see the pollinator at work. The large touch-screen also allows visitors to pan and zoom around the gorgeous rose garden (in any direction) with the curious insects following them around as they explore.

Prototyping, designing and developing this game needed to take into account a number of variables including:

  • Screen composition
  • Object interactions
  • Object behaviour (when the visitor taps on an interactive object)
  • Feedback to the user

We also considered what would occur over time and if the user left part-way through a game.

My approach was to append a timeline to my paper prototypes to describe transitions over time. And rather than trying to create wireframes for every possible scenario I just described key-frame screens.

In addition I created an object behaviour\’ guide, which explained the default behaviour (e.g. of a honey bee), what occurred if it was tapped, what would subsequently be displayed and any extra options then made available to the user.

Important for a computer application like this is feedback to the user, so I created a specification sheet for this as well.

I think the main lesson I learnt from this project is to pay even more attention to the feedback mechanisms. We imagined the game would have subtle feedback and not interrupt the user- but during user testing it soon became obvious that the visitors needed more obvious responses to their finger taps- so we adjusted the user interface accordingly.

The final user experience specification was just 11 pages in length and served to help communicate the concept to our client, the designer and developer (in case you\’re a tech-head you might like to know that it was created as a WPF application using Microsoft\’s Expression Suite- and most scenes are rendering as realtime 3-D!).

Of course, it\’s not until you get the real thing up and running that you can really feel and experience\’ the user interactions and the game play – we made plenty of changes and refinements as we progressed – which is to be expected for such a unique piece of software.

As a result the interactive is more game-like than we\’d envisage. Now less things are (easily) tappable so they player isn\’t interrupted.   It\’s combination of gorgeous visuals and rich interactions – as well as an education about those little critters flying around almost every garden!

Paper Prototypes

Basic Task Flow
Basic Task Flow
Attractor Loop
Attractor Loop
Screen Interactions
Screen Interactions
Close Up of the Pollination Activity
Close Up of the Pollination Activity
Object Behaviours
Object Behaviours
Feedback
Feedback

Final Screens