You must have heard of that: Windows 8 consumer preview is out. And earlier, was the release of Windows phone 7.5. Numerous customers, former Android or Apple designers, policy makers begin to ask themselves what are the best shortcuts to get a relevant knowledge about the “Metro Style”. The purpose of this article is to offer you a quick access of all that has been said about Metro during the last three/four years. Buckle up and let’s go:
A short history :
Once upon a time was Windows Phone 6.5. Even if it was a good OS for mobility, it was not intrinsically designed to operate with touch devices, was branded with the existing “Windows XP look and feel” and was built to look “professional” and “robust”. OK. But in background, a team was working to bring the interfaces to a higher level. Albert Shum (Microsoft, partner UX Director) took the lead of the Windows Phone design studio, with the contract to completely reorganize, redesign, rethink the mobile use and to create new standards for the next decade.
That led to the new look of Windows Media Center which was acclaimed worldwide for its relevance. Later on, Microsoft launched Zune and, once again, that was a milestone in user experience. For the smartest among us, it was a brand new leading way to the future of app design.
Then comes Windows Phone 7:
With the release of Windows Phone 7, we entered in a new era. First of all, we can feel a radical change of paradigm that can be shortened in simple words:
Honesty, simplicity, beauty.
Prior to WP7, the main axes to develop an application was to mix the technical opportunities (We can or cannot develop that) and the business feeds (We can or cannot sell that). Metro adds a new element in the equation with the design cares (I love to use that). And all of the Metro process is centered on that: Make your app easy, and lovable to use. Nothing else.
As an inspiring idea, everyone can feel that an app, even if it sells nothing, can share a great user experience. That’s a good starting point for a commercial app, isn’t it? Another key point is the new storytelling : Microsoft changed the rules and it is up to you to bring your customers in a new journey.
But what is the statement of metro?
Keywords: Urban, modern, efficient
The main goal of metro is to deliver a robust but flexible approach of what is a core-centric design. For example, it is minimalistic because less is more. Content before chrome. To get the important stuff quickly, you need to shorten all you have to say to a condensed and accurate version. When your brain says ”the maximum speed of my car on this portion of the road is limited for my safety to 90 km/hour”, the accurate version says “90” in a circle.
The image that comes to my mind when I speak about Metro is oddly not a subway hall, but an airport corridor. Especially when you are searching for the baggage claim area. You need symbols. You need easy path finding. You need something that speaks to your legs right through your eyes. Icons, images, text.
The font of metro is Helvetica oriented. This means beauty, simplicity, no expiration date. Microsoft has crafted a new font to match the metro purposes in several variations (Light, UI, WP) and especially for UI (Semilight or Semibold). Segoe delivers high potential information. Segoe is flexible. Segoe is highly readable.
Metro is motion. Motion indicates what’s coming next. It leads you to the next screen or indicates what the system expects from you.
Nevertheless, metro is organized. That is to say that your UI should be built on a comfortable but robust layout with a yearning will to make the reading easy. Respect blank spaces, use grid, even for icon placement, and organize your datas to create hierarchy.
And remember, Metro is experience.
Ok. But how to create a nice metro-styled app?
Regarding to the previous paragraphs, you should now have a pretty clear idea of what is the sense of Metro. But how to materialize this into your app? Well, maybe you have heard about the eight traits of Metro? This is a group of eight rules that defines the overall design of all metro styled applications. Respecting these rules is not an insurance to deliver a nice app, but this is a good starting point:
Rule 1 - Metro Style Design: Use all that we have seen before to stay close to the Metro Design. Once again, content before chrome. Use robust layout to improve readability. Leave breathing spaces. Use typography to create a sense of hierarchy. Pan only on a single axis. Keep ergonomics in mind. Create visual alignment by the massive use of the grid. Use hub and spokes to bring the users to the information they need. If there is too much data (like in a picture lists), use a specific pinch gesture to embed a semantic zoom. Show errors inline when possible.
Rule 2 – Fast and fluid: Animations will bring life into your app. That’s OK. But use animation purposely. Avoid the DBGS (death by animated gif syndrom)! Use built-in controls to play your animations for free.
Rule 3 – Snap and scale beautifully: Remember that your app will be seen on several configurations and need to adapt to the user’s material. Think your layout to be adaptable on both portrait and landscape mode and on multiple resolutions. Think twice while taking care of the resolution: Two displays may not have the same pixel/cm² ratio (density). Built a nice snap view in order to dock your app permanently on your desktop and to keep an eye on what you’re interested in as you work on another software.
Rule 4 – Use the right contract: You have a dedicated space in the UI that is named Charms. This particular space is the perfect spot to store the settings or specific tools for your apps, dedicated to specific actions like Share (share specific data with Facebook, twitter…) or Search (find something in your app). But beware! Search is not find. Find is useful to locate a file within your local drives or in the neightbpourough (Internet, and by extension, the Cloud) and Search means to grab a list of items contained in your app.
Rule 5 – Invest in a great tile: The tile is one of the major tricks in Windows 8 or Windows Phone 7.5, because this is the first thing you will notice. It represents the front door of your app and should be nicely designed, to be attractive and lovable. Remember that a tile can be pinned to the main menu. But the tile can also bring its part of information, even before the user gets in the application!
Rule 6 – Feel connected and alive: Nice transition. A big part of the interest of a tile is that it can be a live tile. Another way to tell that your app exposes live data from the Internet or the cloud dynamically directly to the start screen. This provides fresh news, updated notifications, and new topics for your customers. Of course, live tile should not be used for warnings or error messages.
Rule 7 – Roam to the cloud to be always connected and alive and to allow the customer to grab its application preferences from everywhere and from devices to devices.
Rule 8 – Embrace metro principles: Sweat the details, do more with less, purposeful motions, be authentically digital and leverage the ecosystem.
With these eight rules in mind, you are now ready to dive. Let’s add some more details and you will be done with Metro style design.
Details, details and organization.
Let’s get in with some principles first. We saw before that less is often more. That means that you will probably not be able to store all your information on the front page. Fortunately, the screen is no more a limit and you can extend your layout beyond the space limits. But shortly, you will need to add some hierarchy to your app. assuming that your customers land on a hub, you can connect each part to a second level named Spokes. In the spokes, the user can access to the info he needs. This is the primary way to organize your data flow.
Inside the hub or in the spokes, you will need to design a rigid wireframe in order to get the sense of layout. This layout should looks like this:
In order to obtain clusters of squares that will perfectly fit with the iconic look and feel of Metro, you shall turn to a solid color square with a strong contrast colored icon (on a red square, the icon will be white). Use a strong grid for guidance. Avoid everything that may confuse the user. Leave breathing room and, above all, let the content drives your design.
Reduce things to the the minimum. For example, if you have to draw settings in a particular page, use an application bar. That specific tool is a context-oriented control that appears only on demand (a contextual selection of an item, a specific choice …)
Once again, use a clear font (like Segoe), and do not allow too much sizes. Four sizes will be enough in most situations to inspire a clear and straight forward hierarchy. Titles in 42 points, subtitles in 20 points, body font in 11 points and eventually sub-body fonts in 9 pts (be careful if you consider to use an font under 9 points, especially if not a Segoe-type font…).
And once again, be respectful toward the content you want to share : Use high quality pictures, accept nothing under excellence, use appropriate colorsets (avoid blue if you’re talking about cooking…).
The last words
With Windows 8 consumer preview, you can download a massive bunch of apps which have been selected for their relevance, for their content, for their qualities. Have a look at them. See how they work. Find how they speak to your heart. Realize how the Metro style is tangled with the content. Find your own history and find your place in this brand new world!
See you soon on the market place.