Paper – Scissors – Phone

Maybe it’s just me, but as we enter the latest phase of convergence with more and more big web properties moving onto mobile, I’ve noticed a trend for work in progress to be developed and presented mainly on PC screens.

In my (possibly mythical) golden age, presentations and design reviews were stacked full of phones in all shapes and sizes. Now stuff seems to come to me in neatly zipped PDFs and Powerpoint docs, which immediately place the work into the wrong context. They introduce implicit assumptions that were set in stone in the old days of the deskbound internet. The web’s moving on – but sadly many of the ways we design it are not.

So I started wondering: could we have a mobile design process which deliberately avoided deliverables on the PC screen? You can, if you must, use a desktop or laptop as a tool (Mitchell or Webb is up to you, it’s so irrelevant :-) What matters is that the design is presented in more appropriate media. It goes like this…

Paper wraps phone: The big visual canvas of a web page can hide a multitude of sins in site strategy and structure, but on mobile they’ll be painfully laid bare. So spend some time getting straight the objectives of the mobile interface, underpinned by the things you know about your users, their relevant needs, and their existing use of mobile. Write it down in complete sentences, you know, the things they taught you at school with a subject, a verb and an object. Banish any preconceptions about the context of use – for example, 27% of mobile internet-enabled phone users in a Pew Survey had used it in the home. Sketch out the information architecture and user flows on big sheets of paper. Then get out the scissors…

Scissors cut paper. Chop up the sitemap, give the resulting scraps a shuffle and see how a user will experience your work. Yes, mobile really lends itself to paper prototyping. As the small, handheld interface takes shape, how about mocking it up on small, handheld pieces of paper? Take a stack of index cards or PostIt notes and use one per scene on the mobile screen. Or to simulate the act of scrolling, cut a card with a hole in the middle to mask off all but a screenful of content at a time. I saw this trick used really effectively in early stages usability testing on our mobile portal a few years ago. It makes for a more realistic low fi test, and gives the designers an insight into the tunnel view that users have of their mobile interface. Then it’s time to hit the handset…

Phone blunts scissors. As soon as possible, get it mocked up on a mobile device. With XHTML and Flash Lite it’s much easier than it used to be, and immediately helps you get a feel for certain issues: Which buttons will be the main controls? How will the user enter text? How quickly can they scroll up and down the screen. Critically, get the design up and running on a few different kinds of phone that represent the spread of devices your users will have. This is not something that comes naturally to web designers for whom these things come down to narrow choices of screensize and IE/Firefox version, but it’s worth the hassle. If you don’t have all the phones yourself, beg or borrow them from friends, family or colleagues. If you’re doing the work for a big corporate or telco, ask them about access to the target devices. And if it’s a consumer application, make sure you don’t inadvertently introduce a bias towards business devices, which may well have bigger screens and more capabilities than those of your target users.

Now step outside. Stand in broad daylight on a busy street corner, preferably in a slightly dodgy area of town, and most likely realise that the fontsize needs to be even bigger than you thought. And if the fonts are bigger, than means fewer lines of text, which means revisiting those flows. Paper wraps phone once again in our iterative process :)

What do you think? Who is doing mobile design like this already? Who is doing it even better?

—————

Update – 5 September 2008: Rachel Glaves at Adaptive path tells how she likes to print stuff out to make it real – Designing for Gestures – Lessons From Print