Why Apple has broken some basic design principles in the new macOS release
Two steps forward, one step back.
The latest release of the macOS is coming out this fall in 2020, titled macOS 11 Big Sur, and the new design slated for the release brings in a modern, fresh take to the mac, yet somehow keeping it very familiar. There have been a range of publications that have listed out all the new features in Big Sur, so I will save you the hassle of going through yet another one. In this article, I attempt to condense the design philosophy employed in the revamp, and explain why I believe Apple has broken same very core design principles, which it needs to rectify if they do plan on bringing together their macOS and iOS architecture under one umbrella (more on this speculation later).
Looking at the major design changes coming up in Big Sur the following consistent design principles have been employed for the revamp:
- Increased use of translucency and blurring to create a sense of depth,
- Introducing the squircle for all app icons, bringing the macOS design even closer to their iOS variants,
- And finally introducing a change in icon design perspective for the Mac.
Increased used of Translucency & Blurring
The most evident use of increased translucency and blurring can be seen in the new Control Center design and the changes to the Notification Center. The new Control Center looks remarkably similar to its iOS cousin, where each item appears in tiles laid on a translucent panel. The Notification Center which appears as a sidebar on the right has been integrated with the widget panel, so your widgets will appear from the side along with your notifications. The panel is no longer evident, and all your notifications appear as stacked translucent tiles.
The translucent theme has been applied across the design, with the menu bar and the dock all recipients of the new blurred effect. Toolbars within apps are not only taller, but are now inline with the controls, without being bound by a bezel, the consequences of which are discussed below.
Consequences
The increased use of translucency may have created a fresher macOS feel, but not without its consequences. The increased translucency and removal of the dark grey bezel has removed some of the contrast that was necessary in making controls, text and icons stand out against the largely white panels as evident in the Finder toolbar below. Apple may counter this by asking users with accessibility concerns to use the Dark mode, but this fundamental design flaw is unnecessary and a cardinal sin in design principles.
Introduction of the Squircle
The squircle shape was introduced in iOS 7 to encapsulate all app icons within a small, consistent, repeatable and most importantly realistic shape, one that resembled the iPhone form factor of the day — a rectangle with rounded edges.
Up till now the squircle very much lived in the iOS domain. Icon design for the mac, which always had more real estate to play with, enjoyed greater freedom of expression. This however, resulted in inconsistent design, with icons either being circular; think Safari, Photos, App Store and Time Machine; rectangular; think Calendar, Reminders, Notes and Mail; or they would have no consistent pattern driving the design such as the iLife apps, being iMovie and GarageBand; and also Automator and Keychain.
With Big Sur, Apple has reined in that freedom, and constrained all macOS icons to the dimensions set out within the squircle. One squircle to rule them all, so to speak. The implications of this are profound. The writing is on the wall now — Apple is making a concerted effort to bring the macOS architecture more and more inline with its mobile counterpart. This is done to ensure a consistent experience across the Apple ecosystem. A play straight out of the UX playbook to ensure user experience is consistent and familiar, creating Pavlovian habits, muscle memory and most importantly, building trust with the product.
Consequences
The consequences for these design decisions have however resulted in design “flaws” (oh the sacrilege!). Forcing icons into the constrained dimensions of the squircle have resulted in some interesting outcomes. The icons for the Font Book, Dictionary and Stickies in particular look a lot smaller than the other icons, due to their design having depth to them. Looking at Launch Pad with all the apps lined up, these three icons stick out for their inconsistency, and that’s primarily due to them having depth, making them appear smaller than the others.
Additionally, the icon designs seem to break out of the squircle dimensions inconsistently. For some reason, the little robot in the Automator, the guitar head in GarageBand and the pen in TextEdit seem to stick out of their squircles, but interestingly, the pen in Pages does not. In all these cases, the object in question is lending the icon a sense of depth, by sitting “on top” of the icon, further bolstering the point that Apple is reintroducing skeuomorphism with Big Sur (more on this here).
Change in Icon Design Perspective
With the move towards bringing the Mac design closer to the iOS design, there has been a marked change in Apple’s take on icon design perspective. With macOS 10.15 and below, Apple’s Design Guidelines encouraged icon design to keep perspective in mind and encouraged tilting the icon 9°. It stated:
“In general, an app icon should depict an object as if viewed through an imaginary camera that’s facing the object, positioned just below center, and tilted slightly upward.”
The new macOS design however, had to can this approach if it wanted consistency in the two OS designs. You can’t have tilted squircles… well you can, but who wants to look at those? The Design Guidelines now proselytise a “rounded-rectangle shape, a front-facing perspective, and a consistent drop shadow to provide a unified visual experience.” So we now have free-shape icons replaced with squircles that are standing straight up with no tilt, and the visual perspective changed from a 15° below center to front on, resulting in icon design mimicking those of the iOS. However, not all macOS icons were given the fresh lick of paint they deserved. Apps that are Mac-only such as TextEdit, Xcode and Preview still depict physical objects, staying quite firmly in the skeuomorphic bucket refusing to budge. Its as though some parts of the Mac have made the transition to the fresher, flatter look, but there are still parts that want to stay where they are.
Consequences:
The unequal distribution of design love depending on where the app’s primary home is creates inconsistencies in user experience and creates confusion for designers creating icon designs. If I was working on an app development team and was tasked to update the icon inline with the new macOS release, should I continue with the use of physical objects to mimic real world design? Maybe I should, if its an app that works solely with the Mac. But if there is a pivot to cater for other platforms, should we change the icon knowing full well the Android and Microsoft environments don’t follow the same skeuomorphic approach? What about porting to mobile? A flatter icon is required to account for the smaller real-estate. Different applications have taken different approaches for this. Applications that are cross-platform like Evernote and Skype have created a flat icon, regardless of the environment you access them in, be it iOS, macOS, Android, or Microsoft. Whereas Ulysses the Mac and iPhone only word processor has two different icons for the different platforms. Clearly as in the case of Ulysses, the muddled design guidelines between the platforms set out by Apple have influenced their design approach and created the same inconsistencies that Apple has in their native applications.
Final Word
Granted some of the icon designs are downright ugly, (have you seen the Quicktime icon?), Big Sur is a step in further collating the macOS design with that of its handheld counterparts. With the Mac Catalyst bringing in iPad apps to the Mac, and the revamped Messages app in Mac, its only a matter of time when the OS design for all the products would look exactly identical. This is only a good thing as it solves some of the inconsistencies in design guidelines stated above. However, going forward the guidelines need further work to ensure a homogenous design palette.
Overall, with Big Sur, Apple has taken two steps forward but one step back with its design revamp. There are some clear inconsistencies in design protocols and potential accessibility concerns need to be accounted for before the big move to marry the two operating systems.
If you liked this article, you’ll love my other piece published on UX Planet:
