Paul Thurrott - Windows 8 Secrets

Consider the Start screen as a typical example. The Start logo and user tile (in the upper-right corner) are offset deliberately from the live tiles below by a wide swath of white space. Those tiles don’t butt up to the left edge of the screen, but rather sit to the right. But the tiles also appear to disappear off the right edge of the screen, suggesting that you can scroll in that direction to see more. There’s no awful looking chevron graphic or whatever to spell it out for you. Instead, the design is confident and beautiful, and something that would be fun to touch.

• Animation and motion:Interfaces come to life with animation and other motion, and in Metro these motions aren’t just fun to look at, they’re useful. Animation can also give the appearance of performance, though to be fair, Windows 8 performs so well it’s almost redundant.

It’s not possible to show you how animations and motion improve the Windows 8 user experience, but suffice to say these elements are everywhere, from the live tiles that animate between various status updates, to the animation that occurs each time you launch a Metro-style app, and to the floating notification “toasts” that slide on-screen rather than jar you by appearing suddenly and without warning.

• Minimal user interface chrome:Until recently, most computer software was designed by the engineers who wrote the code. And let’s face it, these guys don’t get good design. They were responsible for such UI extremes as the dialog with multiple rows of tabs and the Office applications so loaded up with toolbars you couldn’t even see the document you were supposed to be editing.

With Metro, it’s the content that’s emphasized, not the surrounding application user interface, or chrome . In fact, with most Metro-style designs, there is little to no chrome at all. Instead, Metro provides full-screen experiences that use every available pixel to display the app or experience. Accessory interfaces that used to be on-screen all the time, like an app bar—Metro’s all-in-one replacement for the toolbar and menu—are now hidden by default and displayed only when needed.

For example, in Figure 3-6, you can see the Start screen’s app bar, which is not normally shown since its few options are rarely needed.

Figure 3-6:The Start screen’s app bar

• Honesty of design:While some systems treat their users like idiots, Metro design specifies that user interfaces should be “authentically digital” and true to the system on which they run. That is, your $1,000 Ultrabook isn’t a paper-based calendar. Why should a calendar app be designed to resemble one? After all, most users today have never even used such a calendar, so that design is at best nostalgic and at worst inefficient. Instead, Metro designs are designed explicitly for the device form factor: a high-resolution, high-performance screen that could employ multi-touch interactions. On such a device, a calendar could look very different from that old-fashioned paper calendar that some companies seem to like so much.

And yes, this is where Metro gets its name. It’s based on the simple graphics found in the transportation hubs that people use every day.

You can see this type of design throughout Metro, but the best example, perhaps, is in the various opaque icons that appear throughout, in such places as the live tiles on the Start screen and the buttons on various app bars. Instead of being photorealistic representations of a store (Windows Store), a pair of headphones (the Xbox Music app), or a video game controller (Xbox LIVE Games app), these icons are authentic to the digital nature of the device itself. In fact, they’re designed to be as obvious as possible, and are modeled on the signage one sees in public transportation hubs throughout the world.

The Start screen provides just a few basic functions: It’s a place to organize live tiles that represent the apps you care about the most, so you can launch those apps and, while viewing the Start screen, see live updates that are rendered on their surfaces.

This functionality alone makes the Start screen far more useful than the Windows desktop. With that interface, applications had very limited ways in which to provide you with any kind of status information. An e-mail application, for example, might provide a small number badge on its icon, indicating how many unread e-mails it contained. But this badge could be seen only when you pinned the application to the taskbar, as in Figure 3-7.

Application developers tried to overcome this lack of capability through several means. Many wrote customized notification schemes that could alert users when something important happened, but the sheer number of variety of these notifications was often more annoying and distracting than useful. And Microsoft even briefly pushed a new type of utility, called the Windows Gadget, which would sit on the desktop and update the user from time to time. Gadgets failed for all kinds of reasons: Full-screen applications would cover them up, they were disconnected from full-fledged Windows applications, and they were written with completely different technologies.

Figure 3-7:In Windows 7, an e-mail application could provide you with an unread e-mail count through its taskbar button’s icon.

In Windows 8, each app (and many desktop-based interfaces) can expose a single live tile on the Start screen. This live tile is more expressive and useful than any icon and can provide all kinds of information in real time. By arranging the tiles for apps you use most often, you can create a live dashboard of sorts where your e-mail, calendar, social networking, weather, and other apps are all providing you with ongoing live updates over time. And you can see these updates without ever entering the app in question. Glance and go, as Microsoft says.

To use the previous e-mail example again, Windows 8 includes an app called Mail. And unlike its desktop-based predecessor, it not only tells you how many unread e-mails you have, but it also cycles through previews of each of those e-mails. In Figure 3-8, you can see two of the different types of displays it animates between.

In the smaller size, a normally expressive live tile is effectively rendered mute.

Figure 3-8:The Mail app cycles through previews of your most recent e-mails; here are two examples from the same tile.

Not all live tiles are expressive. Some don’t have to be, like the tile for a game or web browser. You can configure tiles to be one of two sizes—Bigger and Smaller, with the former being rectangles and the latter being smaller squares.

Consider Figure 3-9, where you can see a grid of live tiles, some big and some small. Here, the Internet Explorer, Windows Store, Bing Maps, and SkyDrive Explorer tiles are all configured to be smaller and don’t provide any rich, animated information. But the Calendar, Photos, Weather, and Bing Finance live tiles are larger and provide dynamic information about their contents.

Figure 3-9:A mix of small and large live tile sizes

The Start screen can be configured in various ways so you can tailor the system as you prefer. For example, you can organize the tiles visually into various groups, and can add and remove tiles for the apps (and Windows desktop applications and websites) you use most frequently.