Designing with paper

For some months now I am using with satisfaction a different tool for the design phase that follows the definition of the online strategy and precedes the creation of prototypes. I take a sheet of paper and hand-made sketches which can then be shared and evaluated together with the User Experience team.

Nothing new or that I had never tried, but I believe it is a practice too hastily abandoned because considered unprofessional.

Two readings helped me change my mind: Paper Prototyping by Carolyn Snyder and the recent Prototyping written by Todd Zaki Warfel and published by Rosenfeld Media. Both texts provide excellent tips on how to build prototypes with the paper and the book by Carolyn Snyder also explain how to use these prototypes for real usability test sessions with users.

I don’t prototype with paper. Paper helps me to design in the form of sketches the interface and the interaction of different ideas that can then be evaluated, rejected, selected with the team UX. It is therefore a quantitative approach, which aims to produce in a very short time several sketches that can then be analyzed by the team and criticized without the fear of having wasted hours or days of work. Each sketch should take no more than half an hour to be drawn.

I find the use of paper effective also when working with remote teams: I scan it and the sketch can be shared with the rest of the world.

Normally I do not use a sheet of white paper, but I do use a simple template that include the browser interface and some guidelines (for example, the most common resolution). On the Internet you can find dozens: I personally am very happy with the work of UIStencil (the template is available in PDF format).

The different designs are then evaluated together with the rest of the US team and usually put on a wall or blackboard.

Zaki Warfel in Prototyping summarized how this process should take place.

PT001: Figure 2.1

Diagram of the iterative design and critique process. Warfel, Todd Zaki. 2009. Prototyping: A Practitioner's Guide. New York: Rosenfeld Media. http://www.rosenfeldmedia.com/books/prototyping/

It is, as you can see in the diagram, an iterative process.

Sketching is the generative part of the process, whose objective is to propose different ideas without paying attention to details or inconsistencies (fast and furious).

The purpose of the critique phase is to find, among the different ideas, the best. The one that created the sketch lists the strengths while your teammates highlight gaps and require further investigation. This phase should last only a few minutes, because the details will be taken into account during the process of creation of real prototypes.

It’s at this point – that is, for prototyping and usability testing with users – that i abandon the paper. I prefer in fact to use tools to simulate a little more in detail the transitions of a typical web page, such as Ajax interactions. In this sense my favorite tool is Axure RP: it’s expensive, but allows you to create real prototypes rather than wireframes, on which the paper still wins.

Everything has its own name

I went to the client’s office with our art director and now he is ready to show various layouts to illustrate the project. He made some minor changes last night so we could not see them together. He opens the laptop and double-click cool.psd.

The colleague who develops the frontend sent an email containing the latest corrections requested by the company that will address the integration. Once unzipped the files, on the desktop appears the folder named WTF.

These are only two examples, but I could easily go on for hours and hours and never repeat myself. Ok_bis_def.zip, another_one.psd, today_i_lack_ideas.png: I have a whole literature of meaningless and embarrassing names.

Tired of spending days to rename the files and send them to different actors (if I still have time) I have developed a simple system of nomenclature which I try to apply and enforce.

The advice is to start as early as the wireframing phase, to continue during the graphic design up to the development of HTML pages. Each wireframe should properly be named before sending it to the art director, who is usually happy to keep the creativity for other tasks.

I’ve tried over the years different types of classifications, but the one that ended up being more effective is the result of a compromise between the highly informative content and ease of application of the rule.

A typical example of the nomenclature would be as follows:

  • HP010
  • PR010
  • CH010

The first two characters indicate the section of the site that the page refers to (in this case HP stands for the homepage, PR for product page and CH for the checkout), while the number indicates the sequence of the page within the section (HP010 may be the main homepage, HP020 a particular version for the Christmas period, etc..). I use tens as units because, if we find out that we forgot a template that “logically” has to be inserted between two others, we can include it (eg. HP015).

As you can see the rule is trivial, but for this reason is also easy to apply. It saved me a lot of time, but in particular it has allowed us to verify at a glance if all the template were made.