Windows 8.1 design principles hand developers back their sanity

When the computer mouse was new, it was simple to use but unfamiliar to users. As a result, user manuals could not say “click the red X”. Instead, they had to say, “move the mouse on your desk to control the pointer on your screen”. The idea of the mouse was new – the conversation had to start several steps back. After the mouse was successfully socialized and established as an input modality, user manuals could confidently say “click the red X”.

When Windows 8.0 was new, design principles were simple and few but unfamiliar to designers and developers. As a result, design principles could not be adequately communicated without the use of pedantic design guidelines, explicit margin pixels, and font sizes. These were to help coach new apps toward the design principles. They did so. However, like the computer mouse, designers and developers can now understand the design principles without explicit guidelines – in part, thanks to excellent, reference Store apps and a history of applied guidelines.

And, therein lies the rub

Fraking left-brained engineers (like me) were never really looking for principles. We had never had them before. We were looking for specifications. Design principles were uncomfortable and ethereal while the guidelines were comfortable, precise, and specific.

Soon, and inaccurately, some designers (and every developer) perceived the guidelines as the principles. Navigation models they could understand. Margin pixels and font sizes they could understand. Apps without an 80 pixel gutter or not using Segoe UI fonts were labeled as “not metro” and, sometimes, even rejected by our own Store certification team as incompliant with the design principles. Those were early, painful days.

Most simply failed to grasp this one Windows design truth:
the principles matter, the guidelines do not.

The Windows 8.0 Design Principles

Do you even know the Windows design principles? These are the most important drivers to the Windows ecosystem. For Windows 8.0 there were five design principles. Principles used to safeguard user experience. Principles used to shore up ecosystem continuity. And, principles used to validate the forthcoming guidelines. They were:

Pride in craftsmanship: Focus your energy on the small stuff that people see. Engineer the experience to be complete and polished at every stage.
Be fast and fluid: Give people the tools they need to work more efficiently.
Authentically digital: Take full advantage of the digital medium to create efficient and effortless experiences.
Do more with less: Design and plan with a purpose. Make the experience great at one thing, not mediocre at many things.
Win as one: Bring the parts together…other apps, devices, and the system…and let people use what they already know to make one great experience.

The Windows 8.1 Design Principles

Before we go too far, let me point out the Windows 8.1 design principles. And to be 100% clear, let me say it plainly: the Windows 8.1 design principles are exactly the sample as the Windows 8.0 design principles. There has been no change, no tweak, no undoing. They are:

Pride in craftsmanship: Focus your energy on the small stuff that people see. Engineer the experience to be complete and polished at every stage.
Be fast and fluid: Give people the tools they need to work more efficiently.
Authentically digital: Take full advantage of the digital medium to create efficient and effortless experiences.
Do more with less: Design and plan with a purpose. Make the experience great at one thing, not mediocre at many things.
Win as one: Bring the parts together…other apps, devices, and the system…and let people use what they already know to make one great experience.

I like pointing this out because there is a murmuring in the developer community that somehow Windows 8.1 says to forget about all that design stuff in Windows 8.0. <grin /> You can’t believe every title you read. You have to dig a little deeper. And, that’s what this article is doing for you. I hope.

Enter Visual Studio Templates

To help early developers apply the Windows design principles, Microsoft developed a series of Visual Studio templates demonstrating what the principles could look like in a sample app. With Visual Studio 2012 the Blank Template gave developers the fundamentals for an app, but the Grid and Split app templates gave them pixel-perfect sample apps complying with the design principles.

Those early templates did a terrible job implementing model-view-view-model, did a terrible job demonstrating navigation parameters, and did a terrible job handling suspension management and contracts. I am still un-teaching those templates. However, they did an excellent job of demonstrating the Windows design principles in real, functional sample apps that developers could reference when creating their own apps. They visualized the Windows design principles.

What could possible go wrong?

It turns out, that if you give a moose a muffin, you’ve pretty much lost your whole day. Equally predictable, if you give a developer a template, you’ll get an app Store filled with thousands of identical apps.

Like a cookie factory, app developers created apps unique in operation, tremendous in value, but indistinctively homogeneous in presentation. And why not? Voluminous, MSDN-hosted guidelines loosely based on the Visual Studio templates espoused the font families, gutter margins, and even the data structure that could be considered a Windows Store app. The message was pretty clear: your app needed to match the templates. Oops.

Amplifying the message

Microsoft is unlike any other company, technology, or ecosystem – in this way: Microsoft wages a troika of deafening advocacy through DPE, PFE, and MVPs – and I love that those acronyms rhyme.

DPE is Developer and Platform Evangelism; it is where I sit, and we are a developer’s best friend, bringing training, resources, and support to broad audiences.
PFE is Professional Field Engineers who are a small army of hands-on technical experts who work with developers in short, focused bursts to get them over technical roadblocks.
MVP is Most Value Professionals, a subculture of independent developers, speakers, and writers who, in part, have aligned their careers to Microsoft technologies.

When synchronized, like Voltron himself, these three disseminate the Microsoft vision and message in a crystal clear corporate cacophony across the entire landscape of existing and potential platform developers. It’s beautiful, powerful, and awesome.

But what were we saying? In an effort to disambiguate what was implied by the Visual Studio templates, we were enumerating the MSDN guidelines to thousands of developers, only nodding to the Windows design principles. We were treating the over-emphasized guidelines as gospel. And, we did so with mass-marketed authority. (that’s me in that Stack Overflow ad [right])

As a result, apps were getting built. Not one, not two, but thousands. Apps complying with the Windows design guidelines. Apps bringing real value to the Windows platform. But apps doing little to expand on Windows design vision. Apps doing little to branch out and test the tempting waters of unexplored user experience and design.

New in Windows 8.1

Enter Windows 8.1. One clear message being stapled to the 8.1 portfolio is “principles not guidelines”. We still realize that developers need specifics to get their job done. Their left-brains need rules. Relax. The guidelines aren’t getting deleted – we’re even updating them. But, the message is shifting from “your app needs an 80 pixel bottom gutter” to “your app should not crowd the bottom gutter unless your app needs to crowd the bottom gutter”. Do you see it? It’s subtle. It’s important.

Like a manual that simply reads “Click the red X” and never mentions which mouse button you should be clicking, Windows 8.1 is resting on the bricks laid by Windows 8.0. There’s a great collection of “Idea Book” apps that developers can reference. There’s a great collection of “Design Inspiration” apps that developers can reference. There are awesome apps in the Store that developers can reference. And, there’s even the Visual Studio templates.

What’s the new message?

Those Visual Studio templates are legit. If you write a Windows Store app that models them, you will be writing a fine Windows Store app. However, no Windows Store app needs to follow those templates or a single MSDN guideline. Wow! That being said, all apps need follow the Windows design principles – a simple requirement that isn’t as simple as it might initially appear.

There’s one more thing

I still believe in the guidelines. I’m not being contradictory. I’m being practical. Once you have looked over the Idea Books and the Design Inspirations, once you have browsed the top apps in the Store, and once you have made design plans for your own app – the guidelines are still there. And my advice will always be this:

You can “break” any guideline. It’s your app. But, if you don’t have a good reason to break the guidelines, it likely makes sense to follow them.

Is that over-cautious? I do not think so. I still believe that visual alignment with the ecosystem is a benefit to the user and a benefit to your app. The guidelines certainly drive visual alignment (making apps look similar). This is not bad. Not at all. So far as you don’t see it as a prison.

Conclusion

I know I have already said it, but let me repeat. From Windows 8.0 to Windows 8.1, nothing around the Windows design principles has changed. Not the wording, not the order, not a single letter.

Conversely, Windows 8.1 guidelines have changed – like Search and vertical scrolling – but something else has changed, too. The draconian age of using the MSDN guidelines to deem apps “worthy” (or unworthy) of the Windows store has ended. Every app still needs to satisfy WACK and the Store certification process – that will never change. But, starting now, how you design your app is up to you.

Unlimited freedom is a kind of unlimited power. And, with great power comes great responsibility. Where Windows 8.0 guidelines tried to corral a new catalog of apps into a visually consistent ecosystem, Windows 8.1 guidelines are only here to help – it’s not the judiciary of quality. So much has changed in Windows 8.1, but I hope you see that design hasn’t changed a single pixel. Updated guidelines, yes. New features, yes. More sanity, let’s hope so.

Best of luck.