With all the recent buzz around Windows 8 RT for ARM and the Metro interface, I wanted to do a bit of a first-look at developing for the Windows 8 Metro interface. To get started, I thought I’d take a look at getting the Windows 8 Consumer Preview installed on an actual tablet, so I picked up this Acer Iconica Tab, which comes with Windows 7 preinstalled. Getting Windows 8 installed on it wasn’t too hard… You’ll need to burn the Windows 8 .iso file to a DVD, and then plug in an external DVD drive. You’ll then need to enter BIOS setup to alter the boot order so that it finds the USB DVD drive:
Somewhat surprisingly, this entire BIOS setup screen is touch enabled, despite looking pretty much exactly the same as it looked on my 33MHz 486DX back in the early 90s. From there on out, setting up Windows 8 on the device goes quite a bit smoother than setting up the Windows 7 install that comes with the thing (that processes locked up a few times before I got it set up)…
After that whole process, you’ll eventually be left with your very own Windows 8 tablet with the fancy new Metro interface:
It’s not an ARM chip, so the actual device is pretty big and clunky compared to an iPad, but performance is great. One of the interesting things to note is that on Windows 8, the Metro interface basically replaces the start menu. Who knows what Microsoft is planning for the ARM “RT” version of Windows, but at least on the Intel version, there is still a regular Windows desktop. The Start menu button is gone and replaced with a hardware button on the tablet (you can see it glowing in the screenshot above). Some apps, like IE10, have both a Desktop version and a Metro version:
What is 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?
