Beyond Menus and Toolbars in Microsoft Office Jensen Harris Microsoft Office User Experience Team December 13, 2005

About Me Lead Program Manager on the Microsoft Office User Experience team At Microsoft since 1998 Degree in music composition Author of popular freeware (including YAC distributed Caller ID system) In 1997, my web site “Mediocre Site of the Day” selected as one of PC Magazine’s “Top 50 Web Sites”

Lead Program Manager on the Microsoft Office User Experience team

At Microsoft since 1998

Degree in music composition

Author of popular freeware (including YAC distributed Caller ID system)

In 1997, my web site “Mediocre Site of the Day” selected as one of PC Magazine’s “Top 50 Web Sites”

About Microsoft Office System of productivity software The most common suite includes Word, Excel, PowerPoint, Outlook, and Access 400 million paid users Most recent version: Office 2003 Next version: code-named Office “12”, currently in beta testing Tonight, I’ll show Office “12” Beta 1

System of productivity software

The most common suite includes Word, Excel, PowerPoint, Outlook, and Access

400 million paid users

Most recent version: Office 2003

Next version: code-named Office “12”, currently in beta testing

Tonight, I’ll show Office “12” Beta 1

Why am I here? Office “12” introduces a new way of working with Office applications Breaks away from the standard “menu and toolbar” model Includes elements of new interaction design and feature reorganization A huge risk for Microsoft, but one we think will pay off

Office “12” introduces a new way of working with Office applications

Breaks away from the standard “menu and toolbar” model

Includes elements of new interaction design and feature reorganization

A huge risk for Microsoft, but one we think will pay off

Top Design Goals Make the software easier to use Help people save time Make it easier to discover more of the functionality people need in Office Support the creation of great looking documents

Make the software easier to use

Help people save time

Make it easier to discover more of the functionality people need in Office

Support the creation of great looking documents

Agenda Why a new UI? What is the new UI? Questions and answers

Why a new UI?

What is the new UI?

Questions and answers

Why a new UI for Office?

Office Business Challenges Conventional punditry: “ Office is good enough” “ People only use the same 5% of Office” “ Everything I need was in Office [95, 97, 2000]” What real people tell us: “ I’m sure there’s a way to do this, but I can’t figure out how” “ Office is quite complex, I would be better at my job if I knew how to use it more.”

Conventional punditry:

“ Office is good enough”

“ People only use the same 5% of Office”

“ Everything I need was in Office [95, 97, 2000]”

What real people tell us:

“ I’m sure there’s a way to do this, but I can’t figure out how”

“ Office is quite complex, I would be better at my job if I knew how to use it more.”

How did we get here?

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 It’s harder to find functionality than it was a decade ago “ There must be a way to do this…” “ I don’t even know where to start looking.”

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

It’s harder to find functionality than it was a decade ago

“ There must be a way to do this…”

“ I don’t even know where to start looking.”

Why Now? The role of data from Office 2003: 1.2 billion data sessions collected ~1.8 million sessions per day Over the last 90 days, we’ve tracked 352 million command bar clicks in Word We track nearly 6000 individual datapoints We couldn’t have done this without data!

The role of data from Office 2003:

1.2 billion data sessions collected

~1.8 million sessions per day

Over the last 90 days, we’ve tracked 352 million command bar clicks in Word

We track nearly 6000 individual datapoints

We couldn’t have done this without data!

Using Data Which commands do people use most? How are commands commonly sequenced together? Which commands are accessed via toolbar, mouse, keyboard? Where do people fail to find functionality they’re asking for (in newsgroups, support calls, etc.)?

Which commands do people use most?

How are commands commonly sequenced together?

Which commands are accessed via toolbar, mouse, keyboard?

Where do people fail to find functionality they’re asking for (in newsgroups, support calls, etc.)?

A Clean Slate

Office “12” Design Tenets A person’s focus should be on their content, not on the UI. Help people work without interference. Reduce the number of choices presented at any given time. Increase the user’s sense of mastery through contextualization. Strive to increase efficient access to features. Bring out the soul of the program; embrace consistency, but not homogeneity. Give features a permanent home. Prefer consistent-location UI over “smart” UI. Straightforward is better than clever.

A person’s focus should be on their content, not on the UI. Help people work without interference.

Reduce the number of choices presented at any given time. Increase the user’s sense of mastery through contextualization.

Strive to increase efficient access to features.

Bring out the soul of the program; embrace consistency, but not homogeneity.

Give features a permanent home. Prefer consistent-location UI over “smart” UI.

Straightforward is better than clever.

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 Predictability, No “Auto” UI Comfort level: This is still Microsoft Office What would we build knowing how the applications turn out?

A single, finite space to search for functionality

Contextualization: Simplify the number of choices available at any one time

Help people work without interference

Predictability, No “Auto” UI

Comfort level: This is still Microsoft Office

What would we build knowing how the applications turn out?

Taking the Big Bet Conservative history lets us make the big bet now Trust in people to learn a new way of working You must remove to simplify! A huge responsibility… and opportunity People spend more 1-on-1 time with Office than with their spouses

Conservative history lets us make the big bet now

Trust in people to learn a new way of working

You must remove to simplify!

A huge responsibility… and opportunity

People spend more 1-on-1 time with Office than with their spouses

Office “12” User Interface

The New UI Framework The “Ribbon” Galleries Live Preview Contextual Tabs Quick Access Toolbar MiniBar “ Super Tooltips” Enhanced window frame: View switching and Live Zoom Customizable Status Bar “ KeyTips” and Keyboard Navigation Streamlined Options Context Menus File Menu

The “Ribbon”

Galleries

Live Preview

Contextual Tabs

Quick Access Toolbar

MiniBar

“ Super Tooltips”

Enhanced window frame: View switching and Live Zoom

Customizable Status Bar

“ KeyTips” and Keyboard Navigation

Streamlined Options

Context Menus

File Menu

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

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 “groups” Each “group” contains related controls: The Ribbon can host richer content than menus/toolbars Buttons, galleries, dialog box content… Developers can make their own tabs and their own groups

Each tab is organized into several “groups”

Each “group” contains related controls:

The Ribbon can host richer content than menus/toolbars

Buttons, galleries, dialog box content…

Developers can make their own tabs and their own groups

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

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

The Ribbon

Success Criteria (circa September 2003) People feel a sense of possibility when they see that we’ve made big changes. People feel free to explore and use more of the depth of our products. People continue to be as efficient or more efficient on familiar tasks as they are now. The user experience is deep—not just “dressing up the pig.” There will be a learning curve, but it will be worth it. In the end, users will feel a sense of mastery.

People feel a sense of possibility when they see that we’ve made big changes.

People feel free to explore and use more of the depth of our products.

People continue to be as efficient or more efficient on familiar tasks as they are now.

The user experience is deep—not just “dressing up the pig.”

There will be a learning curve, but it will be worth it.

In the end, users will feel a sense of mastery.

Contextualization Right-click context menus, 1995 to 2005 Then: Experts only Now: Primary choice for beginners Embrace the magic of context in a richer, modeless UI

Right-click context menus, 1995 to 2005

Then: Experts only

Now: Primary choice for beginners

Embrace the magic of context in a richer, modeless UI

Contextual Tabs Most features 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 Tabs for that object appear in the ribbon

Most features 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 Tabs for that object appear in the ribbon

Contextual Tabs The set of tools you need are always at hand The set of tools you couldn’t 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

The set of tools you need are always at hand

The set of tools you couldn’t 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

Contextual Tabs

Contextualization Current Office UI: Everything all at once Jack of all trades, master of none.

Current Office UI: Everything all at once Jack of all trades, master of none.

Contextualization Office “12”: Get the best possible tool for each task… …and the rest of the tools are out of your way

Office “12”: Get the best possible tool for each task… …and the rest of the tools are out of your way

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 they’re doing behind the scenes

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 they’re doing behind the scenes

Galleries Two types of galleries: Dropdown In-Ribbon

Two types of galleries:

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

Galleries help you get great results without having to be an expert

If you want more power, it’s always available in a consistent way

Three-Stage Formatting Apply an overall style to an object from a gallery of visual styles Tweak the appearance of an object using galleries of individual effects Drill down into a dialog of fine-tuned settings (# of pixels, transparency %, etc.) Bumper Bowling

Apply an overall style to an object from a gallery of visual styles

Tweak the appearance of an object using galleries of individual effects

Drill down into a dialog of fine-tuned settings (# of pixels, transparency %, etc.)

Bumper Bowling

Results-Oriented Design Think about features instead of commands Present functionality at a higher level Illustrate features by their results Use galleries to get the user close to the result they want to achieve as quickly as possible Visual! Tactile! Responsive! Compare to: Command-Oriented Design

Think about features instead of commands

Present functionality at a higher level

Illustrate features by their results

Use galleries to get the user close to the result they want to achieve as quickly as possible

Visual! Tactile! Responsive!

Compare to: Command-Oriented Design

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 […]

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

Customization Office 2003’s Command Bars are extremely customizable This high level of customization has a price Increased complexity Accidental customization Barriers to extensibility Promotes a “let the users figure it out” design viewpoint

Office 2003’s Command Bars are extremely customizable

This high level of customization has a price

Increased complexity

Accidental customization

Barriers to extensibility

Promotes a “let the users figure it out” design viewpoint

Customization Data Fewer than 2% of people have customized Office 2003 And we can’t rule out accidental customization And the data might skew towards experts Of the customizations recorded, 85% are adds/deletes of four or fewer buttons Many of the most common customizations can be addressed through the Ribbon Superscript, Send to Back

Fewer than 2% of people have customized Office 2003

And we can’t rule out accidental customization

And the data might skew towards experts

Of the customizations recorded, 85% are adds/deletes of four or fewer buttons

Many of the most common customizations can be addressed through the Ribbon

Superscript, Send to Back

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

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 doesn’t mean I could find Format | Font

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 doesn’t mean I could find Format | Font

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

Dialog Launchers formalize the relationship between basic and advanced functionality

“ Groups” in the ribbon with related dialog boxes are linked directly from the “group”

Galleries have links to the related dialog boxes at the bottom of the gallery

Dialog Launchers

MiniBar One of the major goals of the new user experience is to improve efficiency The MiniBar is a unique form of on-object UI designed to improve your efficiency On-object UI for the features you use most! Helps prevent cyclical tab switches in the ribbon Efficient access to commands for mouse-oriented people

One of the major goals of the new user experience is to improve efficiency

The MiniBar is a unique form of on-object UI designed to improve your efficiency

On-object UI for the features you use most!

Helps prevent cyclical tab switches in the ribbon

Efficient access to commands for mouse-oriented people

MiniBar

Frequently Asked Questions Q: What programs get the new UI? A: In Office “12” Word Excel PowerPoint Outlook (except the shell) Access

Q: What programs get the new UI?

A: In Office “12”

Word

Excel

PowerPoint

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.

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 visual look-and-feel of the product done? A: No. Beta 1 contains a sample skin to test the drawing capabilities of the new controls. Production works on the real look and feel is underway and should be in the product by Beta 2.

Q: Is the visual look-and-feel of the product done?

A: No. Beta 1 contains a sample skin to test the drawing capabilities of the new controls. Production works on the real look and feel is underway and should be in the product by Beta 2.

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

The new user experience helps people be more productive with Office

Find the right feature

Discover new functionality

Be more efficient

Easily create powerful, beautiful documents

Questions & Answers My Office UI Blog: http://blogs.msdn.com/jensenh Contact me via e-mail: [email_address]

My Office UI Blog:

http://blogs.msdn.com/jensenh

Contact me via e-mail:

[email_address]

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