Windows 8 Metro UI: Flat isn’t bad

Windows 8 Metro UI

On Wednesday Microsoft announced the Consumer Preview release of Windows 8, and the flat Metro UI has caught people’s attention.  Gone are the shading and reflections that contribute to a feeling of 3-dimensionality in many current interfaces.  The Metro UI instead embraces a ludic simplicity in the form of basic geometric shapes and solid fields of color.  While there has been a lot of positive buzz about the interface, it has its nay-sayers as well.  Some have decried the interface as a regression which sacrifices the findability of 3D icons in favor of a colorful, trendy design.  And to be honest, doesn’t it look a tiny bit like this?

Clearly, the new display has less visual information than previous versions (in the sense that more detail literally requires more bits).  Knowing this, it can be difficult to avoid the knee-jerk worry that the Windows 8 designers have thrown out something we might need (which is the same reason I never seem to be able to throw out old MIDI cables — you just never know).  Some designers have even expressed concerns that flat elements may not pop out as well as elements with more apparent depth.  But in fact, depth has relatively little to do with the psychological phenomenon of “pop-out.”  Pop-out refers to search involving those features of objects that can be apprehended pre-attentively — that is, almost instantly.  To illustrate, try finding the red T in the illustration below.

Red T among blue Ts

Not terribly difficult, is it?  And this would be true regardless of how many blue Ts appear on the screen.  A red T will always pop out from among a field of blue Ts.

Now try finding the L in the next illustration.

L among Ts

This is considerably harder (and it will continue to get harder and harder still as the number of distractor Ts increases).  The reason why the second task is more difficult than the first is that L shapes do not pop out from T shapes.

Although the word “pop-out” suggests three-dimensionality, depth is actually not a pre-requisite for the phenomenon (and indeed, in the early days of visual search studies, technological limitations would have made it difficult to study scenes with any extensive dimensionality at all).  Prototypical pop-out features tend to be simple, such as color, size, motion, and orientation.

Depth can nevertheless produce pop-out.  This was demonstrated by Dorothy Kleffner and Vilayanur Ramachandran (1992) in a study using computer-generated gradients to simulate concave and convex objects, as shown below.

As in the case of red and blue Ts, the one bump in the field of dents is pretty easy to find.  For the past several years, interface designers have been taking advantage of depth cues like these to enhance the sense of separation between elements (a matter which I’ve studied extensively) and to create easily scannable scenes.  But the failure to include obvious depth cues in much of the Metro UI does not mean that users will be slowed and stymied by unfindable objects.  There are plenty of other ways to accomplish these goals.

Windows 8 Metro UI

Examining the Metro UI again, it’s clear that it incorporates several of these.  Colors are clear and distinct, making it easy to seek out each button from the rest of the tiles.  Although shape is not a reliable pop-out feature, the icon set size of the Metro interface is small (that is, there are not many icons in each grouping), and icons are uniquely and memorably shaped, which should increase the speed of search (although without reading the label I’m not sure what the cotton boll in the lower right hand corner is intended to represent).  Slight luminance differences also help tiles stand out from one another without creating a sense of physical protrusion.  I am curious as to why the designers decided on particular tile sizes (is weather more important than Internet Explorer, for instance?), but overall the visual layout appears to satisfy the basic requirements for a comfortable user experience.  Of course, it remains to be seen whether the functionality and information architecture will satisfy users’ needs as Windows 8 is really put through its paces.

Note: This post was written prior to my employment at Microsoft.  No changes to the content have been made since that time, except to update links and post tags.

Reference

Kleffner, D. A., & Ramachandran, V. S. (1992). On the perception of shape from shading. Perception and Psychophysics, 52(1), 18-36.

3 thoughts on “Windows 8 Metro UI: Flat isn’t bad

  1. I studied design and color theory in college, and have been a Windows PC and Apple support technician for many years. It was enjoyable reading your perspective and I wanted to chime in on it.

    To be honest, the image of the Metro UI vs what I’m guessing is a diner register screen is a glaring difference. Space and balance are what really makes the Metro UI appealing (at least to me). It doesn’t feel congested or obfuscated, because well, it isn’t.

    I, for one, am tremendously excited to see a UI that is getting completely away from the awkard shading and 3D “tricks” to make UI elements pop, it just feels dated. Let face it, after nearly sixteen and a half years of Windows 95 polishing jobs, I feel we are owed something different.

    As you mentioned, the big feat here is color. It is, as you say, clear and distinct. As it exists now, there are 9 color schemes, all fairly muted, with highlighted menu options and other elements being a brighter hue on seven of the schemes and the remaining two (charcoal and grey) having different colors as highlights (sky blue and orange, accordingly). What’s truly great about this, is that even for someone who is partially or fully color blind, the brightness of different objects is what makes any element visually advance.

    As for the sizing, any double width tiles are apps that are capable of displaying more information; once you enter location info, the weather tile shows moon phase, temp and weather conditions. If you dislike the sizing for that, you simply right click the tile, and the contextual menu at the bottom shows the “smaller” option, at cost of losing info on a few select tiles. The inverse is true, as well; if you just want a simple tile like Internet Explorer larger, right click it and choose the corresponding preference.

    I know this isn’t really in direct correlation to the design aesthetic, but the final feature that most of the reviews and posts I’ve read seems to leave out. This feature, which is really quite huge for any advanced or even some basic users, is the search option. if you are in the Metro UI, simply start typing. This feature is sort of a hybrid of the Windows Search function that was brought about in Windows 7 and the Mac OS X spotlight feature. If you are looking to uninstall an application, simply type uninstall and you’ll see there are obviously no apps named uninstall, but there are 6 settings that match your query, the first being “uninstall a program”. This indirectly helps minimize and simplify the Metro UI to the point of being glaringly minimalistic, but still capable, without having to go through some chain of settings menus.

  2. You make some nice points, Andrew. Although I didn’t get into it in the post, I’m not actually being dismissive of the Metro UI by comparing it to that of a cash register. Yes, the Metro interface is much more aesthetically pleasing, but from a functional perspective, they have a lot in common. A cash register is optimized for fast and efficient data input by users, and it does so by using flat, distinct colors, luminance differences, and a predictable grid layout. The Windows 8 Metro UI takes advantage of many of these same features to much the same end (speed and efficiency), and in this sense I think the comparison is apt.

    Glad to know what’s up with the tile sizing — incorporating at-a-glance information is one of the really nice features of the Windows Phone 7 interface, and I’m glad they’re making good use of that here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s