Paper prototyping

Posted in: Archive

Off we go! by Tom Natt
Off we go! by Tom Natt

Why do paper prototyping?  It's cheap.  It's fun.  You get to move small green pieces of paper around, and play with scissors and glue.  And you can reinvent your information architecture several times in a day just by moving a piece of paper or two.

We started by reading an article about paper prototyping on A List Apart, which was helpful, but we could also have used more of the principles of card sorting, which is a similar exercise.  There are two types of card sorting - one with predefined categories, the other where the category title emerges from the grouping of the content.  We started by thinking that we had predefined categories, and then discovered that actually we needed to change the name of a couple of the categories, so perhaps the second type of card sorting approach would have been more appropriate.

Grouping complete, by Tom Natt
Grouping complete, by Tom Natt

Because of this confusion, we produced a storyboard but not many actual page mock-ups.

However, the paper prototyping approach allows a group of people to gather round a storyboard and discuss what content fits where, and try out moving it to a new location.  Having the bits of paper in front of you gives an overview of the structure of the site, which is harder to visualise with a directory tree.

It's also easy to change the name of a section; all you have to do is write a new post-it note.  You can use different coloured notes for category headings and pages, which helps with visualising the structure.

Completed prototype, by Tom Natt
Completed prototype, by Tom Natt

Making a page mock-up was a lot of fun.  We created widgets and sections out of different-coloured post-its and stuck them to a sheet of A4.

This is a mock-up of the research homepage, with a searchbox, featured news and themes, and sections about the RAE, managing our research, publications, research jobs and postgraduate opportunities, a title section with research-related images, and global navigation at the top.

Note the fabulous drawings by Yvonne and Alison, and the lovely rounded corners on the various widgets and sections (much easier to do with scissors than to implement in a cross-browser compatible way).

You can see the drama of the paper prototyping as it unfolded on Tom Natt's Flickr set.

Posted in: Archive