codahale.com٭blog

Coda Hale lives in Berkeley, CA, where he writes about Ruby on Rails, usability, web design and development, and the occasional bit about bicycles.

Office 12 & the Ribbon: What’s wrong with modality?

Screenshots of Office 12 have surfaced, and while it’s been in need of some serious refactoring, I’m not entirely convinced.

Screenshot of Word 12

Yes, I know–it’s all beta, bound to change, etc. etc. But look at this Word 12 window and answer me this: how do I save the changes I just made? It took me a while to find it, but it’s the tiny little button on the right of the tiny little File menu in the upper-left-hand side. Do people really need a 40×40 pixel button for Apply Heading 3, but not for Save?

More importantly, Jensen Harris says:

Something we’ve known from usability tests for several years now is that most people don’t click on an unlabeled 16×16 icon. Sure, Bold and Italic and Center and a few others get a lot of clicks, but the curve falls off after the first 8 or so. As a result, we try to label every command in the Ribbon. We are also upgrading the overall iconography of the product (something that’s not reflected in the screenshots you’re seeing), but even a big, beautiful icon can’t help you find a command as well as that icon + the word “Margins.”

Okay, so users will be able to fiddle with margins easily, but the Save button remains an enigmatic little floppy disk next to the minuscule File menu? Odd priorities. I’d prefer a Fitt’s-compatible toolbar button, because most people haven’t internalized the keyboard commands, and the visibility bantustan that is the new File menu doesn’t seem like a good place to hide a click target most people will use often.

I’m heartened to see that the monstrosity of toolbars has been reduced somewhat, but I’m still suspicious that a mere context menu away lies a vast sea of inscrutable toolbars, featuring such useful items as a goddamn web browser. The tabbish-looking bits up top strike me as an odd setup, especially since they’re not grammatically parallel. We get two nice action verbs–Write and Insert–and then we hit a spate of nouns–Page Layout, References (?), and Mailings (?)–after which a nice verb–Review–and back for a noun–Developer. Are these things I’m doing, things I’m working with, or things I am?

I had two impressions regarding the ribbon. First, the Insert tab is a huge win. I love the idea of being able to see what changes you’re about to make to a document, and the addition of thumbnails provides an easily-scannable Gestalt; the user stays in the realm of visual changes, and doesn’t have to alternate between parsing jargon (”Insert AutoText,” or “Table AutoFormat”) and checking the document’s layout. The addition of useful templates (or “Themes,” or whatever the hell they’re called) will mean that most people will become capable of elegantly formatting a document.

My second impression was that in their effort to make Office 12 “modeless” Microsoft has erased the difference between browsing possible actions and performing them: when a user selects the Font dropdown in Word, the document automatically begins changing the font based on their mouseover actions. That strikes me as problematic for two reasons. First, without any visual indicator of whether or not a change is committed (besides, I suppose, seeing if the document changes when you mouse over it), you’ll find people becoming very cautious about making changes (e.g., not selecting a font until they know exactly which font they want) or attempting to “undo” the preview (e.g., re-selecting the old font, or hitting Undo with the Font dropdown engaged).

The reason for this is that the dropdown widget does not have clearly defined modes. When one clicks on a dropdown, how does one get out of the dropdown? Click somewhere else? Press escape? Unlike, say, an edit box, a dropdown’s modal status is ambiguous, and there are no clearly understood mores for its behavior. The alternative, however, does not entail a return to the dialog box hell that Microsoft has been building for the past decade.

I have two suggestions for how to make the dropdowns less confusing. First, move the previewing functionality into the dropdown control. The thumbnails in the dropdown can be rendered thumbnails of potential changes, further improving the “menu of choices” paradigm that Microsoft has refined. For example, the font dropdown could display a chunk of the selected text in the typeface for that entry. For larger changes, a mouseover popup hint could be displayed with a larger thumbnail of what that change would look like. Finally, the mode of the dropdown controls needs to be clarified for the user. A small close or cancel button, like Apple’s small, gray “X” in-field buttons, would provide the user with a clear action to drop out of the dropdown mode.

Hopefully, Microsoft has pulled back some of its previous boo-boos, and focused more on making the ordinary easy and the extraordinary possible. And for the love of all that is holy, don’t make it a web browser, too.

Comments Off