OneNote 2007 Drawing Tools

Awhile back I promised to write about drawing tools in OneNote 2007. I'm pleased to say that thanks to the valiant efforts of one of our interns (hiya Bill!), we've got 'em!

Obviously a big part of capturing information quickly is capturing diagrams. Whether it be lectures at school or things drawn on the whiteboard during a meeting you often have to depict information visually, and that's hard when all you can do is draw freehand. It's not too bad if you have a pen and a Tablet PC, but its really rough if you just have a mouse, track pad, or "nib" as most people are stuck with on desktops or laptops.

And it's not just note taking. A common use for OneNote is as a drafting table for ideas, and you need drawing tools for that as well. We also find a disturbing number of people trying to create "presentation quality" output in OneNote. We don’t design for that but drawing tools will help there too (at least straight lines versus quavery hand drawn ones!)

As we pondered drawing tools, we had to decide whether they would be typical Office drawing tools or something more natural for OneNote. One thing that is different for OneNote is that we support ink already (on all PC types, not just Tablets). The Office drawing tools which you see in Word, Excel, etc. have a lot of functionality but also live in a different "layer" which OneNote wouldn't get to interact with much. That would mean for example that ink you draw on a page would not be able to interact with the drawing objects. Ink tools such as the eraser and lasso would not affect the drawing tools. Also these objects would not have awareness of other things on a OneNote page such as text that you might want to type on them. It's hard to explain the subtleties of the issues here but suffice it to say in the end we decided that having native drawing tools would be a better experience for our users.

We also had to decide what tools to provide. As I've talked about before, we don’t get to just have everything we can imagine, so we did some analysis of the types of diagrams people try to put into OneNote. We came up with a basic shape set that seemed to allow the creation of most basic diagrams.

First off, OneNote 2007 has a drawing tools toolbar that looks like this:

On the left you see familiar pen tools such as selection/typing mode, lasso, eraser, delete, add more space and pen. Then the drawing tools start:

  • straight line
  • line with arrow
  • line with two arrows
  • elbow line (which tries to draw the best line between two points without using any diagonals). Elbow line includes some variants with arrows:

Next come the shapes:

  • Rectangle/square
  • Ellipse/circle
  • Parallelogram
  • Triangle
  • Rhombus/Diamond

Next is a fun one. We felt that graphs were a common thing people needed in OneNote, so we have a tool that lets you draw axes in one swoop, including in three dimensions:

After that come pen color and thickness. Then a useful button called duplicate shape, which makes the buttons sticky so you can draw repeat shapes of the same type over and over again.

Here are some examples of the basic shapes in various colors, pen widths, and sizes:

 

The last control is Rotate, which lets you rotate or flip whatever you have selected to make symmetric or other similar shape clusters.

Here's a little flower I made using the rotate and flip commands (aww…)

These drawing tools actually have some nice little smarts built in to them. If you use them quickly, they snap to the grid on the page and it is easy to line up the edges of the shapes. If you start hovering slowly while finalizing the location of the end point they will slip into "exact" mode and let you drop the shape edge exactly where you want it. Modifier keys like Ctrl and Shift do the typical constrain and unconstrain thing. Some shapes like circle can be created either with the circle edge intersecting where you first clicked the pen or you can have that point be the corner of the bounding rectangle for the shape. Think about that a bit - it's important when you're trying to actually make a diagram and want the edges of circles to line up with arrows and so on.

Of course we didn't get everything some people will expect. There are no fills or gradients. You can't "connect" shapes so that when you move one the other will distort so that it continues to link that shape to another (typical of arrow lines). You can't attach text to the shapes, although you can click on them and put text labels on top. We don't try to auto-recognize hand drawn shapes and turn them into regularized shapes. Of course the list of things we didn't do can fill a book so I won’t go on (oh, we didn't do animated pac-men either, sorry Federico). We think we've got the basic set in and hope you’re all happy. If it hadn’t been for our intern we wouldn’t have had these at all, so it's all bonus!

Finally I'll leave you with a message Bill the intern provided on his last day with us: