2

One of the most important principles in Microsoft Design Guidelines is: put content before chrome.

What does chrome refer to? Just like action items?

  • I believe it's referring to the visual 'wrapper' of the content. Loosely translated: "Function over form." – Simwill Feb 11 '15 at 23:23
10

Per Nielsen Norman:

Chrome is the visual design elements that give users information about or commands to operate on the screen's content (as opposed to being part of that content). These design elements are provided by the underlying system — whether it be an operating system, a website, or an application — and surround the user's data.

What this means in practice

An example would be: If a user is looking at a table of photos, and they want to move a photo from the bottom row to the top row, they can simply click, hold, and drag that photo to where they want it, instead of having to click a button that says "move this photo". That is putting "content before chrome", because you are not cluttering the screen up with extra commands like "move this photo"-- the user is simply interacting directly with the content.

Here's another great article by Luke Wroblewski to reference about putting "content first": http://www.lukew.com/ff/entry.asp?1598

1

In the guideline they define chrome

Do more with less

This principle limits your app to its core functions and no more. Think content, not chrome. Content takes many forms: pictures, emails, news articles, and so on. Remove chrome to leave only the most relevant elements on-screen. And, make navigation elements from the content itself where you can. Let clean, immersive experiences rule. Every element on the screen must have value and a clear purpose.

This principle doesn't mean that you should sacrifice intuition. A design is successful if navigation elements guide the user to discover how to interact with the app. Great design balances intuition with reduction and yields a clean, beautiful final product.

Content, not chrome

Let the user interact directly with content. By removing the chrome and taking advantage of font, scale, and color, content surfaces more easily. In this example, names and titles are easier to read.

Microsoft design principles

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.