Yosemite Design Details

After three weeks with Yosemite, here are some of my thoughts.

Whenever we find ourselves at the footstep of any radical redesign, be it with hardware, functionality or an interface, whenever the status quo is tested — so is our patience.

It’s been a few weeks since I first installed the latest version of OS X, Yosemite, on my Retina MacBook Pro. I’ve had some time to adjust to the new UI and really put it through my everyday, and I must say that it has certainly grown on me. It is not without it’s quarks yet it is certain that with time the interface will evolve into a state of maturity. As my design colleague at Wildcard, Khoi wrote:

Spend just a bit of time with it, and you can almost picture the iterations to come.

Yosemite is to the Mac as iOS 7 was to the iPhone. A radical new step, the beginning of an evolution. And as expected with every major redesign, there are sure to be critics on either side of the fence, yet with Yosemite Apple’s intent has never been clearer.

For myself this is the design of a more cohesive dialogue between OS X and iOS — a blending of the two.

Design is in the details

Now I could critique Yosemite’s strengths and weaknesses endlessly, however only a few design details have been bothering me.

For instance take the “beach ball/pinwheel/wait” icon — the little icon that spins while you’re machine hangs. It has been neglect of any revision, a reminder of the OS’s from yesteryear. It seems to me like a piece of UI that could have easily been refined. Especially considering how many UI details were tweaked it’s odd that such a prominent cursor, full of skeumorphism, was left as-is.

Beachball/Pinwheel/wait icon from Yosemite

While in stark contrast the “Busy-but-Clickable” icon (shown below) has been drastically updated. Void of skeumorphism it was clearly worthy of some polish. A simple icon with subtly updated for the modern minimalism of Yosemite.

“Busy-but-Clickable” icon in Mavericks vs. Yosemite (respectively)

As a designer each day we are challenged to think through this level of detail and attention. Wether presented as a UX or UI problem, designing elegant solutions for these acute details shows the passion behind any product. However, naturally we are sure to see some details pushed back due to development constraints, and this is perfectly fine. For part of the advantage of building products truly is learning about engineering constraints and processes — especially during those early days.

Yet I can’t help but wonder why such a well documented icon, like the “beach ball” was left untouched.

Oddly enough, there are many other notable animations that differ greatly in Yosemite. Take the “puff-of-smoke” animation which is trigged when removing an icon from the dock has been simplified greatly (illustrated below)…

Yosemite dock icon removal animation

…and contrast it with the animation which is rendered when removing an item from the sidebar in Finder — another inconsistency and carry over from Mavericks. That same old “puff-of-smoke” animation as shown below.

Yosemite Finder sidebar item removal animation

Unsettled differences like these are sure to be ameliorated in future releases, however, designing uniformly through the use of metaphor, language, animation and so forth is integral to the development of any successful product.

Quite simply, I believe that consistency enables users to quickly orient themselves in a flow through the use of familiarity. While the example above may seem trivial, the variances are quite jarring. Even as a self proclaimed “power-user” who has been working on Yosemite for weeks, I still find myself questioning wether or not the OS completed such tasks successfully. Still, were these animations consistent, I am sure I’d feel much less doubt.

I must say though, that I am indeed very excited about the future of OS X. I can finally see the synergy developing with iOS. The path has never been painted more clearly. With features such as Handoff and Continuity I think we will see app developers producing products that blend the space between mouse and touchscreen.