Share via

Drawn Together

  • Article

Creating a drawing in Office is different is a few key ways from other features we expose on the Insert tab of the Ribbon.

Most notably, individual shapes are usually part of an overall drawing. It's less common that someone intends to draw a solitary circle than that the circle joins together with other shapes and lines to communicate an idea as a complete drawing. Unlike a table or a picture, which is usually by itself a complete expression, shapes and lines tend to work together.

This creates some interesting usability and efficiency issues for the drawing UI. The first realization we had very early on in the design process was that drawing is a cyclical task. Unlike the simple Insert -> Format workflow of a table, the workflow for drawing often looks more like Insert -> Format -> Insert -> Insert -> Insert -> Format -> Insert -> Insert -> etc.


Sorry for another gratuitous diagram today--
I can't get seem enough of using these new Office 2007 diagram tools!

So we knew that we needed to support this process of inserting and formatting a lot of things together well. Although Contextual Tabs are a crucial part of the new user interface, they were originally conceived for use with tables and pictures, in which you tend to insert the object once and then spend the rest of the time adjusting the content, layout, and formatting.

With the drawing model, however, contextual tabs got in the way, because every switch between Insert and Format required a tab switch between the Insert tab and the Drawing contextual tabs. Although I like to point out at this juncture of the discussion that even with an added click for tab switching , the total of number of clicks required for this scenario is still far fewer due to the Ribbon, it felt inefficient for people. One thing that I've learned during this design process is that if something feels inefficient, it is just as bad as if it is inefficient (no matter how much objective proof you can offer to the contrary.)

In order to break this cyclical tab switch, just before Beta 1 we added the same Insert Shapes gallery that's in the Insert tab to the Drawing Tools contextual tabs. Now, you could insert shapes from either the Insert experience or the contextual experience, and you could perform the cycle of inserting and formatting without needing to tab switch at all.

This was also when we designed and built "lingering" into the product to help address scenarios in which you were jumping between objects in a drawing to format them in succession.

This was the state of things circa Beta 1 Technical Refresh. But the feedback kept rolling in.

In general, people liked that they could do the drawing from both tabs, but a new problem came up. Because the shapes gallery was in a different location between the two tabs, you could never dependably and rapidly move your mouse into the same area again and again to draw out many shapes. You had to insert the first shape from one place in the Ribbon and draw subsequent ones from another place.

Well, it turns out that because of the way the Ribbon scales up and down, there's only one place you can put content so that it remains constant between tabs--in the leftmost position. So, we redesigned the Insert tabs in each of the apps so that the Shapes gallery appears to the far left side. This ensures that the drawing tools remain in the same exact place in the screen regardless of which of the two tabs you're using.


The Insert Shapes gallery remains in a consistent position across tabs

Another piece of feedback we received is the importance of being able to efficiently choose exact font sizes for text contained in drawings. Prior to Beta 2, the Mini Toolbar did not include the font size picker (just a simple size up/size down set of controls). So, in order to make sure that the key text formatting controls are at hand when editing text in drawings, we added exact size to the Mini Toolbar for Beta 2.


The Mini Toolbar in Beta 2 has exact font size control

As with everything in the Office 2007 UI, we continue to refine the designs based on feedback. So many areas of the product have been iterated on as many as a dozen times as we learn more about the way people interact with the new UI and expect it to work. Beta 1 was our version 1.0 product: promising but rough.

By continuing to evolve the designs based on feedback, we hope that Beta 2 will exhibit greater levels of refinement and efficiency.

Comments