To the front pageThe Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design  
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI  
   
 

ISSUE 19 - q3 2006

Hand-crafting prototypes in Visio

How to create low-fidelity prototypes on the computer

If you are the happy owner of a tablet computer or a pen tablet you can hand-draw prototypes on your computer. In this article we'll look at what hand-sketching is good for and how to built hand-drawn prototypes in Visio.

The purpose of having ready-made drag-and-drop interface widget in prototyping tools is to speed up the process of prototyping. This is what makes tools such as the GUUUI prototyping template and Axure RP pro effective prototyping tools.

But sometimes hand sketching prototypes is more convenient. Especially in the early phase of a prototyping process, when you are trying out lots of design alternatives.

Be fast and dirty

With hand-drawn sketches we can work fast and dirty. We can skip over details that aren't important for evaluating the viability of our ideas. Unessential paragraphs of text, labels, and menu options can be represented by squiggly lines, icons with little doodles and so on.

A low-fidelity version of the guuui.com front page crafted on a tablet PC

A low-fidelity version of the guuui.com front page crafted on a tablet computer

Sketching on paper

Sketching on paper is very efficient. You don't have to struggle with computers and you can invite team-mates to work with you. But if you work on your own, you might find sketching on a computer handy.

Computers provide flexibility

Like word processors facilitate a dynamic and iterative writing process, sketching on a computer ease the dynamic and iterative process of drafting interaction designs.  Instead of throwing sketches into the waste basket if they don't work out as expected, you can modify them or delete the elements you want to get rid of. You can copy objects to speed up the process and move elements to other locations to try out alternative solutions.

Visio provides prototyping features

Visio comes with the ink tools that are required for hand sketching on the computer. It's not the only tool out there suitable for sketching. But with Visio you can enjoy the features that make it a popular prototyping tool. You can link pages together and view them in a browser to evaluate the interactive aspect of your design. And you can use backgrounds to hold common features.

System requirements

To sketch on a computer you need to have a tablet computer or an external pen tablet attached to your computer.

On a tablet computer you can draw directly on the screen, which is nice. Unfortunately, tablet computers tend to have low resolution screens (typically no more than 1024x768 pixels) which can be a bit claustrophobic when you are designing full screen applications. With a pen tablet you can use an existing high-resolution monitor.

How to hand-craft prototypes in Visio

I'm not going to take you through an extensive tutorial describing how to prototype in Visio. Most of the steps in producing a hand-sketched prototype in Visio are similar to those described in my article Visio - the interaction designer's nail gun. If you want a guided tour through the process, I recommend you follow the steps in this article using doodles instead of the ready-made widgets.

But there are a few things you need to know before you start sketching in Visio.

Activating the ink toolbar

Fist you have to activate Visio's ink tool.

Choosing the ink tool in visio

Choosing the ink tool in visio

In the ink toolbar, you have access to a palette of different pens and an eraser. You can choose different colours and the thickness of the pens.


The ink toolbar

The ink toolbar

I recommend using a thickness of minimum 1 ¼ to make the pen strokes stand out properly when they are exported as web pages.

The little check mark to the right of the eraser controls generation of shapes. Visio will automatically join your pen strokes into a unified shape when the pen leaves the drawing area. It takes a few seconds. If you can't wait, press the check mark to turn your current strokes into a shape.

Preparing your drawing area

To make all the pages equal in size when we export them as web pages, we need to place a rectangle in the background. If we don't, the pages will be resized in the browser to fit the individual content of the pages.

A rectangle placed in the background to keep browsers from resizing the pages

A rectangle placed in the background to keep browsers from resizing the pages

Luckily, I've prepared a template for you. Follow the steps below if you want to install it in Visio (unfortunately, it only works in Visio 2003 and above).

To download and install the template:

  1. Download the zip file containing the template for Visio
  2. Extract the file to your My Shapes folder located in the My Documents folder

You can now start a new prototyping project by double-clicking the prototyping template GUUUI Low-fi Prototyping Template.vst.

If you want be able to select the template through the Files > New menu in Visio, follow the steps below.

To make the stencil available in the Files > New menu:

  1. Select Tools > Options > Advanced > File Paths…
  2. Set Templates to your My Shapes directory
    (and now you are here, set Stencils to your My Shapes directory also)

In conclusion

Hand-drafting prototypes on the computer is quite fun. I've tried to force myself to do a prototype using my tablet computer, but I must admit that I missed the features that Visio and Axure provide. Especially when I prototyped menus and other text based widgets. Writing readable text isn't easy with the low-resolution screen I have on my tablet. And using the keyboard to type text is a lot faster.

But for initial sketches and exploring design alternative I find the technique quite usable. Compared to sketching on paper, I enjoy the ability to modify my work instead of having to dump it and start all over.

Text: Henrik Olsen

Comments

 
"Compared to sketching on paper, I enjoy the ability to modify my work instead of having to dump it and start all over. "

RELATED POSTINGS

     
 
Posting added before you last visit at GUUUI Visio - the interaction designer's nail gun (2nd edition)
Posting added before you last visit at GUUUI How to use PowerPoint for prototyping
Posting added before you last visit at GUUUI The promised land of prototyping
Posting added before you last visit at GUUUI Balancing fidelity in prototyping
Posting added before you last visit at GUUUI Defence of paper prototyping
Posting added before you last visit at GUUUI New Version of DENIM Available
 
 
     
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI