Are the new Office icons usable?

Let’s focus on legibility, accessibility, and consistency instead of emotions for the app icon designs, shall we?

I have been designing app icons for decades. The new Office icons look lovely like delicate eye candies —deliciously edible — but they seem to leave a bitter taste for its intended purposes, even in the examples shown in the article: To be instantly recognizable at various sizes, especially at very small sizes.

If you were colorblind, can you tell between Excel, Word, and OneNote as easily as Photos and Calendar?

In the article posted by the Office team, the icon designs were laid out pristinely like museum pieces mostly on blank sheets of paper without context. The video described the designers’ perspective: These icons are their months of hard work and their baby, and I appreciate the efforts, but no users except the designers themselves will experience them in such way.

The Basics of App Icon Design

There are really only 4 places where these icons will be displayed, and none of them will show the icon being blown up in a majestic 4K video:

1. Launchers (i.e. Start screen in Windows, Launchpad in macOS, Home screens in iOS and Android, and the menu in Office online): These icons are traditionally sized at 48x48 dp, or at around 1.2cm x 1.2cm from a 50cm reading distance.
2. Task switchers (i.e. Taskbar in Windows, the Dock in macOS, task switcher in iOS and Android): These icons are usually even smaller at 16x16 dp, i.e. a third of the size of the ones used in Launchers, with the exception of the macOS dock which may blow the icon up to 512x512 dp.
3. Window identifiers (i.e. Title bar icon in older versions of Windows, Favicon on the tabs and favorites bar in web browsers): Again, since title area are usually very compact, 16x16 dp icons are used.
4. Marketing materials (i.e. Microsoft Office’s website): These are the places where very large icons may be used. However, looking at the usual Microsoft marketing videos and web sites, the icons will usually be overlaid on photographic backgrounds.

Let’s see if these new icons are usable?

I resized the example of the ‘progression’ of icons from 1995 to today, down to its smallest size to check their legibility:

Which icon do you read the most easily?

At very small sizes, in which the icons will be most often used, the oldest icon, ironically, is the most legible, followed by the 2010 and 2013 versions. The newest version unfortunately failed miserably, partially because of the, in my opinion, ill-informed design-speak decision of prioritizing “emotions” over the very basics of logo design, i.e. legibility, recognizability, and the gestalt, which leads to the downsizing of the most recognizable alphabets over the superfluous garnishes.

Let’s be real — no users really need to be emotionally provoked by the icons. They have friends and family for that. I mean, this isn’t a TED talk, c’mon.

In the small sizes where they are usually used, the newest icons are reduced into blobs of colors. The solution is probably to draw a different set of small icons for this purpose, which means these shiny bigger icons will rarely see the light of day.

And while colors can help differentiate products, they are not dependable for such purpose. Let’s not forget about accessibility, shall we?

If a user has tritanopia, only PowerPoint stands out.

Due to the vast amount of products that uses blue — the color most commonly associated with Microsoft, despite the new logo has five colors — the icons are virtually indistinguishable from each other.

To make problems worse, the shape of the icons are also less distinguishable than previous versions: Outlook, Word and Excel, the three most used apps in the Office suite, are all visible as one big bluish rectangle. SharePoint, Teams, and Yammer fared better due to their distinct shapes, but they are arguably less used and known apps in the suite.

A History of Inconsistency

Beside legibility, though they look nice standalone, these new icon designs do not blend well with its contexts either.

What’s up with the weird cut-out of the Surface Studio btw?

For example, the background colors are inconsistent with their context. In iOS, the backgrounds of these new Office icons are white, while in Windows, the backgrounds are different for each product.

This is the exact opposite of the design of the native icons: In iOS, the design of the native apps all tend to have different background colors. In Windows, the backgrounds are usually the accent color of the user’s choosing. In fact, transparent background is often a top request from user feedback, and here once again, the Office design team ignored it.

The screenshot also gives us a glimpse of what the new default Windows apps would look like as well. They have flat colors of various shades that seem to adhere to the user’s accent colors, but they don’t have the gradient shades of the Office icons.

These designs seem to continue the two-decade trend that the Office and Windows teams can’t seem to communicate well on a single design standard.

Microsoft has been notorious for this: While Windows 95 had a new taskbar, Office 97 added its own launcher bar that was a memory hog. While Windows XP had a new “Luna” window theme with a green Start button at the bottom-left made by Frog Design, Office 2007 had its own version of shiny window chrome with a pearlescent Office button on the top-left. Office 2007 introduced the ribbon, and Windows 8 followed by adding the ribbon also to File Explorer to look like 2007’s, but then subsequently Office changed the appearance of the ribbon again.

As a result, Windows had been a mish-mash of UI experiments (me guilty as charged, btw 😜), not because of third-party apps, but because of Microsoft’ own inconsistency and lack of design guidance itself. The same would not happen on macOS, iOS, or Android: Users and tech pundits would revolt if the apps don’t adhere to their design guidelines.

That changed, thankfully, with the introduction of the Metro design system, and subsequently, the Fluent design system. Those are great guidelines, though the former is more specific in terms of typography, proportions, and symbols.

For a while we finally have some sort of consistency from Microsoft Design. Microsoft even hired the world-renown design firm Pentagram to update the Windows logo six years ago. It has used the new and beautiful Segoe UI font throughout its entire product line. Since then, the same flat design ethos had been applied to Visual Studio, Bing, Office, and even its own logo, and influenced even iOS and Android to update their design languages to a flatter design.

“The new logo reflects the sleek, modern ‘Metro’ design language… based on the design principles of the Swiss International Style, with clean lines, shapes and typography and bold, flat colors.” — Pentagram

However, while Apple and Google transitioned quite quickly and comprehensively to flat design, Windows 10 had been out for a little more than three years, but its design and engineering team is still struggling to transition all of its legacy UI to the latest Fluent Design System. There’s a ton of legacy code to be rewritten, but at least the language is consistent.

While not explicitly stated on the icon guidelines, it seems that the consensus for these toolbar icons is to use line-art style flat designs, as evidenced by the latest Office toolbar icons that are even flatter than the previous versions.

Meanwhile, the design for app icons seem unclear, and perhaps it’s in an internal document for its own branding guidelines that I don’t know about, but it seems like they are all heading to a Escher-esque 3-D yet flat design filled with a ton dropped shadows.

The icons for Visual Studio 2017 vs Visual Studio 2019.

In my opinion, it’s a shame that they are moving away from flat design, however, these new icons help gear the company up for a Mixed Reality future. A 3-D icon might even be a possibility in the next Start screen. For now, let’s hope that they are continuing the trend of design consistency.