Microsoft Doesn't Get UI Design (See Ribbon)

I have been using the Microsoft Office 2011 (or “office microsoft: mac²⁰¹¹” if I try to read the product packaging) suite for the Mac for quite a while now. Despite the improvements in speed and functionality (like we needed more!), I had some initial misgivings about the ribbon interface) but thought I might end up liking it, so I gave it a chance.

I have given it a chance, and I am still convinced that Microsoft just doesn’t understand user interfaces.

To begin with, let’s look at my desktop as it looked this morning as I prepared to fire off a memo or two:

Notice that the ribbon interface is clearly present in the Mac OS version of Office 2011, and it looks nearly identical to its Windows Office counterpart. It’s part of area “1” in the screenshot.

In general, I cannot find what I’m looking for in this mess of icons. While some icons are clear (superscript, subscript, underline, etc.), others are not quite as clear. Increase font size and decrease font size look more like “up text” and “down text,” whatever that might be, and the “clear formatting” icon looks to me like it’s going to erase my text. That is an eraser, isn’t it?

Now, don’t get me wrong: most of these items are useful to have in a quickly-accessed area of the screen. But did you notice that there are two of each of many of these items? That’s because the Mac version of Office hasn’t gone 100%-ribbon yet (thank goodness!). Instead, we have a mishmash of yesterday and today at hand and, because you can actually hide the ribbon, that’s a good thing. In hiding the ribbon, you’re presented with a kind of index path that shows ribbon pallets which are available, and you’re left with a mostly-familiar and unadorned interface.

So can you live without venturing into ribbon-land? Nope. Here’s where things get very screwy. Let’s say you have hidden the ribbon and are now going to edit your header or footer. You double-click on the header (or use “View>Header and Footer”) and are presented with the usual editing mode for said header. There is no way to edit the characteristics of the header (formatting, linking between sections, page numbers, etc.) exposed anywhere. The “Format” menu doesn’t have a “Header and Footer” option. The pallet on the right (highlighted in area “3”) doesn’t have anything in it like it used to. So… now what?

Your only clue as to where to get some header formatting Juju is a strange pinkish hue on the ribbon index, like this:

Click on the pinkish thing and this is what comes up:

Naturally, there’s all the stuff you wanted. But doesn’t that seem wrong? You have to go looking in a very unnatural way for this pallet of info. And when you’re done editing the header or footer, does the ribbon go away by itself? No. It exposes itself, but doesn’t know how to put itself away.

By the way, that ribbon index constantly changes: Once you’re done with header and footer formatting and tell Word that’s what you’re up to by clicking back in the main document, the ribbon loses the “Header and Footer” index element and goes back to the default list of “Home | Layout | Document Elements |…”. These other items shifted to the right to make room for “Header and Footer” and the weird “right arrow from Home” motif and thus moved items from a familiar location to an unfamiliar location.

Moving anchor points (the main elements used to access other elements) in the user interface elements is not a good idea. Microsoft still insists on moving menu bars around with windows in Windows, but at least their location is consistently at one edge of the window. These ribbon interface elements slide all over the place within a window, and that’s a bad idea. We humans are creatures of habit and exhibit muscle memory and all that stuff. Keep things in one place in an interface and the creature of habit will be better able to use the interface.

Then there’s the “Styles” section of the ribbon. Notice how it displays seven styles in the screenshot. I do kinda’ like the fact that each style is a bigger target than is shown in the Styles pallet. But did you notice that the Styles pallet shows more information? It shows the current style, and gives a very useful dropdown menu for dealing with the current style along with that. Mouseover the current style in that pallet and a dropdown menu indicator shows up and indicates that there’s more that you can do here than meets the eye. Really, though, the dropdown menu indicator should be there 100% of the time. Nothing in the interface should be “more than meets the eye” category.

However, clicking or hovering over the big fat style icon (with lots of space) in the ribbon does nothing useful to indicate “But wait! There’s more!” Instead, you can guess that right-clicking will reveal a useful menu (it does), but, again, you had to guess that it was there since there is no visual indicator at work here.

OK, so you do hover over the style buttons in the ribbon, but you don’t see the style you’re looking for. By clicking on the arrow(s) at the end of this style pallet, you can see more styles. Now, one click at a time, one seven-button-pallet of styles at a time, you can look for the style you want. Very graphical, very pleasing to look at, but damned hard to use. With each click, my eye has to scan the pallet again. Worse, I can’t compare the style in one click-full to another style in another click-full of styles. Wouldn’t it be more useful to display all of them at once?

Ah! Microsoft thought of that, thank goodness, and there appears a funny little disclosure tab triangle dingleberry at the bottom of the style pallet. Excellent… except that it’s in a visually-awkward place (it appears as a layer in front of the ruler) and it is not the world’s largest target to hit. If you hit it, though, you are rewarded with all of the styles in… all of the styles in… well, some styles, anyway:

What set of styles are these? I have no idea because if I click on the style list in the Styles pallet, I see not 17 styles as in this pallet, but rather 19 styles, including “Clear Formatting”, “Header”, “Footer”¹ and some which are not among the 17, and vice-versa. And if I click on the style menu in the space between the ribbon and the window’s title bar, there I see about 100 styles which is, undoubtedly, the complete set of available styles. So, to summarize: three different ways to see particular subsets of the styles, and none the same subsets.

Last, but not least, describing to someone how to use the ribbon (verbally) is difficult. If you’re helping someone out, e.g. via telephone, just how do you describe to the user what to do? First, you have to assess the current state of the visual interface. “Do you see the ‘Header and Footer’ section of the ribbon? What’s the ribbon? Oh, that’s the thing with the little house icon on it. See that? OK, now do you see the…” Then you have to describe each icon that might need a click: “Click on the little icon with the ‘A’ and the ‘up’ arrow. No, not the one with the ‘A’ and the sideways arrow, the ‘up’ arrow…” I will never install Office in an environment where I have to support it…

So what do I like about the ribbon? Well, I do like the idea that there’s a way to see what’s going on at the moment in the are of the document in which you’re working. That is, when you are working in the header or footer, the formatting, etc., for that section is clearly visible in the ribbon. Also, there are some good things that the ribbon does graphically, such as the SmartArt and Charts ribbons. These ribbons have lots of good real estate to show nice pictures of what you might want to do instead of trying to describe it textually and make it fit into a menu.

However, Microsoft is missing the boat on how to display “big graphical things” with their ribbon UI, and as a software-only company, I can understand how they might make such an obvious miss.

In case you’ve not bought a monitor (or an iMac or laptop) recently, I’ll offer one important clue to you: monitors are wider than they are tall, and they’re only getting wider. The current aspect ratios of monitors is headed to 16:9, which mirrors what the HDTV market is manufacturing in quantity. Dell is bucking that trend slightly with a squarer monitor, but for the most part, everybody’s headed to 16:9 territory.

To help make my point, I need to refer back to the overview screenshot above. (The monitor in the screenshot isn’t 16:9—it’s actually 16:10—but that’s close enough to work.) Notice that the virtual piece of paper is a very, very small piece of the screen. Also notice just how much vertical space the ribbon and some wasted space in the area above it (area “2”) take up. This area is constant no matter how big your display is, and in this case, everything from the top of the display down to the top of the piece of paper is about 250 pixels. On a 27” iMac, that’s only 17% of the vertical display space. But on a 11” MacBook Air, it’s a full 33%—one third!—of the vertical display space taken up with menus, rulers, icons, and other stuff. That doesn’t leave much room for your actual work.

So where did Microsoft go wrong? Anybody can pretty clearly tell that area “3” in the screenshot is going largely unused. Area 3, where the poor, lonely Styles pallet is right now, was where all of these other formatting options existed in what was sensibly called the Formatting pallet in Office 2008. Apple knows this, and also got it right in Pages, Keynote, etc., with the Inspector pallet (which doesn’t lock it down by name to one particular function). Of course, Apple wastes some space in the area between content and title bar, in my opinion, but not nearly as much as Microsoft does. Apple makes up for this by allowing some reasonable customization—and by not requiring the user to use it at all.

Usability is the key word here, and I think Microsoft made their usability studies show the data they wanted to see, namely that the ribbon is a good idea of some sort. Here, they have form clearly leading function, and not the other way around as it should be. Worse yet, the mishmash of new and old items makes for a usability nightmare which will only get better or worse depending on which interface elements they choose to lose over the next iterations of Office. I’m betting on “worse.”

How would I choose to fix things?

1. I’d like to see a consistent interface, one where elements don’t come and go on a whim. Items would stay where they are belong.

2. I’d put these elements into an interface that is minimally-invasive, such as the menu bar where I can clearly describe what to select. I’d use minimal menu icons to help visually cue the user as to which items do what, but I wouldn’t make the graphic the main means of identifying the function.²

3. I would move as much of the status and formatting display to the unused space on the screen, area “3”, in order to regain the use of area “1”. The Apple Inspector pallet in Pages is, to me, a superb example of how to do it right. (Interestingly, Xcode 4 moves this stuff from a pallet into part of the main window. I’m not sure I like that yet.)

4. I would remove as many of the hidden elements of the interface and bring them to the fore. The disclosure-triange-model pallet in Microsoft’s previous version of Office was pretty good, but Apple improved on it with the tabbed pane concept. (The tabs don’t move. The disclosure triangles do.)

So Microsoft, if you’re reading this customer feedback, you are free to choose to ignore (and most likely will ignore) my input. But knowing that iWork is out there and that it is cross-platform compatible enough for the home user and a lot of office users, and that it is much, much simpler to use than Office should scare you just a little bit. Please reconsider the adoption of the ribbon, especially on the Mac versions of your products. Write it off as a good experiment and then develop something that will knock our collective socks off. You can do it. We know you can.

¹ I just switched to logical punctuation, or some variation thereof.

² “Select ‘File>Save’”, for example, is quite a bit easier than either saying to a teenager “Click the floppy disk icon” (because they have no frickin’ clue what a floppy disk looks like) or, if you happen to be supporting a Windows user, easier than “Click on the large round Windows icon and select… no, not the ‘Start’ menu with the Windows icon, the one that’s in the circle at the top of the window.” (Whose idiotic idea was it to put useful functions in a menu titled with the damned Windows icon?! Oh. That’s right. It was Apple’s idea, what with the Apple menu and all. But it’s for seldom-used and non-application-specific items such as desk accessories and system-wide preferences, not for everyday actions like saving a file where “File” is a much more appropriate menu title. Honestly, Apple could have called it the “Misc.” menu and it would have worked just as well, but would have lost the branding and cost many more pixels on that original 512 pixel wide display.)