Half-Half-Half-Baked: A Critique of Microsoft’s Fluent Design System

October 18, 2017

A Microsoft Logo with Crumbs on It, a Fork and Spoon, and a Caption Reading: Dinner is Served

A Preliminary Note...

Please accept my apologies, reader(s), for this post coming five months after its topic. See the epilogue of this article for the reason why.

During May 2017’s Microsoft Build conference, Microsoft Corporation beckoned forth its latest user interface design scheme: Fluent Design System. In this case, the term “fluent” has no meaning discernible to ordinary people such as you and me. The company claims Fluent has five foundational elements: light, depth, motion, material, and scale. But most of these promises have come half-half-half-baked from the Redmond Oven. In the paragraphs that follow, I’d like to elucidate their half-half-half-baked-ness, for the benefit of non-designers and designers alike.

Encyclopedia Jargonica

Microsoft’s teaser page for Fluent Design contains some proficient illustrations, but language-wise, it bandies about much of the same vague and bloated rhetoric that plagues the design field today. See the following quotes:

A rapid evolution is underway in user interfaces. The spectrum of dimensionality expands from zero to four. We speak, type, ink, touch, and gaze. We’re engaged and immersed. We’re surrounded by devices, interactions, and experiences. To translate across dimensions and contexts, we need to solve for a sensory digital world, and be fluent in our designs.

As technology continues to evolve across dimensions, we’re here to define those captivating moments. Let’s make the future fluent.

Microsoft would do well to impart its thoughts in language that regular, non-designer humans can follow. Does either of the above quotes have a clear message? I think not. Perhaps non-designers would better understand the great significance of design in their everyday lives if designers expressed themselves more coherently. Perhaps then we would have an easier time using the numerous apparatuses with which we all interact on a frequent basis, from coffee pots to computers.

With that general note in mind, let us turn our attention to Microsoft’s foundational elements of Fluent Design.

Light...

Of Microsoft’s five principle elements, “light” makes the most sense:

Light has a way of drawing our attention. It’s warm and inviting; it’s fluid and purposeful. Light creates atmosphere and a sense of place, and it’s a practical tool to illuminate information.

Accompanied by a brief demo film showing a spotlight that follows the “cursor,” this description sounds sensible to me. It has a clear meaning. And it speaks a handful of truths.

But if one is to take advantage of light’s natural properties, why not, so to speak, sprint all the way to the finish line? Why not simulate light sources on buttons? Why not employ (dare I suggest) realistic, skeuomorphic effects? Why not render one’s interfaces with chiaroscuro, an interplay of light and shadow? Microsoft acknowledges light’s unique ability to draw the eye and evoke emotion, but the company refuses to implement these qualities in their interface to any meaningful extent. So they squander the potential of light.

Depth...

With a second soundless knell of the bell, we arrive at the most ironic excerpt of the whole web page:

Think about the frame that contains your information. Now break it apart, and reinvent how things relate to each other within a more layered, physical environment.

Microsoft preaches depth and then presents us with a flat interface stapled together with two animated transitions and served with a sprinkle of suspiciously Apple-like frosted material. If Microsoft actually championed depth as much as they claim they do, they would not shy away from true depth:

Letters D, E, P, T, and H, Receding into a Blurred Background

Microsoft has endorsed a flat interface design aesthetic for years now, but nothing would prevent them from turning their rudder in a different direction. In fact, with their industry clout and their vast trove of resources, they could genuinely change the industry.

Fluent Design System, however, does not offer a good omen.

Motion...

Next, Microsoft introduces its “motion” principle:

Think of motion design like a movie. Seamless transitions keep you focused on the story, and bring experiences to life. We can invite that feeling into our designs, leading people from one task to the next with cinematic ease.

“Cinematic ease” sounds appealing. In fact, it is appealing, and just as Microsoft claims, it guides the eye. Hence, I’ve scattered some animated transitions throughout this site (click the sign-up field at the foot of this page, for instance). Unfortunately for the inner ears of a million fatigued computer users, however, the designers at Microsoft have overdone it: their demo reel depicts a dizzying assault of animated elements, an excess common to today’s interface designs. If you doubt that an interface animation could dizzy someone, consider this reality: Apple, who festooned iOS 7 with fairly intense animations, later added a “Reduce Motion” feature, as if to acknowledge the decadence they had wrought.

Microsoft’s blemish here is not under-indulgence, but over-indulgence. The company proudly flies the same flag as Google and Apple: reduce static visual design to a pitiful puddle and intensify animation until it becomes a whirligig of insanity.

Material...

A-ha! blurts out a hypothetical dimensional-design enthusiast. We are saved: one intrepid company is once again embracing digital allusions to physical materials.

And Microsoft writes a deliciously palpable paragraph:

The things that surround us in the real world are sensory and invigorating. They bend, stretch, bounce, shatter, and glide. Those material qualities translate to digital environments, making people want to reach out and touch our designs.

A sumptuous aroma wafts from the kitchen into the hungry line of noses that lines the dining room table, but when Microsoft’s waiter emerges with his platter and lifts the lid, we see a ramekin containing precisely three bread crumbs.

The only “material” in sight is the Apple-aping, frosted-glass-like material, which Microsoft has dubbed “acrylic.”

Furthermore, acrylic serves no metaphorical purpose for the customer. Ever-handy in my writing toolkit, this Steve Jobs quote explains why a good interface design utilizes metaphor:

People know how to deal with a desktop intuitively. If you walk into an office, there are papers on the desk. The one on the top is the most important. People know how to switch priority. Part of the reason we model our computers on metaphors like the desktop is that we can leverage this experience people already have.

Does Microsoft’s acrylic help us understand how to use the computer? It does not. By skimping on both material and metaphor, Microsoft tragically underutilizes two of a designer’s most valuable tools.

& Scale...

Element number five, scale, offers us so little context that we can barely discern how Microsoft will implement it. First we read this skeleton of a proposal:

The industry lives and breathes 2D design. Now’s the time to expand our toolkit for more dimensions. We’re scaling our design system from 0D to 3D, inviting innovation across new forms. And we’re looking to you to help us imagine this new world.

What does this logorrhea mean? What is this “innovation”? As if to exacerbate the vagueness, their five-second video flicks a few fleeting images cross the screen: a headset-clad man dragging a magical marker through three-dimensional space; then a red-shirted figure making art with Microsoft’s Surface Studio product; then a woman, also headset-clad, guiding a virtual staircase through a brick-lined room.

Clear design betrays clear thinking; unclear design betrays unclear thinking. In presenting its fifth and final principle, Microsoft conveys nebulous feelings, but little else.

(Micro-) Soft Spot

I would contend—and, at this moment, I am, in fact, contending—that Microsoft has a history of implementing its ideas poorly. Windows Mobile existed seven years before Apple’s iPhone, yet it never spellbound the public like the iPhone did. The Windows platform in general has always suffered from lackluster user interface design relative to the Macintosh (although readers with well-endowed limbic systems will recall I have my fair share of qualms about Apple’s recent design direction).

All five of Fluent’s foundational elements—light, depth, motion, material, and scale—are, in theory, useful and vital elements of a successful interface design. In practice, however, Microsoft appears to have over-promised and under-delivered. In the coming months, you can find me crouching in a Redmond driveway with a pair of binoculars, primed for the moment when Fluent Design System finally introduces more than a few crumbs into the open air of a decidedly non-virtual reality, where we can all see it in its “final” form.

Epilogue: Filmic Pursuits

A new project has surprised me this summer, hence my recent silence (although I did refresh the design of my website in May). I’ve begun the requisite screenwriting and building for a full-length stop motion film. The medium is LEGO. The film will feature voice acting from various people who are not me, a decision without precedent in my history as a filmmaker.

I have predecessors in the high-quality LEGO film “genre” (if we insist on calling it a genre): Henri & Edmond, for instance. (I highly recommend watching all three of their adventures.) But I aspire beyond the short-film medium, toward a two-hour feature with creative and technical excellence never before seen in a LEGO film. Look for the result… several years from now.

Older Post Poor Design in Wild Go to Main Blog Page
Join My E-Mail List

Hear from me when I post a new article or have other “big news.”

E-Mail Nicholas
DMCA.com Protection Status