web| Design as Design director, Peter Stern has led Microsoft.com to redesign the homepage and developed five different interactive tools for download Center, product catalog, Profile Center, search and registration online features. He designed the user interface for several internal tools and is working on creating a next-generation home page that will be released later this year.
From the title, you may think that my main concern is the layout design of the thousands of pages of the Microsoft.com Web site. Indeed, these are indeed my concerns. Visual attractiveness is important, but it's just a small part of the job. The ultimate goal is to ensure that the entire site is working properly.
I mean, people usually don't appreciate it as a work of art when they visit microsoft.com. It's about getting information about the product, or having some technical questions to consult, or reading about a developer's journal. So the design of the website should be as clear and organized as possible so that they can easily find the information they need.
Design site
When designing a Web--in the design process--the form should obey the function. This approach applies to our site throughout the design process. Of course, we have the latest WEB tools and the ability to upload a variety of visual gadgets to a Web page. But we do not think that this will be conducive to the provision of effective services to visitors.
In fact, I often find that some sites do not focus on functionality. Common errors include the following:
User interface elements are inconsistent. For example, the same control has different functions on different pages, or the same function corresponds to several user interface controls.
The navigation bar location is not consistent. Determines which pages and features of a site need to be accessible on any page of the site. This is the "Global navigation bar" that should be consistent.
Not paying attention or paying attention to basic graphic design principles. such as layout style, color and layout of the design.
Random grouping of related elements and functions. Note the position and purpose of placing the element on the Web page. This helps visitors infer the functionality of a link from other neighboring selections and locations.
Make the Web page too large to allow visitors to download for a long time via a typical modem-speed Internet connection. This is not to say that graphics should not be used, but you need to select them carefully and then optimize them with appropriate compression and color indexes.
It's not surprising that there are still a lot of problems with Web sites today. After all, Web design "Art" is relatively a novelty. Four or five years ago, Web pages were even common. At that time, people seemed to think that their Web site would attract visitors just because they existed-and that it might, in some cases, actually work. But these sites are generally hard to read, and more importantly, they are really hard to use. The next step is to "see what we can do" phase, adding a lot of animations, sound files and other add-ons to the Web page, causing visitors to download for a long time, but not much real content.
Today's Web designers have learned from previous experiences and lessons. Good sites tend to be simpler and faster, while improving functionality. This is Microsoft's goal, and we are the first to acknowledge our mistakes (see "A Brief History of Microsoft's Web" for a look at the previous homepage design).
Design errors are not always obvious. Sometimes the movement or change of a small element in design will have little or no effect. In other cases, however, it may indeed affect the functionality of the page. And if we've learned something from the past few years, it's that small changes can make a Web page run differently.
A clear process
To avoid similar problems, we have designed a clear process for the creation of new services (such as "search") or for critical Web pages, such as the home page. Each project starts on a certain basis, that is, we have a product or service that benefits from the pages, parts, or user interface elements of our site. In the early stages of product planning (phase 1th), I was asked to design some primary models: sketches that roughly describe a page, part, or function. The product team then examines the product plan recommendations to see if the service can actually bring some benefits to microsoft.com visitors.
If the answer is "yes", then the project will be approved and we'll start writing the project specification (phase 2nd). We create and propose a more complete plan on the basis of the 1th stage sketch and concept. At this point, we will generally start usability testing (typically with a written model) to understand how potential users will react to the planned design. In the final development phase (phase 3rd), we create a WEB prototype that runs the scheduled service and conduct comprehensive usability testing and internal review. Then complete the site code, modify the program error, the last site through the actual operation of the Web site to the customer release.
As you can see, availability plays an important role throughout the process (see "Serious planning is required to create a valid Web interface"). We can run a task time for the user so that we can compare the same test in later versions of the product. We can use this approach to measure to determine whether the redesign of a feature will bring any real value to the customer.
Also, we'll look closely to see if the availability object can figure out how to use the new functionality correctly-what we call "the discovery" approach. Sometimes this presents us with some challenges. For example: On our site, typing a phrase or word in a search engine produces a list of results. Then we ask the user to choose to search through these results for a finer search and to guide a page or resource. But even if "search in results" is clearly marked on a dark label, few people are familiar with it. Some users think they are starting a new search and may have no results. We are addressing this issue to ensure that customers can use all the rich features on Microsoft.com to improve their knowledge of the site.
The option "Search in results" looks intuitive, but it's not very easy to spot. This problem has been one of the problems that has plagued our design.
Final stage
Generally speaking, site design is the art of striking a balance between the needs of conflict. On the one hand, I would like to design the site as simple and easy to use. On the other hand, I want to make sure that all the powerful tools in the site are available to experienced users. At the same time, I'm also--microsoft product project teams for internal customer service-they have special needs for services. So every day I have to solve some very difficult problems, often in a very urgent situation. I find this kind of work inspiring and interesting.
This is a career that requires more skilled professionals. I went through a series of very unusual processes-learning graphic art at college, then designing a CD-ROM for a multimedia company, finally joining Microsoft and developing an application-to get the job. Oddly, when I applied (and got) the job, I had never designed a Web page before. But my extensive design experience has proven to be very useful, and I think I've proven the motto "successful design is a successful design" (no matter what the media). Many design issues are unique to the WEB, and the solution to these problems is the same for any media.
My advice to would-be Web designers is that they should also expand the design background as much as possible. Today you should make sure that some Web work is part of the interactive design training that most good design schools have incorporated into the curriculum. But solid technology in typography, color theory, layout design, and production will still be of particular value. In the future, web designers will continue to be asked to add richer multimedia content to their pages, adding new levels of complexity and technical requirements to the visibility and operability of Web sites. As a cd-rom/multimedia designer, I must have the knowledge and creative ability in graphic design, video, audio production, animation and so on. My prediction is that WEB designers will also develop these areas.
For us that belong to Microsoft.com--and elsewhere on the Internet--that should be a very interesting future.
Get to know your audience
Investigate who is visiting your site and why they are accessing it. Novice or occasional Web users have very different interests and site needs than software developers. Make your site useful to your visitors.
Provide the information you need for your audience
Keep navigation elements consistent and make sure that the areas with the highest access rates are marked clearly and that they are easy to find.
Use a clear message
Make sure that users understand the context of this page and know what they need to do. If you want the user to enter a name during the registration process, say it directly. Instead of letting visitors compute what they want, they get frustrated and go to other simpler sites, such as your competitor's site! )。
Maintain consistency
Although it's not difficult to change the appearance of different Web pages, that doesn't mean you should. Place the main features--such as a link back to the home page or a search--in the same place on each page. On Microsoft.com, the location of the Black Global navigation toolbar is the same on page more than 400,000.
Make a site available
Keep in mind the usability of the design and test site. Make sure that users can easily perform tasks to get the information they need. Estimate task time and task completion rate, then try to improve. If the new design does not improve in these areas, then do not implement it. Re-start the sketch (or the original plan) and try another method.
Keep it simple
It's easier said than done. Try to solicit feedback. Sometimes new people can easily find solutions.
Try something new.
Don't be afraid to break the routine and try something completely different. If you don't try, you'll never find a real answer.