Bagikan melalui


Developer Overview of the User Interface for the 2007 Microsoft Office System

Summary: Read an overview of the user interface (UI) system for the 2007 release of the Microsoft Office applications and the goals behind the redesign of the UI. Learn about the impact of the redesigned UI on custom solutions and add-ins, and about opportunities to use or extend elements of the Office Fluent UI in custom solutions. (22 printed pages)

Microsoft Corporation

May 2006

Applies to: 2007 Microsoft Office System, Microsoft Office Access 2007, Microsoft Office Excel 2007, Microsoft Office PowerPoint 2007, Microsoft Office Word 2007

Download 2007 Office System Document: Developer Overview of the User Interface.

Contents

  • Overview of the User Experience for the 2007 Release of the Microsoft Office System

  • Detailed Design of the New UI System

  • Developer Considerations

  • Mapping Microsoft Office 2003 UI Concepts to Concepts in the 2007 Office Release

  • Conclusion

  • Additional Resources

Overview of the User Experience for the 2007 Release of the Microsoft Office System

In the design of the 2007 release, the Microsoft Office User Experience team reevaluated the way our customers interact with Microsoft Office programs. Informed by vast quantities of usability data and taking into account recent advancements in hardware and software, the 2007 Microsoft Office release delivers the most significant update to the user interface (UI) in more than a decade. The result is the Microsoft Office Fluent UI system, a comprehensive set of controls that work together to help users be more productive and efficient while using Microsoft Office programs to create documents that are more effective.

This document describes the underlying philosophy and the goals that directed the design of the Microsoft Office Fluent UI system in the 2007 Office release. It presents an overview of the individual system components—including graphics of major UI features—and describes how these components deliver an enhanced user experience that enables users to more easily find and use the rich functionality of Microsoft Office programs in their daily work.

Breaking with the Past

In previous releases of Microsoft Office, the UI was composed of a system of menus, toolbars, task panes, and dialog boxes. This system applied consistently across Microsoft Office programs. Although each program had unique functionality, the organization of the UI varied only slightly among Microsoft Office Word, Microsoft Office Excel, Microsoft Office PowerPoint, and the other programs. While this approach successfully provided access to a wide variety of features, it did not support users as efficiently as possible. Research and interviews indicate that many people—even those who use Microsoft Office for hours every day—often interrupted the flow of their work as they paused to figure out how to achieve a particular result in a program.

The new Microsoft Office Fluent UI is designed to reduce these interruptions, eliminating the need to figure out how to use the application by making the UI experience both more intuitive and seamless. The Office Fluent UI exposes the power that is already present in Microsoft Office applications. It makes advanced features more accessible even to casual users, enabling all users to streamline their daily work and achieve better results faster.

A Comprehensive Approach to Usability

The Office Fluent UI is not a single control or concept. It is a system of optimized controls, design philosophies, and interactions, calculated from inception to work together to help users complete existing and newly discovered tasks. Rather than providing a system of generic controls that are uniformly accessible for all activities, the UI in the 2007 release is optimized to support the particular activities unique to each program. The UI organizes controls according to related functionality, helping users to better discover and use the powerful features of Microsoft Office programs.

By presenting a comprehensive UI system that follows these principles, the 2007 Microsoft Office release helps users create visually compelling documents and share stunning presentations, while helping them save time and ultimately get more accomplished. Simply put, the 2007 Microsoft Office release is easier to use.

A Framework for Extensibility

While the Office Fluent UI was designed for end users, it also considers the needs of developers who build applications, add-ins, or customizations that use the Microsoft Office system as a platform.

Research with Microsoft Office developers identified shortcomings of the previous releases, including inconsistencies in programming across the core applications, difficulty localizing custom code, the complexity of adding references to built-in controls and images, and the degree of maintenance necessary to produce reliable code.

The 2007 Microsoft Office release addresses these concerns, offering a programming model that is optimized for common developer scenarios. New capabilities enable you to take full advantage of the Office Fluent UI system to create powerful, intuitive solutions for business users. In addition, you can be confident that your existing code will be represented accurately in the updated UI.

Results-Oriented Design

The user experience in the 2007 Microsoft Office release was created and validated based on a cohesive set of design philosophies and goals. These guiding philosophies represent the core ideas of results-oriented UI design. To understand the implications of the results-oriented philosophy, it is useful to contrast it with the command-oriented philosophy of previous releases.

The UI in previous releases of Microsoft Office was optimized for exposing individual commands to the user. Features were organized as discrete choices, and choices were named and placed on a menu or toolbar. In some cases, when commands needed to execute in a specific order, they were organized into a wizard. Particularly complex sets of commands were grouped together on task panes, which provide additional explanatory text.

In contrast, the results-oriented approach of the UI in the 2007 Microsoft Office release presents users with a gallery that illustrates how a series of commands affects a document and then applies the result all at once. Users do not need to learn a complicated sequence of commands to create the desired result. Consequently, users can use advanced capabilities more easily.

An equally important application of results-oriented design is the visual representation of formatting commands, which helps users achieve sophisticated results with minimal expertise. The Office Fluent UI shows users highly formatted table styles or combinations of picture effects, allowing them to achieve great results without requiring them to learn everything about how each feature is used. Consequently, users can take advantage of the advanced formatting capabilities of the 2007 Microsoft Office release without investing time in educating themselves about the intricacies of advanced features. Advanced users can, of course, continue to use the more complex individual features without impediment, but the more sophisticated functions (for example, text wrapping in Microsoft Office Word 2007 or conditional formatting in Microsoft Office Excel 2007) are now more accessible to all users.

UI Design Philosophy

This section presents the fundamental principles of results-oriented design. These principles guided and informed the design of the Office Fluent UI. To ensure a consistent user experience and to empower workers to create better documents by efficiently accessing the core strengths of Microsoft Office tools, when building solutions based on the Microsoft Office system, you should embrace the following principles:

  • Focus. The user's attention should be on the content, not on the UI. The results-oriented approach allows the user to perform sophisticated formatting and advanced tasks without diverting their attention from the document or content on which they are working.

  • Context. The contextualization of as many commands and properties as possible is crucial. Increase the user's sense of mastery by reducing the number of choices presented at any given time. Reduce the command space by eliminating redundant or seldom-used features.

  • Efficiency. Focus on efficiency rather than scope. Users must be able to find the most powerful features for the task quickly and easily. A small gain in the scope of features used is not worth a significant loss in the efficient use of the features.

  • Consistency. A results-oriented user experience is best accomplished by clearly providing intuitive ways to solve different problems. When applying tools to tasks, flexible consistency is desirable; homogeneity is not.

  • Permanence. Clearly defined access to tools ensures better usability. Ambiguity is reduced by establishing permanent homes for groups of features. A consistent-location UI is favored over a "smart" UI.

  • Predictability. The Microsoft Office applications offer a long and rich legacy of acceptance, upon which you can build successful UI innovation. Straight-forward design ensures continued user comfort and maximized results. Favor the predictable over the novel.

The following sections describe how the principles of results-oriented design are applied to specific areas of programs within the 2007 Microsoft Office suites.

Organizing the Programs

When designing the Office Fluent UI system, the user experience team worked closely with product planners to ensure that the controls reflect the reality of the applications, and that the programs benefit from the richness of the experience. As a result, the UI system and the individual controls fully support the capabilities of the new programs, and the programs take full advantage of the UI system.

This close relationship between functionality and user experience is most evident in the flexibility of the Office Fluent UI system. In previous releases of Microsoft Office, many design decisions were driven by consistency. While many of these decisions had good results, the downside of consistency is that, if overdone, it leaves little room for optimizing a program to help users accomplish specific tasks. For example, many of the components that make a great spreadsheet program are fundamentally different from what makes the best presentation program.

While programs within the 2007 Microsoft Office suites are fundamentally consistent, the Office Fluent UI does not equate consistent with identical; nor does it confuse familiarity with sameness. Consistency is inherent in the fundamentals of the design itself, but the controls and features available to the user are optimized to reflect the nature of the program (for example, spreadsheet operations, or presentation design). By bringing out the unique nature of each of the Microsoft Office programs, the Office Fluent UI exposes much more of the power of the individual programs without sacrificing the familiarity that has been a pillar of usability across the Microsoft Office system for years.

Three-Stage Formatting

In previous releases of Microsoft Office, advanced formatting was a challenge. By observing users engaged in formatting tasks, Microsoft learned that they typically approach formatting objects in three steps: choosing an overall design, modifying that design visually, and, if necessary, modifying the properties of specific objects. The user experience in the 2007 Microsoft Office release fully embraces this model, providing the user with a natural workflow for formatting objects. The Ribbon and contextual tabs promote a model of user interaction called "three-stage formatting"

When a user first inserts an object, the Ribbon displays the contextual formatting tab for that object. This tab allows a user to select from a gallery of predesigned styles that help them create a visual appearance for the object. The user then can switch to the second tab of the set, which allows the user to change elements of formatting through individual galleries of possibilities (such as adding different shadows, fill patterns, or border styles).

After customizing the look of objects using all of the visual tools available, the user may still want to modify the formatting, such as by setting the size of a picture to an exact number of pixels. The user can perform these modifications using commands available on the contextual tab or, in some cases, through associated dialog boxes. In this way, the formatting capabilities presented by the contextual tabs map directly to the way users want to format their objects. The controls used for formatting at each stage are consolidated into a single experience. Users no longer have to search the UI to find style-based and detailed formatting options.

Scaling the UI for Different Display Sizes and Resolutions

The Office Fluent UI makes use of large displays, while working better than previous UIs on compact screens. This is an improvement over previous releases of Microsoft Office, which generally targeted a single "base" screen resolution of 800 × 600 pixels. In previous releases, the entire UI was designed to fit into this base resolution without as much consideration for how the UI displayed on higher or lower screen resolutions. UI elements that did not fit the required space were moved to an overflow menu or required horizontal scrolling.

The Office Fluent UI is optimized for multiple screen resolutions. The groups of controls that compose the Ribbon are designed in several different sizes. As screen resolution decreases, more of the small versions of the groups are used. On larger screens, the Ribbon takes advantage of the space by showing larger versions of the groups. In many cases, this means that users with large monitors see more gallery selections at once and, in some cases, more efficient versions of commands that are organized at the top level. While a user with an 800 × 600 screen resolution must navigate to see more than five table design styles, a user with a 1400 × 1050 screen resolution may see 15 styles at once.

Because the Ribbon design considers different screen resolutions, the 2007 Microsoft Office release maintains a baseline usability benchmark across all screen sizes. In previous releases of Microsoft Office, if a button "scaled off" a toolbar, it lost its position and relationship to the commands around it. The 2007 Microsoft Office release, by contrast, always maintains the relative position of controls in the Ribbon. Space is conserved by removing text labels and moving to more efficient (but less evocative) control layouts. As an added benefit, the UI remains relevant into the future, as larger displays become more commonplace.

Labeling Commands

Usability research reveals that few users can easily associate toolbar icons with the features they are designed to represent. Although a few well-known icons (Bold, Center, Save) do not need labels, few commands are recognizable from the icon alone. Reliance on these icons leads to inefficient behaviors, such as "ScreenTip surfing," where users carefully move the pointer over each icon in the toolbar to display the ScreenTip.

Other users ignore the unfamiliar toolbar buttons altogether, preferring to use menus to access functionality beyond the top few features. Because menus are much less efficient than toolbar buttons, it often takes five or more clicks to perform an action that would take only one click if the user knew which toolbar button represented the feature. By labeling items wherever possible, the Office Fluent UI provides efficient access to most of the feature set of the program.

Support for Customization by End Users

Much of the customization observed in previous releases of Microsoft Office was driven by the decision to co-locate frequently used functionality into a primary place in the UI. For example, analysis of customized layouts in Microsoft PowerPoint 2002 and Microsoft Office PowerPoint 2003 created by a variety of professional users revealed that the customizations made to the UI were very similar. Consistency in the Office UI dictated that secondary drawing functionality—such as object order or alignment—was organized deep under fly-out menus. While that makes sense for Excel or Word, in PowerPoint these commands are more commonly used. Many advanced users respond by manually customizing the UI to place these commands at the top level.

Customization of an entire group of commands is rarely necessary in the Office Fluent UI. The results-oriented approach of the Office Fluent UI system and the flexibility to feature different command sets in each program (versus a rigidly consistent approach across all programs) resolve most of the common customization scenarios observed in previous releases.

Nevertheless, end-user customization is an important part of the user experience. The 2007 Microsoft Office release offers a new Quick Access Toolbar to place specific, often-used commands in a more prominent place in the UI. End-user customization in the Office Fluent UI model is driven by the user's need to increase efficiency when using certain individual commands (as opposed to groups of commands) to achieve very specific tasks, such as, inserting a footnote in Microsoft Office Word 2007 and then applying formatting to the footnote text.

Using the Keyboard

Keyboard shortcuts, such as CTRL+S to invoke the Save command, remain the primary mechanism for accessing command UI from the keyboard. The Office Fluent UI retains most commonly used keyboard shortcuts associated with features of the Microsoft Office 2003 Editions. Likewise, most of the keyboard shortcuts from Office 2003, including key combinations that are less widely used, such as ALT+F+S to invoke the Save command, are also available in the 2007 Microsoft Office release to ease the transition for users who relied heavily on the keyboard in previous releases.

In addition to the traditional keyboard shortcuts carried forward from Office 2003, every control displayed in the UI includes an associated Key Tip that displays the keyboard shortcut for that control. Key Tips indicate what key to press to access program functionality when using the keyboard access systems. To invoke a command from the keyboard, users first press the Key Tip for the tab that hosts the control, and then the Key Tip for the control itself. This approach ensures that every control—whether it has a text label or not—is easily accessible using shortcut keys.

Help Integration

The Office Fluent UI dramatically streamlines access to information about commands and tools. For example, it displays a control's name, its corresponding keyboard shortcut, a description of its purpose, and the help topic that explains its use. In previous releases of Microsoft Office, getting this information for a command could be very difficult. The Office Fluent UI provides quick access to information about commands directly from their associated controls in the Ribbon.

Enhanced ScreenTips provide links to auxiliary information, such as training or help topics, directly from the control itself. Users no longer have to discover the name of a command, open the Help window, and type the command name. Instead, the link is built into the UI. As the user experience reveals more of the richness of the Microsoft Office applications, the additional in-context information makes it easier for users to make use of newly discovered capabilities.

Detailed Design of the New UI System

The sections that follow describe the specific new features and capabilities of the user experience in the 2007 Office release, explaining each part of the system and identifying opportunities for extensibility. Together, these elements encompass the UI system.

The Ribbon

One of the reasons that many of today's Microsoft Office users do not feel a sense of mastery over Microsoft Office programs is the large number of places to look for commands: short menus, long menus, submenus, visible toolbars, toolbars accessible only from the View menu, toolbars accessible only from the Tools menu, popup toolbars, task panes in the task pane list, task panes that only appear during certain scenarios. To discover all the capabilities of Microsoft Office programs, users of previous releases looked in at least eight different places in the UI, weaving through submenus and task pane stacks. To complete complex tasks, even advanced users frequently stopped and thought about where to find a particular control.

In the UI of the 2007 Microsoft Office release, the Ribbon (Figure 1) is a region at the top of the screen that presents an easy-to-browse main set of commands for a particular program. The vast majority of commands are accessible from the Ribbon, making it the primary focus for command UI within view of the document. In each program, the Ribbon is organized into a set of tabs that represent the main functionality groups of the program. Similar to how a well-organized restaurant menu organizes selections into sections (such as appetizers, salads, beverages, and desserts), the Ribbon organizes program tasks on tabs. For example, in Word 2007, the tabs organize commands for activities such as Write, Insert, Page Layout, References, Mailings, and Review.

Figure 1. The first tab of the Word 2007 Ribbon looks familiar to today's Office user, displaying the most commonly used commands

The first tab of the Word 2007 Ribbon

The tabs provide users one-click access to commands, much like the toolbars in previous releases but with the addition of labels that help users identify the appropriate icon or button for a specific command. By labeling items wherever possible, the Ribbon alleviates the need for ScreenTip surfing or browsing menus—two of the most common, but most inefficient, methods users employ to discover commands necessary to complete a specific action.

At first glance, the Ribbon looks like a menu. However, there are important differences. Each tab on the Ribbon represents a context switch to a collection of features designed to help perform specific tasks within a document (See Figure 2). In addition to organizing commands with a task-oriented approach, the Ribbon supports a variety of two-dimensional layouts that communicate priority and hierarchy to the user. Unlike a toolbar or menu, which is a flat list that could be generated by computer, the Ribbon was laid out by hand during design. Careful consideration was given to the priority or importance of commands and how best to present them at various screen resolutions. Large buttons show the most frequently used commands, while small buttons grouped together show a relationship of minor features designed to work together. Commands within a tab are organized to provide a visual hierarchy that makes the Ribbon even easier to browse.

Figure 2. The Page Layout tab of the Word 2007 Ribbon features important tasks more prominently

The Page Layout tab of the Word 2007 Ribbon

The organization of tabs on the Ribbon also reinforces familiarity across Microsoft Office programs. Although each program has a different balance, most users spend the majority of their time using the first tab. It is not a coincidence that the first tab of the Ribbon hosts the common functionality found on the Standard and Formatting toolbars in previous releases. Extensive usability testing shows that people adjust quickly to the Office Fluent UI system, in part because the first tab of each program lets them be productive right away.

The Ribbon is completely extensible using the development model in the 2007 Office release. You can add and remove tabs, add controls or groups of controls to existing tabs, and repurpose the built-in controls to support custom functionality.

Managing Variable Display Sizes by Scaling the Ribbon

The Ribbon is optimized for multiple screen resolutions. It capitalizes on large displays while working well even on compact screens or mobile devices. As seen in Figure 3, each group of controls is designed in several different sizes. As screen resolution decreases, more of the small versions of the groups are used. However, the Ribbon does not just scale downward—as the user moves to a larger screen, the Ribbon capitalizes on the space by showing larger versions of the control groups (see Figure 4).

Figure 3. Groups are designed in several different sizes

Groups are designed in several different sizes

Figure 4. At the smallest size, a popup display may provide access to groups of controls

A popup display provides access to control groups

Advanced users can collapse the Ribbon to a single line that takes up no more space than the menu bar does in previous releases.

You cannot control the scaling behavior of the Ribbon. That is, you cannot specify which controls are resized as the UI scales for different-sized displays. However, custom tabs and groups of controls are given priority and are the last to be minimized as the size of the Ribbon diminishes.

Contextual Tabs

Previous releases of Microsoft Office displayed all the commands available in the program, regardless of whether it was possible to use a command at that time. There were some minor exceptions, such as toolbars that appeared when you selected an object, but these were the exception rather than the rule.

In contrast, the Office Fluent UI relies on contextualization: specialized commands are presented when the object on which they operate is selected. As a result, users no longer need to navigate through both enabled and unavailable commands to find commands that relate to a particular object. When an object is selected, the Ribbon displays additional tabs called "contextual tabs" (Figure 5). These tabs provide the UI necessary to manipulate, edit, and format that object. When visible, the contextual tabs work just like normal tabs. Users can easily switch between core tabs and contextual tabs, and the same type of rich Ribbon layouts and controls are available in each. When the user cancels the selection of the object, the contextual tabs disappear. This means that all commands can use the same richness present in the Ribbon and are not limited to a single secondary mechanism like a menu or toolbar.

Examples of objects that have contextual tabs include tables, pictures, text boxes, shapes, charts, WordArt, equations, diagrams, PivotTable dynamic views, headers, and footers. Anything that appears as an object on the canvas, and is capable of being selected, has an associated contextual tab.

Figure 5. Table contextual tabs in Word 2007

Table contextual tabs in Word 2007

Contextualization reduces the number of commands a user must evaluate at any given time. Most of the commands in a program are object-based. By showing these commands only when an object is selected, the number of commands to learn and browse in the core tab set is reduced. As a result, the programs feel more manageable, and the UI feels more responsive and relevant.

Although you cannot associate controls or tabs with custom objects, such as Microsoft ActiveX controls, you can contextualize controls and tabs associated with existing objects—for example by adding custom controls to existing contextual tabs, associating custom tabs with existing contextual tab sets, or replacing an entire contextual tab.

Dialog Boxes

Previous releases of Microsoft Office relied heavily on dialog boxes for accessing functionality. While dialog boxes were useful for presenting low-level control over feature execution, they can unnecessarily complicate the execution of routine tasks. Usability testing on previous releases of Microsoft Office applications consistently indicated that dialog boxes are often hard to discover and hard to use, and that many dialog boxes present too many controls and choices. Furthermore, the use of modal dialog boxes (which block access to the document or program until they are closed) often forces users to make choices with little confidence in the outcome.

The designers of the Office Fluent UI undertook to reduce users' dependence on dialog boxes, while making the dialog boxes both easier to find and easier to use. Dialog boxes are still an important part of the Office Fluent UI. However, their stature as a primary mechanism for formatting content is replaced by the Ribbon and galleries.

Dialog boxes continue to be an excellent way to adjust a number of advanced settings at once. They also continue to serve as the best mechanism for capturing user input. If a feature requires typing into a number of edit boxes, it should be located in a dialog box instead of in the Ribbon. For example, setting up a complex multi-level sort in Excel 2007 is a modal task best completed through a dialog box, because there is a clear flow. The user types the search criteria for each level of the sort and then clicks Sort to close the dialog and apply the sort.

In previous releases of Microsoft Office, many dialog boxes provided more advanced versions of commonly used features. For example, the Font dialog box in Word is a superset of the more commonly used Bold, Italic, and Underline toolbar buttons. However, there is no relationship between the toolbar buttons that provide quick access to a feature and the menu item that leads to the dialog box version of the feature.

In the Office Fluent UI, each functional group in the Ribbon has a dialog box launcher that provides a formal link between the efficient, modeless command UI in the Ribbon and the more advanced dialog box version of the functionality. As seen in Figure 6, the connection between the simple (Ribbon-based) and advanced (dialog box–based) functionality provides easier access to the advanced capabilities, while reducing the number of concepts users must learn.

Figure 6. The dialog box launcher in the Number group on the Ribbon leads to the Number dialog box in Excel 2007

Dialog box launcher in the Number group

Modes

In addition to displaying tools that pertain to specific objects, the Office Fluent UI presents tools that pertain to the program's "mode" or view, but that are not tied to an object or selection. Depending on the mode, the program displays a different set of top-level tabs that provide tools related to the activities performed in that mode. For example, when Word 2007 is in Outline mode, a new tab of outlining commands is needed (see Figure 7). When the user changes modes, the core set of Ribbon tabs changes in a dramatic way. Mode switching is always tied to a program's views.

Figure 7. Outline mode in Word 2007 with the addition of an Outlining tab

Outline mode in Word 2007 with Outlining tab

The Quick Access Toolbar

The Quick Access Toolbar, pictured in Figure 8, provides access to top commands that are needed throughout an entire program, regardless of context or mode. These commands are available no matter which primary tab is displayed. By default, the Quick Access Toolbar includes core commands, such as Save or Undo, and allows the user to specify other commonly-used commands, making them one click away from anywhere in the program.

Figure 8. The Quick Access Toolbar in Word 2007

The Quick Access Toolbar in Word 2007

Users of previous releases typically customized the UI to obtain more screen room and to allow quicker access to frequently used commands. Because the Office Fluent UI optimizes for frequently used commands within each program and organizes related functionality together, there is less need for this type of customization. For advanced users or users who rely on specific combinations of commands that are not located on the same tab, the Quick Access Toolbar provides customizable UI space similar to custom toolbars in previous releases. Users can even place custom controls on the Quick Access Toolbar without compromising the functionality or install/remove behavior of the add-in. The Quick Access Toolbar can grow to accommodate as many commands as the user wants to add.

Galleries and Live Preview

The gallery is a new type of control, designed to be the visual manifestation of results-oriented design. Designed in conjunction with the Ribbon and driven by the results-oriented approach, galleries make it easy to show rich representations of the results of features.

The gallery supports many different layouts, incorporating graphics and rich-text styles to communicate feature results to the user. You can arrange the gallery in a grid or in a menu-like layout.

In addition, the gallery supports "live previews," which show the exact result of applying the feature by actually updating the document while the user moves the pointer over the available choices. Using live previews makes it easy to experiment and faster to achieve the desired result.

For example, to change the document margins or apply sophisticated formatting to a table in a Word 2003 document, the user had to navigate through a number of complicated menus and dialog boxes, adjust multiple parameters, and then see if the results turned out as desired. In Word 2007, the user can view a gallery showing the different margin settings and table layouts, preview those settings, and then choose the desired results. See Figure 9 and Figure 10 for an illustration of this new design.

You can create custom galleries. However, live preview is not supported for custom galleries.

Figure 9. The Margins gallery in Word 2007

The Margins gallery in Word 2007

Figure 10. The Table Styles gallery in Word 2007

The Table Styles gallery in Word 2007

Bridging the Gap Between Functionality and Help Using Enhanced ScreenTips

In previous releases of Microsoft Office, retrieving information related to a specific tool or command could be difficult. Enhanced ScreenTips in the Office Fluent UI bridge the gap between the controls and commands presented in the UI and the rich information about those commands, which is available in features like help topics, keyboard shortcuts, and related menu items.

Figure 11. Enhanced ScreenTips link a feature to its usage information

Enhanced ScreenTips link a feature to usage info

As illustrated in Figure 11, Enhanced ScreenTips not only help users understand how and why to use a feature, they provide links to auxiliary information, such as training or a help topic, directly from the command itself. Users no longer have to discover the name of a command, open up the Help window, and type in the command name. Now the link is built into the UI.

You can create Enhanced ScreenTips and associate them with your custom controls.

Super-Efficient Access to Frequently Used Commands Using the Mini Toolbar

The modal nature of the Ribbon has the potential to introduce command loops in which the user is forced to switch between tabs repeatedly to complete a repetitive task. For example, when reviewing a document in Word 2007, a user is likely to use the commands in the Review tab of the Ribbon to insert comments. But, to format the text in those comments over and over again, the user must switch repeatedly to the Write tab after each comment and then switch back to continue reviewing.

Many such command loops are avoided through intelligent grouping of commands and tools. However, text-formatting features are used in nearly every task. The Office Fluent UI resolves the need for quick, on-the-fly text formatting from many places in the program by introducing an on-object formatter called the Mini toolbar (Figure 12).

Figure 12. The Mini toolbar

The Mini toolbar

In previous releases of Microsoft Office, object-based UI, such as smart tags, was used primarily to highlight rarely used or hard-to-find commands in the product. The Mini toolbar does the exact opposite: by minimizing the mouse movement necessary to use it, it provides the most efficient way of accessing the top few commands in a program by using the mouse. The Mini toolbar works with the Ribbon to minimize single-command tab switches. Mouse users can match the efficiency of keyboard gurus by using the on-object Mini toolbar UI to perform frequently repeated formatting.

The Mini toolbar is displayed whenever a user selects text within a document, unobtrusively displaying a small toolbar near the pointer when text is selected. Nearly anything the user does, other than use the Mini toolbar, dismisses it. For example, if the user moves the cursor away, hits the scroll wheel or a key, or presses a mouse button, the Mini toolbar disappears. But, if the user moves the cursor toward the Mini toolbar, it comes into full view and offers the most common formatting options, such as Bold, Italic, Color, and Center. In this way, users are actually more efficient at using the top formatting commands in the product regardless of the primary tab of the Ribbon currently displayed.

You cannot modify the Mini toolbar programmatically.

Context Menus and Shortcut Menus

Since their introduction in Microsoft Windows 95, context menus steadily increased in popularity. One of the earliest manifestations of contextualization was in the Microsoft Office UI and Windows UI. The success of context menus, called shortcut menus in the 2007 Office release, is due, in part, to the fact that they act as a scoping mechanism—they present a subset of the available commands likely to apply to the selected object.

This positive aspect of contextualization is formalized throughout the Office Fluent UI: in the modality of the Ribbon, in contextual tabs, and in the Mini toolbar. In the Office Fluent UI, the shortcut menu is designed to be the more efficient way of exercising features displayed in the Ribbon. Each set of contextual tabs in the Ribbon is designed with a shortcut menu that allows the user to perform the most common tasks for a particular object. So, to apply a single effect to a picture, to rotate it quickly, or to change its brightness, the user may choose to use the shortcut menu instead of activating the contextual tabs (Figure 13).

Figure 13. Galleries work in shortcut menus, just as in the Ribbon

Galleries work in shortcut menus

Because, like the Ribbon, the shortcut menus can also host galleries, people can learn to use a feature once and use it the same way everywhere. Context menus no longer represent the "advanced" way of doing something. The same visual design language is supported in the shortcut menus as in the Ribbon.

The Mini Toolbar in the Shortcut Menu

A number of scenarios do not work well with traditional shortcut menus. For example, commands that may need to be applied several times (such as Brighten Picture) or situations in which users want to change several parameters at once (such as changing a font, applying bold to the text, and specifying the font size).

To address these scenarios, many shortcut menus in the 2007 Office release have a Mini toolbar associated with them, shown just above the menu. The user sees a simple toolbar above the menu itself. However, when the user clicks a command in this Mini toolbar section, the rest of the menu disappears while the Mini toolbar remains visible as a small toolbar (see Figure 14). By turning the shortcut menu into a Mini toolbar, it is possible to use several commands at once in a very efficient way. Additionally, this pairing of the Mini toolbar to the shortcut menu makes it possible to extend the use of the Mini toolbar to situations in which selection is not a good trigger (such as in the Excel 2007 grid, where you always have a selection). Thus, the shortcut menus in the 2007 release present an efficient way to organize many high-usage commands not usually found in shortcut menus today.

Figure 14. Part of the shortcut menu turns into a Mini toolbar

Part of the shortcut menu turns into Mini toolbar

Task Panes

Task panes were added to Microsoft Office XP as an outlet for UI, to help address the over-burdening of the menu and toolbar structure. Their modeless interaction model has been very successful when helping users to format their documents. Unfortunately, task panes also introduce an element of complexity and unpredictability that many users are uncomfortable with.

In the Office Fluent UI, most of the functionality that was previously hosted on task panes is found on the Ribbon. The Ribbon itself encompasses the positive aspects of task panes—specifically their modeless interaction and a larger space to lay out and label UI. In many ways, the Ribbon is a natural progression from task panes. You can think of the Ribbon as a contextualized, organized task pane manager in which all of the features of the product are redesigned into modeless panes.

Similar to previous versions, the task panes that remain in the 2007 release of the Microsoft Office system show auxiliary content that supports the primary content. For example, content hosted in the Watch task pane in previous releases of Excel or the Reveal Formatting and Research task panes in previous releases of Word. Task panes also remain a useful tool for you to host complex UI, present content, or display instructions associated with custom solutions.

In addition, task panes in the 2007 release of the Microsoft Office system appear only when users choose to display them, rather than appearing automatically, as in Office 2003 Editions. And, unlike previous releases of Microsoft Office, users can display several task panes at once and arrange their position and location independently.

The Microsoft Office Window Frame

The redesigned Microsoft Office window frame pulls together a number of disparate tasks into a well-organized display. More than just a simple status bar, the window frame provides consistent access across programs to important document functionality. The addition of customizable peripheral information and task status help make the window frame an important part of the overall user experience of the product. See Figure 15 for an illustration.

Figure 15. View switching and zoom controls in the status area of the window frame

View switching and zoom controls in status area

The Microsoft Office Button

Many of the most valuable features in previous versions of Microsoft Office were not about the document authoring experience at all. Instead, they were about all the things that you can do with a document: share it, protect it, print it, publish it, and send it. In spite of that, previous releases of the Microsoft Office UI lack a single central location where a user can see all of these capabilities in one place. Document-level features were mixed in with authoring features.

The Office Fluent UI brings together the capabilities of the Microsoft Office system into a single entry point in the UI: the Microsoft Office Button. This offers two major advantages. First, it helps users find these valuable features. Second, it simplifies the core authoring scenarios by allowing the Ribbon content to be focused on creating great documents. As illustrated in Figure 16, the Microsoft Office Button presents a task-oriented approach to managing and sharing documents.

Because many of the features accessed by using the Microsoft Office Button represent processes rather than individual features, short and informative descriptions are included within the menu items themselves. This, together with keeping the menu very short, helps users embrace document-level functionality.

The Microsoft Office Button menu is fully customizable. You can add commands related to document processes or workflow, or repurpose existing menu commands to reflect organizational processes or document controls.

Figure 16. The Microsoft Office Button menu highlights new functionality in the 2007 Office release

Microsoft Office Button highlights new functions

The Microsoft Office Button is also the new entry point to program settings, which were redesigned to separate and highlight the most commonly used options. In previous releases, the Options dialog box, available from the Tools menu, provided access to many controls. However, the complex design of this dialog box was overwhelming to many users. The Options dialog box also presented technical options alongside simple end-user preferences, making it difficult for many users to find what they needed. The Application Settings panel highlights the most commonly used settings and makes it easier for users to find the setting they need to adjust (see Figure 17).

Figure 17. Streamlined options highlight the most useful settings in each program

Streamlined options highlight most useful settings

Developer Controls

Developer UI, such as the entry points to manipulate XML schema and to launch the Microsoft Visual Basic for Applications (VBA) editor, is exposed in a separate Developer tab in the Ribbon. This tab is not shown by default, but must be enabled through Application Settings. This approach simplifies the UI for the typical user, who does not need to use these features, while enabling you to create a rich experience for your users by organizing all the tools you need in one place.

Developer Considerations

The 2007 Office release introduces an innovative model that developers can use to enhance the user experience. A new extensibility model enables you to add new functionality to Microsoft Office applications and to expose entry points in the Office Fluent UI in a more integrated way, and with a much larger control set, than in any previous release. The Office Fluent UI addresses many issues developers have identified with the current Command Bars object model, making it easier to accomplish common developer scenarios.

For existing solutions, the 2007 release ensures compatibility by revealing UI changes made to the legacy menu and toolbar set. This ensures that third-party add-ins and custom solutions developed for previous releases will work in the 2007 release without requiring modification.

The following sections address compatibility of existing Microsoft Office application customizations and Office-based solutions with the 2007 release, and they provide guidance for developing solutions using the Office Fluent UI system. Sources of detailed information about the extensibility model for the 2007 release of the Microsoft Office system are listed under Additional Resources.

Compatibility of Legacy Solutions and Customizations

Many companies rely on custom applications built on the Microsoft Office system and solutions that integrate Microsoft Office with third-party applications. Many of these solutions modify the Office UI through the Command Bars object model. In the 2007 Office release, this code continues to work—in most cases without modification.

Changes made to toolbars in Office 2003 typically appear in the 2007 release on an Add-Ins tab in the Ribbon (see Figure 18). The type of customization that appears depends on the original design of the add-in. For example, if a customization added items to the previous menu structure, the Office Fluent UI creates a Menu Commands group. If the custom code added items to the built-in toolbars, the Office Fluent UI creates a Toolbar Commands group that contains these controls. Toolbars added by an add-in show up in the Custom Toolbars group.

Figure 18. The Add-Ins tab displays custom menu commands and a group for each toolbar

The Add-Ins tab displays custom menu commands

Mouse clicks and other events on the Add-Ins tab trigger the same results as in the previous menus and toolbar interface. Add-in code that executes when a toolbar button is clicked in the previous UI still executes when the user clicks the corresponding button in the Toolbars group of the Add-Ins tab in the 2007 release.

Requests to hide menus and toolbars or to remove controls are ignored. If an add-in attempts to repurpose built-in functionality by changing the behavior of menu items or toolbar buttons, such as Save or Print Preview, the Office application copies the control to the Add-Ins tab and changes it there, leaving the original control on the Ribbon or Microsoft Office Button menu unchanged.

Although it is possible to remove or disable built-in controls programmatically in the 2007 release, add-ins that remove or reorder menu items and toolbar items in previous releases of Microsoft Office have no effect when they are loaded.

Support for Office Developers

The 2007 release of the Microsoft Office system introduces an extensibility model for the Ribbon that allows you to integrate seamlessly and add functionality to Microsoft Office applications. The new model supports adding functionality to existing Ribbon tabs, adding new tabs, groups, and controls to the Ribbon, and replacing the existing Ribbon.

The extensibility model introduces a consistent way to modify the UI and persist the modifications across the core Microsoft Office programs. The 2007 release of the Microsoft Office system exposes richer controls, such as big buttons and split buttons, so that you can communicate priority and hierarchy in a manner consistent with the UI system. It is also easier for you to reuse built-in graphics and images when creating controls. An updated identification scheme for UI elements makes it much easier to reference built in controls and to localize add-ins and custom solutions.

You can write XML markup to specify changes to the UI in the 2007 Office release, facilitating development of rich UI layouts and enabling a clear separation between UI and business logic. Support for XML also allows the Office applications to associate UI changes easily with the add-in or template that made them, so you are no longer required to perform the maintenance functions previously necessary to ensure that controls appear and disappear on install and removal of the add-in.

The 2007 release of the Microsoft Office system provides two ways to customize the Ribbon using XML markup:

  • Using a valid Microsoft Office Open XML Formats (Office XML Formats) file that contains XML markup.

  • Using COM add-ins that contain XML markup.

In each case, the use of XML markup files to customize the UI greatly simplifies the development model for UI customizations.

Application-Level Customization

You can perform application-level modifications using COM add-ins in managed or unmanaged code. Customizations at the application level result in a modified Ribbon that appears in the application, regardless of which document is open. You typically create COM add-ins to make these modifications. You can use Microsoft Visual Basic .NET COM add-ins, Microsoft Visual C++ COM add-ins, or Microsoft Visual C# COM add-ins to modify the Ribbon.

In a typical scenario, code in the COM add-in contains procedures that return XML markup from an external customization file or XML contained in the code itself. When the application starts, the add-in loads and executes the code that returns the XML markup. The application validates the XML markup against an XML schema, and then loads it into memory and applies it to the Ribbon. The modified Ribbon then appears. Ribbon commands and controls also use callback procedures to execute code in the add-in.

Document-Level Customization

Document-level customizations use the same XML markup and Office XML Formats file. In this scenario, you create a customization file that contains the XML markup and save it to a folder. You then modify the parts in the XML container to point to the customization file. When a user opens the document in the Office application, the customization file loads into memory and is applied to the Ribbon. The commands and controls then call code contained in the document to provide their functionality.

Opportunities for Extensibility

  • Custom Solutions. When building highly customized solutions, you can create a completely customized UI using an attribute of the Ribbon element to hide all of the built-in tabs on the Ribbon. Instead of replacing the entire UI, you can choose to show or hide any of the built-in tabs or to show or hide the system menu commands.

  • Smart Documents and Custom Task Panes. Another common developer scenario is showing content in custom task panes. The 2007 release of the Microsoft Office system supports the current smart document mechanisms, and solutions based on smart documents continue to function in the 2007 release. In addition, the 2007 release overcomes many of the limitations of programming the task panes, making it easier for you to create task panes that host your own UI, and to add these at the application level or at the document level.

  • Repurposing Built-in Controls. You can take over the function of any built-in control anywhere in the UI by writing a single line of XML that connects the custom code to every instance of the built-in control. You can modify the control to execute custom code and, optionally, proceed with the built-in functionality.

  • Reusing Built-in Controls and Control Images. For custom solutions that rely heavily on the built-in control set, locale-independent ID strings make it easy for you to identify and reuse built-in controls. Similarly, you can reuse the graphics or icons associated with built-in controls, and position their custom content (like tabs and groups) among the built-in tabs and groups.

  • Dynamic Update of Controls. Callbacks enable you to change the state of a control dynamically. For example, you can change the contents of a gallery or change a control label or image to reflect a change in the state of the solution or the document.

  • End User Customization. The 2007 programming model enables users to promote buttons associated with Microsoft Office add-in solutions to the Quick Access Toolbar, just as they can with built-in controls.

Mapping Microsoft Office 2003 UI Concepts to Concepts in the 2007 Office Release

Usability data shows that users can easily learn the Office Fluent UI concepts and get used to the 2007 Office release relatively quickly. However, even small UI changes can often have a large impact on IT and support staff. A company planning to deploy the 2007 release of the Microsoft Office system will need to have a clear understanding of exactly what has changed in the UI. The following table summarizes the changes.

Table 1. Comparison of Office 2003 to the 2007 Office release

Office 2003 UI Concept

Equivalent in the 2007 Office Release

Menus and Toolbars

The Ribbon replaces menus and toolbars in the 2007 release. It is organized into tabs that represent the main functionality groups of a program. The tabs can host rich controls in two-dimensional layouts that are designed for easy browsing. The commands within a tab are modeless and accessible with one click, just like toolbars in Office 2003.

When you select an object, such as a table or chart, additional contextual tabs become available and provide UI to manipulate the object. These contextual tabs replace Office 2003 floating toolbars and some task panes that appear on object selection.

Task Panes

Most task panes are replaced by control groups in the Ribbon. Few task panes remain in the 2007 Office release. Because the Ribbon can host richer controls than menus and toolbars, much of the command UI that was previously presented in task panes is now presented in the Ribbon. Auxiliary content that needs to be accessible with a document is presented using updated task panes. Unlike previous releases, task panes in the 2007 Office release are not contained in a single window. Each task pane is its own separate pane. You can display multiple task panes, and you can arrange the position of each independently. Task panes are never displayed automatically by Office. They must be invoked by the user or by a custom add-in.

Dialog Boxes

Dialog boxes still exist in the 2007 release, but they are no longer the primary way of interacting with the program. Instead of having to change settings in a dialog box, in many scenarios, users can use the new gallery control to see options in a visual manner and choose the results they want. However, dialog boxes are accessible from galleries for users who want to do more advanced manipulation. A group in the Ribbon can also have a dialog box launcher that brings up the more advanced dialog box version of its functionality.

Context Menus

Context menus are still available in the 2007 Office release by using right-click. Their design is updated to make it easier to access the most frequently used commands. Instead of requiring navigation through dialog boxes, common commands are available directly from the top level of the shortcut menu. The new shortcut menus can host richer controls, such as galleries.

Office 2003 Keyboard Shortcuts

Office 2003 provided keyboard shortcuts for the most common commands. These were typically the CTRL key in combination with another key, such as CTRL+S for Save and CTRL-B for Bold, or a single function key such as F12 for Save As.

There is no change to these keyboard shortcuts in the 2007 Office release. The same shortcuts exist and continue to work as they did in Office 2003.

New Keyboard Shortcuts

In Office 2003, keyboard shortcuts were used for navigating the menu structure. A keyboard shortcut is the ALT key plus underlined letters in the name of menus or menu commands, such as ALT+F+S for File and Save.

The 2007 Office release features a new keyboard access system for the Ribbon. Shortcut keys are displayed as "overlays" on Ribbon controls and tabs. Tabs have numbers as their shortcut keys and controls in the Ribbon have letters.

A compatibility mode allows users to use the old ALT key sequences from Office 2003. These work only for features that were in Office 2003; all features of the 2007 release use only the new keyboard shortcuts.

Status Bar

In addition to displaying task status, the status bar in the 2007 Office release displays information that the user needs to know, such as security warnings. Users can customize the status bar to show additional peripheral information about their document.

On-Object UI

On-object UI continues to work the same way as in Office 2003. It shows for the same scenarios, including Paste Recovery and AutoCorrect.

Conclusion

The Office Fluent UI offers both business users and organizations an opportunity to take information worker productivity to a new level. As users achieve a new level of mastery over Microsoft Office programs, the UI in the 2007 release of the Microsoft Office system helps them harness their full power to create rich and stunning documents. For developers who build solutions based on the Microsoft Office system, the flexibility and ease of customization of the Office Fluent UI, along with the improved functional organization, helps create a powerful but responsive user experience, enabling both beginners and advanced users to achieve sophisticated results with much less effort.

The introduction of a new, XML-based development model, optimized for common developer scenarios and applied consistently across the core Microsoft Office applications, streamlines the development of rich solutions and helps ensure that custom solutions can realize the benefits of results-oriented UI design.

Additional Resources