Beyond Menus and Toolbars in Microsoft Office
Jensen Harris, Microsoft
See also Trackbacks.

Meeting Report by Alison Andrews

Introduction
Long before the launch of the new Office product, the BayCHI community was eager to understand the new "Ribbon" user interface (UI). Members convinced BayCHI program chair Rashmi Singha to bring in Jensen Harris, the lead UI designer for the Office UI suite. It is atypical of Microsoft's culture to allow someone to discuss a product before launch. But, alongside the serious risk of completely redoing a core product, and giving all the design control to a team of user experience designers, Microsoft is opening the black box and explaining it to the public far before launch. Jensen's blog also details the design strategy far at: http://blogs.msdn.com/jensenh.

Microsoft Office has 400 million paid users and is the most complex system of productivity software with five core applications. The next version is called Office 12, and Jensen reviewed Beta 1. The conventional wisdom about Office is that people only use 5% of it, or that they believe that "everything I need was in Office 95, 97, 2000." When actually asked, users admit that they don't know how to do certain things in Office even though they know "there must be a better way." The user research exposed many workarounds, especially doing a lot of manual work when a function exists to do that for them. The new Office suite seeks to resolve those kinds of fundamental user experience (UE) problems by making it easier for users to find functionality that can help them and create great looking documents.

How Office Evolved into What We Know Now
Before we look at the future, we must look at the past. The first GUI interface actually started at XeroxPARC, where Jensen delivered this presentation.

• Windows 1.0 (1989) had 2 toolbars and 4 menu items.
• Windows 2.0 (1992) had 2 toolbars and the same menu structure that is in use today.
• Word 6.0 (1994) had 8 possible toolbars, and added tooltips, right-click contextual menus, wizards and toolbars at the bottom of the screen.
• Word 95 contributed an awful feature: the red squiggle underline for misspellings.
• Word 97 introduced the animated paper clip and offered 18 potential toolbars that could float or lock onto every side of the screen. This version also gave birth to hierarchical multi-level menus which heralded, in Jensen's view, the beginning of the end of the current UI—the structure couldn't scale to handle the volume of emerging functionality.
• Word 2000 (1999) had 23 toolbars and began hiding less-frequently used functionality inside menu pull-downs. In addition to the show/hide arrows at the bottom of menus, Microsoft also put little arrows on the edge of the toolbar in case you wanted to expand a menu out. But "don't worry," Jensen said, "everything is automatic and the buttons will move around anyway." This version also brought us the Help Pane and personalized menus. Basically the critics were right when they said that this version was bloated. But that wasn't the biggest mistake: Microsoft changed the file formats of Office with this version, requiring everyone to upgrade. A lot was learned from this version's launch.
• Word 2002 had 30 toolbars. This exhausted any further innovation in taskbars, so Microsoft introduced the vertical taskpane—8 of them. This was their way of saying, "features aren't getting noticed in the toolbar so let's take a part of the screen and show people all the neat things they can do."
• By Word 2003, users had 11 taskpanes. Jensen admitted that, at this point, "users can't find functions in the taskpanes, so Microsoft decided to build a MENU of taskpanes. We had almost 20 taskpanes by then." All this to expose functionality that people said they had to have, but didn't use because they couldn't find and didn't know existed.
• Word 2003 ushered in 31 toolbars and the Smart Tag menu. Microsoft invented new rectangles for a UI expected to scale to afford another 100 taskpanes.

At this point, Jensen's team realized that they had to do something serious: "When we looked at how people use Word, we discovered that people's screens were getting squeezed. We were tasked to handle all the taskpanes. That's when we thought we should rethink Word and Office in general."

Office finally broke from too much functionality constrained by menus and toolbars. Those conventions were designed for less fully-featured programs; the software is now so rich that it can't be easily communicated using toolbars. Jensen considered removing functionality but said that Microsoft fields requests from many customers asking to build more than even Microsoft thinks they can include. Jensen asked his product team for a list of Top 10 features wanted from users. It turned out that 4 of them were already in the product. People couldn't find functionality: the UI was keeping them from exploring the power of the product.

Fixing Office Required a Lot of Data
Jensen introduced the Customer Experience Improvement Program, which we all otherwise know as that dialog box that pops up when you install Office, asking if you want to help MS make Office better. Apparently, many people agree to having their Office usage tracked. The new design could not have been done without data like:

• How many folders does the user look at?
• Which commands do people use most? (Paste is used more than any other feature in Office. More than cut or copy. They use cut or copy in a web browser, for example.)
• How are commands commonly sequenced together? Which commands are accessed via toolbar, mouse or keyboard? Where do people fail to find functionality they're asking for in newsgroups, support calls?

Jensen's team has collected 1.2 BILLION data sessions - averaging 1.8 million sessions per day. Over the last 90 days, they've tracked 352 million command bar clicks in Word. They track nearly 6000 individual data points. All this data arrives as a spreadsheet on Jensen's desk and when the data doesn't make sense, they follow up with focus groups and support calls.

The Big Bet
Too many people know how MS Office works, so Jensen's team knew that they need to work with that comfort level. Jensen said, "We know now how the applications evolved over 20 years. We asked ourselves, 'What would the founding fathers have built in the beginning, knowing what they know now.'" Ultimately, Microsoft's Office UI team trusts that people will learn a new way of working.

And, according to Jensen, Microsoft's conservative history lets them make a big bet now. They know that Office is widely used, frequently used, and essential for many people's work lives. Jensen's research has shown, for example, that people spend more time 1-to-1 with Office than with their spouses and family. That is, users spend 2.6 hours per day working 1-to-1 specifically with Office, not including browsing the web or anything outside of it. Married people spend, on average, 2.4 hours per day with their spouses. Changing Office needs to be worth it.

Starting Fresh with Design Tenets
The data helped the UI team start from a clean slate. Jensen thinks that the work has benefited tremendously from the start by identifying the team's design tenets. Theirs are:

1. A person's focus should be on their content, not on the UI. Help people work without interference. Ask: Is it worth taking this pixel away from the user?
2. Reduce the number of choices presented at any given time. Increase the user's sense of mastery through contextualization. Since browsing isn't going to go away, make that task better. This means simplifying the number of choices available at any one time—contextualization. You must remove to simplify.
3. Strive to increase efficient access to features. We knew people wouldn't put up with more clicks or wizards. Users need a single, finite space to search for functionality.
4. Bring out the soul of the program; embrace consistently but not homogeneity. Every program has something its good at, even if it can technically do other things. If the UI for drawing had to be the same in Excel as in Visio as in Picture Manager, you get lowest common denominator design. Help people work without interference—allow them some predictability and no automatic UI changes.
5. Give features a permanent home. Prefer consistent location UI over smart UI
6. Straightforward is better than clever. The UI has to feel natural to users.

The new UI
The new and improved file bar is about the width of 3 toolbars, but Jensen" insists that this is it. "No more space will be taken," Jensen promised, "and it can be collapsed down for total focus on the document if need be." The primary toolbar items are no longer menu pull-downs but tabs expressing specific task-based views on the document.

• Word: File—Save—Insert—Page Layout—References—Mailings—Review
• Excel: Sheet—Insert—Page layout—Formulas—Data—Review
• PowerPoint: Slides—Insert—Design—Animations—Slide show—Review

Each tab opens a subset of functions associated with that view on the document. That subset is called a Ribbon, and it replaces menus and toolbars. Ribbons let you see the choices available in each tab in a way that shows the effect of its selection. This facilitates browsing functionality, exploration and discovery.

The UI team found that all of Word fits into 6 tabs. Tabs are task-oriented, organized around objects and scenarios. Each tab is organized into several groups to organize different kinds of functionality. This means, no more looking through hierarchical menus, toolbars or taskpanes. Furthermore, there's enough room to label each command properly. When it comes to icons, people really only recognize "bold", "center", and "italic". And the successful nature of those icons refers to its direct applicability: you see the effect of the selection as the icon. The Ribbon UI applies that same logic to the creation of their new icons.

At the same time, labels are important and the reason why so many people don't know that functionality exists is because it's not labeled. Rich command layouts allow users to interpret the potential of the functionality and explore new ones. The screen changes when rolling over variations in item selections (formatting, graphs). It's playful and invites experimentation. For example, one of the difficult tasks in the current version of Word is in positioning text around images. In the new version of Office, a visual representation of positioning choices shows what will happen before making a selection.

As the screen shrinks, the toolbar changes its look by turning image-based icon buttons into line items. Selecting a line item opens its subset of choices, as in format > table > styles.

How the New Design is Faring
In September 2003, Jensen wrote down 3 criteria for success for this new UI model:

1. People feel a sense of possibility when they see that we've made big changes.
2. People feel free to explore and use more of the depth of the products.
3. People continue to be at least as efficient, if not more so, on familiar tasks as they are now.

Early tests indicate that users seem pretty comfortable using this from the first moment. Some users even seem to "recognize" the UI, and determine during the course of the test that they already have this version at home and they like using it.

Essential Constructs for the Next Office UI

Contextualization
Right-click context menus, circa 1995-2005. According to Jensen, in the beginning, "no one would use right-click. You could not pay people to use the right button on their mouse. Now, beginners turn to right-click menus first, in order to discover the potential use of a product. It's like magic for users. It's not because the menu itself is great; it's because the contextual nature of the functionality has a high likelihood of success."

With 1500 separate features in Word, Microsoft organized them in a way that revealed that most functionality is usable only with an object: picture, table, textbox, chart, diagram, header, footer, shapes and pivot tables. This cleared up the UI significantly so that, now, this functionality arrives when a user selects or inserts an object, but not before. Jensen: "It's not that things come when you need it; it's that things go away when you don't. Formalize this in your UI and you'll drastically simplify it."

This "Format—Drawing Tools" Contextual Tab delivers relevant functionality when there is an object on the screen. This UI framework can scale for new functionality since it identifies what a user needs to use and delivers functionality to focus on that set of tasks.

Galleries: Designed to work with the ribbon, the galleries are a visual way of browsing. This approach uses "three-stage formatting" by applying an overall style to an object from a gallery of styles. A user then tweaks the appearance of an object using galleries of individual effects like borders and elements like transparency. This also refers to "results-oriented design" which recognizes benefits in "showing them what is going to happen before it happens." This approach is more visual, tactile and responsive than WYSIWYG [What You See is What You Get]. He recommended thinking about features in the UI, instead of commands. This means presenting functionality at a higher level and illustrating features by their results.

Live Preview: Using hover, a user can see what effects a feature would produce without actually applying it. This frees the user from the process of try-undo-try-undo. The document actually changes when the mouse is rolled over the various options. Jensen is excited to free users from the hassle of having to "block text as selected, do something to it then click away from it to see if it worked, and reselect either to undo or change." Features have subtitles when the design distinctions are not immediately obvious.

Minibar: This is a mini-toolbar that fades in slowly as the cursor draws nearer to it. The minibar only emerges in the frame of the document when you select something within it. The toolbar presents 8 features that you are likely to use, or use most under these circumstances. This provides for efficient access to functionality for mouse-oriented users.

Customization: Office 2003's command bars are extremely customizable, perhaps too much so. There was so much functionality to orchestrate in that version of the software that the UI designers decided to give many choices to the users, and let them figure out their own optimal combinations. Customization, unfortunately, isn't a popular activity, according to the research data, which shows that fewer than 2% users have customized Office 2003. 85% of those 2% are add/deletes of 4 or fewer buttons. Many of the most common customizations are popular features like "superscript" or "send to back". The data identified the top 20 customizations, so this information was used that to modify the ribbons.

Questions & Answers
Q: Were nested menus and folders popular?
A: Hierarchical menus stopped being useful when we added fly-outs (arrows on the right of a menu item to expand a sub-menu) because it's hard to browse that unless you establish a mental model tree of the functions in your head. Menus shouldn't necessarily go away, but there is a limit to how many features a product can hold using this UI model.

Q: Is this UI scaleable for features not yet thought of?
A: We will keep adding features. The task-based orientation helps focus the kind of functionality that needs to be made accessible in a given view. The data also helps us decide when functionality should be reviewed. One of the pieces of data we got was that some features have been fixed 9 times, and others aren't used at all. So we looked at the features that aren't used at all and discovered that they weren't hooked up to any code. So no wonder they weren't being used.

Q: What's the size of your UI team?
A: The program manager owns the design, with 12 people reporting to him. The team has 25 developers and 30 testers. This project was the first time at Microsoft that the whole team shared ownership. As a programmer, the most fun part is making the UI since they can point and say, "I did that." So we were forced to deal with that legacy of their role in making this new team dynamic work. We had to receive their ideas and comments with open arms.

Q: What was your process?
A: Designers looked at a couple of things early on, like: "add/delete programs"-style list of frequency of use for all functionality listed in alphabetical order. It's hard to make progress in an ambiguous way, so you have to be totally clear on your design tenets and stake a claim about your focus. Staking a claim on a new design requires a significant level of risk and experience. Then, you iterate and iterate and then iterate 10 more times.

Q: Did you have political support from management on UI priorities?
A: There are many teams and not many have shared user experience teams on them. We work with the shell team on the O/S and share ideas and concepts on the visual logic. We have been free of political pressure because we had the support of the VPs. I can't think of a better place to incubate new ideas than on the team we're on.

Q: Is this new UI dependent on being mouse-oriented?
A: Keytips will allow for navigating the UI; ALT shows all the letter cues on the interface. We had to think about what all these functionalities sounded like to the blind, so we worked with the accessibility vendors for that community of users. Plus, we worked with Microsoft's strong, vocal accessibility team who are determined to make every product accessible.

Q: How do you measure efficiency and "feels natural"? How do you decide what to track?
A: There are downsides to the process of collecting data the way we do now. We started the data collection process by asking, "What will we want to know three years from now (2003) when we have to build this?" For analysis, we look at sequences and charts to determine what's used more or less. But we're not statisticians. A usability engineer with a statistics background could be a very interesting addition to our process.

Q: Is there a style guide for the new Office UI?
A: There is substantial intellectual property in this UI. There is no style guide for this UI yet but it may be ready by late 2006. There are already 3rd party vendors who have built this product based on leaks. They've started shipping, even, which is surprising. But, when we start working with other vendors in a legitimate way, we'll need to make sure that the details are good and that the ribbon isn't just another enormous toolbar. Check Jensen's blog for a status check on this.

Q: Major changes affecting products that would look and feel the same as Office?
A: Office 12 changes file formats to something that is XML-based. The Office Suite comes with converters for read-write back to Office 2000. A lot of apps extend the UI—you can add your own groups and tabs, galleries and controls. We hope people do an even better job of integrating with the new Office given this UI format.

Q: What will Office 2015 look like?
A: There is a lot of functionality associated not with making the document so much as what happens to the document when it's delivered. That's all I can say.

Q: What's your back-up plan?
A: I got a free membership to BayCHI and access to Job Listings, which is great. No, really, you never know what will happen in the marketplace, but we have to do longitudinal testing with test sites. We're doing remote site tests. If we fail, we'll keep working at it for the second version. We can't go back to the old UI because we're building new features inside this UI and it's changed our feature set in a meaningful way.

Q: What are some of the things you are not happy with in this UI?
A: The biggest hole is the way in which the super-expert users feel about it. You think of basic users as being most affected by this change. But they're not. The ones who have the most to lose are the super-elite who have customized everything, the ones for whom knowing Office to the final endpoint is a mark of their identity. We have to figure out how to do customization in a way that experts can dig into and make the most of without getting in the way of the basic users. These expert users are very vocal and over-represented in our data. Even if we please 99% of our users, with 400 million users, that leaves 4 million people who could be very angry with this new UI. But this is just the beginning of a new road. Valuing user experience is a way to get new people into Office.

Original Announcement

Farewell, menus and toolbars. More than 20 years after the introduction of the Macintosh, software has outgrown the basic building blocks of today's standard user interface. The upcoming version of Microsoft Office does away with the top-level menus and toolbars in favor of a new task-oriented, contextual user interface.

This talk will provide a historical perspective on the evolution of the Office user interface and the battle against the mounting complexity of the product. You'll get a behind-the-scenes look at the different design iterations, and an in-depth look at the new Office UI constructs, including the Ribbon, galleries, contextual tabs, and the MiniBar. You'll also learn the ideas behind "results-oriented design," which Jakob Nielsen wrote, "might well be the way to empower users in the future."

With 400 million Office users potentially making this transition, would embracing these concepts solve problems in your own products? A question and answer session will follow the talk.

Jensen Harris is a Lead Program Manager on the Microsoft Office User Experience team and is one of the key designers behind the new user interface being introduced in Microsoft Office. Jensen joined Microsoft in 1998 and has contributed to a number of products for Windows and the Macintosh, including leading the redesign of the Outlook 2003 user interface. He has focused on the overall UI model for Microsoft Office since 2003.

Prior to working at Microsoft, Jensen graduated with degrees in music composition from Yale University and Interlochen Arts Academy. He is the author of widely used software, including the cross-platform, caller ID system YAC. He publishes his thoughts daily in An Office User Interface Blog.