the new "office 12" user interface jensen harris off201 lead program manager microsoft...

The New "Office 12" User InterfaceThe New "Office 12" User Interface

Jensen HarrisJensen HarrisOFF201OFF201Lead Program ManagerLead Program ManagerMicrosoft CorporationMicrosoft Corporation

Session OrientationSession Orientation

This session (OFF201)This session (OFF201)Focus is on the Focus is on the designdesign of the new Office of the new Office “12” user interface. No code. Relevant “12” user interface. No code. Relevant for for

Those interested in user interface designThose interested in user interface design

Those building Office customizationsThose building Office customizations

Next session (OFF302 in Room Next session (OFF302 in Room 402AB)402AB)

Focus is on programmatic customization Focus is on programmatic customization of the new Office “12” user-interfaceof the new Office “12” user-interface

AgendaAgenda

Why change the UI of Office?Why change the UI of Office?

Learn the rationale behind the Learn the rationale behind the components of the new user components of the new user experienceexperience

Demos, Demos, DemosDemos, Demos, Demos

The New User ExperienceThe New User Experience

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

Top design goalsTop design goalsMake the product easier to useMake the product easier to use

Improve the efficiency of people using Improve the efficiency of people using the productthe product

Make it easier to discover more of the Make it easier to discover more of the functionality people needfunctionality people need

Support the creation of great looking Support the creation of great looking documentsdocuments

Why A New UI?Why A New UI?

Ye Olde Museum OfYe Olde Museum OfOffice PastOffice Past

Number Of Menu ItemsNumber Of Menu Items

0

50

100

150

200

250

300

Menu Items

0

50

100

150

200

250

300

Menu Items

Toolbars And Task PanesToolbars And Task Panes

05

101520253035

Toolbars

Task Panes

05

101520253035

Toolbars

Task Panes

Why A New User Why A New User Experience?Experience?

Menus and Toolbars were designed Menus and Toolbars were designed for less full-featured programsfor less full-featured programs

The feature set of Office has grown The feature set of Office has grown and stretched existing UI and stretched existing UI mechanisms to mechanisms to the limitthe limit

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

““There must be a way to do this…”There must be a way to do this…”

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

The “Sense Of Mastery”The “Sense Of Mastery”

A single, finite space to search for A single, finite space to search for functionalityfunctionality

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

Help people work without Help people work without interferenceinterference

No “Auto” UINo “Auto” UI

PredictabilityPredictability

What would we build knowing how What would we build knowing how the applications turn out?the applications turn out?

User Experience OverviewUser Experience Overview

Components Of The New Components Of The New UXUX

The “Ribbon”The “Ribbon”

GalleriesGalleries

Live PreviewLive Preview

Contextual ToolsContextual Tools

Quick Access Quick Access ToolbarToolbar

““Floatie”Floatie”

““Super Tooltips”Super Tooltips”

Enhanced Enhanced window framewindow frame

““KeyTips” and KeyTips” and Keyboard Keyboard NavigationNavigation

Streamlined Streamlined OptionsOptions

Context MenusContext Menus

Application Application MenuMenu

The “Ribbon”The “Ribbon”

Primary replacement for menus and Primary replacement for menus and toolbarstoolbars

Modeless UI designed for easy Modeless UI designed for easy browsingbrowsing

Consists of “tabs” organized around Consists of “tabs” organized around specific scenarios or objectsspecific scenarios or objects

The “Ribbon”The “Ribbon”

Each tab is organized into several Each tab is organized into several “chunks”“chunks”

Each “chunk” contains related Each “chunk” contains related controls:controls:

The Ribbon can host richer content than The Ribbon can host richer content than menus/toolbars menus/toolbars

Buttons, galleries, dialog box content…Buttons, galleries, dialog box content…

Developers: You can make your own Developers: You can make your own tabs and your own chunkstabs and your own chunks

The RibbonThe Ribbon

Advantages Of The Advantages Of The “Ribbon”“Ribbon”

One home for functionalityOne home for functionalityNo more looking through hierarchical No more looking through hierarchical menus, toolbars, task panes…menus, toolbars, task panes…

Better organization of commands Better organization of commands within each applicationwithin each application

Enough room to label most Enough room to label most commandscommands

Rich command layouts help people Rich command layouts help people find more important functionalityfind more important functionality

Hosts galleriesHosts galleries

Contextual ToolsContextual Tools

Most commands in Office only work in Most commands in Office only work in conjunction with an objectconjunction with an object

Picture, Table, Text Box, Chart, Diagram, Picture, Table, Text Box, Chart, Diagram, Header, Footer, Shapes, PivotTables, etc.Header, Footer, Shapes, PivotTables, etc.

Whenever you select or insert an Whenever you select or insert an object, the Contextual Tools for that object, the Contextual Tools for that object appear in the ribbonobject appear in the ribbon

Contextual ToolsContextual Tools

Contextual ToolsContextual Tools

The set of tools you need are always The set of tools you need are always at handat hand

The set of tools you couldn’t use are The set of tools you couldn’t use are out of your wayout of your way

ResultsResultsEasy to find the right functionality to get Easy to find the right functionality to get something donesomething done

The core (non-contextual) product is The core (non-contextual) product is vastly simplifiedvastly simplified

GalleriesGalleries

A new control, designed to work A new control, designed to work together with the ribbontogether with the ribbon

Provides a visual way of browsing Provides a visual way of browsing functionalityfunctionality

Shows the Shows the resultresult of commands, not of commands, not the commands themselvesthe commands themselves

People can be successful using People can be successful using galleries without understanding what galleries without understanding what they’re doing behind the scenesthey’re doing behind the scenes

GalleriesGalleries

Two types of Two types of galleriesgalleries

DropdownDropdownIn-RibbonIn-Ribbon

““Three-Stage Formatting”Three-Stage Formatting”

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

2)2) Tweak the appearance of an object Tweak the appearance of an object using galleries of individual effectsusing galleries of individual effects

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

The paradigm shift: The paradigm shift: Results-Oriented Results-Oriented DesignDesign

GalleriesGalleries

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

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

Live PreviewLive Preview

See what effect a feature would have See what effect a feature would have without actually applying itwithout actually applying it

As you hover over a choice in a As you hover over a choice in a gallery, the document previews the gallery, the document previews the actionaction

Stops the frustrating, repetitive cycle Stops the frustrating, repetitive cycle of clicks trying to get the right formatof clicks trying to get the right format

Drop a menu, scroll to intended target, Drop a menu, scroll to intended target, click to apply, undo command, drop the click to apply, undo command, drop the menu, menu, repeat […]repeat […]

Galleries and Live PreviewGalleries and Live Preview

Quick Access Toolbar Quick Access Toolbar (“QAT”)(“QAT”)

Allows one-click access to commands Allows one-click access to commands from anywherefrom anywhere

Starts with three icons: Save, Undo, Starts with three icons: Save, Undo, RedoRedo

Users can customize it to include Users can customize it to include anything in the Ribbonanything in the Ribbon

Two modes: compact and full sizeTwo modes: compact and full size

Quick Access ToolbarQuick Access Toolbar

Dialog BoxesDialog Boxes

Dialog Boxes remain the way to Dialog Boxes remain the way to access advanced functionalityaccess advanced functionality

In the past, dialog box entry points In the past, dialog box entry points were isolated from the efficient were isolated from the efficient version of the commandsversion of the commands

Just because I can find the Bold button Just because I can find the Bold button doesn’t mean I could find Format | Fontdoesn’t mean I could find Format | Font

Dialog LaunchersDialog Launchers

Dialog Launchers formalize the Dialog Launchers formalize the relationship between basic and relationship between basic and advanced functionalityadvanced functionality

““Chunks” in the ribbon with related Chunks” in the ribbon with related dialog boxes are linked directly from dialog boxes are linked directly from the “chunk”the “chunk”

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

Dialog LaunchersDialog Launchers

Improving EfficiencyImproving Efficiency

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

Through the Office 2003 “Customer Through the Office 2003 “Customer Experience Improvement Program”, Experience Improvement Program”, we have a good sense of what we have a good sense of what commands people use the most…commands people use the most…

……and how they use them (keyboard, and how they use them (keyboard, mouse, context menu, etc.)mouse, context menu, etc.)

FloatieFloatie

““Floatie” is a unique form of on-Floatie” is a unique form of on-object UI designed to improve your object UI designed to improve your efficiencyefficiency

On-object UI for the features you actually On-object UI for the features you actually use!use!

Helps prevent cyclical tab switches in Helps prevent cyclical tab switches in the ribbonthe ribbon

Efficient access to commands for Efficient access to commands for mouse-oriented peoplemouse-oriented people

FloatieFloatie

What Command To Use?What Command To Use?

The ribbon exposes a lot of new and The ribbon exposes a lot of new and “rediscovered” functionality“rediscovered” functionality

How to figure out what features do?How to figure out what features do?...and when to use them?...and when to use them?

……and how to use them?and how to use them?

Today’s help story: just the search Today’s help story: just the search boxbox(Hope you know the magic words to type (Hope you know the magic words to type

in)in)

““Super Tooltips”Super Tooltips”

““Super Tooltips”Super Tooltips”

Super Tooltips bridge the gap Super Tooltips bridge the gap between the functionality and the between the functionality and the documentationdocumentation

Help you understand why you might Help you understand why you might use a featureuse a feature

Gives you a link directly to more Gives you a link directly to more informationinformation

Can illustrate with a picture or Can illustrate with a picture or diagram what a feature doesdiagram what a feature does

Stays out of your wayStays out of your way

Keyboard NavigationKeyboard Navigation

Most commands are performed using Most commands are performed using the mouse in Office 2003the mouse in Office 2003

However, power users love the However, power users love the keyboard for its efficiencykeyboard for its efficiency

Office “12” has a three-tiered Office “12” has a three-tiered keyboard access modelkeyboard access model

Office “12” And The Office “12” And The KeyboardKeyboard

Type 1: CTRL + [ ] shortcutsType 1: CTRL + [ ] shortcutsExamples: CTRL+X for Cut, CTRL+B for Examples: CTRL+X for Cut, CTRL+B for BoldBold

All CTRL + [ ] shortcuts will continue All CTRL + [ ] shortcuts will continue to work exactly as in Office 2003to work exactly as in Office 2003

Office “12” And The Office “12” And The KeyboardKeyboard

Type 2: Using the keyboard to Type 2: Using the keyboard to “navigate” the UI using “Alt”“navigate” the UI using “Alt”

Primary keyboard access to the Primary keyboard access to the ribbon using “KeyTips”ribbon using “KeyTips”

EveryEvery command and gallery in the command and gallery in the product is keyboard accessibleproduct is keyboard accessible

KeyTipsKeyTips

Office “12” And The Office “12” And The KeyboardKeyboard

Type 3: What if I don’t want to learn Type 3: What if I don’t want to learn new keyboard accelerators right new keyboard accelerators right away?away?

Office 2003 keyboard accelerators Office 2003 keyboard accelerators can be enabledcan be enabled

In this mode, keyboard accelerators In this mode, keyboard accelerators will perform the same command as will perform the same command as they did in Office 2003they did in Office 2003

Enhanced Window FrameEnhanced Window Frame

Contains 3 partsContains 3 partsStatus BarStatus Bar

View/Window SwitchingView/Window Switching

ZoomZoom

Status BarStatus Bar

View/WindowView/Window ZoomZoom

Window FrameWindow Frame

Context MenusContext Menus

One of the primary ways people get One of the primary ways people get things done in Officethings done in Office

Secondary, efficient entry pointsSecondary, efficient entry points

Familiar context menus continue to Familiar context menus continue to work in Office “12”work in Office “12”

Two enhancementsTwo enhancements““Floatie” integrationFloatie” integration

Gallery IntegrationGallery Integration

Context MenusContext Menus

The Application MenuThe Application Menu

The Ribbon provides you ways to The Ribbon provides you ways to workworkinin your document… your document…

The Application Menu presents ways The Application Menu presents ways to work to work withwith your document your document

Functionality that works at the Functionality that works at the document and application leveldocument and application level

Application MenuApplication Menu

OptionsOptions

So many So many options…options…

Scattered across Scattered across many tabs…many tabs…

……and many and many dialog boxesdialog boxes

Who knows what Who knows what most of these most of these even do?even do?

A Clean SlateA Clean Slate

All options moved into a single All options moved into a single locationlocation

Per-document and global settings in a Per-document and global settings in a single locationsingle location

Integrates customization with optionsIntegrates customization with options

Super Tooltips help you understand Super Tooltips help you understand what a setting doeswhat a setting does

““Expert Mode”Expert Mode”

Application OptionsApplication Options

Frequently Asked Frequently Asked QuestionsQuestionsQ: What programs get the new UI?Q: What programs get the new UI?

A: In Office “12”A: In Office “12”WordWord

ExcelExcel

PowerPointPowerPoint

Outlook (except the shell)Outlook (except the shell)

AccessAccess

Frequently Asked Frequently Asked QuestionsQuestionsQ: Is there a “Classic Mode?”Q: Is there a “Classic Mode?”

A: No. Although Office 2003-compatible A: No. Although Office 2003-compatible keyboard shortcuts can be used, keyboard shortcuts can be used, menus and toolbars have been menus and toolbars have been removed entirely from the product.removed entirely from the product.

Frequently Asked Frequently Asked QuestionsQuestionsQ: Is the new UI extensible for Q: Is the new UI extensible for

developers?developers?

A: Of course! Most parts of the new UI A: Of course! Most parts of the new UI are extensible through a new XML-are extensible through a new XML-based model.based model.

See session OFF302 (next, in room See session OFF302 (next, in room 402AB)402AB)for complete, in-depth extensibility for complete, in-depth extensibility discussion and examples.discussion and examples.

SummarySummary

The new user experience helps The new user experience helps people be more productive in Officepeople be more productive in Office

Find the right featureFind the right feature

Discover new functionalityDiscover new functionality

Be more efficientBe more efficient

Easily create powerful, beautiful Easily create powerful, beautiful documentsdocuments

Questions & AnswersQuestions & Answers

My Office UI Blog:My Office UI Blog:

http://blogs.msdn.com/jensenhhttp://blogs.msdn.com/jensenh

Contact me:Contact me:

Jensen Harris (jensenh@microsoft.com)Jensen Harris (jensenh@microsoft.com)

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