Rapid prototyping for mobile products

Here at cx towers we've found ourselves carrying out lots of mobile testing in recent months for live apps and websites, as well as prototypes we've created ourselves.

So what prototyping methods have we got at our disposal and what are the pros and cons for each? What differences are there from testing desktop prototypes (apart from the obvious difference in screen size)?

Paper prototyping

Just as with desktop websites, you can use lo-fi prototyping during wireframe development and testing. This helps to work out the best positioning for design elements and to gauge people's expectations and reactions to your product.

Here are some projects where we've used paper prototypes to design and test mobile products:

Ecobugs mobile game testing

Ecobugs is an educational iPhone game aimed at 7 -11 year olds. It involves collecting and classifying new species of insect using GPS tracking and augmented reality. Here paper prototypes were used to test initial concepts and the flow of the game. iPhone templates were used to wireframe a storyboard for the game, these were then cut to size, laminated and collated into a swatch book. Children could hold the prototype in their hands and walk around with it as if it was a real device. This was a great way of finding out if they understood the story, rules and actions behind the game in context before the visual design and development process began.

Wireframe development for tablet

Richard and Steve experimented with paper prototyping in their book Communicating the User Experience. They used it as a way of prioritising elements for tablet devices. By cutting out the separate elements they were able to move them around in situ and check the sizing and proximity of different controls as they held and interacted with the device. This allowed them to rapidly optimise the layout before creating higher fidelity solutions.

Mobile websites - BBC prototype

A while back we did some testing for the BBC mobile site. Like lots of information rich sites, many of the pages were long and scrollable. This can be a problem to replicate when testing both paper and digital prototypes for mobile. Here the solution was to mount cutouts of the wireframes onto foam board so that they could be pulled up and down below a phone screen 'frame'.

pdf screen viewers

Using a mobile PDF screen viewer is a cost and time effective way of displaying mobile prototypes on a physical device. Like paper prototypes,  PDF screen viewers rely on the test moderator having to scroll or swipe to the correct page or state which can be a little clunky on a mobile. However, during some guerrilla testing we used this as a back up and found it invaluable when we lost wifi connection to the interactive prototype we were testing.

Prototyping software

Recently I tried out a prototyping app called Realizer for a travel website prototype we wanted to guerrilla test.

On paper, Realizer app looked like a great product - a free, quick solution for presenting your prototypes on a device which a user can then play with and control themselves. However further investigations have thrown up some issues. A web based app, Realizer allows you to upload your prototype stills and then add hotspot links between the pages so you can mimic user journeys through your prototype - sounds simple right?

When prototyping for a travel site the first issue I came up against was that every still you upload has to be exactly 320px by 480px - say goodbye to long scrolling pages. The way i got round this was by chopping long pages into portions and adding touch links to the bottom of each screen. This was clunky to say the least but did allow people to control the way they browse through the site.

I found it pretty quick setting up the prototype - the main issue was making sure each still image was exactly the right size. Once the prototype had been set up you are then able to access it it via an app on your iPhone. It presents a lo-fi version of your design in a form that looks scrollable and clickable. However this comes with it's own set of problems.

This level of affordance leads people to believe you can tap and swipe through it just like a normal website, however the response time for each tap is about 3 seconds. This led to lots of over clicking which disrupted the path of the test and was frustrating for participants.

I also found that Realizer app ceased to work when there was no wifi connection, as we were guerrilla testing in an airport this was an issue.

Interacting with devices tends to be an incredibly personal experience people like to hold, tilt, touch and be in control. Mobile prototypes should try and allow for this element of control. When moderating testing with desktop sites it is easy to set up multiple tabs and shortcuts in a browser, which can be clicked into without much disruption to the flow of the test. When using paper or pdf readers for mobile this becomes harder.

Using apps such as realizer allows the user a more real experience and ability to explore during a test but can only be used on one platform and relies heavily on wifi connection which can be an issue when testing in the field.

What is your experience of creating rapid prototypes for mobiles? Have you tried any other methods? I'd love to hear about them…