Houston, do we have a Problem?

2023/03/08 #uiux

It started with a 'toot'

The other day I stumbled upon an interesting criticism about the general direction of Apple‘s icon design in macOS. Specifically, the whole thing centered around the seeming regression of the icon for the macOS system level feature „Mission Control“. The discussion was kicked off by this 'toot':

Honestly, I had forgotten that 'Mission Control' even had an app icon. Even though I am a daily user of this system level feature and have been organizing my work across multiple virtual desktops for many years I toggle it on by sliding the mouse cursor into the lower left corner of my screen (making use of another system level feature: Hot Corners).

After a bit of searching I finally found Mission Control's icon in the most obvious of places: the 'Applications' folder. Sure enough, it was the bland and minimalistic version that was criticized on Mastodon. In principle, I agreed with the criticism. The logo has been reduced excessively over the years in order to fit in with the changed aesthetic of first OS X and then macOS. The current iteration obscures what it is actually meant to symbolize. I couldn‘t help but imagine what my ideal version of this logo would look like and while I am by no means a logo designer I decided to have a go at it.

Some history

Before jumping into Sketch (one of my favorite tools for such projects) I first wanted to do some research to learn more about the history behind the Mission Control logo. This sent me on a bit of a deep dive. I found some information online and went through Steven Hackett's awesome screenshot library over at 512pixels. I learned that the older of the two icons pictured in the Mastodon toot was used until 2014 and premiered in 2011 with OS X 10.7 Lion. However, it was by no means the first iteration. In fact, the feature Mission Control was first introduced in 2003 under the name 'Exposé' in OS X Panther and did not have an app icon at all, only an icon in Preferences. Over the years the icon's design in Preferences kept changing and the feature was then reshuffled with Dashboard and later with Spaces. The rebranding to 'Mission Control' happened in 2011. From the very start the icon always featured three application windows on a rectangular shape symbolizing the desktop (the only exception being OS X Leopard when the feature was batched together with Spaces and the icon for Spaces was chosen to symbolize both features in Preferences).

When looking at the feature's app icons rather than its Preferences icons there have been only four iterations over the years. While they all feature a black background, their level of detail got reduced over the years. The first two iterations featured Preview, Mail and Safari windows including detailed pictures. With the rebranding from Exposé to Mission Control the icon got rid of the blur motion effect and added corresponding app icons centered at the bottom to each of the three windows. The icon then underwent another redesign in 2014 which simplified it to a bunch of colored rectangles and abstracted the three app logos into outlines. This version was used until 2020 when the application windows in the icon were further simplified into grey boxes with colored squares as app logos. Another notable thing is that the app icons all looked identical to their counterparts in Preferences with the notable exception being the most recent iteration which featured a differently shaped black background compared to the Preferences icon. Today, Mission Control does not have a Preference icon anymore as it was removed from the rebranded 'System Settings' with macOS Ventura.

Adding some detail again

With all of that research out of the way it was finally time to tray and design my own version of the icon. My initial thought was to add in a bit more detail back into the logo while at the same time keeping with the overall aesthetic and design language of Ventura. After a bit of trial and error, this was my first result:

While I liked the overall look I quickly discovered that most of the details faded away completely when viewing it at the size of a regular app icon (which is the only way one normally encounters an app icon normally). After a bit of iteration I improved it to be more legible at those small sizes by removing some of the details, increasing the size of the small app icons and changing the Notes window to a Preview window (showing a picture of a sunset as a nod to the old designs):

The icon became a bit more balanced and legible this way but visually it now felt very busy to me. The black space between and behind the windows seemed to disappear more with this design than the prior version. I also wasn't convinced that adding in more detail to the three application windows and app icons was the right approach in the first place.

A different approach

Maybe the problem with the current icon was not the lack of visual detail of the depicted elements but the choice of which elements to depict in the first place? To me, Mission Control was not just about the floating windows sorting themselves magically into place but also the virtual screens shown in the top bar as well as the dock which stays visible at the bottom of the screen. In addition to that, the feature does not even show any app icons at the bottom of the windows anymore in its default setting (and does so since El Capitan!) so why include them here? In summary, I wondered how an equally abstract but more complete and accurate depiction of the feature could look like. This is what I came up with:

I liked this third version the best so far. A comparison with a screenshot of Mission Control in macOS Ventura clearly showed that it is more accurate to how the feature really looks like today. At the same time it stays very legible at small sizes. But I still was not really happy with my approach of sticking to the same old idea and only adapting it slightly.

Totally abstract

Finally, another thought came into my mind: The F3-key on a modern 14' MacBook Pro actually features the symbol for Mission Control but in an extremely reduced form. Why not just take the ongoing simplification of the Mission Control logo straight to its logical conclusion and make it truly abstract? After all, if three different sized boxes is all it takes for the feature to be recognizable on the keyboard, why shouldn't it work on the screen too? This is what I came up with:

Summary

After all of this research, thinking and sketching I am still not sure what to think. I know that I do not like the current official version of the Mission Control icon as it is neither visually beautiful nor accurate to how the feature actually functions now. At the same time, I wouldn't say that I came up with any icon ideas myself that convinced me completely. Maybe a more polished version of the abstract 'F3-key' idea could be the way forward but for now I am not planning to put any more time into this. In the end, this project was a really fun and interesting exercise and a good reminder how difficult conceptualizing a good app icon (and icon design in general) really is.