Design Your User Experience for the Metro UI

At the Microsoft Worldwide Partner Conference, held in mid-July in Los Angeles, I found it really interesting that Microsoft hinted, yet again, that the Metro user interface (UI) that ornaments Windows Phone 7 will become the standard UI and user experience (UX) across the PC, phone, and Xbox 360 when Windows 8 arrives. My first reaction to the now infamous Windows 8 "first looks" video of June 1, 2011, was "That's Metro!"

You see, I "bought in" to Metro when I first saw it on Windows Phone 7 and had it explained to me on the Redmond, Washington, campus of Microsoft almost three years ago. The paradigm, as explained then by Brandon Watson, the director of developer experience for Windows Phone, and Charlie Kindel, partner group program manager at Microsoft, was that user navigation on Windows Phone 7 is similar to the text-based navigation we see on signs in subway and train stations all over the world; hence the name "Metro." With a smile, I call Joe Belfiore "The Godfather of Metro." Joe is the corporate vice-president at Microsoft who is often credited with Metro. In my interview with Joe, he talks about how "end user is king" and the metro interface.

Tiles

For over two years now we at InterKnowlogy have been building custom software in Silverlight and Windows Presentation Foundation (WPF) with the Metro UI. And it has gone very well. Customers love it because of the usability. With customers, I often refer to Metro as "tiles"—because a major feature of the Metro interface is large, readable tiles in the UI. Live Tiles is a feature of metro where the rectangular tile itself is composed of active pieces of content that make up the tile's look. In this unique paradigm for UX, the content defines the experience. Normally in UX in computer software we see the exact opposite: The experience defines the content. But Live Tiles even use push notification technology to update the live tiles remotely; consequently, Live Tiles can indicate the current status of the tile's content. Live Tiles are prevalent beyond Metro, too. It even looks like Bing is going to get a bit of Metro in terms of Live Tiles in very short order.

Metro Is Perfect for Touch-Based Interfaces, and the Hardware Is Coming

Windows 7 is fully touch capable, but the UI is not designed for touch. Even on my fully multi-touch–capable 24-inch monitor at the office, the start button is still too small for me to touch it with 100 percent accuracy. Hitting that little red x with my finger to close a window is nearly impossible. But Metro with its large tiles and Windows 8 completely designed from the ground up for touch are perfectly suited for touch.

All the major computer hardware OEMs have released and/or have planned to release not just touch-capable hardware but multi-touch–capable hardware. You are going to get multi-touch capability in your PC hardware whether you like it or not over the next year, if you don't have it already. The computer I am writing this article on is an HP TouchSmart tm2. It's fully multi-touch capable and has a beautiful fidelity of touch at a consumer price point. At the Microsoft PDC in November 2009, almost two years ago, every attendees was given an Acer Aspire 1420 P notebook: a fully multi-touch–capable Windows 7 computer. That computer at the time listed at a retail price well under $500. Today, 42-inch multi-touch–capable, HD-quality, Windows 7 monitors are now at a $1500 retail price point. And I believe it is safe to predict a legion of Windows 8–capable slate-like computers with a beautiful fidelity of touch. Companies like Samsung are releasing 80-inch fully HD- and multi-touch–capable certified Windows 7–compatible monitors that are hitting the streets as I write this. Touch-based computing is simply going to be a way of using software from here on out.

Designing Software for Metro

Is it too early for you to start designing your software for the Metro Look and Feel? I would say absolutely not. I would predict that if Microsoft is going to unify their UX for the entire stack for Metro, you almost have to start planning for it, at the least. But you should also plan on a few fights. Over the last year, at Actus Interactive Software, I have had to fight our customers' misguided desire for the typical battleship grey and web-like screen segmentation UIs that are so prevalent in the interactive kiosk and digital signage space. Frankly our usability testing proved that Metro is just plain easier to use top to bottom than traditional UX patterns in that space.

If you do want to get started by using the Metro UI in your apps, I can give you a great tip to do it the easy way. The folks in the Windows Phone 7 team stub out the look and feel in XAML automatically when you start a new Windows Phone 7 project in Visual Studio or the free Visual Studio Express [http://create.msdn.com/en-us/home/getting_started] tools. Obviously they did this to ensure that WP7 apps have a consistent behavior and look and feel, but it still was a brilliant idea. You can leverage the XAML created in the WP7 tools in your own WPF or Silverlight application with some creative cutting and pasting and be off and running with a Metro look and feel in your own apps with hardly any effort at all.

Realize that because of Metro and the size of the Tiles, Metro is also the perfect interface for gesture-based interfaces with Kinect. But, that is a topic for a not-so-far-in-the-future column.

Tim Huckaby ([email protected]) is founder and chairman of InterKnowlogy and founder of Actus Interactive Software. Tim has worked on and with product teams at Microsoft for more than 25 years, has authored books and several publications, and is a frequent conference speaker.