What is Windows 8 Metro, anyway, and why should I care?
Metro is the UI (“design language”) that originated with Windows Phone 7, and is a big part of Windows 8 as Microsoft prepares to challenge Apple and Google in the tablet market. In the consumer market, the Kindle Fire has gobbled up over 50% of the Android tablet market share, which is hovering around 50% of the overall tablet market, but if you’re interested in the enterprise space at all, second place in that market behind the iPad is wide open territory:
Android has been plagued in the enterprise space by the security concerns of Gingerbread (Encryption? What’s that?), lackluster adoption of the more secure Ice Cream Sandwich (ICS) by device manufacturers, and nervousness over fragmentation. iPad has done exceptionally well, with built-in security features that rival the most hardened laptop, but knowing corporate IT’s preferences for Microsoft products, Windows 8 tablets could easily be poised to trounce Android and even challenge Apple in the years ahead.
At the same time, users want apps, and developers want users. Microsoft seems to have recognized that in order to grow the user base, they need more apps being developed, and there aren’t enough users around yet to entice the development community, so Microsoft is paying developers between $60k and $600k to develop for the Microsoft Store that, at 70k apps is lagging behind Android’s roughly 400k apps and Apple’s 600k apps. So, now’s a good time to work on a Windows Metro app.
Metro Design Principles
One of the nicest things about Metro is that Microsoft seems to have taken a cue from Apple’s book (the venerable iOS HIG), and have put some real thought into the UI and these design principles:
Content Before Chrome
Chrome is basically all of the stuff in your app that isn’t content. The toolbars, the tabs, button gradients, scrollbars, etc. One of the core concepts in Metro is to de-emphasize the app chrome and to use the size, weight, and color of typography to convey hierarchical information on the page. Looking at some popular apps, the difference is pretty easy to see in the lack of tab-bars, toolbars, and other application chrome elements. This is Spotify:
Apps are designed to flow from one screen to another instead of having tabs, as is you can see in these Spotify screenshots:
Be Fast and Fluid — Touch First
As with most tablet interfaces, touch gestures are important. Most of these are similar to iOS and Android, but Windows 8 has defined a few new ones, with app commands and system commands being shown in hidden toolbars on the bottom and right edge of the screen.
Be Fast and Fluid — Use Animation Library to Illustrate Common Scenarios
Again, nothing too groundbreaking here, except there are a number of nice animations built into the stock components. Some of them are demonstrated in these demo projects that are worth a look:
Snap and Scale Beautifully
Since Windows 8 apps will run on phones, tablets, netbooks, notebooks, and 30” displays, it makes sense to display more information on larger screen sizes rather than just making things bigger. Just like with the Mobile Web, native apps should handle different screen sizes elegantly, and adapt accordingly.
Snapping is an interesting feature that allows multiple apps to be shown on the screen at the same time. Since Metro isn’t really windowed, this is a way to keep your app on-screen in a sidebar while someone is off doing something else. For instance, if you wanted to monitor Twitter while browsing the maps application:
Use the Right Contracts
Contracts control how Metro apps interact with each other and with the OS.
- Share Sources and Targets allow for sharing between apps.
- Search allows users to search within an app from anywhere in Windows.
- And the File Picker allows users to open or save content between apps in a controlled manner.
Invest in a Great Tile
Tiles are the icons of Windows Metro. Their real power lies in the ability to use the Microsoft Push Notification Server to push out content updates to Live Tiles. Personalized, regionalized, and/or customized content helps keep users coming back to your app.
Roam to the Cloud
Similar to Apple iCloud and Google Drive, Metro apps get per-user cloud storage for saving state to allow users to continue tasks across devices.
Developing Windows 8
Getting started is easy and free. Just download the Windows 8 Consumer Preview and Visual Studio 11 Express Beta. Both can be installed in a VM, on a desktop/laptop, or on an actual tablet. From there, you basically just choose a template to start with. Your choices are Javascript, VB or C# .net, and C++ (mostly useful for DirectX games).
The Native options give you a handy XAML (eXtensible Application Markup Language) visual designer:
The Javascript templates, though, are really interesting because they give you the ability to create an app entirely in HTML5/Javascript, similar to what you would do on other platforms with PhoneGap/Cordova, but without the need for any external libraries.
So, that’s Metro. What are you doing with it?
