kwc.org Photos Spare Cycles MythBusters

Talk: Beyond Menus and Toolbars in Microsoft Office

Beyond Menus and Toolbars in Microsoft Office
Jensen Harris, MS Office UE Team
http://blogs.msdn.com/jensenh/
BayCHI

Office 12 is an upgrade I wouldn't mind paying for, that is, assuming that work didn't let us get free copies. Those are big words for me, considering my "I Hate Microsoft" series of blog entries. I can imagine making documents faster with Office 12, or at least I can imagine making better looking documents in the same amount of time. Excel, which has been less functional for me than the spreadsheet program I used on my Apple IIe, looks like it will be come a useful tool for data analysis.

I felt that Harris made a convincing case as to why they are doing the UI revamp, that it's more than a marketing trick. The conventional wisdom out there is "Everything I need was in office [95, 97, 2000]." (For me it was Word 95). They collected a ton of data (including over a billion Office sessions) that told a different story. On a list of the top ten most requested features for Office: four of them were already in Office. Their conclusion was that "Office is good enough in that people have made peace with it." Another observation from the data was that the average user spends more time with Office (2.6 hrs/day) than they do with their spouse (2.4 hrs/day). When you take 400 million users * 2.6 hrs/day, it seems worth improving that experience. Harris rhetorically asked, "Have we reached the pinnacle of software that people use to get their job done everyday?"

It was also clear from the evolution of the Office design that a revamp was in order. The number of toolbars and taskpanes was getting out of control: they were create user interfaces to manage their user interface. There simply wasn't a good menu+toolbar paradigm for managing programs with 1500+ commands.

My notes are in the extended. I transcribed a lot of the new Office 12 elements, but text doesn't do a very good job of describing user interface. Overall, it's a more visually oriented interface: large gallery icons show what a command does and hovering over the icon gives you a preview of the result, e.g. if you hover over a font, your select is shown with that font. The UI is also much more contextualized. What you think of being on your right-click menu is now the focus of your toolbar menu. One of the most important design constraints introduced is that the UI is confined to a fix region of the screen and doesn't do any of the silly auto-hiding or auto-rearranging of Office past.

If you're really curious about the Office 12 UI I recommend visiting Harris' blog. You will find out that yes, they fixed the stupid start presentation button in Powerpoint. Also, new fonts!. Death to Times New Roman!

Summary tidbits: * "Is it worth taking this pixel away from the user?" * You must remove to simplify * Is there a classic mode? No. * They were trying to figure out what some of the commands in Excel did. Found out some options in Excel weren't hooked up into any code: "They didn't do anything!" * On Office 2000's 'auto' features: "The computer looks at the things you use the most and moves them around all the time." * On Office 2002 task panes: "New features aren't being invented, but I bet they will if we create a whole new rectangle"

DISCLAIMER: These are personal notes. They probably contain far more than just grammatical and spelling mistakes. If you are in need of actual quotes from Harris, you're better off reading his Office 12 blog

What's wrong with the current Office

Office has had 20 years of menus and toolbars. This is possibly single biggest UI risk ever taken at MS

Goals: easier to use, save time, make it easier to discover more functionality, support creation of great looking documents

Office currently produces old, ugly documents: limited palettes, fonts by default.

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."
  • The above quotes are from Harris' flight the previous day. Person had written index cards with instructions of how to get things done.
  • One of the user's hacks (drawing lines in Excel): User used Powerpoint to draw a line, copied it, and pasted it into Excel
  • Users want to know how to do more, but don't know how.

"Office is good enough in that people have made peace with it."

"Have we reached the pinnacle of software that people use to get their job done everyday?"


Ye Olde Museum of Office Past

WfW 1.0 (1989): 640x480, 2 toolbars (1 was toolbar, 1 was 'ribbon')

  • 'Format' had most menu items of any menu (4): Character, Paragraph, Document, Tabs
  • It kinda sucked, Not a lot of people bought it

WfW 2.0 (1992):

  • 640x480, 2 toolbars.
  • Exact same menu structure of Word 2003 (File, Edit, View, Insert, Format, Tools, Table, Window, Help)
  • Added Nested Dialog Boxes

Word 6 (1994):

  • 800x600, 8 toolbars
  • Right-click contextual menus (during user studies they couldn't get users to right click no matter what they tried)
  • Tooltips
  • Tabbed dialog boxes
  • Toolbars on bottom of screen
  • Wizards

Word 95 (1995):

  • 800x600, 9 toolbars
  • Port of Word 6 to 32-bit + 1 new feature: red-squiggle
  • IntelliSense 'auto feature'

Word 97 (1996):

  • 1024x768, 18 toolbars
  • Toolbars on every side of the screen and floating
  • Menu bars can be docked anywhere or floating
  • Drag and drop any command anywhere
  • Clippy
  • Hierarchical multi-level menus
  • Hierarchical context menus
  • Icons on menus and context menus
  • Forced upgrade by file format

Word 2000 (1999)

  • 1024x768, 23 toolbars
  • Goal of Word 2000: reduce perception of bloat. Decided to introduced UI workarounds: 'personalized' short/long menus, toolbar buttons that hide/show based on frequency.
  • Very few companies deployed with the short/long menus enabled, so only home users were hurt by this new feature.
  • "The computer looks at the things you use the most and moves them around all the time."
  • Default toolbars 'rafted' onto a single row
  • Free-roaming Office Assistant
  • Help Pane
  • One window on taskbar per document

Word 2002 (2001)

  • 1024x768, 30 toolbars, 8 Task panes
  • "New features aren't being invented, but I bet they will if we create a whole new rectangle"
  • Invented the task pane
  • On-Object UI options
  • Smart Tags
  • Reached the limit on ability to 'innovate' with menus and toolbars

Word 2003

  • 1024x768, 31 toolbars, 19 task Panes
  • Had to build a menu to access all the task panes
  • Alt+click words to perform lookup actions
  • Person Name smart tag menu
  • People's screens end up looking very cluttered, UI controls (help pane, task pane, toolbars) crowd out the document

# menu items: <50 in WfW 1.0, ~300 in current version

Future Word: ~"We need to build a more complicated UI to manage the task panes"


Why a New UE?

  • Menus and toolbars were designed for less full-featured programs
  • The feature set of Office has stretched the UI beyond the limit
  • Gathered list of top 10 requested features for next Office: 4 of them are already in the product.

Why Now?

  • Opt-in data tracking program
  • 1.2B data sessions collected (~1.8M sessions/day)
  • Over the last 90 days, tracked 352M command bar clicks in Word
  • Track 6000 individual datapoints
  • Goes into a spreadsheet on Harris' desktop.
  • Collection of data allowed them to confidently do a new design

Using data

  • Which commands do people use most? Paste, by far
  • 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? (newsgroups, support calls)

average Outlook user has 47 folders

A Clean Slate (Designing Office 12)

This is the first time that a shared team that has owned the UE of the Office applications. The fun part of being a program manager used to be that you get to control the UI, e.g. make a button to show mommy. Those program managers now had to hand over control of the UE to Harris' team.

They had three months to come up with ribbon design

Office "12" Design Tenets

  1. A person's focus should be on their content, not on the UI. Help people work without interference. "Is it worth taking this pixel away from the user?"
  2. Reduce the number of choices presented at any given time. Increase the user's sense of mastery through contextualization.
  3. Strive to increase efficient access to features. Less clicks, wizards. Have to be able to prove efficiency with data.
  4. Bring out the soul of the program; embrace consistency, but not homogeneity. PPT is for drawing and creating, Excel is for crunching data. Drawing tools don't have to be same in PPT and Excel
  5. Give features a permanent home. Prefer consistent-location UI over "Smart" UI.
  6. Straightforward is better than clever.

A "Sense of Mastery"

  • A single, finite space to search for functionality
  • Contextualization: simplify the # of choices by exploiting context
  • Help people work w/o interference. No 'auto' UI (e.g. hiding/showing buttons based on use patterns)
  • Comfort level: This is still Office. Users should still be able to recognize the application. (During usability tests for Office 12 users would tell them that "They have this version at home and really like it")
  • What would we build knowing how the applications turn out? i.e. We're no smarter than the people who first made Word, but we know more than they do now. What would the founding fathers of Office built.

Taking the big bet

  • Conservative history let us make the big bet now. Not crying wolf a lot.
  • Trust people to learn a new way of working
  • You must remove to simplify!
  • Huge responsibility... and opportunity. People more 1-on-1 time with Office than with their spouses (2.6 hours/day with Office, 2.4 hours/day with spouses). You have an intimate relationship with your software. "I'm not saying you want to take it to bed."

2.6 hours/day * 400 million users = a bet worth making


The New UI Framework

Success criteria * They believe that there will be a learning curve, but they hope that investment will be outweighed by easy-of-use and ease-of-discovery * Not just "dressing up the pig"

Elements

  • The Ribbon
  • 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
  • Live Preview

The "Ribbon":

  • basic description
    • modeless UI for easy browsing.
    • task-oriented
    • each tab is organized into several 'groups/chunks.'
    • Developers can make their own tabs and groups.
    • Can have richer content than menus and dialogs (buttons, galleries, etc...).
  • One home for functionality: if it's not there it's not in the product. Enough room to label most commands.
  • Labels really important -- only so many 16x16 icons people can recognize. Outlook team looked at usage data that was showing that it took users three clicks to reply to an e-mail. There initial response was, "I don't know why it takes three clicks to reply to an e-mail. You just click to the head with the arrow pointing to the left."
  • As the size of the ribbon is decreased, labels disappear, big buttons become small buttons, at a small enough size they compress to a single button, and eventually the whole ribbon disappears (they assume that you are just trying to show a particular part of the document).
  • No target resolution, though common use based on data is 1024x768.
  • They manually figured out how to scale each menu, not 'auto' algorithmic.

Contextual tabs/Contextualization

  • Appear on the ribbon and are highlighted when object selected or inserted.
  • Right-click context menus, 1995 to 2005:
    • Then: expert only. During user studies, they couldn't have paid people to right click.
    • Now: primary choice for beginners
    • Users have learned that this is the only place that commands have been scoped down. People have latched onto this concept of contextualization. Doesn't mean that the right-click menu is a design success, but contextualization is a draw.
  • 1500 features, there isn't a UI that can hold that.
  • Most features in Office only work in conjunction with an object. 150 picture commands that you don't have to see if you are not putting a picture in your document.
  • Results: easier to find functionality, core (non-contextual) product is vastly simplified
  • Contextual tab makes it easier to make features better because you get more UI space with which to design the context-specific interaction.
  • If two objects are in the context, both contextual menus are accessible
  • Swiss Army Knife versus Best possible tool for each task

Galleries

  • easy heat maps, data bars, arrows: choose by visual, rather than command to analyze in excel, choose appearance
  • visual guide to features
  • automatically chaining of commands (shorting, etc..)
  • live preview of each selection
  • Result-oriented design
    • Think about features instead of commands.
    • Illustrate feature by it's result
    • Nielsen refers to as WYGIWYS
    • Replaces command-oriented design.
    • Doesn't try to name commands. Show the command.
    • Think about the feature the way the users thinks about it and articulates it.
  • Galleries can be in-ribbon or drop-down from a button
  • good results without having to be an expert
  • show result of command, not the command itself
  • super-powerful config is always available in a consistent manner at the bottom of each gallery.

Live Preview

  • Important element of galleries
  • See change in document before you select it.
  • Stop the repetitive cycle of trying out different options.
  • Selection disappears during live preview so that you can actually see the result.

Quick access toolbar/Customization

  • Allows one-click access to command from answer
  • Starts with three icons: save, undo, redo
  • User can include anything in the ribbon
  • compact and full size
  • Customization
    • Office 2003's command bars are extremely customizable.
    • "Let the users figure it out" viewpoint. Lazy. Excuse for not taking the time to design.
    • Fewer than 2% of people have customized Office 2003 (closer to 1%)
      • Can't rule out accidental customization
      • ...and the data might skew towards experts
    • Of the customizations, 85% are add/delete of four or fewer buttons: superscript, send to back, etc.... Things that probably should have been there in the first place.

MiniBar/Floaty/Efficiency:

  • On-object UI for the features you use the most! (Fitts Law)
  • Helps prevent cyclical tab switches in the ribbon
  • efficient access for mouse-oriented users
  • Ghosty toolbar that fades in if you move your mouse towards it.
  • e.g. in word: font, bold, etc... controls when you select text
  • also pops up with right clicks above the right click menu
  • can turn off

Dialog launchers

  • "Groups" in the ribbon with related dialog boxes are linked directly from the 'group/chunk'
  • Dialog launchers formalize the relationship between basic and advanced functionality
  • e.g. Galleries have link to related boxes at the bottom of the gallery

KeyTips/Keyboard navigation

  • Although the gallery, minibar, etc.. are mouse-oriented, Ribbon is fully keyboard accessible
  • Keytips: when you hold down alt, little tooltips with the key letter appear over each command/tab in the ribbon
  • It's in your benefit to be the most accessible program possible due to laws out there

The user interaction process: Three-stage formatting

Looking through the data they saw a consistent pattern of how users formatted objects, which they call 'Three-stage formatting.' It is basically an iterative process of successive approximation: each iteration brings the user closer to the desired result. The UI (galleries, live preview, direct manipulation) is meant to support this three-stage formatting process.

  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...).

Not everyone goes through all three phases, but order is the same.

DEMO

We saw multiple demos of Office 12 Beta 1. It had the structures in place but the visual skin was not the final skin -- marketing is saving the real skin for beta 2.

Ribbon at the top: set of tabs at top that switches out the toolbar beneath it * Approximate size: 3 toolbars * Will never take up more space than that. Constant. * Collapsible * Toolbars look (for the most part) the same. During usability tests users tell them "They have this version at home and really like it"

With Office 2003 and before it's hard to position pictures. You have to use 5 different features in order to position (textwrap, margin, inline, etc...). Now, live preview and direct manipulation allow you to show what you want.

Harris quickly added image, page numbers, landscape, margins, watermark, quote box, cover page title. Most of these were single selection options from the gallery, i.e. no dialog boxes.


Q&A

(from a slide):

Q: Is there a Classic Mode?
A: No

"Worst case is Microsoft is out of business next year"
applause from an audience member
"Wrong audience to make that joke"

Anecdote: They were trying to figure out what some of the commands in Excel did. Found out some options in Excel weren't hooked up into any code: "They didn't do anything!"

You iterate, you iterate, you iterate

Hard to put in Mac Office: toolbar is always there on OS X

Free of political pressure

Deprecating features:

They now have a process in place for deprecating features. From their billions of datapoints they found some features that have been clicked less than 10 times. Literally no one is using them.

About the speaker:

  • Creator of "Mediocre Site of the Day"
  • Degree in musical composition
  • Lead engineer on MS Office UE Team

Comments (1)

Max Howell:

Thanks for writing this up, it was very informative.

Post a comment


related entries.

what is this?

This page contains a single entry from kwc blog posted on December 14, 2005 10:29 AM.

The previous post was Do not let me near your gingerbread.

The next post is Busy break.

Current entries can be found on the main page.