Microsoft Reconsiders the Office UI
In its own quiet way, Microsoft Office 2007 is an act of courage. Rather than tout yet more features to its mainstay application suite, Microsoft has remodeled the user interface? so that people can actually find and use features that have been hidden in the hierarchical menu structure. The new UI is certain to frustrate some long-time Office users, who will find the changes as welcome as a mother-in-law who rearranges the cabinets. Early users have complained that familiar functions are now in unfamiliar places. They don’t like the UI’s relative inflexibility?except for a single toolbar, you can’t re-arrange the layout. But in software design, even the best known applications sometimes need major overhauls. With Office 2007, Microsoft has made the most serious attempt at demystification of a mainstream program since the advent of the graphical user interface. The UI is likely to influence interface design well past Office’s borders.
The “ribbon,” as the new UI is called, consists of a set of tabs, each associated with a general activity, and each invoking a related strip of icons, labels, toggled buttons, drop-down menus?whatever representation of a function works best. The Ribbon is not yet found everywhere in the Office 2007 suite, but where it appears?in mainstay applications like Microsoft Word, Excel and PowerPoint?the effect is like that of an intuitive dashboard.
The Ribbon is not a panacea, and not every function is represented with equal clarity. After years of not quite understanding how style sheets work in earlier versions of word, I’m still not fully clear how they work within the Ribbon?though I’m getting there. And a few useful features have dropped out entirely, such as the ability to print selected pages or text from an email. (My wife is still unhappy about that one.) But, in general, the design team has done good work here, taking advantage of faster processors, larger display screens, and a crying need to help users navigate through features that have been layered in with each successive office release. The new UI is a tacit admission by Microsoft that its application suite, like so much else in life, has ventured into the uncomfortable realm of “bloatware.” After a couple of weeks interacting with the Ribbon, I actually missed it on OneNote, an Office 2007 program that still uses conventional menus.
Interacting with the Ribbon
The idea behind the Ribbon is straightforward enough. Represent the most commonly used features of any application as a set of strips, each associated with a tab. Each strip is grouped into functional activities that are graphically represented. Gone is the uniform look of a conventional menu system, in which every function, major or minor, looks identical. At the simplest level, the Ribbon borrows the toolbar’s heavy use of icons. Hence for the “home” tab on Word, the clipboard is represented by a clipboard, the “cut” function” by “scissors,” and the “find” function by binoculars. But in arranging elements on the Ribbon, a UI designer can use whatever graphical display best conveys what a feature will do. Click to the “page layout” tab within Word and a different swath of features appears, with tools to change the page setup, background, paragraph, and more. The Excel Ribbon works similarly: the Home tab brings up basic formatting commands while the Insert tab brings up options for charts, tables, and other graphical elements. If you want more screen space for your work, you can minimize the ribbon, leaving just the tabs; double-click a tab and the ribbon re-appears.
For people who don’t like to leave the keyboard for the mouse, most functions can also be accessed through keyboard combinations?with the exact combination prompted on the screen. Press the
One potential problem with the Ribbon approach is that users may fall into a “command loop,” in which the needed functions are spread over two or more tabs. I haven’t run into that problem yet?the selections associated with each tab seem well thought out. But the UI has a built-in work-around as well in the form of a “Quick Access Toolbar” that stays permanently on the screen. Any function can be added to the toolbar via a right-click menu. Another element always visible on the Ribbon is the “Office Button,” which includes the file saving and printing functions formerly found on the file menu, along with some additional flourishes. For example, a “prepare the document for distribution” menu lets you encrypt the document, inspect it for hidden metadata and personal information, or make it read-only. Current documents can also be converted to Word’s new XML format (with a “.docx” extension).
In his informative blog, Jenson Harris has written about the thinking behind the new UI in posts dating back to September 2005. Harris, whose team is responsible for what Microsoft calls the “user experience,” is candid about miscalculations, including his own. He was certain, for example, that users would read the Ribbon left to right?like a book. Hence the most important features should be on the left, the least important on the right. But eye-tracking tests showed otherwise. People tend to click on a tab then look directly below. Reading Jenson’s posts, you realize that designing a useful UI requires not just inspiration, but plenty of empirical evidence. Microsoft developers ran eye-tracking tests to see how people interacted with proposed design, looked at how people used the previous version, Office 2003, and asked people to group functions into proposed tabs. The company made beta versions of Office available to anyone with the time and patience to download them.
Grappling with creeping bloatware
The roots of the Office 2007’s new UI go back at least 10 years, to Word 97, which was a big best seller for the company. A treasure-trove of features sold the product: whereas Word 1.
Other accommodations for the ever expanding feature set would follow. Office 2000 saw adoptive menus, which can be clicked on to reveal more options. Jenson said this scheme didn’t work because each person has a different idea of what should be on the “short” menu. Office 2000 also introduced rafted toolbars?in which multiple toolbars share space on the same line. But real estate was limited, forcing some buttons to an overflow area. And then there was the task pane, a separate rectangle where designers liked to place the newest new features. “Now, in addition to short menus, long menus, hierarchical menus, visible toolbars, and the toolbar list, a user had to look through the Task Pane stack as well for features,” wrote Jenson. “It just added complexity to the product.”
To help users navigate, Microsoft also introduced one of its most reviled ideas: Clippy, an annoying, animated paperclip that attempted to act as a helpful assistant. Clippy’s very existence was an early tipoff that the UI needed serious work. Harris pointed out that the technology behind the assistant was pretty sophisticated. And that some parts of the UI we now take for granted?icons and the mouse, for example?were first called gimmicks and distractions. But Clippy was too distracting, and for American users, at least, too kawai. In the end, Clippy’s may be best remembered for what it taught Microsoft designers. “We learned a bit of humility,” Harris wrote. “We learned a lot about how customers do not like to necessarily be clowned around with. We learned about how to synthesize disparate ideas into a technology. And we learned how to learn from our mistakes.”
The Ribbon concept emerged during development of Outlook 2003. Originally called WunderBar, it was conceived both as a more graphical UI, and as a single point-of-entry to all application features. “It's either there or it's not--there are no other ‘rocks’ to look under, no other places we've hidden functionality,” wrote Harris.
Microsoft has not put the Ribbon interface everywhere within Office 2007?even at Microsoft, there are only so many developers to go around. The UI is found on Word, Excel, PowerPoint, Access and most?but not all?of Outlook. (The less-used Access was not an automatic candidate, but was due for a major upgrade.) Outlook’s mixed UI?part Ribbon, part not?seems more peculiar: the outer “shell” uses conventional menus, while most everything else is “ribboned.” According to Harris, the reason has to do with Outlook’s diversity of activities: at any session, you might post an email, create a task, send a meeting request, enter an appointment on the calendar. “In fact, there are more than 40 unique ‘application experiences’ within Outlook, each which requires a set of tabs in the Ribbon that 1) expresses all of the possible functionality 2) is as consistent as possible with other similar features within Outlook and 3) is as consistent as possible with the Word experience,” because Word is now Outlook’s editor. So, while it might seem like Outlook ‘is just dabbling its toe” into the new UI, the application presented the biggest challenge to Ribbon design because of its large, complex set of scenarios.
The new UI has a few other tricks up its sleeve, the most dazzling of which is “Live Preview,” which Microsoft didn’t invent but puts to good use. If you hover your mouse over a font or style selection, the document itself is temporarily reformatted. “Pick before you click,” is how Harris describes it. (Harris says an early example of this technique was Broderbund’s Fantavision animation software, a 1980s program he ran on his Apple//
Programmer customization: RibbonX
According to Harris, only 2 percent of Office 2003 sessions run with customized command bars?that is, the buttons have been added, removed, or moved between toolbars and menus. Of those, 85 percent were minor customizations: affecting four buttons or less. That said, Office 2007 gives a fair amount of user-customization to those power users who want it. The first level is the aforementioned Quick Access Toolbar, which make virtually any element from any ribbon available at any time. Users can even add an entire ribbon to another ribbon, which is then shown as an icon. Users can also add obscure commands to the toolbar via the Command Well, a repository of features available via the options section of the Office Button. Among those found on Excel: “nudge down,” “erase border,” and “calculator.”
For more serious Ribbon extensibility, Microsoft offers RibbonX, an XML-based model. Of course there’s an obvious problem: while “thousands of add-ins, macros, and other projects” have been written to extend Office, none were written for a version of Office that lacked traditional menus and toolbars. Harris promised that any add-in or macro that runs on Office 2003 will be supported on 2007. Of course it’s not quite that simple. If your extension places a new tool on a toolbar that no longer exists, how do you now get at it? The group considered some kind of function mapping between the two UIs, and eventually gave up?the Ribbon is too much a departure for that. “So instead, we went for predictability.”
With Office 2007, all add-in code that addresses office’s CommandBars object model (first introduced in 1996) brings up an additional set of features via an additional tab called “Add-ins.” Those features are subdivided into developer-created menu and toolbar commands. The intent is transparency: to the code, this looks like an Office 2003 environment.
According Savraj Dhanjal, who oversees UI extensibility for Office developers, work on extending the Ribbon UI ran in parallel to the UI development itself. The result was “an XML schema that allows developers to create their own tabs, groups, and almost a dozen different control types, far more than the set of five custom controls offered by CommandBars.” In keeping with the Ribbon’s graphical orientation, the control types themselves are highly variable. A button, for example can be small or large, labeled or not, with a screen tip or not?using a custom 32-bit icon design, if desired. There are ToggleButtons that stay depressed when clicked, and SplitButtons whose bottom section brings up a submenu. Buttons can also be amassed in ButtonGroups for a neater layout. The schema also gets away from the “free-for-all” chaos of CommandBars, in which any add-in can change the UI, then disappear, leaving dead buttons and menu items in their wake. Now, good behavior is enforced: if an add-in is uninstalled, the UI customizations disappear.
RibbonX supports both Microsoft’s Component Object Model, with support for C#, C++, VB6, and VB.
RibbonX works on the “pull” model,” that is, Office queries for control information, typically for control properties not declared up front in the customUI markup. These properties can include images, labels, descriptions, screen tips, and visibility. After loading and displaying a button, for example, Office calls back to the code to see if the button should be enabled, but doesn’t check again unless the add-in indicates its state has changed. The advantage, wrote Dhanjal, is to detach the code from the location of a control. That, in turn, allows users to make further customizations, such as promoting a control to the Quick Access Toolbar. “If your control was copied elsewhere in the world of CommandBars, you would have to write code to update the state of your control in both locations.” Another advantage: you are only asked for the new state of your controls if those controls are visible. For control freaks, RibbonX also permits “command repurposing” in which built-in Ribbon function is overwritten.
So will Ribbon go the way of Clippy? I don’t think so. If the whole point of a graphical user interface is to let graphics, not just text, do the heavy lifting, that’s what Microsoft has done. Design elements of the Ribbon will certainly be refined, but until someone has a better idea, this UI is here to stay.