PAWAN R. VORA design/methods & tools Designing for the Web: A Survey A majority of the surveys on the Web, for example, the surveys conducted by Georgia Tech’s Graphics, Visualization, & Usability (GVU) Center [2]; Nielsen Media Research [6]; and Nua [7], have focused on understanding the profile of the users of the Internet and the Web. As it is important to understand how users interact (i.e., read and navigate) with Web pages in order to design usable Web pages, it is also important to understand how Web authors (or designers) design Web pages in order to design usable Web page development tools. Ainteractions...may + june 1998 13 Although the 8th GVU survey did have a they consider bandwidth and accessibility section for the Web authors, the emphasis was issues when designing Web pages? How on discovering respondents’ backgrounds, do they evaluate the Web page designs for development experience, use of Java™, and usability? How do they publish Web pages other information related to Web develop- to the Web server? ment. The focus of this survey, on the other hand, is on understanding the process of Methodology designing and developing Web pages and to Survey participants were solicited as follows: understand better how Web developers design ✖ Announcements on newsgroups: Web pages. Specifically, the survey was comp.human-factors and alt.hypertext. designed to achieve the following objectives: ✖ Announcements made to the mailing lists: The May/June Design ✱ Construct Web designer profile. Who are UTEST, World Wide Web Artists and Methods & Tools typical Web designers? What kind of pro- Consortium, WebHCI, Human columns have been fessional training do they have? How Factors/Web conference participants, combined into one as a much experience do they have designing Webgrrls (Chicago Chapter), result of a collaboration Web pages? What types of pages do they WebWomen, and Web Design. between the editors for design? One hundred and thirty-eight people each column. ✱ Identify the key components of the Web responded to the survey over a 4-week period designer’s “toolkit.” What kinds of Web from December 17, 1997, to January 15, development tools do they use? What do 1998. Like other surveys on the Internet, they like or dislike about them and why? these respondents were self-selected, and they ✱ Understand the Web development envi- responded to the survey via ronment. How much time does it take to ❥ E-mail because the survey was included in develop Web pages? How many pages are the solicitation message. developed in that time frame? Do Web ❥ The Web (the survey was made available designers work in teams? How many at the ACM SIGCHI’s Web site; URL: people participate in these teams? Do the http://www.acm.org/sigchi/web/survey/ time available and number of people in index.html). the team affect their selection of tools? ❥ Postal mail. ✱ Outline the design process. Do Web designers use style guides/design guide- Survey Results lines when developing Web pages? Do The survey results are organized in the fol- 14 interactions...may + june 1998 lowing sections: Web Designer Profile, Authoring Tools, Web Development Environment, Web Page Design & Evaluation, Publishing Web Pages, and Overall Comments. Web Designer Profile Professional background The responses indicated that there is no prototypical professional background for a Web designer (see Figure 1). They come from a variety of professional backgrounds, such as computer programming, graphic design, human factors, marketing/adver- tising, user interface design, and technical writing, and often have additional training in and “to help friends, family, and non-profit cognitive psychology, multimedia, and educa- organizations.” Other reasons for designing tion. A relatively high number of responses Web pages included education, communi- from people with professional backgrounds in cation, community building, artistic user interface design, graphic design, and endeavors, and to make money (or to human factors, however, were expected engage in a profitable activity). because these professions are well represented in the newsgroups and mailing lists from Web page design experience which the responses were solicited. Interestingly, a majority of the survey respondents (96 of 138) had more than 2 Reasons for designing Web pages years of experience (see Figure 3), suggesting There was no single, dominant reason for a bias toward the “expert” category of Web these individuals to be authoring Web pages developers. However, because the survey (see Figure 2). “Primary job responsibility” didn’t ask the respondents to give an esti- was cited as often as “one of the several tasks mate of the number of Web pages they have required by job,” “hobby/personal interest,” designed or the number of Web pages they interactions...may + june 1998 15 design in a month, it is difficult to discern their for Web pages they designed, authors’ “expertise” in the area of Web page design truly. responses were overwhelmingly focused on corporate sites for customers and vendors or Principal audience for personal use by the author (see Figure 4). When asked to identify principal audiences Types of Web pages designed Finally, the types of Web pages designed by author respon- dents are shown in Figure 5. Given that a majority of Web pages were designed for corpo- rations and personal use (Figure 4), the most common Web page types were work/organization informa- tion, product/service informa- tion, and personal home pages. A small percentage of pages designed was research papers/reports (6.5%), which are more likely to be for edu- cational institutions. 16 interactions...may + june 1998 a b c d e Figure 6. Web Page Authoring Tools (a) Text editor (Simple Text-back; Microsoft NotePad-front) (b) HTML Editor (Bare Bones Software’s BBEdit-back; Allaire’s HomeSite 3.0-front) (c) WYSIWYG Editor (Macromedia DreamWeaver-back; Claris HomePage 2.0-front) (d) Site-oriented Editor (NetObjects Fusion) (e) Database-based Editor (Vignette StoryServer) Authoring Tools Web page editors/generators This section addresses the types of authoring There are several ways Web designers create tools used. It is divided into four subsections: and generate Web pages. They often use one Web page editors/generators, HTML or more of the following (see Figure 6): (HyperText Markup Language) conversion ✖ Text editors. Because HTML files are tools, PDF (Portable Document Format) con- ASCII text files, text editors offer the version tools, and graphic design tools. most basic way to design the Web pages. interactions...may + june 1998 17 They do not, however, offer any assistance as NetObjects Fusion and GoLive’s to Web designers, and it is the responsi- CyberStudio allow the Web designers to bility of the Web designers to remember, add and rearrange pages in a tree-struc- write, and debug the HTML code they tured site diagram. The navigation bars develop. Examples of text editors are and links for the Web site are automati- NotePad, WordPad, SimpleText, and vi. cally generated for them. Site-based edi- Pawan R. Vora ✖ HTML editors. HTML editors support tors also allow rapid changing of the U S WEST web designers in writing HTML tags overall look of a site. Communications using menus, toolbars, and keyboard ✖ Database-generated Web sites. Many large 931-14th Street, shortcuts. They do not, however, write or Web sites do not build each page manu- Suite 710 hide the HTML tags from Web designers; ally. They hold the web page elements Denver, CO 80241, USA Web designers work directly with raw (text, graphics, headers, footers, etc.) into 1+303-685-2023 HTML tags. Many HTML editors also a database and automatically generate [email protected] offer additional functionality such as pages by retrieving and combining the HTML validation, link verification, elements as the Web browsers request spellchecker, and customized menus. them. Examples of database-oriented Web Examples of HTML editors are Allaire’s page–generation tools are Vignette HomeSite, Bare Bones Software’s BBEdit, Corporation’s Vignette and Lotus Notes and Sausage Software’s HotDog (with Domino Web server). Professional. The survey asked respondents to identify ✖ WYSIWYG (“What You See Is What You the type(s) of Web page editors/generators Get”) editors. WYSIWYG editors work they had used, to identify specific products like word-processing or desktop pub- used, and to rate, on a scale from 1 to 7 (1 = lishing programs, allowing authors to lay low and 7 = high), those products in terms of out pages as they want, and the editors satisfaction, learning, ease of use, function- write the necessary HTML code in the ality, and extensibility. A summary of their background. The Web designers do not responses is shown in Table 1. really need to know HTML. Examples of The majority of respondents (104) used WYSIWYG editors are Adobe PageMill, basic text editors to design Web pages. The Claris HomePage, Symantec’s Visual Page, most frequently reported text editors were Microsoft FrontPage, and Macromedia Notepad (42), SimpleText (17), WordPad Dreamweaver. (14), vi (11), and BBEdit Lite (8). HTML ✖ Site-based editors. Unlike the Web page editors ranked second as the authoring tool of development tools discussed so far, which choice; 89 respondents reported using them. are page-oriented, site-based editors such The most common HTML editors were Bare Table 1. Evaluation of Web Page Development Tools (Response Scale: 1 = Low; 7 = High) Text HTML WYSIWYG Site Database Number of Responses 104 89 74 29 19 Satisfaction 4.76 (1.70) 5.93 (1.06) 4.70 (1.59) 4.79 (1.45) 4.83 (1.38) Ease of Learning 5.41 (1.91) 5.48 (1.21) 5.19 (1.45) 4.38 (1.47) 3.78 (1.80) Ease of Use 5.40 (1.68) 5.75 (1.13) 5.20 (1.37) 4.79 (1.35) 4.06 (1.73) Functionality 4.21 (1.82) 5.67 (1.35) 4.49 (1.57) 4.72 (1.62) 5.44 (1.72) Extensibility 3.60 (1.95) 5.57 (1.52) 4.07 (1.66) 4.24 (1.88) 5.53 (1.23) 18 interactions...may + june 1998 Bones Software’s BBEdit (38) and Allaire’s The basic premise of WYSIWYG HomeSite (22).