Windows 8: Designing the Metro Experience
This arrow indicates links to relevant sections of Microsoft's Windows 8 documentation.
First, if you haven’t already, go take a look at the wealth of resources provided by Microsoft. In addition to the promotional Windows site [›] which is tailored to consumers, the Windows Dev Center [›] has done a great job creating and collecting a rich set of guidelines and tools for designers and developers, from principles and case studies to detailed UI specifications and assets. This is the sort of documentation we love to see in a new platform (and what was so notably absent from early Android releases), because this information has the power to inspire and enable others to adopt a new platform, and expand upon what’s already been created.
Microsoft design style and experience principles
Sample application types and porting walkthroughs
Microsoft design style and experience principles
Source files for UI templates and components
Examples of stock Windows animations and transitions
Detailed walkthrough for developing Windows 8 apps
Punchcut Insights & Considerations
In addition to the materials Microsoft has provided, we’ve collected a set of our own design insights and considerations drawn from our work designing for the new platform. For manufacturers seeking to put their stamp on the new Windows, and brands looking to bring their unique experiences to the OS, we hope these insights from our experience will help guide your efforts.
1. Port from web or Android
At this point, we all know iOS and Android pretty well. We know their similarities and their differences and we know what it means to translate experiences between them. Windows, on the other hand, is brand new, and Windows is different. If iOS and Android are like apples and oranges, then Windows is bananas (B-A-N-A-N-A-S).
It’s not very much like iOS at all, and it’s only partially like Android. Its lack of metaphor, flat space, shallow hierarchy, primary landscape orientation, and global charm functions all set it apart. If anything, it’s a bit like the web, with its long scrolling pages, its focus on content consumption, and its scalable grid-based layouts.
So as you look to bring your experience to Windows, audit your existing touch points and consider porting from web experiences first, and secondarily, from Android experiences. Android’s modern visual language, and top and bottom action bar elements offer some common ground, while iOS may be the most difficult transition. Of course, iOS to Windows will be a very common transitional approach, and is certainly achievable as well given the appropriate design thinking.
2. Build to scale
Windows is a fluid platform, designed to shape itself to its container. Its cross-device nature means supporting tablet, laptop and desktop screen resolutions and aspects [›]. The Microsoft documentation calls out at least 13 different screen resolutions which Windows apps must support and that number will only continue to grow. As Windows matures alongside Windows Phone and Xbox, we can expect greater integration between smartphone and TV layouts as well.
While many of Microsoft's own apps (e.g. App Store, Xbox Music, ) don't switch between landscape and portrait orientations, it's our strong opinion that if Windows 8 devices are going to be used as tablets, they must. The primary 16:9 aspect ratio of Windows means those orientations are drastically different — either very wide or very tall. Finally, the new two-pane multitasking layouts in Windows 8 require not only full screen, but snap and fill views [›] too.
All this variability means Windows designs must be inherently flexible. To that end, the best approach is similar to responsive web web design. Think about how media queries can be used to identify views and resolutions in order to serve up the right CSS to style and position elements appropriately. Then approach your design with a similar strategy, whether developing in HTML and CSS or in C++.
Windows 8 automatically scales elements to adjust for varying pixel densities [›], but this does rely on either vector-based or programmatically drawn resources, or multiple versions of pixel-based image assets. Also, be sure to use 5px increments for text and image sizing to achieve the best scaling results with the Windows 8 grid and pixel density scaling percentages.
3. Embrace platform patterns
In any platform, but especially a young one, standard global patterns and components are the native language in which users become fluent. New users will benefit from a greater degree of continuity in experiences across applications as they try to find their legs in a new system. Adopt native gesture and keyboard [›] interaction patterns, and utilize native components like the app bars, menus and notifications.
Participate in global functions like search, sharing, files and camera, and connect to devices and printers. Charms and contracts [›] are the connecting threads between your app and all other apps on the system.
4. Teach global functions too
The interconnected nature of the Windows ecosystem means your brand experience extends beyond the strict edges of your app, deeper into the global functions of the platform. When designing first use experiences, educate users about your application as well as the platform patterns in which you participate. This will help users better understand the system and show them the breadth of your offering.
5. Boil down your brand
Windows 8’s emphasis on reductionism, and it’s own prominent visual style mean that your brand must be diligent about its opportunities for expression. The branding guidelines establish a set of visual elements [›] to be manipulated including color, photography, graphics, typography, logo, grid and layout.
In the near-term, there is value in aligning with the native visual style. Early adopters will be initially satisfied with native component styles as in the early days of iOS. The degree of variation will grow with the platform and broader branding opportunities will arise. However, there’s still room to differentiate within Windows 8.
The power of color, type and image are not to be underestimated, and the grid is a playground for expression. Ask yourself what set of visual elements represent your brand in it’s most concise form? Audit your brand, and then try to reduce it to a word, a phrase, an icon, a caricature. Simplify and concentrate your brand to maintain your character in the world of Windows.
6. Choose your battles
On any device or platform, we believe signature experiences hold the key to differentiation. Signature experiences are prioritized moments in the UI designed to create a lasting impression of the brand. We’ve found that when implemented across consumer and device touch points, these signature moments distinguish the experience and unify disparate elements into a memorable brand expression. Successfully identifying and executing on the moments requires in-depth knowledge of the brand and service as well as the design context (users, devices, platforms).
For Windows 8, this means playing with the foundational elements of grid, color, type, etc., but it also means breaking a few rules at times. Microsoft’s guidelines provide an example branded app that differs from standard Metro style in a number of ways—some within the frameworks suggested by Microsoft, and others that depart more dramatically from Windows’ design principles.
“Strike a balance between compliance and defiance with Windows’ dominant style.”
The app uses muted colors, centered serif type, and circular cropped photography rather than the standard Windows palette, left-aligned sans-serif Segoe, and tiled rectangular photos. However, it also introduces embellished ribbon-like labels which imply dimensional form, and decorative scalloped edges to the photography that evoke the shape of cupcake wrappers. These ornamental elements run contrary to the core philosophy of Windows, but also express the app’s brand qualities in ways native components could not.
Similarly, the drink photography in the Cocktail Flow app has edges carefully masked to the shape of the glasses and garnishes, and implied reflections below that create the appearance that the drinks are sitting atop a polished glass bar. In this case, the degree of representational artifice and suggested dimensional space are at odds with the Windows design principles, but again, these departures help distinguish the app from the larger Windows experience.
Understanding the defining characteristics of Windows and your unique brand will help you identify common ground and choose the right moments to flout conventions to claim new territory. Strike a balance between compliance and defiance with Windows’ dominant style.
Signature experiences are not just visual. Compelling, distinctive interactions and insightful new software features may prove more impactful than differentiated visuals. It’s important to seek opportunities for both aesthetic and experiential expressions of your brand.
7. Navigate flatland with semantic zoom
One of the most difficult aspects of designing for Windows 8 is its incredibly flat hierarchy. Windows presents two possible hierarchical models—one with just a single level (see Internet Explorer [›]), and the primary model with three levels of depth [›] (hub, section and detail). A three-level model is not unusual (see Android’s model), but is usually presented as a starting point that can be extended to support deeper hierarchies. Also, the Windows model actually combines the top two levels of the Android model into its section level, and adds another level above—the hub page which aggregates content from all section pages below.
Practically, this has a number of ramifications on the experience. The first is that the hub becomes a rich entry experience with a wide variety of content. But achieving richness requires a good deal of planning and intelligence to ensure the right content comes forward, and that it shapes itself to the user over time.
The second implication is that content which can no longer spread downward in depth, instead spreads outward in breadth. This results in long (very long) scrolling spaces. And on Windows 8 that means horizontal scrolling, contrary to most experiences and usually requiring more zig-zagging eye motion when reading the page.
The most straightforward method for supporting deeper hierarchical levels is to use page headers and navigational dropdown menus intelligently. Doing so brings some of the required structure into a menu and away from the canvas. This technique, combined with a meaningful set of filters, sorts and pivots, provides different views into the content and can remove some hierarchical depth.
A more engaging and distinctive solution to this extensive scrolling is semantic zoom [›]. Semantic zoom uses a pinch gesture to enter a “zoomed out” view which presents the content from the “zoomed in” view in discrete groups to allow quick navigation across the page. Semantic zoom is a relatively new concept that has lots of room to grow and provides an opportunity for combining quick browsing and navigation needs. Specifically, semantic zoom views should be tailored to the content and organizational principle of the originating view. For example, chronologically ordered photos might be presented as thumbnails in a calendar layout, while contacts ordered by popularity could be displayed as a bar graph of avatar photos.
8. Design to consume and create
Another consequence of Windows’ shallow hierarchy is that it tends to favor consumption experiences over creation. Metro grew up in media and entertainment functions and that bias remains in Windows 8. The hub page is a collection of surfaced content that is great for browsing and navigating, but not so great for almost any other kind of action. It’s designed more like a magazine than a tool.
Microsoft included in its documentation [›] a number of sample applications to illustrate a breadth of functional categories (games, entertainment, news, productivity, sports, shopping, travel, and education), but nearly all of them depict consumption-centric experiences. Even the productivity example, a notes app, exhibits a clear bias toward consumption with previous notes displayed prominently on the canvas while the new note action (perhaps the primary function of a notes app) is buried in a flyout menu off an action icon in the auto-hiding app bar. And the corresponding entry/edit screen is a mess, with a large onscreen keyboard and two rows of app bar actions obscuring the page so that there’s only about an inch of usable screen height left for the task at hand.
“Designing for greater functional range means reclaiming the canvas to suit the needs of your experience.”
All that said, don’t give up on creation just yet. Creation-centric experiences are still possible on Windows 8 (and not only in retro desktop apps). The Xbox music app is obviously a consumption-centric experience too, but it hints at a means to supporting a broader range of functionality. In the app, the now playing section surfaces the current song prominently on the hub page along with some primary actions for music control. Moving primary actions from the app bar to the main canvas helps push beyond the standard browsing focus of the hub page.
Designing for greater functional range means reclaiming the canvas to suit the needs of your experience. Games are a great example of apps that unapologetically use the entire canvas to craft immersive branded experiences.
9. Stand out on Start
The start tile [›] is the face of your application experience on Windows. Microsoft has designed the start screen to accommodate a wide range of tile layouts and styles and encourages the use of motion to deliver fresh, personalized content.
Tiles have the ability to continue to update even after the app has stopped running. Like the hub page of your application, the start tile deserves sober consideration on exactly what information to surface. Keep in mind that with the general lively activity of the start screen, your app may stand out best in moments of inactivity.
10. Distinguish and orient with motion
Finally, the flat architecture also means that Windows 8 lends itself to experiences with content sets that celebrate breadth over siloed depth. The segregated vertical categorization of iOS is noticeably absent in Windows. Instead, Windows feels like a nebulous web of related content nodes. It’s a bit like the difference between folders and tags. Windows makes it easier to move between content elements, but it can be harder to find a specific item, and it’s a lot easier to lose your sense of place in the experience.
The shallow architecture, flat space, and absence of metaphor means there’s an ambiguous spatial model for the experience. For motion design, this is both a challenge and an opportunity. Signature motion design can help distinguish your experience within Windows, and build bridges across disparate screen states. Transitional motion can help carry the user from one step to the next, even in the absence of strict physical analogy.
When creating custom motion design [›] within Windows there are a few things you should keep in mind. A key feature of Windows 8 is its use of independent animations—processes that run independently of the core UI thread (on the GPU not the CPU) to create smooth and consistent motion. To ensure your custom animation remains independent follow these guidelines:
- Avoid infinite animation
- Limit the size of animating elements and the area of the entire animation
- Animate elements sequentially rather than concurrently
- Use a high z-index (and never a negative value) for all animating elements, and avoid overlapping elements above animating elements
- Use the CSS transform property rather than layout-affecting properties, and use the opacity or display properties rather than visibility
Breaking these rules won’t stop your animations, but will shift them back to the dependent UI thread which risks glitchy, irregular movement.
There will be a lot of weight behind Windows as it rolls out through the end of the year. Windows will push big this holiday season taking hardware manufacturers along for the ride. It will be a convertible Christmas with hardware companies wanting to capitalize on the dual nature of the metro and desktop UI and establish a new middle space [›] between tablet and PC.
Hardware companies will want to add their own touch to the UI as well leading to some level of fragmentation (see the Samsung S Launcher). People will have strong reactions. Some will express confusion, fear and outrage, while others will come to the platform’s defense. It’s possible that non-Windows users are more excited for the update than are diehard Windows veterans, but from our view in such a Mac-dominated design world, the fact that tech and design blogs are so impressed and excited about Windows is remarkable. We hope that Microsoft will see this UI through the inevitable awkward moments of its youth and that they will pay attention to user reactions as it’s adopted but won’t overreact themselves as they observe the reception.
Punchcut is a user interface design company with a unique specialization in multi-screen experiences for consumer devices — including handsets, tablets, ultrabooks, wearables and TV. We design experiences across major and emerging platforms: iOS, Android, and increasingly Windows 8. Our clients come to us not just to deploy apps on a new platform, but because we design user experience frameworks that help them create cohesion across platforms and devices.
We hope you’ve appreciated this series on the impact of Windows 8 and Windows Phone 8. We expect our perspectives on the opportunities of Microsoft’s platform to evolve as we continue help our clients build interfaces for it.
Windows Needs a Restart
A Reaction Against Faux Realism
The Next Generation of UI
Principles & Philosophy
The Nuts & Bolts of Designing For Windows 8