In chronological order from left to right: Office 12 alpha, Office 2007 (12 final), Office 14 alpha
The story of the Ribbon
It has been a long time since Jensen Harris had first posted his design processes for Office 2007. I enjoyed reading it a lot, as he explained every step in detail, from how the design had evolved to how feedbacks were made into use. He had not updated his blog ever since, and then the next version of Office quietly kicks into development.
One of his major contributions was the “Ribbon”, as a way to consolidate all toolbars and to prevent a degrading experience due to accumulating toolbars and moving buttons around unknowingly. Basically, menus and toolbars are melt into one new paradigm, where buttons are not sized, hidden and positioned the same simply for organization and consistency, but also grouped, sized and visualized by importance and the power of suggestion through visual effects.
The Ribbon has ever since become the talking point of most reviewers and users, and soon Office 2007 becomes the example of how an old software can be revolutionized through UI. It has become so successful that the Windows division decided to bring the Ribbon interface over to its apps, for example, Paint, WordPad and Windows Live Movie Maker. (As a note, the default UI of Trillian Astra is also influenced by the Ribbon, but that’s another blog post.)
Throwing a Fitt!
However, the problem comes when Windows 7 begins adopting the Ribbon. As if Mr. Harris had retired from user interface design, the experience begins to disintegrate through its newer iterations, perhaps through decisions of other designers (who think they know best).
Though the changes are subtle, they are also disturbing and they show the lack of understanding of some very basic concepts:
1. Lack of visual distinctions
Let’s begin with the small visual details. While replacing boxes with separators considerably cleaned the interface up, the original boxes are not that suffocating to justify its removal. Instead, without the boxes, it is much harder to tell what functions belong together.
Top: Clean, distinctive grouping of functions (Office 2007)
Bottom: A clusterfsck of vertical noises (Office 14 Alpha)
Besides, not only the separators cannot do the job of the boxes, they contribute even more visual noises than the boxes. In attempt to make the separations clear, the designers put a darker line for the separators than the boxes. The result is that the lines have gotten so dark it is now fighting with the icons.
2. Where is the title bar again?
Top: I’m editing "Document" (WordPad in Windows Vista)
Middle: So I’m editing… uh… "Document" (WordPad in Windows 7)
Bottom: Wait, what am I editing? (Word 2007)
Strangely enough, the title bar in Office 2007 is centered, while the title bar in Windows 7 is aligned left. And Office 14? Centered. The title bar is important because there is no other way a user can tell what document they are editing. When one glances at the usual position, i.e. top left, one will find that the title is not there, but instead, jumping around the center, depending on how many contextual tabs you had opened.
3. Realignment of the Orb
Besides the minute changes above, the biggest offender is that they moved Office menu button. While the Office orb is not the most elegant solution, moving the menu button down with the tabs is worse. The reason?
Yes, Fitts’s Law. Of course.
In the original Office 2007 design, the Office menu occupied the whole top-left corner. Comparing the new design, it had two obvious benefits:
1. The orb is twice bigger. Therefore, when the window is floating, it is twice easier to click. And besides the physical benefit, a bigger button is distinctive. It is like putting a watermelon between apples, versus putting an orange between apples. While you can still point out that there is an orange upon closer look, a watermelon is a lot more obvious.
2. The orb is infinitely bigger when the window is maximized. Though not visually represented, it was coded so that you can simply push the cursor to the top left of the screen to click the button.
The functions included in the menu justified the placement of the orb. It was a very good design for it reduced a previously menu-ridden Office into just one menu – an impressive feat indeed.
To add salt to injury, its replacement in Office 14 alpha is nowhere as good. Back in the topleft corner is the useless window menu, which consists of ‘move’, ‘minimize’ and other boring functions that are much better performed by the mouse.
And worse, the Office orb is squeezed to look like… a tab. WHY? A menu looks NOTHING like the rest of the tabs in the ribbon. This is very bad design because it breaks user expectations, especially when users are nowhere familiar with the Ribbon yet. While users just learned that "all tabs switched the whole top toolbar away", now they would think that "some tabs switched the whole top toolbar away; but some tabs would blow me away with a full screen menu". That’s BAD.
Above: That explosive Office 14 menu I was talking about. It’s so big the Windows Start Menu looks like a midget.
Nevertheless, they picked the right applications to convert to the Ribbon interface. I can see that the ‘editing’ software, i.e. WordPad, Word, Paint, Movie Maker, etc., will pick up the Ribbon, while the ‘viewing’ software like Photo Gallery or Media Player will be left in the bland icon-less, text-only toolbar-ed interface.
It’s ironic how the Ribbon effectively prevented users from degrading the experience over time, but it cannot prevent other designers or programmers from disintegrating it from its very own self! I guess corporations are amnesiac by their nature. What’s the point of patenting and protecting the design, when they are the first people to wreck it?
Please come back, Mr Jensen Harris!
Alice Zhang 0902 on 20090220 Permalink |
Hi Leo! I’m gonna go take some pictures of the charred building in a week. Can’t wait.