the new "office 12" user interface jensen harris off201 lead program manager microsoft...
TRANSCRIPT
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 ([email protected])Jensen Harris ([email protected])
© 2005 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.