HAGAN HELLER and DAVID RIVERS design,@ À,@ À,@ À,@ ÀÀÀ ÀÀ,, @@ So You Wanna Design for the Web Illustrations: Leo Comix Let s say you re an interaction designer who has been working at a company for a number of years. Then one day, quite by accident, you find that you ve been roped into designing for the World Wide Web. Maybe it s just one page, maybe it s the company s whole site. Maybe the site has been around for a while and someone has decided to call you in to give it a face lift. Before you start working on designs, there are some things you will want to think about: the goals for the site, who your customers are, what they will do when they visit your site, how to organize your site according to your goals and your readers tasks, and the design of the site, keeping in mind the limitations of the web as a medium. Establishing Your Goals Start by establishing what your company s goals are for the site. Consider whether or not the site will talk about products, services, or support; offer a way to buy or demonstrate products online; communicate the company s mission; publish corporate communications, such as press releases; provide financial information to stockholders; try to get new customers; provide special services to existing customers; provide ways for readers to contact company employees (sales, support, and so forth); or publish employees home pages. Most likely, your site will be a mix of these many sites try to be everything to everyone. That s okay, but it means that you re going to interactions... m a r c h 1996 19
The images Yahoo uses are small so that people can get quickly to what they need: information. Hagan Heller Netscape Communications Corp. hagan@netscape.com +1-415-528-2626 David Rivers Independent Consultant drivers@acm.org +1-415-366-8626 have to plan the site carefully. Establishing the main goals up front will make it easier to plan the overall presentation and organization of the site s information. Identifying Your Customers Your existing customers are probably after specific information, support, product ordering, and so on. New customers may need more general information about the company s goals and products. They might be interested in things like product reviews, customer testimonials, and demonstrations. Again, your site will probably want to cater to both, but you may want to have distinct and separate areas for these different customer groups. If you re trying to target your international customers, you ll want to take them into account throughout the design; for example, remember to express phone numbers and addresses in an international format. If you have a need to connect to a particular country, you may even want to plan on providing translated pages. Also, as you may know, watch out for imagery that may be offensive or incomprehensible to your international customers. Does the site offer demonstrations, images, sounds, or multimedia? You ll need to decide what platforms (Macintosh, Windows, Unix) the site is going to support and make sure that those files will run on those platforms. Don t forget all of your customers connecting from home it can be tedious to load the pages of a site that wasn t designed for 14.4K bps connections. Don t use too many images, keep images small, and reuse your images rather than force your readers to download them again. Always provide alternate text for those who choose not to view images. If you make use of image maps, provide other ways to navigate. You may even want to consider providing an image-free version of the site. Decide on the lowest common denominator browser you re willing to support. If you want to reach everyone, your HTML is going to be less interesting than if you try to reach people who use the more popular browsers, for instance. Most browsers support basic paragraph types and styles, but if you want to use tables, for example, you ll exclude users of America On-line s browser. If you want to use Frames, the only readers that will see your Frame layout are those with Netscape Navigator 2.0, unless you provide alternate Frame pages that are available as a part of the Frame format. A specific comparison of browsers is available at http://www.ski.mskcc.org/browserwatch/. Identifying Your Readers Tasks Identify the key tasks that readers of your site will perform. Provide mechanisms for performing those tasks that align with the goals for the site and the information that you have about your customers. Some common tasks: Find a particular product Learn about the newest products Hear product reviews and customer testimonials Order a product online Learn about product featurs Get product demonstrations Contact a representative in a particular department Contact a particular employee 20 interactions... march 1996
Ask a question to the appropriate person Obtain technical support Track an order Give feedback about your products or services Follow up on an advertisement Once you ve identified all of the important tasks, select the key tasks that will appear at the top level of your site. Those key tasks are likely to be repeated in navigation tools throughout the site. Organizing the Site Once you ve identified what your readers will expect to do on your site, you re ready to consider how the site will be organized. Regardless of what you decide, it s important to make the organization clear to your readers so that they can navigate among the pages without getting lost. The key is that at each level of the hierarchy you should present the right amount of information: neither too much nor too little. The top level, in particular, needs to be compact and clear; otherwise readers won t be drawn in. Similarly, if they can t find what they re looking for within a few clicks, your readers will leave the site. One thing we ve noticed is that some corporate sites are arranged according to their internal management structure. These organizations make them more efficient to run, but that isn t always in accordance with products and services in which customers are interested. As a result, information that users need is spread across the site, and there isn t a coherent picture of how everything fits together. On other sites, the front page offers dozens of possibilities with no clear indication of what the reader is supposed to do. Avoid these problems by making sure that the hierarchy is organized around your users tasks and your communication goals. The topics need to be high-level ones that readers can jump to with the confidence that they will find what they are after. For example: Products, Support, Contacts, Feedback, Help, and/or Search. From any given page, you also want to crossreference to other areas of the site that naturally fit together. For example, if a reader is learning about your products and decides he or she wants to buy something, there should be a connection to purchasing information. When sites become too large to navigate easily, they need alternative means for accessing information. For example, you could have a table of contents, an index, a search mechanism, or a chronological list of changes and additions to the site: what s new. http://www.bankamerica.com/ The Bank of America site entertains, markets to potential customers, establishes its personality, and reveals its tools all in one. http://rrnet.com/~nakamura The Realist Wonder Society site imparts flavor, hierarchy, and thumbnails of the content on the very first page. 21
On the Mr. Showbiz site, the hierarchy, brand identity, and contents of pages are revealed on each banner. In this case, the reader is viewing The Critics: TV: Now Showing. Orient your readers with a visual language that conveys the nature of the content on the pages, the reader s position in the site, and your corporate brand identity. Use that language consistently throughout the site. It should http://web3.starwave.com/showbiz include controls for reaching key topics. You may even want to include maps as additional visual cues to keep readers from getting lost. There are some key limitations of the World Wide Web that you need to consider when creating this visual language: You can t determine exactly how a page will look for your readers. Different browsers on different platforms present pages in a variety of ways. Readers can change the fonts and font sizes, colors, and the size of the window. As a result, it s better to make sure the page layout is flexible, rather than to concentrate on exact pixel placement. Don t forget to test your site in different configurations and make sure it looks the way you expect. Keep small screens in mind: 640 x 480 is not uncommon. To support the majority of machines, use fewer than 256 colors for each of your pages. If possible, use fewer than 200: many colors are consumed by other applications on the desktop. Effects can be created with free graphics, such as HTML horizontal rules, table borders, bullets, text, background colors, and text colors. These page commands take much less time to download than images and can have a profound effect on a page. Use smaller images when you can to cut down on file size. If you re willing to restrict yourself to the browsers that support them (for example, Netscape Navigator and Microsoft Internet Explorer), convert your photographic images to JPEG or progressive JPEG formats. Reuse images and they will not be downloaded multiple times. Designing the Site Now that you ve laid the groundwork for a site that is organized according to your readers tasks and your key messages, it s time to design the appearance and content of your site. Here are some important guidelines that may help: The Web is different from advertising. Although advertisements are geared toward http://www.saturncars.com Saturn cars site lets you know exactly what image sizes you re dealing with. 22 interactions... march 1996
attracting customers to your company and products, Web users have already chosen to visit your site: they are contacting you. Make sure that your site has information that will be of interest to them; provide something that they might not be able to obtain in any other way. Don t spend your readers time convincing them why they should visit your site: help them find the information they came for. Do some legwork for your readers. Collate information about products, services, organizations, and so forth, so that you can help your readers gain a more complete understanding of important issues that matter to them. Use your collated information as a tool to keep readers at your site, rather than pointing them to other sites on the Web, and you will become a destination for a wide range of readers seeking this information. Make your readers feel as though they have an impact on your site by soliciting and publishing their feedback and comments. Make sure you respond to their feedback. You may consider creating forums where users can meet and share their experiences with your products or where they can communicate with experts and obtain technical support. Create a space of interest for those who are just visiting. Provide a path for readers to take a tour of the site that highlights your company, products, and services. Avoid Under Construction signs. If you are still assembling the basic components of your site, it s more professional to keep it off the Web or bill it as a Coming Attraction. If you are trying to equate Under Construction with This site changes frequently, then you re better off telling your readers about your update schedule, so they will know when to return for fresh content. Keep the number of links on a page down. The more links you provide, the less likely it is that your readers will finish reading the page. Link only to pages that are relevant, or you will confuse your message. Make sure that links contain keywords, rather than words like click here because readers often scan the links on pages for topics that interest them. Give your readers performance cues. If you provide links to images or multimedia files, let your readers know how big the files are, so they may determine whether or not they want to wait for the download. If you allow your readers to run search queries on a database, let them know what kind of data are available and how to specify search criteria. Ultimately, your readers are interested in information about your company and its products and services. Keep that focus in mind, design something attractive and interesting, and readers will go to your site. For More Information In our upcoming tutorial at CHI 96, we will explore what it takes to make excellent Web sites, whether for corporations, individuals, publishers, entertainers, clubs, shopping, geographic regions, art, or the presentation of data. If you d like to learn how to work with the latest HTML, check out http://home.netscape.com/people/hagan/html/ index.html Finally, it s always a good idea to spend some time on the Web yourself. Here are a couple of Web sites that put the spotlight on both excellent and horrible design: http://www.highfive.com is one person s opinion of excellent Web design http://www.suck.com is devoted to finding the worst of the World Wide Web. PERMISSION TO COPY WITHOUT FEE, ALL OR PART OF THIS MATERIAL IS GRANTED PROVIDED THAT THE COPIES ARE NOT MADE OR DISTRIBUTED FOR DIRECT COMMERCIAL ADVANTAGE, THE ACM COPYRIGHT NOTICE AND THE TITLE OF THE PUBLICATION AND ITS DATE APPEAR, AND NOTICE IS GIVEN THAT COPYING IS BY PERMISSION OF THE ASSOCIATION FOR COMPUTING MACHINERY. TO COPY OTHERWISE, OR PUBLISH, REQUIRES A FEE/AND OR SPECIFIC PERMISSION ACM 1072-5520 96 0300 $3.50 DESIGN COLUMN EDITOR Kate Ehrlich Research Scientist Lotus Development Corporation One Roger Street, Cambridge, MA 02142 +1 (617) 693-1899 Fax: +1 (617) 693-5541 Kate_Ehrlich@crd.lotus.com interactions... march 1996 23