OneNote for Interaction Designers, Part 1

Chris Noessel

March 5, 2013

Whiteboards are cool, I guess. Fast, easy, familiar. But really, they're nothing compared to digital sketching. At Cooper, we use digital sketching in almost all of our projects, and almost always in OneNote. In the next few posts I'll share how we use it and why we think it's awesome, see what you think. But first, to whet your appetite, some example drawings from Cooper designers straight out of the program.

These aren't meant to be finished designs, of course, but examples of how communicative and illustrative designers can be with their earliest ideas using the tool, and doing so very quickly. Each of our designers has their particular way of working, but in general we share the same setup.

The Setup

[From the video:] When roughing out a framework for a design, we want a tool that supports getting ideas out there, quickly and easily, letting everyone on the team see the ideas to discuss them in real time, and then make it easy to edit and modify them. The best setup we’ve found so far for this combines four technologies.

A Tablet PC with a stylus, in slate modeNote that the speed and flexibility gains we're looking for only occur when using a stylus with a slate computer like the Tablet PC.

A projector or large shared monitorThe shared monitor helps the the team see the design ideas in process and engage them in real-time. (This is part of a larger practice we call pair design.)

Microsoft OneNoteOneNote’s handwriting tools make it quick and easy to sketch out ideas, copy and paste them for modification, scale them, share them the client, and export them to other programs if need be.

Snag-It or similar, fast, stylus-aware screen grabbing toolTo overcome some of the limitations of the program, Snag-it helps us make handwritten lines into graphics that we can draw on top of and make selections more easily.

We have at times challenged this setup and its components, seeking to overcome its limitations, but nothing has yet come close.

In Design Meetings

With this setup, one designer will sketch ideas, talking out loud as he does it. Those ideas might be conceptual, might describe the environment, and in many cases are screen drawings. Using these drawings, he’ll propose ideas, discuss them with the team, and annotate the discussion alongside the drawing as he goes along.

When considering competing ideas, he’ll draw them both out so they can be discussed. When an idea is dumped, he’ll write down the reason why and put a red line through it.

When an idea needs to be tweaked, he’ll copy and paste the original and modify the new one.

When diagramming scenarios, he’ll connect screens with arrows that describe the point of interaction and the result.

Once the big ideas are iterated to satisfaction, we’ll often move to a more formal drafting software, like Adobe Fireworks to test out the screen ideas at a more realistic pixel level. We rarely stay in OneNote for the whole of a project.

Using this setup, teams are able to concretely iterate ideas: quickly and in a cheap, fast, malleable medium that easy exports to other tools and easily meshes with subsequent steps in the design process. Once designers start working this way they rarely want to go back.