Beep boop - this is a robot. A new show has been posted to TWiT…
What are your thoughts about today’s show? We’d love to hear from you!
Going to all round(/squircle)-rect Mac OS icons is a mistake that violates one of the best readability principles in design: outline. Cartoonists know this: a distinctive silhouette is one of the strongest ways of establishing unique character. Jony Ive’s design sweep for iOS 7 made 2 categorical errors, IMO: remove color, minimize shape. Part of that latter was to erase unique profiles, and while I can countenance quibbling that on the tiny screens of the time it was the right call, it is absolutely the wrong call now, even on mobile sized screens now that they, too, are retina and so colorful. Mac OS 11’s design debut has done little to rectify either of these, and considerably muddied the waters in many respects besides.
Two more dimensions to this: removal of unique lighting, and of unique materials. When everything is a color ramp, nothing stands out as uniquely dimensional. Ive would have that as a strength, and so it is, of graphic design, but it is a hobbling of usability design. OS X’s sometimes hokey skeuomorphism did go too far in instances like Game Center and iBooks, but the craftsmanship in allegorical or, shall we say, analog (the root, analogy) icon design was a master-class in communication for how to present a memorable emblem of an app’s function and purpose. Doing so using unique lighting, objects, and textures may have offended Ive’s unsparing modernist minimalism, but it did so in service to readability, memorability, and I would even argue delight.
It’s also a horrendous waste of space to give every icon its proper margin both within and around the round-rect. The rounding, as well, is much too large:
Your brain naturally wants harmony with the dimensions of the full chicklet, yet the corners overtake the core, as shown hilighted in red at the center (abbreviated in my mock-up to just the “up” direction). Also, that overlap, if I gauge correctly, is roughly 1/3rd of the center “diamond” the outer corner circles form, creating conflict between resonating at quarters versus thirds. I think that’s why people hate the look so much (I’m seeing lots of takes against it, e.g. MKBHD).
If you’re going to insist on a chicklet, I recommend golden ratio, instead:
(Please forgive the sloppiness but I’m working quick-and-dirty in whole numbers for pixels and for rotation, whereas my formula for establishing the composition requires sub-pixels/fractions.)
I prefer natural maths such as a watery vortex (which is both a pivot transform and path curve) to squircles, but lack the means to deploy them for the purposes of this post.
Preserving the squircle corners as the lesser component of the golden ratio, the greater component is made the “center” of the bounding square. This emphasizes the content, whereas the OS 11 debut’s chicklet feels like it subsumes or isolates its content rather than showcasing it, again placing dimension of design ahead of user experience. Another problem is the central of the 3 inner “gutter” tracks (again, it’s what I hilighted in red on that mock-up for the “up” direction) is collapsed upon by claiming it from both sides instead of giving it breathing room to exist in its own right, much less establish itself as a key compositional component.
One of the beauties of phi (a nickname for the golden ratio) is just by virtue of its infinite self-similar scaling, the squircles suddenly feel appropriately sized (at least, to my eye).
From squircle to bounder was 1 phi step up, then from that to the central circle which meets all the squircles was by adding 1 phi step down from there. Amazing synergy. I scaled down the phi bars along the top (blue and orange) to fit the central circle just to show you that the result still conforms to phi. The content “safe zone” I just tacked on another squircle’s worth in total (half to each side, shown in light green), a square from which curiously seems to meet exactly the squircles’ inward cuvature (distinct from the exactly round guide circles I’ve stenciled in, of which it’s just shy). The purple is between the original phi step up and the squircle’s corner concentric sizings, which I adopted as the minimum margin. The innermost circle is philodygmn of the squircle. The next circle is from treating the central squircle at its native scale and proportion, extending a phi step up outward rather than inward (the 2nd row, under the central line of metrics, extending off to the left), the opposite of the beginning of my derivation for this rubric; the resultant size meets the top of that original phi-up circle. Hopefully the circles beyond that are made clear enough by my placement of their metrics by color: effectively 1st we have 1 and then 1&1/2 squircles from the center-point added to a 1st-step phi-up. These serve as inter-icon margin and inter-row margin, respectively.
Interestingly enough, the pen is already at a golden angle: phi^-5 which applied to 360 yields 32.46… (though, as I mentioned, working quick-and-dirty I can’t match its angle exactly since I can only go by whole numbers in Pixelmator sigh).
I can appreciate the idea that the central 3rd of the OS 11 debut design’s overlapped portion could represent our “inner” dimension as users within our own bodies reflecting the screen back into us, relating to the icons as touchscreen-first, but that generates cognitive dissonance when we’re being asked to interact abstractly with these symbols that change by, rather than reinforce the tactility of, our touch, and in any case would then resonate with dynamic alone rather than synergizing with embodiment and enriching the embodied experience through interaction. Hemming in a 3rd by 4ths is a stultifying, oppressive rubric. The task is to craft iconography which coheres to phi in and of itself to achieve a dynamic holarchy unencumbered by brutish explicit impositions upon the user/interface, be that by breach of fidelity to phi or, worse, artifact dedicated not to the use but to the sequestration of proportion, a betrayal of usability.
—> 
Now the pen is able to pose orthogonally toward the upper-right while leaving room for the double-quotes, whereas in the debut version, because the pen is scrunched in so far by the large curved corner, the quotes are given an impossible task of not crowding the pen while not unbalancing the composition.
Here it is in context with adjusted placement and sizing for the Dock (even the permanent/recents divider) and icons (I didn’t fully reconstitute their details by phi, but did resize their existing elements to my guides):
(Again, please forgive the whole-pixel sloppiness where sub-pixel precision is demanded, especially noticeable for the Dock divider.)
Between icons is a circle formed by extending a phi up from the central squircle then tacking on an extra squircle (half to a side) overlapped so each circle meets the side of the adjacent chicklets. The bottom margin is a circle tacking on another extra squircle but because of how the chicklets are squared-off, that creates a different amount of distance from their bottom edge: the result is there’s more margin to the Dock than beneath it, which I think is appropriate since it’s dead space down there anyway so waste as little as possible, and the icons’ touch-targets (if on touchscreen, since Craig said the goal is 1 UI to rule them all (Apple’s platforms, at least)) are plenty big for fingers to easily register presses without fumbling into the edge/bottom of the screen.
The story so far that we’re seeing emerge is of Apple’s lobotomized take on mobile computing cutting users off at the knees slowly give way to reinstatement of what ought to have always been user empowerment basics of controlling the OS and apps, not the other way around. Let icon design be another aspect of this, but I’d really rather skip the protracted travail and dispense entirely with chicklets, already. Chicklets are the modal dialogues of icon design. Between the rock of grandma who just wants email and the hard place of of *NIX 7-finger chord, REGEX priesthood Apple has allowed us to be dashed by a tsunami of misplaced and ill-conceived millenial^ blue-sky fantasies of a new dawn in computing on the pretense of inadequate hardware just because we could carry it around and use it with no special tools, and expected us to be grateful for the privilege since of course we’re supposed to be privileged enough to scurry back to the safety of Mac OS (a machine for which it’s just assumed we can avail ourselves) when iOS and its overwheening bent on usurping user control in the name of ostensible simplicity, to say nothing of erstwhile dereliction’s amplification by bugs in what little there is, lets us down. NO MORE!
I will say that eschewing the more baroque details in several instances is for the better, but almost always a net negative for the abovementioned factors.
Consider these 2 superficially similar re-designs:
—>
and
—> 
While I appreciate removing the superfluous page layout details, especially the inscrutable text which is nothing but visual noise, and acknowledge that the “chicklet” round-rect affords a ready-made canvas for a page paper’s background, and that the chicklet forms a context to relate disparate elements like the abstract double-quote mark to the bumble-bee colored pen, the pens themselves are designed distinctively enough to identify a specific app, and the visual of a page at an angle which OS X used to denote “document creation/editing” does a better job of explaining the app’s function in a context of a broad variety of other apps, whereas the relentless abstraction of OS 11’s debut affords less latitude to carve out conventions by which users may limn inference. Nothing’s to stop the double-quote from occupying the upper-left corner of a diagonal blank page and leaving it at that, beyond the pen. Why not give them voluptuous volume as Aqua candy objects? No need for a back-drop or extraneous bounding border when they’re their own objects instead of disembodied, 2D-graphic, nauseatingly minimalist abstractions!
Yes, the grey pen’s accompanying binder-paper line guides are less prominent when on a page rather than forming the background, and yes the page may force scale to be reduced for them to be recognizeable as such, but the trade-off in an ecosystem of apps is too great, IMO, in claiming them for this app plenarily, devoid of yoking to a scoping convention like OS X’s “editable page”. Same for the double-quote: other than their scale, generic style, and color, they contribute nothing of discernable identity to the icon as would distinguish the bumble-bee pen beyond its bumble-bee design elements, and is therefore superfluous within a context of disparate apps, an over-reach through excessive genericization.
Is there a reason the grey pen exceeds the chicklet and the bumble-bee one doesn’t? Just visual symmetry within the chicklet for the double-quote? I think it ought to signify something consistent about the apps to the user, given the importance placed on the chicklet as a design element in the OS 11 design debut.
—> 
—> 
The current iChat to Messages is an improvement in again stripping away superfluous, distracting design elements, but it had already suffered from iOS’ drab gradient homogeneity: the original OS Aqua bubble design made the simple fact of its volume a sumptuous visual feast! The bubble itself was the icon, and that is what generated a drop-shadow, like it was a real object embodying the app (sadly even then the drop-shadow was a 2D cut-out of the bubble, not a true volumetric reflection of the bubble’s form and affect upon the light striking the backdrop). It gives us subtle specular hilight details across its surface, and gorgeous collection of light in its lower portion corresponding to where the light would be judging by the specularity on it, uplifting the senses in what would normally be the darkest part of the object, and a big reason Aqua’s “candy” aesthetic was so delightful. OS 11’s boring, scarcely even volumetric drop-shadow and bland opaque white bubble generate an irritating uncanny-valley type of effect where it’s trying to hide 3D within 2D, inviting our brains to ascribe volume to it while smothering any of its rewards lest it fail the 2D test Ive imposed. Its bottom portion does receive some radiosity green off the chicklet, but its shaded portions still create visual redundance with the drop-shadow and a muddy impression, further disharmonized by the green radiosity having to reach it from past the drop-shadow bounced against the chicklet again reinforcing the dark volumetric edge of the bubble beyond our sight as it wraps beneath the 2D edge we’re given causing cognitive dissonance and failing to reward the investment of attention for the viewer! It’s irritating me just to look at it enough to articulate this!
Overall, I think it’s pretty clear that iOS has been nothing but a detriment to usability in absolute terms, design being no exception. This is not to quibble over whether or not the severe limitations of early mobile devices justified it or not, it’s to disabuse anachronistic design thinking, and most especially to countermand the sophomoric notion that just because usability principles have been around longer than mobile computing that therefore anything usability-centric is the true anachronism!
P. S. The overhaul introducing more translucency is welcome but I haven’t seen enough to render an articulate opinion. I always wanted that in Aqua.
P.P.S. You may wonder what becomes of translucent elements without a background from the chicklet: this is why I advocate for fully 3D, fully realized rendering for the interface, including 2D effects like blend mode and/or 3D effects like dynamic specularity. Maybe the Photos icon’s color chits are both translucent and have some iridescence which picks up some of the windows around/behind them. Maybe they go smokey while in Dark Mode.
^ Nothing against “millennial_s_”, I used the term “millenial” purely to refer to the calendar time-frame implicating the 1st major interface design trend to emerge after the dawn of the new millenium circa 2005 with “Web 2.0” sites like Twitter and Tumblr, the design aesthetic from which infected iOS and has now metastasized to the Mac, ruining its best with its worst even if not quite completely obliterating it.
2 Likes
This is clear now. Apple is morphing iPad OS into MacOS and simultaneously morphing MacOS into iPad OS.
Now they will have Apple ARM chips in the Macs, which is the hardware required to make that final transition happen.
2 or 3 years from now, we are going to look up and see a Mac with a touch screen, however, it will not be yo Daddy’s Mac, it will be iPadOS with a keyboard, in a Mac body.
Just a matter of time.
1 Like
Yup: when they say the Mac and iPad are separate and going to remain that way, what they leave unsaid is that there’s going to be a 3rd thing that supplants both and they regard resemblances to each as incidental.
1 Like
Can’t wait to buy my new 16" A15X Powered MBPro with shitloads of MIPS and 18 hour battery life!!!
2 Likes
If that means I’ll be able use full versions of all my Adobe apps with all the peripheral hardware I use, and if I’ll be drawing on the screen with my Apple Pencil (or a future version of it), I’m all for it. Ever since I saw @Leo’s Surface Studio (or that competing model he got later on) I’ve wanted that - a huge screen I can draw on in an intuitive way - but with an Apple OS.
1 Like
I know there were big sweeping changes, but my favorite is the sleep tracker on the watch. I’ve been really wanting another watch after my version 1 died a couple of years ago, and this was the feature I was hoping for. I’m pretty excited about the hand washing too! So tired of singing happy birthday to myself.