What Microsoft did wrong with Vista’s design, and how you can avoid the same fate.
Have you ever noticed that certain places of great natural beauty have names like Death Valley, Hell’s Canyon, The Badlands, Craters of the Moon, and Apocalyptic Mountain of Doom?
Striking places, the wastelands. Wonderful places to visit and just sit and take in the view, before climbing back into the air conditioned SUV and heading to civilization and a Starbucks. Lord help you if you actually have to live in one of these places and eek out an existance from the terrain. Then your pleasant-looking vista reveals a different hostile and harsh nature.
That’s what I think of when I look at Microsoft’s Windows Vista. It’s great to look at, but not so great to actually use. Rather than being fertile ground for your work, Vista instead wastes it, requiring from the user more space, motion, and effort than is necessary for a given amount of work.
This isn’t a review of Vista. I don’t care if people buy it or not. Also, there are good things about Vista, but I’m not going to talk about them. I’m more interested in the lessons to be learned, the things you should avoid in your own designs, whether it’s an app for Vista, another OS, or a web app. Many designers draw their ideas from Microsoft, allowing it by its sheer size and popularity to set de facto design standards. Sometimes that’s good, if it’s a good design. However today we’ve countless apps with Tools menus because MS made that okay. Let’s not allow something that stupid to happen again. Don’t let your app become a wasteland.
Wasted Space
The Wonderful Color White
Why does this window by default open so big (click for full size)?
That’s 975 by 626 pixels to show a single list view of 13 images. It’s a simple dialog: one parameter. OK and Cancel. Choose or picture. Or don’t. Why all the white space just to do that? Why all the extraneous elements? For example, won’t the user know what user they are? Does it matter that they’re an Administrator when they choose a picture? Why is there a line separating the command buttons? Why put the title “Choose a new picture for your account” inside the window when there’s a blank title bar above. Why doesn’t it look like this?
That’s 469 by 229 pixels –an 82% reduction, leaving 500,000 pixels for the user to use for simultaneously looking at a browser or email or document or the underlying launching window or their lovely wallpaper, if all else fails. The major advantage of Windows having windows is to allow the user to share the screen space with multiple simultaneous tasks or content. However, Vista decides that changing the user’s picture should fill almost the entire screen for many laptops.
The Change User Picture dialog isn’t the only culprit. There’s also the Activate Windows dialog with its three links, the Computer Name/Domain Changes dialog, and others. It’s as if Microsoft isn’t satisfied with Vista’s graphics sucking down five years of performance gains in today’s CPUs. It has to suck down five years of screen size increases too. With 20 inch monitors becoming common for desktops, we’re almost getting to the stage where screens are big enough that users can keep all the important windows visible at all times and stop losing them under each other, and then Vista effectively brings us back to 640×480 where one little dialog dominates the screen. But I have to admit: nothing gives that nice light airy look like lots of empty space.
Better than a Dialog Box?
Such space wasting is not just for looks actually. Windows like the Change User Picture represent a new direction in dialog design, a direction towards… not really being a dialog at all. Dialogs are for necessarily atomic transactions, for asking user a simple question. There should only be two possible paths: answer the question and “OK,” or don’t and “Cancel.”
But look at Change User Picture. There’re forward and back buttons, a compound hierarchical field to display and set the navigation path, a refresh button, and a Search box, plus controls for window resizing, minimizing, and maximizing (oh, yes, make it bigger), and there’s a –is that supposed to be a status bar at the bottom? The user does not need any of that to simply select a picture. Worse, it can cause confusion: if the user selects a picture then does a search, is the picture selection applied? The user never hit OK, but she or he never hit Cancel either.
Those extraneous controls are there for one reason: to give it a webby look and feel. See? It’s like a web page in a browser, complete with a breadcrumb-like navigation path taking the place of the address field. It’s what Microsoft calls a “Navigation-based UI.” Prior to Vista, a GUI provided an open and concrete representation of navigation space. Windows are arranged around the screen and panes within the windows. “Places” to navigate to are literal locations on the screen. To move to a new place, the user sees the desired content (not a link to the content, but the actual content), and clicks to shift focus. When screens are large and dialogs are the proper small size, the navigation path is obvious: look at the window behind the current window. That’s where the user came from. Vista has replaced this traditional model with a web-inspired rigidly linear and abstract representation of places to navigate to, where potential destinations are hidden behind a temporal chain of pages, the content only hinted at by a trail of text breadcrumbs in the navigation path at the top. It’s left to the user to visualize the navigation space. Vista has rejected the long-standing visual means of navigation in favor of words.
Wasted Graphics
Spaghetti Code Book
Consistency is among the most basic principles for usable designs. Among the more important forms of consistency is to make actions and appearances have a one-to-one relation. For example, you’d want all your links on your web site to have the same color. If you have two different-looking things doing the same thing, your users have to learn two things to do the same thing (e.g., that this and this color are links). Even worse is when the same-looking things act differently, such as when link-looking things sometimes navigate (like links typically do) or sometimes execute commands (like can happen in Vista through “Command Links“). Then the user can’t predict how the app will interpret his or her acts. To be most usable, you want a one-to-one correspondences between a graphic attribute and a functional attribute. When you design you app, you should have a simple codebook matching graphics to function. Graphic codes, for example, can signal if a UI element represents a changing attribute value, if it’s editable, selectable, or draggable, whether it takes a single or double-click for an action, how it will respond to a click (e.g., open dropdown), or whether it’s actually entirely inert.
I’m not sure Vista has any codebook at all, or if it does, it’s entries have many second and third definitions, and exceptions, and “see-also’s” that no one could keep it straight. I’ve yet to figure out what the variations in color font and shade are supposed to mean. I don’t even see a simple rule indicating a link:
It might look like any of these, among others:
Heck, given links, menu items, and buttons are all pretty much the same in Vista, it could also be any of these:
What is the point of all this variation? Don’t tell me. It looks cool.
CAMIDS
For Vista, MS has opened the user experience guidelines up to whole new menagerie of UI elements, perhaps in hopes of getting snazzy looking screenshots for their demos and to hell with actually using the apps. They’ve six different-looking controls for progressive disclosure. Wouldn’t 1 or 2 be enough?
This includes two kinds of graphic buttons, one like this: 
. The other like this: 
. Okay, but an arrow is an arrow. The user can still anticipate the control’s behavior by its general shape, right? Wrong. These two controls work in precisely the opposite way from each other. The first expands when the arrow is pointing down, while the second shrinks when the arrow is pointing down.
Color usage is another example. Blue text might mean a link or might not. Look back at the Choose Picture window: the same blue is used for the Browse link as for the title. Likewise, black text may or may not be a link. And links may or may not be underlined.
Selected items are sometimes indicated by a light blue background. Except sometimes the same light blue means you’re holding your mouse over an active object, such as in a list view. Or sometime light blue is just a background color, as seen in the properties pane of Windows Explorer. In Vista, anything goes. For the user, the codebook might as well have only one rule: CAMIDS –Click Anywhere, Maybe It Does Something.
Graphics are a precious resource. There’re only so many colors, shapes, and spatial relations you can have before things get too cluttered. Don’t waste them on meaningless and confusing variation.
Waste of Mental Effort
Vista may be easy on the eyes, but it’s unnecessarily hard on the brain. Rather than taking the most straightforward means to label things, Vista includes little puzzles for the user to figure out.
Icons for All
Vista loves icons. What a great way to show off its graphic rendering technology than to show little pictures at every chance. I don’t have a problem with that, except when icons are shown without text labels. For just about anything other than a visual physical object or attribute, icons make crummy labels by themselves. A picture is simply not that great of a way to indicate a process or abstract entity. Words are much better. But Vista has icons without text all over the place, starting with an icon in the lower right portion of the Welcome page. Never mind what it means, what is it supposed to be? The tool tip says “Easy Access,” so I guess it’s some kind of stylized handicapped symbol. Amusing how accessing accessibility has difficult access.
Stylizing your icons gives your app, well, style, but it also tends to make icons, which are often already hard to recognize, even harder to recognize. The Search icon is also a victim of stylization beyond recognition. It’s good that Microsoft is trying to stick with the icons it originally standardized back with the 1999 Microsoft Windows Experience (see page 465). But, I fear it’s too late for Search to be represented by the magnify glass, which in previous apps can mean Zoom (various graphics apps), Explore (Windows Explorer, 1995-XP), or View (Microsoft Word). Compounding the problem, Vista has stylized the appearance of the magnifying glass, making it sleek, simple, and modern, but also an unrecognizable circle and line. It might as well be a seven-point star or an integration symbol. There’s a phrase Vincent Flanders coined for cool but arbitrary symbols acting as labels: mystery meat. If it’s bad for the web, it’s bad for the desktop.
They use the Windows logo as the label for the Start button. Given the challenge to get people to click it when it was labeled “Start,” this seems a dubious improvement. Granted, “Start” may not be the best text label (e.g., the often ridiculed need to click Start to stop the computer; I think “Do” might have been better). However, “Start” strikes me as a better prompt than a nondescript logo that could just as easily be an inert decoration.
Windows Explorer has unlabeled icons for forward, back, refresh, search, and recent pages. Media Player has icons for stop, start, skip, repeat, mute, and shuffle. Windows Photo Gallery has icons for zoom, next, previous, slide show, delete, undo, and redo. It used to be icons were used for commands as abbreviated expert shortcuts. The user could find the same commands with text labels through some other means, such as the pull down menu. Not these. These icons are the only way to deliver their respective commands.
Now there are places for icons. Icons alone are okay when two out of the following three apply:
- The icons are standard.
- They are intended for experts.
- Space conservation or clutter minimization is a concern.
I wouldn’t recommend replacing all controls in the top right corner of every window with “Close,” “Minimize,” and “Maximize” labels. These are standard icons and I consider them to be for experts, and with multiple windows visible, it would be cluttering to the point of distraction. However, Vista seems to employ icons for key functions and when space is plentiful. It’s left to the user to learn these icons, an effort that could have been avoided. Vista has an icon for shutting down the computer, an essential task every user needs to learn. The icon is the standard for an on/off switch but (a) clicking it does not turn anything on, and (b) clicking does not turn anything off (it actually puts the computer to sleep). There’s plenty of room for the label “Sleep,” but pictures are prettier.
Steganography
Sometimes Vista supplies the text label, only to hide it later. Borrowing from web practices, Vista condones placing a field’s label (or “prompt” in the field itself. The Search box is an example in Windows Explorer. That seems like a good idea until the user starts typing something and later forgets what the field is supposed to represent. It can happen right after typing starts, when the users experiences a “Wait, is this the right field?” moment. Too late now.
Microsoft supplies certain reasonable restrictions for putting the field label in the field, but Microsoft doesn’t necessarily follow them, using the design pattern even when there is enough space for a text label. In the case of Search, dropping the stylized magnify glass at the end of the field will give back almost half the space the label “Search” takes.
Waste of Motion
When the user logs into Vista, she or he first picks an account from the Welcome Screen, which takes the user to another screen where the user enters his or her password. If the user clicked the wrong avatar, there’s a Switch User button to navigate back to the original Welcome Screen. Why an entire separate screen for entering the password? It’s another case of wasting space, but even more serious is the wasted motion.
In XP, clicking on an account on the Welcome screen displays a text box for entering the password in the same screen. There’s no screen change and therefore no need to reorient to the new page. If the user actually wanted to click on another account in XP, well, just click on it. There’s no need to read and interpret a “switch user” button, reorient back to the Welcome screen and now select the proper account. In XP, an account selection error means one click to recover. In Vista, it’s two clicks, plus two re-orientations. What a waste.
Edit Windows
A similar design is often applied to editing simple system attributes. One dialog or page shows the attribute value, but to change it, the user must select a button or link to go to a new dialog or page. To be fair, some of this is extending the tradition from XP which also has an annoying tendency to have separate “edit” windows for changing simple attributes. In XP, as well as Vista, users can’t change the computer’s name by just editing the name in the Systems Properties window. They have to click the Change Name button first, and then click OK when done. Two unnecessary clicks. Changing an account attribute, such as account type or name is likewise a multi-step procedure in XP and Vista, rather than simply letting the user change attributes where they are displayed.
Vista could’ve reduced this waste of motion, but instead expanded on it. The Disk Defragmenter utility has a built-in scheduler. The current schedule is displayed as read-only text. To change it, click the Modify Schedule button to get a dialog with controls to change each schedule parameter. As with changing the computer’s name or an account’s attributes, the user is presented with a “view” mode of the information, and a separate “edit” mode to modify it, something that may be necessary with a web app, but in a modern GUI there’s something call “direct manipulation,” where the user can directly manipulate attributes.
Please Confirm You Received this Confirmation
Perhaps the worse waste of motion is over-use of wizard-like multi-page sequences for simple tasks, including often confirmatory messages or pages displayed at the end. Go to create a restore point in the System Properties window. Click. Get a dialog to enter the restore name. Click. Get a message saying the restore point has been created. Click. In Windows Mail, add a sender’s email address to the Blocked Senders List (click, click, click), and get a message by default saying, Hey, it actually worked! In Windows, no less! Click. It takes three clicks to activate Vista, including a useless confirmatory page at the end. Looks to me like it could be done with one click on one page. If you’re a frequent user of USB devices, I’m sure you’re happy to learn that Windows has reverted from the discreet tool-tray notification that a device can be removed to message box that requires your explicit acknowledgement.
Click, dammit.
The way a GUI is supposed to work, it doesn’t have to explain to the user that something worked. Instead, a GUI provides immediate graphic visual feedback that it worked. The user can see the difference. For example, when the user creates a restore point, the OS should show that a restore point has been created –provide a list of all restore points and show the new one added to the list. No need for a separate confirmatory message that the user has to acknowledge. You don’t have one for renaming or moving a file. Why have it for anything else?
Are You Really Really Sure?
Second worse to confirmatory messages are verification messages, and these seem even more plentiful on Vista than XP. In fact, now, if you’re lucky, a single action can trigger two verification messages in a row, one to say, “Are you sure you want to do this?” followed by one to say, “Are you sure you want to give yourself permission to do this?” Yes, welcome to User Annoyance Control. What an OS should actually have is less verification (which comes too soon and isn’t likely to be attended to anyway), and more Undo. For example, if the user didn’t mean to change the computer’s name? Undo. User account name, restore point creation and updating, change defrag schedule, everything should be undo-able.
We Love Mouse-over
When not wasting mouse motion going from window to window, there’s plenty of motion within the windows because Vista hides important information on objects until the user mouses-over the object. I mentioned that I’ve seen no simple consistent graphic rule for indicating an active object –one that responds to a click. Actually, I think I do see one rule: if something changes appearance with mouse-over, it’s clickable. Vista has worked so hard to make a striking visual experience out of using a computer, employing all the capability of modern graphics cards, but when it comes time to actually do something, users are expected to navigate by virtually feeling their way, groping around on the screen for something that throbs when it’s touched.
We’ve all been on web sites that require the user to “scrub” the screen to figure out what can be done. Wasn’t that fun? Well, now we can enjoy the same in our OS. We scrub to see if an item is active, we scrub to see tool tips for the icons, and sometimes we scrub to even see the controls at all. In Windows Explorer, the disclosure triangles for the file hierarchy tree do not appear until mouse-over. In addition to making it harder to aim the mouse at a disclosure triangle, this deprives the user of important information. If the triangles were always visible, the user can tell if a folder has subfolders with simple glance.
How Did This Happen?
I can see two ways a project can end up creating a product with this pattern of problems, and my guess is both were operating in the design of Vista.
- Selling over owning.
- Metastasized web practices.
Selling over Using
Vista’s look and feel appears to be the result of a conscious decision to design for style over usability. This would explain many of their suboptimal design decisions. They allow links for commands because they think it makes for lightweight, colorful, cool- and modern- looking windows. Stylized icons show off graphics more than words. Multiple ways of rendering essentially the same control give designers more graphic stylistic flexibility. The most extreme case of this is Vista’s Media Center. What the hell is that?
There is value in an attractive visual design, particularly in a consumer product, whose value to the user is ultimately dependent on the pleasure the user extracts from the product. Enjoying the appearance of something one owns is as valid as enjoying its functional performance and ease of use. Fortunately, form doesn’t always conflict with function. Often the best performing design is also the most beautiful. However, when there is an irresolvable conflict, you have to assess the relative value of attractiveness and performance each provide to the user and design for the right balance.
However Vista doesn’t seem concerned about balance, at least to someone acting as a user. From what I can see, the specific visual form was designed to provide appeal in showrooms and demos not in regular use. It’s a form for selling a product, not for using it. This is design driven by marketing, about making the sale, not the experience.
It would seem MS has learned a lesson from Apple that cool design sells. The hardware and features of an iPod or iPhone are not terribly impressive. The buzz that appears to drive sales is about the look and feel. Apple has embraced style in its products since the iMac, so it should be no surprise that MS is once again playing catch-up. It indicates an attitude that computers are commodities, where technical improvements have little functional impact. Under such conditions, what differentiates today’s product from yesterdays is having a new Look.
I think this style-first attitude is the motivation for the design because of the message in Vista’s visuals: more than just Vista is new, the message in the design is that Vista is “light” and therefore simple. With its use of transparency and faux reflections, Vista has gone for a “glass” look. I like to think that using glass was an attempt to communicate how fragile Windows is, being prone to abruptly “shattering,” but more likely since Mac OS X used brushed metal, MS has to choose another building material. Stone or wood could be cool, but would send the wrong message. Glass says a product is transparent or clear, that is, easy to understand. That’s how buyers are supposed to think about Vista.
Windows with lots of white space are part of this, giving an appearance of simplicity, at least in static screen shots. Big windows hide other windows, which reduces the apparent visual complexity, as does a paging model of navigation, where the number of depicted windows is minimized. Like a pair of Joo Janta 200 Super-Chromatic Peril Sensitive Sunglasses from Douglas Adams’ Hitchhiker’s Guide to the Galaxy, this keeps potential customers from seeing anything that might alarm them, allowing a comforting illusion of simplicity and peacefulness.
From a business sense choosing demo form over usable function has a certain logic. Make the sale. Once the sale is done, who cares what happens to the users? If users don’t like Vista, that’s just an opportunity to sell them the next version of Windows in a few years. In a sense this is what MS has always been doing: over-promise, make the sale, then say, “but just wait until you see how good the next thing is!” From Microsoft’s standpoint, ideally your OS version would be a fashion statement. In a few years that trendy gradient shading and glass look will appear as passé as bevel edges do now. Then users can “upgrade” again. In the fall, buy a new wardrobe, and a new operating system version.
But this is where MS chose not to emulate Apple. While the new Apple products are not without some usability compromises, Apple recognizes that ease of use is a key element of its brand. It seems to recognize that ease of use can be part of the style. For Vista, style fights against ease of use, and wins. The problem with Peril Sensitive Sunglasses is that they hide the very thing that’s most relevant. Big spacious paging windows make for simple-looking screen shots but the actual use, navigating from window to window and page to page, is actually more complex. Transparent title bars make it hard to read the title and hard to tell active windows from inactive. Transparency for the recycling bin blends with background, making it harder to see, but you probably won’t notice that until you get it home and go to delete something. Glassy “reflections” on controls (e.g., in Media Player) also make labels hard to read. Not a show-stopper in an evenly lit Best Buy, but potentially troublesome in a home office. I have enough trouble keeping real reflections off my monitor without Vista simulating some more.
Metastasized Web Practices
The other factor that appears to have driven Vista to its final design is an effort to copy design practices on the web. There are several practices desktop applications can learn from the web that would improve desktop usability, among them being grouping information visually through font characteristics such as a size. However, many of the practices that Vista has adopted represent the worse of the web. These are compromises to usability that web apps and sites have had to make due to technical limitations in the web, limitations that an OS UI does not face. Nonetheless, Vista has chosen to imitate the web in all its weaknesses.
Vista in places has abandoned dialog boxes in favor of a paging “navigation-based UI” with larger space-wasting primary windows made to look like a browser because web sites do not really have dialog boxes. Web apps have to use the limited linear paging model over a multi-window approach because, thanks to the abuse of advertisers, browsers by default have pop-up blockers and users have been trained to immediately dismiss anything that sneaks by as irrelevant to their task. The need to support bookmarking limits the use of panes and other within-page changes of content, resulting in long chains of largely static pages. It’s an inferior navigation model necessary for the web, but unnecessary for the desktop, yet Vista has chosen to embrace it just because it wants things web-like.
It’s an apparently similar process for other design decisions. The Vista logo for the start button makes sense if you regard it like the logo in a web site: it’s the link to take you Home, the place to start. Links executing actions (rather than navigation) is another web practice, a byproduct of web pages not having a decent way for users to select a data object for an action. This means a web page needs far more controls for executing commands than a thick-client app, all which are kept “lightweight” by making them links. Web pages respond too slowly and unreliably to provide the instant and trustworthy graphic feedback necessary for direct manipulation, so there’re explicit edit mode pages to change attributes and confirmation pages for every action. Undo is difficult to implement in a browser, also leading to a reliance on confirmation and verification. Web pages put field labels inside field controls such as combo boxes often because they don’t have a pull-down menu control. All this Vista has chosen to emulate and even institutionalize in their design guidelines, even though there are proven alternatives for the desktop.
Microsoft has a history of trying to make Windows more web-like. Perhaps the logic is that since low-end user Aunt Tilly can use the web, therefore the web is easy, and therefore anything that is like the web will also be easy to use. This lead in 1997 to Windows Explorer by default opening files with a single click on the file name, as if they were links. The fallacy in the logic is that the web and an OS are used for very different tasks. Mostly, the web is just for showing things in the form of pictures or text. OS user interfaces are for manipulating things, moving and copying files, changing user and network configurations, and so on. The web-like user interface to Windows Explorer 97 was turned off by default in later versions, suggesting it was a usability failure, the reason being MS never had a good solution for how to do anything other than opening a file.
Vista may now be following in the footsteps of Windows Explorer of 1997. Beyond just being an awkward user interface, Vista’s shift to web-like look and feel may undermine Microsoft’s own market share. At time when AJAX and other techniques are allowing direct editing, direct manipulation, alternatives to pages, and fast feedback in web apps, Vista is a throw back to the old web of “click here to change” with separate pages for every step of a process. By making its OS as awkward as web apps, Microsoft is making web apps to be more viable alternatives to its own products. For tasks like managing your documents, email, pictures, videos, and music, web-based apps may soon be superior to Vista. With both function and style determined by web sites, consumers will have little reason to upgrade the OS, now or in the future.
While styling the Windows to sell makes business sense, incorporating questionable web design conventions does not. Rather than marketing, I wonder if this development is driven by a flaw in MS’s usability process. Perhaps Vista is an attempt to cater to low-end users who use little other than the Web. If such people constitute MS’s set of usability test participants, then their test results may even support Vista’s design as superior to a controlled evolution of the classic GUI. Such users have suffered for so long living with the limitations of web sites, they may show little initial benefit from GUI practices. For example, consider the consistent use of controls or visual coding. Subjected to CAMIDS web sites with inconsistent graphic coding, users have been trained to click randomly on anything to see what it does, so if you make all clickable things have the same coding, such users won’t catch on in a short usability test, and so will click all over the place anyway. Every site on the web uses a different color for links. Sometimes even a single site has links with multiple appearances. So why shouldn’t these users expect every app and utility in Vista to do this too? Web users have learned the tenuous connection between the screen and the backend somewhere out in Cyberspace so they don’t trust that simply setting a new value in a control makes a change. No, you have to click Submit or something and see some sort of confirmation page. So empirically such usability testing may show that Vista is as good as or better than a conventional GUI for these web-abused users.
If the testing sessions were more extensive however, giving these users a chance develop an understanding of the graphics and trust in their behavior, then the results may have been very different. The lesson is more than don’t imitate poor web conventions when you don’t have to in your apps. If I’m right, then there’s a more important lesson in preparing usability tests or interpreting their results: plan not just for what users are, but for what they will become in using your app.
Summary Checklist
Problem: Vista includes design features that intefere with usability, which should not be emulated.
Potential Solutions
- When designing, avoid these practices:
- Large areas of white space.
- Use of primary windows when dialogs are appropriate.
- Linear multi-page sequences (”Navigation UI”) for simple tasks.
- Confirmation and verification pages or message boxes.
- Inconsistent graphic codes for indicating the behavior of your controls.
- Icons without text labels.
- Labels and controls that disappear.
- Copying bad web practices just because they’re familiar to your users.
- As a member of the design team:
- Argue against style for the sake of selling rather than using.
- Consider the impact of bad web conventions on your users when conducting or interpreting usability tests.