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 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
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
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
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:
- Download the zip file containing the template for Visio
- 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:
- Select Tools > Options > Advanced > File Paths…
- 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
|
