Windows 8 was publicly demoed for the first time about three weeks ago now at the D9 conference and it is still wowing people who see it and it's causing a divide throughout the tech community over whether the radical new UI is a good idea or not. I've now had that 3 weeks to think carefully about what this all means and how I would write about Windows 8 in a unique way (there's plenty of articles on the web showing demos of the new Start Screen). I had originally planned to write 2 articles, one about Windows 8 and the other one about user interface design (more specifically the Metro design), but I'm going to combine them into this one article, because I think that it's hard to talk about them separately anymore considering we know what Microsoft's plans are in the future regarding the UI for their products. It's an exciting time, but you really need to understand the key principles behind what's going on before you can truly appreciate what's going on. When I first saw what Microsoft planned to do in Windows 8, I was quite shocked, but after a while, it just clicked. I now have a good understanding of what Microsoft's strategy for the future is (and it revolves around Windows, Office, Skype & Xbox although this article will mainly focus on Windows) and I'm hoping after reading this, their strategy finally just clicks for you too.
A History of Metro
The Metro UI originally started in Windows Media Center (which is a great product for if you want to watch TV on your computer, if you have a TV tuner card installed). The concept back then was to make a UI which worked well with both a remote control and a keyboard & mouse. The Media Center UI (which is similar to the Xbox 360 dashboard at the moment) has a number of headings listed vertically and once you navigate down to that heading, a number of tiles that are in that category come into view (horizontally) and you can then navigate left and right to select them, while navigating up and down to change categories.
The next major evolution of the Metro UI came in a sadly, little known MP3 player called the Zune. This MP3 player in lots of ways was better than the iPod, but it was never sold outside the US & Canada and even in those countries, it never took off unfortunately. Accompanying the Zune player, there was also some PC software that went with it, which is absolutely beautiful! This Zune PC Software is the software that you need to sync your Windows Phone with a PC today, but even without the phone, it makes for a beautiful Windows Media Player replacement.
It wasn't until 2010 though, that Microsoft really pushed their Metro UI onto the mainstream general public and they did this through the release of their answer to the iPhone: Windows Phone 7! They took the Zune's Metro UI and then added the concept of Live Tiles to it and this is what most of us identify as the Metro UI today.
The Metro UI Design
The problem with many user interfaces at the moment is that they're either created before the content is added OR added after the content is in place. This means that they often don't integrate properly with the content OR they distract from the content with fancy images and other nice looking, but irrelevant and distracting objects. What if you could make the content itself the UI? Would that look or function very well at all? Could you make nearly every aspect of the UI useful in respect to the content and create a UI which puts the content front and centre, while pushing the UI into the background? Microsoft believes (and I believe too) that they have created such a UI and they've named it Metro.
Metro is actually a very simple UI. It doesn't use fancy 3D looking items. Everything looks very flat and uses basic primary colours, basic shapes and very little chrome. In fact, most of the Metro UI is made up of text! How could text be interesting you might ask? Well Metro uses different size text to represent different parts of the UI. The main sections of an application are normally written in simple text across the top of the screen. Clicking each heading will change the content below, normally with a simple sweeping or sliding effect. On Windows Phone 7 & The Zune MP3 player, text often runs off the edge of the screen (such as in the image above where What's New is cut off the right edge of the screen). This signifies on smaller screens that you need to swipe across to see the next column. On larger screen sizes, this isn't required, but it does show how the Metro UI can adapt to nearly any screen size (as you'll see later).
The other major part of the Metro UI today is the Live Tiles. Traditionally, the UI of the home screen of a phone or desktop has a grid of icons which represent each application or task. You click or tap on the icon (a picture of the app or task you wish to run) and the app launches or the task commences. Live Tiles, from the outset just look like big, flat square icons. The thing is, they're not. When used properly, they allow the content of an app to become the UI, with the tile updating depending on the content available at the time. For example, if you look at the first phone screen again, you'll see a Live Tile called Pictures. This tile updates to show the latest picture taken on the phone's camera (or optionally any photo the user wishes). This is much more useful than simply having a static picture frame icon for that app or task and it uses the content of the app/task to become the UI. It also ends up looking really really nice and personal.
Another example is the on the second phone's screen. It shows a new feature of Windows Phone 7's upcoming Mango update called Groups, but what I want to mention already exists on the current version of Windows Phone 7, if you pin a person to your home screen. Firstly, the tile doesn't just show the person's name OR the person's picture, it shows a combination of both, by having the picture bump the name out of the way, then the name bump the picture out of the way etc. What makes this UI even more useful though, is when that person updates their Facebook status, it knows they did that and can also bump that onto the tile for a while too as well as the name (and in Mango, it will also bump information such as missed calls onto that Live Tile too). It's all about using the content to create the UI and it actually looks pretty good. You couldn't easily argue that the UI looks ugly or off-putting really, it creates a nice effect. Here's a couple of apps that have been designed with a Metro user interface. The first app is MetroTwit (an excellent Twitter client created by Aussies Long Zheng, David Golden and Winston Pang) and the second is a Facebook client that's been designed with a Metro UI called Telerik fdeck Client.
So now that we understand the basic principles behind Metro: a mainly textual and simple, flat shapes based UI that pushes the UI to the background and the content to the foreground by using the content as the UI, I can now discuss how this relates to Microsoft's strategy behind Windows 8.
How The Metro UI Is Going To Be At The Centre Of Microsoft's Products From Now On!
At The D9 conference, Microsoft did something unexpected, they revealed a major part of the UI of the next version of Windows that they're code-naming 'Windows 8'. Before I go any further, you need to watch the YouTube video that Microsoft posted called "Building Windows 8 - Video 1" that demonstrates the new UI that they plan to ship as default on ALL devices running Windows 8 (which shocked many people who thought there was going to be 2 separate UIs in Windows 8, one for shipping on tablets and one for shipping on traditional PCs). You can watch this video right here and in fact, I strongly encourage that you do watch it, you won't understand much about the rest of the article without watching it.
What you'll probably first notice (other than that the new UI looks absolutely beautiful) is that Microsoft has essentially used the same interface on the new Windows 8 start screen and apps, that Microsoft is currently using on Windows Phone 7, and this is very deliberate! There's one thing about the Metro UI that makes it an extremely good choice of UI to use across products of different form factors and that is, it can be manipulated using a wide variety of inputs including touch, voice, Kinect style sensors and the traditional mouse & keyboard. This is Microsoft's strategy for the future, one UI to rule them all, and I think it might just work!
Advantages Of The All In One UI
At the moment, we have smartphones, tablets and traditional PCs such as desktops and laptops. Smartphones run software which is built specifically for their power and size, which means that the UI has to be simpler and be touch friendly and the software has to be able to be run on a slower processor with less memory and storage. At the moment, tablets simply take the software the smartphones use and scale them up for a bigger screen size and this really under sells the capabilities that these tablets have and really just turns them into smartphones that have a slightly bigger screen.
Using a tablet, sometimes there's situations where you might want to run a program such as Photoshop, or the full version of Microsoft Word, which theoretically would work on the device, but the software and the hardware doesn't allow you to do that (due to a few deliberate limitations that Microsoft plans to remove). So the goal is, you'll be able to use the new touch friendly apps on your tablet 98% of the time, BUT you also have the full power of Windows running underneath that would allow you to simply plug in a mouse and keyboard into your tablet and launch Photoshop and do that image editing or Microsoft Excel and create that spreadsheet using the FULL set of tools you have on your desktop, not just a limited, touch friendly set.
The other advantage is, this new touch friendly Metro UI, also works well with a keyboard and mouse (Metro applications have worked well on the PC for years), so you can use the same apps on your cheaper portable tablet as well as your powerhouse desktop machine. The big square blocks are still as easy to click on using your mouse or select using the keyboard as they are to touch with your finger.
This new Start Screen isn't just a shell over the traditional Windows desktop, it's a completely new platform too. New applications written for Windows 8 will apparently only launch from this new Start Screen, they won't be part of the old legacy desktop and the idea eventually is probably to phase the old desktop out completely (or at least work towards a day where users don't need to ever click the desktop tile because all their apps will use the new platform and from the new Start Screen).
So let's have a quick look here at how the Metro UI will work very well on a Windows 8 computer. Unlike the phone, tablets and PCs have larger screens, which means you can fit a lot more on the screen. As you can see, the majority of the tiles shown in this picture are double wide tiles, which are quite rare on the Windows Phone (the only 3 double wide tiles I have on mine are Calendar, Pictures & HTC Hub, and any music artists you pin will also appear on a double wide tile, but that's it), but due to the screen size available, are very suitable for Windows 8. These double wide tiles allow applications to use the Metro UI principle of letting the content create the UI.
The email app actually shows the latest email, not just as a number of unread messages, but actually a preview of the latest message (including From & Subject lines), the weather app can show today's weather as well as the 3 day forecast, the Twitter app can show the latest tweet etc. If you compare this to Mac OS X Lion's new Launchpad feature (which aims to duplicate the iPad home screen on a Mac), both are simple UIs, both are touch friendly (even though Macs don't have touchscreens) but the Windows 8 one is also more USEFUL to the user, no matter how you look at it.
The Ultimate Vision
There's also one final piece to the puzzle, which Paul Thurrott covers best (so I recommend you check out his article on this here) but I'll mention it here quickly. Less than a week after Microsoft did this first demo of the Windows 8 Start Screen using the Metro UI, Microsoft announced the new Xbox 360 Dashboard update, which is coming to Xbox 360 consoles in November this year. Here's a picture of the new Xbox 360 Dashboard - Notice anything specific about it?
That's right, it's also using the Metro UI. The Xbox UI is designed to be used primarily by an Xbox Controller but also using hand gestures and voice commands via the Kinect. So again, Metro is turning out to be this extremely versatile UI that can be used on screens that are 3 inches big on a phone to screens that take up an entire wall and be manipulated by everything from a Mouse & Keyboard, to touch using your fingers to wirelessly using gestures and voice control. It's simply amazing what Microsoft has been brewing right under our noses for the last couple of years and if they can pull it off, it will set a standard that the rest of the tech industry will be eager to copy.
Users will only need to learn how to use one UI (and a UI which reflects the content it's trying to display) and once they do that, they'll be able to simply operate everything from their phone to their home entertainment system. I think we're finally moving towards the ideas that Microsoft shared a few years ago in their Microsoft Office Labs 2019 Vision video. While we still have a long way to go in terms of the technologies shown off in that video, we're rapidly moving towards the context sensitive UIs displayed in that video and Microsoft has pushed the accelerator pedal down to the floor with the new Windows 8 Start Screen. You can watch that video below if you haven't seen it before or need a recap.
So that's pretty much sums up the Windows 8 & Metro story I think. There's plenty more I could write about here, about where I think the Xbox, Office & Skype brands fit into the Windows 8 & post Windows 8 strategy, but I won't do that and instead will will just leave with this comment. Microsoft has been pushing towards the future very slowly for the last couple of years, firstly with Vista for the underlying technological upgrade from XP, with componentisation, proper 64bit support and a modern platform (Windows 7 looks as though it was an unplanned fix to address the issues and perception with Vista), Windows Phone as the modernisation of their phone platform and the real evolution of the Metro UI and now Windows 8 & Xbox for the user interface and multimedia features. The problem is, we haven't even noticed because we've been too busy concentrating on Apple. 2012 and 2013 will be Microsoft's turn to step into the spotlight I think and all we know is: it's going to be interesting!
