Microsoft.com Backstage: Best Practices for Web Design

Best Practices for Design on the Web: How Microsoft.com's Design Process Works to Make the Internet a More Useful Place

As Design Director, Peter Stern has guided Microsoft.com through a home page redesign and five different tool iterations for such online features as Download Center, Product Catalog, Profile Center, Search, and Registration. He's also designed user interfaces for several internal tools, and he's currently hard at work on the next generation of the home page due to ship later this year.

From my job title, you'd probably think that I'm concerned mainly with the appearance of the Microsoft.com Web site's thousands of pages. And, of course, I am concerned about that. Visual appeal is important, but it's just a small part of the job. Let me put it in perspective: My primary task is to ensure that the site works well.

By that I mean that people usually don't visit Microsoft.com to admire the pages as works of art, or for their coolness quotient. They come to the site to get information about products, or to have a technical question answered, or to read about developers' issues - things like that. So it's important that the design of the site makes it as clear as possible where they can easily locate that information.

Architecting a site
In Web design - as in architecture - form should follow function. That approach shapes everything we do in designing our site. Of course, we have access to the latest Web tools, and we could load the site up with all sorts of visual gadgetry. But we just don't think doing so would serve our visitors very effectively.

In fact, I constantly see Web sites that don't appear to place much of a premium on functionality. Common mistakes include:

Using user interface elements inconsistently. For instance, the same controls may work differently on different pages, or there's more than one UI control for the same function.
Placement of navigation is inconsistent. Decide what pages or services of the site need to be accessible from anywhere on the site. This is your "global navigation"; don't monkey with it.
Poor (or no) attention to fundamental graphic design principles, i.e. the use of typography, color, and layout.
Haphazard grouping of related elements or functions. Pay attention to where and why you place elements on the page. You can help the visitor infer the function of one link from the selection and placement of others adjacent to it.
Making pages so bit-heavy that they can take many long seconds to download over typical modem-speed Internet connections. This doesn't mean you shouldn't use graphics, but you need to choose them carefully and then optimize them with careful compression or color indexing.

It's not surprising that there are still plenty of problems with Web sites today. After all, the "art" of Web weaving is still a relatively new one. It was only four or five years ago that Web pages even became common. In those days, it seemed as if people thought that their Web sites would attract traffic simply because they existed - and, maybe, in some cases that approach worked back then. But they were generally ugly and, more importantly, they were really hard to use. Following that era came the "look what we can do!" phase, with a preponderance of animated graphics, sound files, and other "gee-whiz" add-ons that resulted in long downloads but with little real substance added for the visitor.

Today, we're in an age where professional Web designers have learned from their mistakes. Good sites tend to be lean and fast, with a premium on function over flash. That's our goal here at Microsoft, although we're the first to admit we've made a few goofs ourselves (see "A Brief History of Microsoft on the Web" for a look back at past home page designs).

Design mistakes aren't always painfully obvious. Keep the big picture in mind: Sometimes moving or changing a small element in a design will have little or no effect. But in other cases, it can have a real impact on how a page functions. And if there is one thing we've learned over the past few years, it's that little things can make a big difference in how a Web page works.

A well-defined process
To avoid such problems, we've constructed a carefully defined process for creating new services (such as Search) or crucial Web pages (like the home page). See Figure 1.

Figure 1. Microsoft.com's design process has three stages, beginning with a planner and ending with the customer.

Each project starts, of course, with the realization that we have a product or service that merits its own page, section, or UI element on our site. In the early product-planning phase (Stage 1), I'm asked to devise some preliminary mock-ups: really rough drawings of what the page, section, or feature might look like. Then a product team looks over a product plan proposal and the mock-ups to see if it's a service that really will offer clear benefits for Microsoft.com visitors.

If the answer is "yes," then the project gets a green light and goes to specification (Stage 2). Here we build on the initial drawings and ideas developed in Stage 1 and come up with a more complete picture of what the service will look like and do. At this point, we also generally begin usability tests (often with paper prototypes) to see how prospective users respond to the proposed design.

In the final development phase (Stage 3), we create a working Web prototype of the proposed service and conduct thorough usability tests as well as an internal review. The code for the site is then completed, any bugs are eliminated, and the site is shipped to customers via the live Web site.

As you can see, usability plays a key role in this process (see "Creating an Effective Web Interface Requires Careful Planning"). We may time how long it takes a user to perform a particular task, which gives us hard numbers to compare with similar tests in later versions of the product. In this way, we can use metrics to determine if a redesign of a feature adds any real qualitative value to customers.

Also, we'll watch closely to see if our usability subjects can figure out how to properly use new features - a measure of what we call "discoverability." This sometimes provides us with some real challenges. Here's an example: On our site, keying a phrase or word into our Search engine yields a list of results. We then give the user the option of searching within those results, in order to more finely tune the search and home in on a particular page or resource. But even though "Search within results" is clearly marked as such on a shaded tab (see Figure 2), few people pick up on it. Some users assume they're starting a new search and can become frustrated with the results. It's a problem we're working on now to ensure that customers can take advantage of all the rich functionality available to them on Microsoft.com to enhance their experience on the site.

Figure 2. The option to "Search within results" looks intuitive, but it's not very discoverable. This issue is one of many design dilemmas we're grappling with.

End game
Overall, site design is the art of striking a balance between sometimes conflicting needs. On the one hand, I want to design a site that's as simple to use as possible. On the other, I want to make sure that all of the site's powerful tools are accessible to sophisticated users. And at the same time I'm also working for internal customers - Microsoft product groups - who have their own particular requirements for a service. The result is that every day I work on some very difficult problems, usually under tight deadlines. It's work that I find invigorating and enjoyable.

It's also a profession where there is a great need for more skilled practitioners. I came into this position through a rather unusual route - studying graphic arts in college, then designing CD-ROMs at a multimedia company, then joining Microsoft and working on applications. Oddly enough, when I applied for (and got) this job, I had never designed a Web page. But my wide range of design experience has proved useful, and I like to think I've proved the maxim that successful design is successful design, regardless of the medium. While many design problems are unique to the Web, the process for solving those problems is the same for Web design as it is for any medium.

My advice to would-be Web designers is that they, too, should work to develop as broad a design background as possible. Today that will surely include some Web work as part of interaction design training - most good design schools include that in their curriculum. But solid skills in typography, color theory, layout, and production still prove extremely valuable in my experience.

In the future, it's safe to assume that Web designers also will be increasingly asked to layer pages with richer multimedia content adding a new level of complexity and skills to the visualization and execution of a Web site. As a CD-ROM/multimedia designer, I was required to have knowledge of graphic design, as well as video editing, sound production, animation, and authoring skills. My prediction is that the role of a Web designer will evolve toward these areas as well.

For those of us at Microsoft.com - and elsewhere on the Internet - it should be a very interesting future.

Know your audience. Develop an understanding of who visits your site and why. Novices or casual Web users have very different interests and site requirements than, say, software developers.

Make your site "useful."
Give your audience the information it wants to see. Provide consistent navigation elements, and make sure that the pathways to popular and commonly sought areas are well marked and easily discoverable.

Use clear messaging.
Make sure the user understands the context of the page and what is required of him or her. If you want the user to write a first name in a particular box as part of a registration process, just say so. Don't make visitors figure things out for themselves; they'll get frustrated and probably switch to a site that makes life easier for them (i.e., your competition!).

Be consistent.
Just because you can easily change the look of different Web pages doesn't mean you should. Place key functions - the link to go "Home" for instance, or to execute a search - in the same place on every page. At Microsoft.com, the location of the black global toolbar navigation is the same on every one of our 400,000-plus pages.

Make it usable.
Design and test the site with usability in mind. Make sure that users can easily perform the tasks they need to get what they came to the site to find. Measure time on task and task completion rates, and then strive to improve both over time. If a new design doesn't improve those scores in a meaningful way, then don't implement it. Go back to the drawing board (or drawing program) and try a different approach.

Keep it simple.
This is often easier said than done. Try soliciting feedback. Sometimes a fresh pair of eyes can see solutions more clearly.

Look "outside of the box."
Don't be afraid to throw out the rulebook and try something completely different. You never know what will really work well until you test it.

Last Updated: April 01, 2000 - 5:00 p.m. Pacific Time

Terms of UsePrivacy Statement