Traditional wire frames are misleading as they look too much like finished designs. Clients and designers alike run the risk of taking their direction too literally. And yet, despite all this, wire frames are invaluable tools in the start of any website design project.

And defines a WireMolecule as:

A chart giving an overview of relationships between components and features of a website. Wire molecules are developed during the Website Discovery phase and they provide instructions to designers, developers, and clients for how pages will look and behave.

Credits: Andreas Holmer

Also, I just created the gestures tag to keep track of all these related posts.

Credits: GestureWorks

As an additional note, Blueprint+ is still a work in progress and will be turned into a toolkit in the future. Stay tuned. :)

Credits: CC Explanations and Services, Hochschule Luzern (Andy Polaine, Roman Aebersold, Robert Bossart and Andrea Mettler)

Right after doing such a test, we’re often faced with the challenge on how to capture and convey some of the interesting findings to others on the team or even ourselves. Some people try video, while others overlay the identified problems on top of screen captured images. In this round of testing I was aiming for something slightly different. Essentially, I wanted to a capture the core notes per each user on a single piece of 8.5×11 paper (perhaps in a persona like fashion?). Each page would have starting points of what the user has initially done with the use of red text, followed by dark grey notes as the actions unfolded. The findings were then tagged accordingly as: ideas (light bulb symbol), confusions (question mark) or positive remarks (happy face). Further more, the sample also makes use of subtle informal sketches through out the page to help convey the issues somewhat visually.

Perhaps to someone who lacks context of the project or products being tested, a deliverable such as this might not be adequate enough at conveying the issues. On the other hand, for those who have participated in the test as observers, the following usability test snapshot might act as an inspiration piece for the design work ahead.

Please post as a comment (or submit) ideas of your own on how to best convey, remember or prioritize findings from design research.

Credits: Jakub Linowski

Credits: Gene Smith of nForm

The Use Case Map notation aims to link behavior and structure in an explicit and visual way. UCM paths are first-class architectural entities that describe causal relationships between responsibilities, which are bound to underlying organizational structures of abstract components. These paths represent scenarios that intend to bridge the gap between requirements (use cases) and detailed design.

Credits: Raymond A. Buhr & Daniel Amyot

Credits: Ron George

Scaling

Like it or not, design ideas need to scale over time and good tools provide room for such growth. One thing that I love about Illustrator (which paper lacks of course) is that the art board or workspace can be stretched as needed whenever concepts need the extra room. The flexibility to resize the canvas is a really great feature especially during early ideation when multiple screens need to be shown together to tell a meaningful story. On the same note, another way Illustrator excels is in terms of a scalable fidelity. Whereas early on in a project the amount of detail might be small, over time however, the fidelity of an electronic sketch has the potential to develop. In a vector environment it is super easy to take a small UI sketch, stretch it to a larger size, and inject more detail inside of it.

Ease of Editing

Yes, in the real world we have pencils, erasers and the ability to redraw or correct our sketches to some degree. We can however only correct our paper sketches somewhat before they becomes unreadable. This isn’t the case with anything electronic or digital where cutting, deleting, undoing, redoing, erasing is second nature. A very common scenario is to draw different screens and only learn eventually that it makes sense for the two or three screens to be placed together – something that is very easily done by reorganizing or repositioning on the computer. Another superb thing about Illustrator is the ability to select a line and just redraw it, causing it the take on the new form. This of course can be done an unlimited amount of times in an electronic tool.

Legibility

Although this might not be the case for everyone out there, I personally find that my hand writing is very hard to read. Unless I spent extra care and time to write legibly, I find that on the computer it is way easier and quicker to type out text that can be read by others.

Carelessness

When I am about to sketch on paper, knowingly that it will be harder to undo, I hold myself back and think twice before the ink or lead leaves a mark. This slow down or inefficiency can be easily overcome in the electronic world with a tablet pen. When I sketch electronically, this worry disappears as I know that I don’t have to generate the right ideas, but instead can easily correct myself if something needs adjusting. This careless quality of electronic sketching brings forth immense value by affording greater exploration to occur more freely.

Reuse

Illustrator allows to create symbols of artwork very easily which in turn speeds up exploration ever more. Let’s say you have the same screen or component which you want to use a number of times across your work. Dragging the selection into the symbols palette allows you to reuse or instantiate that artwork and still have the ability to edit it in one location with it updating throughout. This is simply a superiority that paper cannot compete with.

The above are the reasons why I moved in the direction of electronic sketching. Perhaps the use of paper can still be justified in collaborative sketching sessions when there are more than one designer at the table and the design activity happens simultaneously in real time. For the remaining times, I find that the electronic sketch offers advantages over paper that are just too good to pass.

Credits: Jakub Linowski

Credits: Vincent Steurs

Credits: Alex Faaborg