The other night, I was having a couple drinks with some friends who came over to visit. I had only three drinks in the course of an evening, but I guess I was pretty tipsy — apparently your tolerance drops off a cliff in the early days of fatherhood — and I might have ranted a bit about Microsoft (and other things) on Mastodon:
While I’m drinking (in company), does anybody else think about the ribbon UI in Office and how it is a travesty of UI design? Just the worst ideas [sic] ever, and they’ve kept them for decades.
Look, when Apple f’s up, you’re stuck with it for 5 years or so. When Microsoft messes up, contraptions [editor’s note: I don’t even know what I meant here, but it’s definitely an autocorrect error that I didn’t notice at the time], live with it, it must be supported in enterprise until the cockroaches die.
The friggin ribbon bar thing sucks. Kill it already. It’s a usability disaster.
My daughter is 8 weeks old and she’ll grow up with the ribbon.
Going to pretend that Microsoft’s business tanked after Windows 95, and yes, it is very weird they never made a sequel.
My internet friend Declan Chidlow took umbrage with my slightly drunken rant and wrote a rebuttal sharing that the ribbon is good, actually. (I’ll just add that I’m very disappointed that the coolest people I know all live thousands of kilometres away.)
I disagree strongly with Declan, but I want to credit his writing and how thoughtfully he argues his point:
The grouping of related items together in labelled sections helps with association and understanding of function, even when just an icon is shown. The ribbon also at least displays some textual labels, which is nice for usability over everything being an icon.
Being a bit taller, the ribbon also has room to significantly flatten the hierarchy by exposing items users had to go digging for in the menu bar, so feature discoverability is much improved. Contextual tabs that only appear while performing an action that necessitates them also reduce the clutter of appearing toolbars.
He has many more additional points, but I want to do him the credit of encouraging you to read his thoughts in full, rather than reading my abridged version. He also has a number of screenshots of different versions of the ribbon which aid him in sharing his point.
Once you’re done reading that, let me share why the ribbon is a complete travesty.
Since Declan is sharing screenshots, I figure I better share a few of my own.
When I think about Word, I tend to think about the versions I wrote a lot of school papers in. I was using Windows until high school, so my memories of Word span from Word 95 to around Word 2007 (which is around the time I stopped using Windows and got a Mac).
Declan shared a number of screenshots of just the ribbon, but I think it’s better to show the ribbon in context of the full window. The following screenshots are all sourced from Version Museum’s history of Word (this site is an invaluable resource, holy smokes).
I spent a lot of time as a young child using Word 95 on our Windows 95 machine at the house. (I wrote books in it! When I was eight, I wrote a 600-page fantasy novel. I don’t think it was very good.) Here’s the UI, pre-ribbon:
I will not pretend this is some bastion of glorious design, but at the time, this felt pretty remarkable. The GUI was easy to use, Windows 95 supported real multitasking, and Microsoft was smart enough to “borrow” a lot of good ideas from classic Mac OS (or System 5, at the time, since Apple didn’t call it Mac OS until 1996).
Granted, I was four when Windows 95 came out and six when I started using it, so I didn’t have all that context.
As an adult though, it’s obvious to the naked eye. This UI is half baked, and worse than anything Apple would ship under Steve Jobs’ supervision, but I’ll give it a pass for its time. (I don’t love what I call double-decker navigation. More on that later, but this is the early days of the GUI, and everybody was figuring this stuff out in real time, so let’s not rush to judgement just yet.)
A few quick notes, since I can’t resist:
- There are two separate window controls, stacked on top of each other (see the top right), and that is inexcusably confusing.
- There are two navigation layers of icons/buttons, and then above a Mac-style menu control. The menu-control was always excellent (I remember using it!), but two layers of proportionally different controls below was confusing.
- If you include the menu bar and the page margins, it looks like the control area is about four rows tall, which is a lot of vertical space. This has always been the problem with Microsoft’s Office UI.
I also spent a lot of time with Word 2002, which looks like this:
(Word 2000 looks quite similar, but not quite as nice, and my family never got Word 2000, so I have less experience with it.)
I think this is a nice improvement. The controls are all in one row, so to speak. Icons are grouped together nicely — bold, italics, and underline controls are right beside font selection, and the new document, save, paste, and undo buttons are all grouped, which makes some sort of sense.
I think Word 2002 is probably peak Word design. I don’t think it gets better than that. The only Word UI that looks better, I think, is Word 1.0 for Mac (in 1985):
Obviously, display and rendering technology had advanced well beyond Word 1.0 by 1995, but this version of Word was ahead of its time and looked fantastic. The simple controls mean that it’s obvious where to go if you want to make changes (the menu bar). Today, an entire cottage industry of Mac text editors (like iA Writer, Ulysses, and Byword) all imitate this minimalist aesthetic.
Word 2003 would carry along the tradition of Word 2002, but with more style and less taste (the blue is a lot and I’m certain it influenced the colours people used in their documents during this period, because blue doesn’t look good with everything).
So let’s say that Word 2002’s design is better. But this isn’t awful. I wrote more than half of my high school essays in Word 2003. It’s nice to see some colour in our user interfaces, so long as that colour is used to differentiate either the app, window, or actions. In the case of Windows, it was just blue. Blue everywhere!
There have been worse sins.
Speaking of, it’s time to talk about the ribbon. The ribbon UI debuted in 2007. Declan has great screenshots. Here’s his screenshot of the ribbon UI. From top to bottom: 2007 on Windows 7, 2010 on Windows 7, 2013 on Windows 10, and Microsoft 365 on Windows 11.
I think it’s important to share the context of the ribbon in the context of the window, so here it is in 2010 (the cleanest screenshot I could find of a non-beta version):
On a widescreen display, vertical space is at a premium. (This is the primary reason I’m a left-dock Mac user on my laptop). This is especially true on Windows, where most displays are 16:9 instead of the taller 16:10 aspect ratio used by Macs.
The ribbon is far too large, eliminating a lot of space that should be used for working on your document.
The UI is also exceptionally strange, and I don’t think it’s user friendly. I think that the more adept the average person becomes at interacting with Office, the less adept they are at navigating the rest of their machine, because the UI is so alien compared to the rest of the operating system.
Declan says the following about the ribbon:
Being a bit taller, the ribbon also has room to significantly flatten the hierarchy by exposing items users had to go digging for in the menu bar, so feature discoverability is much improved. Contextual tabs that only appear while performing an action that necessitates them also reduce the clutter of appearing toolbars.
I disagree with this so strongly. The hierarchy has not been flattened. It’s been rearranged. Clicking Insert doesn’t reveal a menu; it completely changes your navigation. Home has nothing to do with a home; it’s really for text editing.
So clicking Insert, Page Layout, Mailings, Review, View — that all changes the UI out from under you. I think it messes with your sense of place and space the same way that the ever-changing UI in Adobe’s creative suite makes it difficult to learn.
But the two rows of buttons is, I think, the greater sin. Particularly over time, as Microsoft removed borders to clearly indicate the boundaries of these buttons. Their groupings largely don’t make sense — bullet points are above left alignment, and text alignment is nowhere near font size like it used to be, for example.
And some of the buttons are two rows high, indicating their prominence. These buttons are used for Style previews, but they only display six style previews at a time.
I’m not a Word connoisseur (ick), but if you know people who use Word, you know there are two kinds of people:
- The people who don’t use Styles.
- The people who use Styles religiously, and have far more than five in a document. (These are the same people who make the presentations that line up perfectly with corporate branding, so I appreciate them as a designer.)
These two groups do not understand one another, and the UI serves neither of them. Styles get in the way of and confuse the first group (“why did my text formatting just change?”), and the people in the second group are frustrated they can only see a few at a time.
Right around this time was when people began to get very frustrated with Word. John Gruber invented Markdown just a few years later. There was a palpable sense that you would buy a Mac if you wanted a good word processing program (Pages), or you might use LibreOffice if you wanted a sane alternative for Windows (I knew many people and corporate environments who were doing this by 2010).
There was this feeling that Word had become too bloated. Nerds complained about the actual bloat in the file sizes, but normal people felt the program itself had become bloated and harder to use. I think the new features in 2007 and beyond were actually fairly narrow, but their arrangement in the ribbon meant that the UI encroached on your work, thus creating a feeling that it was harder to get things done and the program was more bloated than before.
(If this sounds familiar, Apple is experiencing similar complaints with Liquid Glass. If somebody says iOS just feels bloated or harder to use, they are reacting to the same problem — UI interfering with content — but they understandably lack the design vocabulary to voice their concerns with clarity.)
You can see that Microsoft struggled with the information hierarchy in Office 2013.
Note the ALL-CAPS TAB HEADINGS in the screenshot. My experience designing software is that, if you resort to all-caps in your UI, your hierarchy is messed up and you’re struggling to communicate how to use your app. (All-caps is useful in marketing, but not in UI.)
You’ll also note that, as of 2010, FILE came before HOME in the navigation. (What is Home if it’s not the first tab? So strange.)
And if you were to click Review, you would see the deck chairs rearrange and the UI slip out from under you.
There aren’t a lot of screenshots of ribbon menus outside of the Home tab, which is arguably its best conceived tab. The Review menu is a bit of an abomination. Each grouping has its label below the other labels, instead of above. (They can’t be above the others, because the main menu bar is already above the others, so there’s another hierarchy problem.)
Some of the labels are two lines long, some are one line long. While it’s nice that there are labels, this is unsightly. There’s a three-line menu item for Tracking, which is entirely inscrutable to me.
The labels, the shifting UI, and the hierarchical issues all exist so that these labels and icons can be as large as possible. Clearly somebody at Microsoft thought people couldn’t use computers because the previous layouts, which required you to hover over each icon for a tooltip, were inscrutable. So they went to tremendous lengths to make the labels visible all the time.
But despite all those efforts, the UI is still unknowable and inscrutable. So we have gained nothing, and lost a good deal of the clarity that might exist if the toolbar just followed normal system conventions.
I am not the world’s best designer by any stretch of the imagination, but I feel comfortable saying I would not design this.
The Mac version of Word didn’t get the ribbon bar until 2011. In 2008, while Windows users were adjusting to the new ribbon UI, Word for Mac was much more elegant:
I don’t know about you, but if I need to prepare a document, I can tell you which of these UIs I would vastly prefer.
This version of Word follows OS X’s general design philosophy. When you look at it, it almost feels inevitable: how else would this be designed? But we have seen how else it could be designed: it could have a ribbon bar.
In 2006, I got my first Mac. I think it was this Core Duo model, in white plastic. (It was before the plastic unibody design, which came a couple years later.) So while I used Word throughout the rest of high school, I didn’t get the ribbon bar on my Mac until 2011. In 2011, I was already using Pages for schoolwork, and Markdown for all my professional writing, so I was happy to let the ribbon pass me by.
Unfortunately, the ribbon bar can’t be viewed in isolation.
In my opinion, the ribbon bar reflects Microsoft’s carelessness. It’s one thing to have bad taste; it’s another to be careless. The visual presentation and organization of the ribbon bar is careless, and it exists so Microsoft can avoid solving the hard problems that come with good interface design.
Millions upon millions of people use Microsoft’s products every day. When the tools you use are carelessly made, and they are the tools your organization wants you to use, the organization conveys the level of expected care and polish for their work too.
If you were a contractor, and you used crummy tools, you would do crummy work. If you worked in an office, and the tools you were asked to use for email, word processing, and presentations were crummy, I believe that would affect your work too.
We talk a lot about how you don’t need great tools to do great work. But the tools we use influence the quality of work we do, and the better the tool, the more likely the work will be good too. This is why so many of us care about the design regressions of Liquid Glass: they will have untold effects on a generation of new designers who have never learned the fundamentals.
UI design isn’t like other areas of graphic design, like illustration, poster design, or other marketing applications. It is testable and knowable. A great amount of care went into prior Mac UIs, and a lot of user testing was done to make the classic Mac and early OS X as good as they were.
I am not aware of Microsoft doing similar work, because they are careless. I believe that attitude has made millions of other people careless. (In Windows 11, the Start Menu includes ads. On my Xbox Series X, half my home screen is filled with ads for Game Pass. At one point, I saw a McDonald’s ad in there. Microsoft wants to show you ads between boss fights. Obviously, this is all in poor taste, but it’s all so careless. Nobody hates their end users more than Microsoft.)
To the degree that the world is getting worse, is it partly because of the billionaires. But it is also because carelessness and apathy have made much of our work redundant and easily replaced with automation. This has affected what we make, how we value each other and our collective humanity, and how we vote and live out our civilian lives in society.
To blame all of society’s woes on the ribbon bar is obviously dramatic, and I’m not trying to suggest causation. But be aware that the tools you make and use will either better humanity or worsen it. A lack of care in our tools reflects a lack of care for one another.
Nothing is neutral.