Beyond Menus and Toolbars in Microsoft Office Jensen Harris Microsoft Office User Experience Team December 13, 2005
About Me <ul><li>Lead Program Manager on the Microsoft Office User Experience team </li></ul><ul><li>At Microsoft since 19...
About Microsoft Office <ul><li>System of productivity software </li></ul><ul><ul><li>The most common suite includes Word, ...
Why am I here? <ul><li>Office “12” introduces a new way of working with Office applications </li></ul><ul><li>Breaks away ...
Top Design Goals <ul><li>Make the software easier to use </li></ul><ul><li>Help people save time </li></ul><ul><li>Make it...
Agenda <ul><li>Why a new UI? </li></ul><ul><li>What is the new UI? </li></ul><ul><li>Questions and answers </li></ul>
Why a new UI for Office?
Office Business Challenges <ul><li>Conventional punditry: </li></ul><ul><ul><li>“ Office is good enough” </li></ul></ul><u...
How did we get here?
Ye Olde Museum Of Office Past
 
 
 
 
 
 
 
 
 
 
 
 
 
Number Of Menu Items
Toolbars And Task Panes
Why a New User Experience? <ul><li>Menus and Toolbars were designed for less full-featured programs </li></ul><ul><li>The ...
 
 
Why Now? <ul><li>The role of data from Office 2003: </li></ul><ul><li>1.2  billion  data sessions collected </li></ul><ul>...
Using Data <ul><li>Which commands do people use most? </li></ul><ul><li>How are commands commonly sequenced together? </li...
A Clean Slate
Office “12” Design Tenets <ul><li>A person’s focus should be on their content, not on the UI.  Help people work without in...
The “Sense Of Mastery” <ul><li>A single, finite space to search for functionality </li></ul><ul><li>Contextualization: Sim...
Taking the Big Bet <ul><li>Conservative history lets us make the big bet now </li></ul><ul><li>Trust in people to learn a ...
Office “12” User Interface
The New UI Framework <ul><li>The “Ribbon” </li></ul><ul><li>Galleries </li></ul><ul><li>Live Preview </li></ul><ul><li>Con...
The “Ribbon” <ul><li>Primary replacement for menus and toolbars </li></ul><ul><li>Modeless UI designed for easy browsing <...
The “Ribbon” <ul><li>Each tab is organized into several “groups” </li></ul><ul><li>Each “group” contains related controls:...
Advantages Of The “Ribbon” <ul><li>One home for functionality </li></ul><ul><ul><li>No more looking through hierarchical m...
The Ribbon
Success Criteria (circa September 2003) <ul><li>People feel a sense of possibility when they see that we’ve made big chang...
Contextualization <ul><li>Right-click context menus, 1995 to 2005 </li></ul><ul><ul><li>Then: Experts only </li></ul></ul>...
Contextual Tabs <ul><li>Most features in Office only work in conjunction with an object </li></ul><ul><ul><li>Picture, Tab...
Contextual Tabs <ul><li>The set of tools you need are always at hand </li></ul><ul><li>The set of tools you couldn’t use a...
Contextual Tabs
Contextualization <ul><li>Current Office UI: Everything all at once Jack of all trades, master of none. </li></ul>
Contextualization <ul><li>Office “12”: Get the best possible tool for each task… …and the rest of the tools are out of you...
Galleries <ul><li>A new control, designed to work together with the ribbon </li></ul><ul><li>Provides a visual way of brow...
Galleries <ul><li>Two types of galleries: </li></ul>Dropdown In-Ribbon
Galleries <ul><li>Galleries help you get great results without having to be an expert </li></ul><ul><li>If you want more p...
Three-Stage Formatting <ul><li>Apply an overall style to an object from a gallery of visual styles </li></ul><ul><li>Tweak...
Results-Oriented Design <ul><li>Think about features instead of commands </li></ul><ul><li>Present functionality at a high...
Live Preview <ul><li>See what effect a feature would have without actually applying it </li></ul><ul><li>As you hover over...
Galleries and Live Preview
Customization <ul><li>Office 2003’s Command Bars are extremely customizable </li></ul><ul><li>This high level of customiza...
 
Customization Data <ul><li>Fewer than 2% of people have customized Office 2003 </li></ul><ul><ul><li>And we can’t rule out...
Quick Access Toolbar (“QAT”) <ul><li>Allows one-click access to commands from anywhere </li></ul><ul><li>Starts with three...
Quick Access Toolbar
Dialog Boxes <ul><li>Dialog Boxes remain the way to access advanced functionality </li></ul><ul><li>In the past, dialog bo...
Dialog Launchers <ul><li>Dialog Launchers formalize the relationship between basic and advanced functionality </li></ul><u...
Dialog Launchers
MiniBar <ul><li>One of the major goals of the new user experience is to improve efficiency </li></ul><ul><li>The MiniBar i...
MiniBar
Frequently Asked Questions <ul><li>Q: What programs get the new UI? </li></ul><ul><li>A: In Office “12” </li></ul><ul><ul>...
Frequently Asked Questions <ul><li>Q: Is there a “Classic Mode?” </li></ul><ul><li>A: No.  Although Office 2003-compatible...
Frequently Asked Questions <ul><li>Q: Is the visual look-and-feel of the product done? </li></ul><ul><li>A: No.  Beta 1 co...
Summary <ul><li>The new user experience helps people be more productive with Office </li></ul><ul><ul><li>Find the right f...
Questions & Answers <ul><li>My Office UI Blog: </li></ul><ul><li>http://blogs.msdn.com/jensenh </li></ul><ul><li>Contact m...
© 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes n...
Upcoming SlideShare
Loading in …5
×

Jensen Harris: Beyond Menus and Toolbars in Microsoft Office

3,384 views

Published on

BayCHI December, 2005, Program: Long before the launch of the new Office product, the BayCHI community was eager to understand the new "Ribbon" user interface (UI). Members convinced BayCHI program chair Rashmi Singha to bring in Jensen Harris, the lead UI designer for the Office UI suite. It is atypical of Microsoft's culture to allow someone to discuss a product before launch. But, alongside the serious risk of completely redoing a core product, and giving all the design control to a team of user experience designers, Microsoft is opening the black box and explaining it to the public far before launch.

Published in: Business, Technology

Jensen Harris: Beyond Menus and Toolbars in Microsoft Office

  1. 1. Beyond Menus and Toolbars in Microsoft Office Jensen Harris Microsoft Office User Experience Team December 13, 2005
  2. 2. About Me <ul><li>Lead Program Manager on the Microsoft Office User Experience team </li></ul><ul><li>At Microsoft since 1998 </li></ul><ul><li>Degree in music composition </li></ul><ul><li>Author of popular freeware (including YAC distributed Caller ID system) </li></ul><ul><li>In 1997, my web site “Mediocre Site of the Day” selected as one of PC Magazine’s “Top 50 Web Sites” </li></ul>
  3. 3. About Microsoft Office <ul><li>System of productivity software </li></ul><ul><ul><li>The most common suite includes Word, Excel, PowerPoint, Outlook, and Access </li></ul></ul><ul><li>400 million paid users </li></ul><ul><li>Most recent version: Office 2003 </li></ul><ul><li>Next version: code-named Office “12”, currently in beta testing </li></ul><ul><ul><li>Tonight, I’ll show Office “12” Beta 1 </li></ul></ul>
  4. 4. Why am I here? <ul><li>Office “12” introduces a new way of working with Office applications </li></ul><ul><li>Breaks away from the standard “menu and toolbar” model </li></ul><ul><li>Includes elements of new interaction design and feature reorganization </li></ul><ul><li>A huge risk for Microsoft, but one we think will pay off </li></ul>
  5. 5. Top Design Goals <ul><li>Make the software easier to use </li></ul><ul><li>Help people save time </li></ul><ul><li>Make it easier to discover more of the functionality people need in Office </li></ul><ul><li>Support the creation of great looking documents </li></ul>
  6. 6. Agenda <ul><li>Why a new UI? </li></ul><ul><li>What is the new UI? </li></ul><ul><li>Questions and answers </li></ul>
  7. 7. Why a new UI for Office?
  8. 8. Office Business Challenges <ul><li>Conventional punditry: </li></ul><ul><ul><li>“ Office is good enough” </li></ul></ul><ul><ul><li>“ People only use the same 5% of Office” </li></ul></ul><ul><ul><li>“ Everything I need was in Office [95, 97, 2000]” </li></ul></ul><ul><li>What real people tell us: </li></ul><ul><ul><li>“ I’m sure there’s a way to do this, but I can’t figure out how” </li></ul></ul><ul><ul><li>“ Office is quite complex, I would be better at my job if I knew how to use it more.” </li></ul></ul>
  9. 9. How did we get here?
  10. 10. Ye Olde Museum Of Office Past
  11. 24. Number Of Menu Items
  12. 25. Toolbars And Task Panes
  13. 26. Why a New User Experience? <ul><li>Menus and Toolbars were designed for less full-featured programs </li></ul><ul><li>The feature set of Office has grown and stretched existing UI mechanisms to the limit </li></ul><ul><li>It’s harder to find functionality than it was a decade ago </li></ul><ul><ul><li>“ There must be a way to do this…” </li></ul></ul><ul><ul><li>“ I don’t even know where to start looking.” </li></ul></ul>
  14. 29. Why Now? <ul><li>The role of data from Office 2003: </li></ul><ul><li>1.2 billion data sessions collected </li></ul><ul><li>~1.8 million sessions per day </li></ul><ul><li>Over the last 90 days, we’ve tracked 352 million command bar clicks in Word </li></ul><ul><li>We track nearly 6000 individual datapoints </li></ul><ul><li>We couldn’t have done this without data! </li></ul>
  15. 30. Using Data <ul><li>Which commands do people use most? </li></ul><ul><li>How are commands commonly sequenced together? </li></ul><ul><li>Which commands are accessed via toolbar, mouse, keyboard? </li></ul><ul><li>Where do people fail to find functionality they’re asking for (in newsgroups, support calls, etc.)? </li></ul>
  16. 31. A Clean Slate
  17. 32. Office “12” Design Tenets <ul><li>A person’s focus should be on their content, not on the UI. Help people work without interference. </li></ul><ul><li>Reduce the number of choices presented at any given time. Increase the user’s sense of mastery through contextualization. </li></ul><ul><li>Strive to increase efficient access to features. </li></ul><ul><li>Bring out the soul of the program; embrace consistency, but not homogeneity. </li></ul><ul><li>Give features a permanent home. Prefer consistent-location UI over “smart” UI. </li></ul><ul><li>Straightforward is better than clever. </li></ul>
  18. 33. The “Sense Of Mastery” <ul><li>A single, finite space to search for functionality </li></ul><ul><li>Contextualization: Simplify the number of choices available at any one time </li></ul><ul><li>Help people work without interference </li></ul><ul><ul><li>Predictability, No “Auto” UI </li></ul></ul><ul><li>Comfort level: This is still Microsoft Office </li></ul><ul><li>What would we build knowing how the applications turn out? </li></ul>
  19. 34. Taking the Big Bet <ul><li>Conservative history lets us make the big bet now </li></ul><ul><li>Trust in people to learn a new way of working </li></ul><ul><li>You must remove to simplify! </li></ul><ul><li>A huge responsibility… and opportunity </li></ul><ul><ul><li>People spend more 1-on-1 time with Office than with their spouses </li></ul></ul>
  20. 35. Office “12” User Interface
  21. 36. The New UI Framework <ul><li>The “Ribbon” </li></ul><ul><li>Galleries </li></ul><ul><li>Live Preview </li></ul><ul><li>Contextual Tabs </li></ul><ul><li>Quick Access Toolbar </li></ul><ul><li>MiniBar </li></ul><ul><li>“ Super Tooltips” </li></ul><ul><li>Enhanced window frame: View switching and Live Zoom </li></ul><ul><li>Customizable Status Bar </li></ul><ul><li>“ KeyTips” and Keyboard Navigation </li></ul><ul><li>Streamlined Options </li></ul><ul><li>Context Menus </li></ul><ul><li>File Menu </li></ul>
  22. 37. The “Ribbon” <ul><li>Primary replacement for menus and toolbars </li></ul><ul><li>Modeless UI designed for easy browsing </li></ul><ul><li>Consists of “tabs” organized around specific scenarios or objects </li></ul>
  23. 38. The “Ribbon” <ul><li>Each tab is organized into several “groups” </li></ul><ul><li>Each “group” contains related controls: </li></ul><ul><ul><li>The Ribbon can host richer content than menus/toolbars </li></ul></ul><ul><ul><li>Buttons, galleries, dialog box content… </li></ul></ul><ul><li>Developers can make their own tabs and their own groups </li></ul>
  24. 39. Advantages Of The “Ribbon” <ul><li>One home for functionality </li></ul><ul><ul><li>No more looking through hierarchical menus, toolbars, task panes… </li></ul></ul><ul><li>Better organization of commands within each application </li></ul><ul><li>Enough room to label most commands </li></ul><ul><li>Rich command layouts help people find more important functionality </li></ul><ul><li>Hosts galleries </li></ul>
  25. 40. The Ribbon
  26. 41. Success Criteria (circa September 2003) <ul><li>People feel a sense of possibility when they see that we’ve made big changes. </li></ul><ul><li>People feel free to explore and use more of the depth of our products. </li></ul><ul><li>People continue to be as efficient or more efficient on familiar tasks as they are now. </li></ul><ul><li>The user experience is deep—not just “dressing up the pig.” </li></ul><ul><li>There will be a learning curve, but it will be worth it. </li></ul><ul><li>In the end, users will feel a sense of mastery. </li></ul>
  27. 42. Contextualization <ul><li>Right-click context menus, 1995 to 2005 </li></ul><ul><ul><li>Then: Experts only </li></ul></ul><ul><ul><li>Now: Primary choice for beginners </li></ul></ul><ul><li>Embrace the magic of context in a richer, modeless UI </li></ul>
  28. 43. Contextual Tabs <ul><li>Most features in Office only work in conjunction with an object </li></ul><ul><ul><li>Picture, Table, Text Box, Chart, Diagram, Header, Footer, Shapes, PivotTables, etc. </li></ul></ul><ul><li>Whenever you select or insert an object, the Contextual Tabs for that object appear in the ribbon </li></ul>
  29. 44. Contextual Tabs <ul><li>The set of tools you need are always at hand </li></ul><ul><li>The set of tools you couldn’t use are out of your way </li></ul><ul><li>Results </li></ul><ul><ul><li>Easy to find the right functionality to get something done </li></ul></ul><ul><ul><li>The core (non-contextual) product is vastly simplified </li></ul></ul>
  30. 45. Contextual Tabs
  31. 46. Contextualization <ul><li>Current Office UI: Everything all at once Jack of all trades, master of none. </li></ul>
  32. 47. Contextualization <ul><li>Office “12”: Get the best possible tool for each task… …and the rest of the tools are out of your way </li></ul>
  33. 48. Galleries <ul><li>A new control, designed to work together with the ribbon </li></ul><ul><li>Provides a visual way of browsing functionality </li></ul><ul><li>Shows the result of commands, not the commands themselves </li></ul><ul><li>People can be successful using galleries without understanding what they’re doing behind the scenes </li></ul>
  34. 49. Galleries <ul><li>Two types of galleries: </li></ul>Dropdown In-Ribbon
  35. 50. Galleries <ul><li>Galleries help you get great results without having to be an expert </li></ul><ul><li>If you want more power, it’s always available in a consistent way </li></ul>
  36. 51. Three-Stage Formatting <ul><li>Apply an overall style to an object from a gallery of visual styles </li></ul><ul><li>Tweak the appearance of an object using galleries of individual effects </li></ul><ul><li>Drill down into a dialog of fine-tuned settings (# of pixels, transparency %, etc.) </li></ul><ul><li>Bumper Bowling </li></ul>
  37. 52. Results-Oriented Design <ul><li>Think about features instead of commands </li></ul><ul><li>Present functionality at a higher level </li></ul><ul><li>Illustrate features by their results </li></ul><ul><li>Use galleries to get the user close to the result they want to achieve as quickly as possible </li></ul><ul><li>Visual! Tactile! Responsive! </li></ul><ul><li>Compare to: Command-Oriented Design </li></ul>
  38. 53. Live Preview <ul><li>See what effect a feature would have without actually applying it </li></ul><ul><li>As you hover over a choice in a gallery, the document previews the action </li></ul><ul><li>Stops the frustrating, repetitive cycle of clicks trying to get the right format </li></ul><ul><ul><li>Drop a menu, scroll to intended target, click to apply, undo command, drop the menu, repeat […] </li></ul></ul>
  39. 54. Galleries and Live Preview
  40. 55. Customization <ul><li>Office 2003’s Command Bars are extremely customizable </li></ul><ul><li>This high level of customization has a price </li></ul><ul><ul><li>Increased complexity </li></ul></ul><ul><ul><li>Accidental customization </li></ul></ul><ul><ul><li>Barriers to extensibility </li></ul></ul><ul><ul><li>Promotes a “let the users figure it out” design viewpoint </li></ul></ul>
  41. 57. Customization Data <ul><li>Fewer than 2% of people have customized Office 2003 </li></ul><ul><ul><li>And we can’t rule out accidental customization </li></ul></ul><ul><ul><li>And the data might skew towards experts </li></ul></ul><ul><li>Of the customizations recorded, 85% are adds/deletes of four or fewer buttons </li></ul><ul><li>Many of the most common customizations can be addressed through the Ribbon </li></ul><ul><ul><li>Superscript, Send to Back </li></ul></ul>
  42. 58. Quick Access Toolbar (“QAT”) <ul><li>Allows one-click access to commands from anywhere </li></ul><ul><li>Starts with three icons: Save, Undo, Redo </li></ul><ul><li>Users can customize it to include anything in the Ribbon </li></ul><ul><li>Two modes: compact and full size </li></ul>
  43. 59. Quick Access Toolbar
  44. 60. Dialog Boxes <ul><li>Dialog Boxes remain the way to access advanced functionality </li></ul><ul><li>In the past, dialog box entry points were isolated from the efficient version of the commands </li></ul><ul><ul><li>Just because I can find the Bold button doesn’t mean I could find Format | Font </li></ul></ul>
  45. 61. Dialog Launchers <ul><li>Dialog Launchers formalize the relationship between basic and advanced functionality </li></ul><ul><li>“ Groups” in the ribbon with related dialog boxes are linked directly from the “group” </li></ul><ul><li>Galleries have links to the related dialog boxes at the bottom of the gallery </li></ul>
  46. 62. Dialog Launchers
  47. 63. MiniBar <ul><li>One of the major goals of the new user experience is to improve efficiency </li></ul><ul><li>The MiniBar is a unique form of on-object UI designed to improve your efficiency </li></ul><ul><ul><li>On-object UI for the features you use most! </li></ul></ul><ul><li>Helps prevent cyclical tab switches in the ribbon </li></ul><ul><li>Efficient access to commands for mouse-oriented people </li></ul>
  48. 64. MiniBar
  49. 65. Frequently Asked Questions <ul><li>Q: What programs get the new UI? </li></ul><ul><li>A: In Office “12” </li></ul><ul><ul><li>Word </li></ul></ul><ul><ul><li>Excel </li></ul></ul><ul><ul><li>PowerPoint </li></ul></ul><ul><ul><li>Outlook (except the shell) </li></ul></ul><ul><ul><li>Access </li></ul></ul>
  50. 66. Frequently Asked Questions <ul><li>Q: Is there a “Classic Mode?” </li></ul><ul><li>A: No. Although Office 2003-compatible keyboard shortcuts can be used, menus and toolbars have been removed entirely from the product. </li></ul>
  51. 67. Frequently Asked Questions <ul><li>Q: Is the visual look-and-feel of the product done? </li></ul><ul><li>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. </li></ul>
  52. 68. Summary <ul><li>The new user experience helps people be more productive with Office </li></ul><ul><ul><li>Find the right feature </li></ul></ul><ul><ul><li>Discover new functionality </li></ul></ul><ul><ul><li>Be more efficient </li></ul></ul><ul><ul><li>Easily create powerful, beautiful documents </li></ul></ul>
  53. 69. Questions & Answers <ul><li>My Office UI Blog: </li></ul><ul><li>http://blogs.msdn.com/jensenh </li></ul><ul><li>Contact me via e-mail: </li></ul><ul><li>[email_address] </li></ul>
  54. 70. © 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

×