The New "Office 12" User Interface Jensen Harris OFF201 Lead Program Manager Microsoft Corporation

Session Orientation This session (OFF201) Focus is on the design of the new Office 12 user interface. No code. Relevant for Those interested in user interface design Those building Office customizations Next session (OFF302 in Room 402AB) Focus is on programmatic customization of the new Office 12 user-interface

Agenda Why change the UI of Office? Learn the rationale behind the components of the new user experience Demos, Demos, Demos

The New User Experience Office 12 introduces a new way of working with Office applications Top design goals Make the product easier to use Improve the efficiency of people using the product Make it easier to discover more of the functionality people need Support the creation of great looking documents

Why A New UI?

Ye Olde Museum Of Office Past

Number Of Menu Items

Toolbars And Task Panes

Why A New User Experience? Menus and Toolbars were designed for less full-featured programs The feature set of Office has grown and stretched existing UI mechanisms to the limit Its harder to find functionality than it was a decade ago There must be a way to do this… I dont even know where to start looking.

The Sense Of Mastery A single, finite space to search for functionality Contextualization: Simplify the number of choices available at any one time Help people work without interference No Auto UI Predictability What would we build knowing how the applications turn out?

User Experience Overview

Components Of The New UX The Ribbon Galleries Live Preview Contextual Tools Quick Access Toolbar Floatie Super Tooltips Enhanced window frame KeyTips and Keyboard Navigation Streamlined Options Context Menus Application Menu

The Ribbon Primary replacement for menus and toolbars Modeless UI designed for easy browsing Consists of tabs organized around specific scenarios or objects

The Ribbon Each tab is organized into several chunks Each chunk contains related controls: The Ribbon can host richer content than menus/toolbars Buttons, galleries, dialog box content… Developers: You can make your own tabs and your own chunks

The Ribbon

Advantages Of The Ribbon One home for functionality No more looking through hierarchical menus, toolbars, task panes… Better organization of commands within each application Enough room to label most commands Rich command layouts help people find more important functionality Hosts galleries

Contextual Tools Most commands in Office only work in conjunction with an object Picture, Table, Text Box, Chart, Diagram, Header, Footer, Shapes, PivotTables, etc. Whenever you select or insert an object, the Contextual Tools for that object appear in the ribbon

Contextual Tools

The set of tools you need are always at hand The set of tools you couldnt use are out of your way Results Easy to find the right functionality to get something done The core (non-contextual) product is vastly simplified

Galleries A new control, designed to work together with the ribbon Provides a visual way of browsing functionality Shows the result of commands, not the commands themselves People can be successful using galleries without understanding what theyre doing behind the scenes

Galleries Two types of galleries Dropdown In-Ribbon

Three-Stage Formatting 1) Apply an overall style to an object from a gallery of visual styles 2) Tweak the appearance of an object using galleries of individual effects 3) Drill down into a dialog of fine-tuned settings (# of pixels, transparency %, etc.) The paradigm shift: Results-Oriented Design

Galleries Galleries help you get great results without having to be an expert If you want more power, its always available in a consistent way

Live Preview See what effect a feature would have without actually applying it As you hover over a choice in a gallery, the document previews the action Stops the frustrating, repetitive cycle of clicks trying to get the right format Drop a menu, scroll to intended target, click to apply, undo command, drop the menu, repeat […]

Galleries and Live Preview

Quick Access Toolbar (QAT) Allows one-click access to commands from anywhere Starts with three icons: Save, Undo, Redo Users can customize it to include anything in the Ribbon Two modes: compact and full size

Quick Access Toolbar

Dialog Boxes Dialog Boxes remain the way to access advanced functionality In the past, dialog box entry points were isolated from the efficient version of the commands Just because I can find the Bold button doesnt mean I could find Format | Font

Dialog Launchers Dialog Launchers formalize the relationship between basic and advanced functionality Chunks in the ribbon with related dialog boxes are linked directly from the chunk Galleries have links to the related dialog boxes at the bottom of the gallery

Dialog Launchers

Improving Efficiency One of the major goals of the new user experience is to improve efficiency Through the Office 2003 Customer Experience Improvement Program, we have a good sense of what commands people use the most… …and how they use them (keyboard, mouse, context menu, etc.)

Floatie Floatie is a unique form of on-object UI designed to improve your efficiency On-object UI for the features you actually use! Helps prevent cyclical tab switches in the ribbon Efficient access to commands for mouse- oriented people

Floatie

What Command To Use? The ribbon exposes a lot of new and rediscovered functionality How to figure out what features do?...and when to use them? …and how to use them? Todays help story: just the search box (Hope you know the magic words to type in)

Super Tooltips

Super Tooltips bridge the gap between the functionality and the documentation Help you understand why you might use a feature Gives you a link directly to more information Can illustrate with a picture or diagram what a feature does Stays out of your way

Keyboard Navigation Most commands are performed using the mouse in Office 2003 However, power users love the keyboard for its efficiency Office 12 has a three-tiered keyboard access model

Office 12 And The Keyboard Type 1: CTRL + [ ] shortcuts Examples: CTRL+X for Cut, CTRL+B for Bold All CTRL + [ ] shortcuts will continue to work exactly as in Office 2003

Office 12 And The Keyboard Type 2: Using the keyboard to navigate the UI using Alt Primary keyboard access to the ribbon using KeyTips Every command and gallery in the product is keyboard accessible

KeyTips

Office 12 And The Keyboard Type 3: What if I dont want to learn new keyboard accelerators right away? Office 2003 keyboard accelerators can be enabled In this mode, keyboard accelerators will perform the same command as they did in Office 2003

Enhanced Window Frame Contains 3 parts Status Bar View/Window Switching Zoom Status Bar View/Window Zoom

Window Frame

Context Menus One of the primary ways people get things done in Office Secondary, efficient entry points Familiar context menus continue to work in Office 12 Two enhancements Floatie integration Gallery Integration

Context Menus

The Application Menu The Ribbon provides you ways to work in your document… The Application Menu presents ways to work with your document Functionality that works at the document and application level

Application Menu

Options So many options… Scattered across many tabs… …and many dialog boxes Who knows what most of these even do?

A Clean Slate All options moved into a single location Per-document and global settings in a single location Integrates customization with options Super Tooltips help you understand what a setting does Expert Mode

Application Options

Frequently Asked Questions Q: What programs get the new UI? A: In Office 12 WordExcelPowerPoint Outlook (except the shell) Access

Frequently Asked Questions Q: Is there a Classic Mode? A: No. Although Office 2003-compatible keyboard shortcuts can be used, menus and toolbars have been removed entirely from the product.

Frequently Asked Questions Q: Is the new UI extensible for developers? A: Of course! Most parts of the new UI are extensible through a new XML-based model. See session OFF302 (next, in room 402AB) for complete, in-depth extensibility discussion and examples.

Summary The new user experience helps people be more productive in Office Find the right feature Discover new functionality Be more efficient Easily create powerful, beautiful documents

Questions & Answers My Office UI Blog: Contact me: Jensen Harris

© 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.