HCI Design Report for Web
Site:
Ron’s HCI Study Guide
http://www.scis.nova.edu/~wolakron/hcistudyguide/
Designing a usable Web site is not a simple task. The effort required to develop Ron’s HCI Study Guide backs up this statement. Ron's HCI Study Guide was created to assist students completing graduate level courses in Human-Computer Interaction. In addition, the Web site was developed to fulfill one of the course requirements of DISS 720 - Human-Computer Interaction taught by Dr. Laurie Dringus at Nova Southeastern University. During the development of the site, the author gained valuable insight into user-interface design strategies and the difficulties of user-interface design.
In the following pages, this paper begins with a detailed discussion of the Web site development process used to create Ron’s HCI Study Guide. Topics covered are information gathering, strategy, prototyping, implementation, launch, and maintenance and growth. These are followed by a section that focuses on usability testing. The usability heuristics and strategies employed in evaluating Ron’s HCI Study Guide along with user selection criteria and survey results are discussed. Finally, a summary of the paper along with the author’s reaction to the whole design process are presented.
Web
Site Development Process
Developing a Web site is often a lengthy process that has far-reaching effects upon both the individuals and organizations involved (Lynch & Horton, 1999). In-spite of this, many Web sites are only ad hoc efforts. They are the result of poor planning and hasty development. In consideration of this fact and recommendations by Fleming, the process used during the development of Ron’s HCI Guide followed six phases (Fleming, 1998):
1. Information gathering
2. Strategy
3. Prototyping
4. Implementation
5. Launch
6. Maintenance & growth
Phase One: Information Gathering
Phase one focused on the collection of background information. Three important questions needed to be answered during this critical phase. Those questions were:
- What are the purpose and goal of the site?
- Who is the target audience for the site, and what do they want?
- What resources are available?
Purpose and Goal
Simply, the purpose of the site was to fulfill a course requirement of DISS 720 – Human-Computer Interaction. In addition, the goal of the site was to create an HCI study guide that was an example of properly applied usability techniques and a resource to be used by future HCI graduate students.
Target Audience
One of the usability problems found in many Web sites is a design that took place without a clear target-user population in mind (Head, 1999). In contrast, Ron’s HCI Study Guide was designed from the beginning with HCI graduate students as its audience. As a result, site content was limited to topics that would give them what they wanted - assistance with their HCI studies.
Resources
Resources gathered to complete the design project included high-speed Internet access, Microsoft’s FrontPage 2000 Web site creation tool, numerous Web site usability texts and journal articles, other HCI sites, and DISS 720 class notes.
Phase Two: Strategy
The strategy phase focused on brainstorming and problem solving (i.e. identifying problems and determining solutions). Problems solved included choosing a site theme, overcoming limited user bandwidth, and determining the best Web site hosting service.
Theme
During this phase, many HCI related Web sites were explored. These sites included: HCI Web Exploration, Alertbox, Usable Web, and WebWord. Each provided a sample of past HCI Web site design along with site themes and content that were well received by their target audiences.
The HCI Web Exploration site’s classic “list of links” format pointed users to top HCI search and content sites (Dringus, 1999, August 16). The Alertbox site was also formatted as a list of links (Nielsen, 1999). The links were brief text descriptions of Nielsen’s latest HCI columns. The Usable Web contained links to selected HCI topics (Instone, 1999). In addition to a list of text links, the site included a navigation bar at the left side of the page. Finally, the WebWord site included both left and right side navigation bars along with text links that included a summary paragraph about the destination (Rhodes, 1999).
After performing the above site exploration, it was decided that the theme of Ron’s HCI Study Guide would be a study guide to assist students completing graduate level courses in human-computer interaction. The site’s format and layout would use text links formatted as questions typically asked by students completing their HCI studies.
Limited
User Bandwidth
In consideration of the bandwidth limitations of a large number of students, the average load time for any of the site’s pages was targeted at 10 seconds (over a 28.8 bps dial-up connection). Users have established expectations of the time required to complete a given task (Shneiderman, 1998). A 10-second load time would meet these expectations and minimize user concern and frustration.
To accomplish the 10-second goal, pages would need to be short and include minimal graphics. The number one design mistake in Web page design is the use of large graphics (Flanders & Willis, 1998). Large graphic images increase the time it takes to load a Web page. Since the average attention span of a visitor to a new site is only eight seconds, the faster the site loads the better.
Hosting
Service
Key to the usability and success of any Web site is the host that serves the site’s pages to visitors. Factors used to determine which service was most appropriate for Ron’s HCI Study Guide were reliability and bandwidth, cost, available storage space, file transfer (FTP) protocol support, and FrontPage Server extension support. Recent examples of visitors being unable to access the E*Trade and Charles Schwab sites illustrate the importance of reliability and adequate bandwidth to support peak periods (Horwitt, 1997).
Web hosts evaluated were Easy Space, HyperMart, MSN, Tripod, Web Provider, Yahoo, Speedchoice, and SCIS. The two selected for further evaluation during the launch phase were Speedchoice and SCIS. Both hosts provided FTP support, were zero cost, did not have banners or pop up advertisements, and had adequate bandwidth. However, Speedchoice was more reliable and provided greater storage space.
Phase Three: Prototyping
In phase three, a rough plan and storyboard were created to predict how visitors would navigate through the site. First a list of topics was developed. These topics were search tools, HCI topics, references, web design, APA format, samples, and site search. Each topic was covered by one Web page and was hierarchically at the same level as the others.
Next a simple storyboard was constructed to determine what would happen as a visitor moved through the site. Like storyboards, flowcharts are another tool used to assist with navigation design. However, storyboards show something that flowcharts are unable to: what is happening on the level of the interface as a user moves through (Fleming, 1998).
Phase
Four: Implementation
Phase four involved actual construction of the site. This included developing the site’s content and designing the Web pages.
Content
As described above, the site’s content focused on topics of interest to students of HCI. The following is a summary of the content that was developed. The home page included the statement of purpose of the site along with a list of the six major topic areas covered (see Appendix A). Underneath each topic heading were one or more links formatted as questions (e.g. Where do I find interesting topics for the required assignments?). Clicking a link provided the answer.
The second page was titled HCI Topics. The contents of this page focused on helping students decide the topic of their next HCI paper. Included was a list of links to ten sites on which a variety of ideas can be found. Sites included Alertbox, Amazon.com, Catalyst, HCIL, HCI Bibliography, HCI Web Exploration, IBM, Rainbow Group, Usable Web, and WebWord. Search Tools, the third page, focused on two intelligent search agents – Bulls Eye and Copernic. The fourth page, References, provided links to assist in locating scholarly HCI-related references. Sources included Amazon.com, ACM Search, Electric Library, IEEE Spectrum, and ProQuest Direct.
On the next page, Web Design, four topic areas were covered. They were Web design books, Web site creation and management tools, Web hosting, and FTP. The sixth page, titled APA Format, provided a detailed set of links addressing the subject of correct APA formatting. Also included on this page were links to information about an APA formatting editor called EndNote. SCIS-specific library and style files were also included for immediate download.
The last topic area, Samples, provided links to sample HCI papers, journals, and Web sites created by HCI students. All documents were in PDF format and could be downloaded and printed. The last page of the site, titled Site Search, included a FrontPage enabled search engine designed to allow users to search through any of the site’s pages.
Page Design
The page design process began with selection of a site theme. FrontPage included more than 70 different theme templates. The theme used throughout Ron’s HCI Study is called Blocks. The graphics are simple and are made up of yellow, red, and gray rectangles of different sizes. The main body of text is black, and links are red before clicking and purple after clicking. Fonts are a mixture of Arial, and Helvetica and range from 24 pt. (for page titles) to 10 pt. (for link descriptions). Text in all areas is set to left justify and wrap. This allows the site to correctly display - regardless of browser resolution (Lynch & Horton, 1999).
After selecting the theme, pages were created and organized using the FrontPage navigation view. The navigation view provides a graphical overview of how a site is organized. A list of the files supporting the site is displayed in the left pane, and a graphical representation of the hyperlinks is shown in the right pane. Users are able to drag a page from one position to another and change its link and hierarchical position by doing so (Matthews & Poulsen, 1999).
Next, a common page layout was created to maintain a consistent look and feel throughout the site. Users would not be able to effectively navigate without this (Flanders & Willis, 1998). Every attempt was made to make navigation predictable. To achieve this, borders were added to the top, left, and bottom of each page with the main body of text in the center and right side. A horizontal navigation bar was then inserted in the top border area. Page links were configured as buttons that changed colors as users passed over them. In the side boarder area, a vertical navigation bar was inserted. The page links were configured as simple text links. Use of buttons in this area used too much page area and was not aesthetically pleasing. In the common bottom border area, the following were inserted:
- Request to fill out the usability survey
- Link to Ron’s e-mail
- Site counter
- Copyright notification
- Last modified date
At this point, three quarters of the page areas for the site were complete.
The next step in the page design process was to fill in the main body area for each of the eight pages with the content described above. In the main body of each page (as with rest of the site), graphics were kept to a minimum. Tricolor rectangular images were inserted as bullets in select areas. In addition, bolded and italicized fonts were used to organize and highlight topics and subtopics throughout the site. Closely related information was grouped on the same Web page and page length was limited to no more than two printed pages. Keeping similar content in one place makes printing or saving easier for the user. Also more than four screens’ worth of information forces the user to scroll so much that the utility of the online page begins to deteriorate (Lynch & Horton, 1999). Finally, the proper balance of text and white space was maintained throughout the site.
The page design process continued with the thorough testing of all links and navigation aids. The preview function of FrontPage allowed this testing to be accomplished without an actual Web host. Before moving to phase five of the design, the site was edited for spelling and grammar errors. In addition, a site analysis was conducted to locate additional errors. A FrontPage site analysis report provided an overview of the vital statistics (i.e. 13 files, 61 external hyperlinks, 27 internal hyperlinks, zero slow pages). During the analysis, all internal and external hyperlinks were automatically verified. Six broken links were located and subsequently corrected.
Phase
Five: Launch
The fifth phase of the process included moving the finished site to an Internet host and performing extensive online testing. The first choice to host the site was the SCIS server. However, the storage limit of one megabyte was not enough to hold the site’s files. As a result, the site was initially hosted on the Speedchoice server (a local ISP with a 10 megabyte limit) at http://arizona.speedchoice.com/~rwolak/rwdiss720/. Permission was later granted by SCIS to increase storage for the site to 10 megabytes, and the site was recently relocated to http://www.scis.nova.edu/~wolakron/hcistudyguide/. At both locations, page load times were fast and reliable (10 second average at 28.8 bps).
One tool used to test the site’s usability during this phase was the Small Screen Viewer Thingie (Genericam, 1999). This Internet-based viewer displays Web pages in a fixed 640 X 400 pixel window. Twenty percent of Internet users have their browsers set to this resolution. The tool proved helpful since the site was being designed at 1280 X 1024 resolution. Displayed in a much smaller window the site text and graphics remained readable and organized. The use of left justification and line wrapping of all text and graphics automatically adjusted page layout to remain both aesthetically pleasing and usable.
Phase Six: Maintenance and Growth
In the last and current phase of the process, feedback from the usability testing (discussed below) was incorporated in the site. Plans include the creation of other study guides (e.g. Ron’s Networking Study Guide and Ron’s E-Commerce Study Guide).
Usability
Testing
Usability testing focuses on determining if a product (i.e. Web site) is easy to learn, satisfying to use, and has the functionality that users want (Branaghan, 1999). Its goal is to show the designer how a product would be received if it were released. In traditional usability tests, the tester observes users as they use a product to perform tasks. During the testing, the researcher collects both quantitative and qualitative data regarding user performance and satisfaction. Usability testing also gives the tester the opportunity to “pick the user’s brain” and ask follow-up questions.
Usability Heuristics and Strategies
Employed
The usability analysis employed to evaluate the Ron’s HCI Study Guide site was conducted in two parts. The first involved the thinking aloud technique and the second a 12-question usability questionnaire.
Thinking
Aloud
The first segment of the usability testing employed the thinking aloud technique. Typically, thinking aloud studies are conducted with psychologists or user interface experts. These experimenters usually videotape the subjects and perform a detailed protocol analysis (Nielsen, 1994a). However, it is possible to run such user tests without a sophisticated lab (Jorgensen, 1989). Jorgenson found that developers using a simplified thinking aloud method received accurate results. Nielsen also found that computer scientists were able to apply this inexpensive technique with a minimum amount of training (Nielsen, 1994b).
The thinking aloud technique required users to talk aloud during the test, telling the facilitator what they were thinking as they navigated through the Web site. The purpose of this procedure was to help the facilitator understand what was going on inside the user’s mind (Branaghan, 1999). Since this is not a common thing for people to do, the facilitator reminded test participants several times to continue to think aloud. In addition, the exploratory testing employed was unlike the typical assessment testing in which users are given specific tasks to perform (Rubin, 1994).
Questionnaire
In the second segment of the usability testing, users were asked to fill out a 12-question usability questionnaire. Questionnaires have long been used to evaluate user interfaces (Branaghan, 1999). A number of reliable and valid questionnaires have been created to assess aspects of usability (Perlman, 1999). The following is a list of a handful of these tests:
· Questionnaire for User Interface Satisfaction (QUIS)
· Perceived Usefulness and Ease of Use (PUEU)
· Nielsen’s Attributes of Usability (NAU)
· Nielsen’s Heuristic Evaluation (NHE)
· Computer System Usability Questionnaire (CSUQ)
· After Scenario Questionnaire (ASQ)
· Practical Heuristics for Usability Evaluation (PHUE)
· Purdue Usability Testing Questionnaire (PUTQ)
The questionnaire used during the testing was based-upon Nielson’s ten usability heuristics and his Heuristic Evaluation Questionnaire (Nielson, 1993). The 12 test questions covered all ten usability heuristics: visibility of system status, match between system and the real world, user control and freedom, consistency and standards, error prevention, recognition rather than recall, flexibility and efficiency of use, aesthetic and minimalist design help users recognize, diagnose, and recover from errors, help and documentation (see Appendix B).
Modifications to the standard Nielsen survey were made to fit the Web-based character of the site. The questionnaire was presented (i.e. a link at the bottom of all the site’s pages) to the users in an online Web-based format using Zoomerang. Zoomerang is a free Internet service that allows businesses and individuals to easily conduct professional-grade surveys and to automatically collect user feedback (Zoomerang, 1999). Results were accessed online and were summarized in a graphical format (see Appendix C.).
User Selection
Ron’s HCI Study Guide was designed to target graduate students as its primary audience. Consistent with this fact, the three users participating in the usability testing were selected from members of the DISS 720 HCI course given at Nova Southeastern University during the fall 1999 cluster session. Testing with each user was conducted separately.
Survey Results
The individual interviews began by making the users comfortable. Users then navigated the Web site while talking aloud. Next, the users completed the online usability questionnaire. In conclusion, the facilitator pointed out a few of the more interesting links and their benefits.
User One
User one had more than five years experience using the Internet. During the talk aloud session, her comments were very positive. They focused around the site’s content, layout, and colors. She found the site’s question and answer format an exact fit for the intended audience. In contrast, she suggested improvements to the site that included elimination of the second window when a link is executed. The user also mentioned that PDF formatted documents should be labeled as such.
The usability questionnaire for user one rated the site above average in all ten of Nielson’s usability heuristics (see results in Appendix C).
User Two
User two had between three and five years experience using the Internet. Her talk aloud comments complimented the site’s comprehensive coverage of the topic and use of a revision date. Improvements she suggested included the removal of the side navigation links (which she used about 50 percent of the time during the session), relocation of the e-mail link to the right side, and the elimination of the second window when a link is executed. She also suggested the installation of a hit counter.
The usability questionnaire for user two rated the site above average in all ten of Nielson’s usability heuristics.
User Three
User three also had between three and five years experience using the Internet. Her talk aloud feedback was positive and focused on the relevancy of the content. She offered no suggestions for improvements. Like the others, user three rated the site above average in all ten of Nielson’s usability heuristics.
Summary of User Results
All three users were experienced Internet navigators. They were impressed by the site and found the comprehensive coverage of a relevant topic to be the site’s best quality. In all three cases, they rated the site above average in all ten of Nielson’s usability heuristics. Based upon their suggestions and the judgment of the facilitator a number of changes were made to the site design. These included the elimination of the second window when opening a link, the addition of a hit counter, and the labeling of PDF documents.
Summary
and Reaction
In summary, this paper began with a detailed discussion of the Web site development process used to create Ron’s HCI Study Guide. Topics covered were information gathering, strategy, prototyping, implementation, launch, and maintenance and growth. These were followed by a section that focused on usability testing. The usability heuristics and strategies employed in evaluating Ron’s HCI Study Guide along with user selection criteria and survey results were presented.
Author’s reaction - the design process described above turned out to be more involved and time consuming than expected. Designing a usable Web site is not an easy task. Not only must the site be appealing, it must provide targeted and meaningful content, easy navigation, and fast and reliable access. The one limitation encountered during the design of Ron’s HCI Study Guide was the nonfunctional Site Search page. Neither the Speedchoice nor the SCIS servers supported FrontPage Server extensions. As a result, this page was not functional and will only be left on the SCIS site as an example of when things do not go as planned.
Appendix A
Home Page Screen Print
Appendix B
Usability Survey Questionnaire
Appendix C
Usability Survey
Results
Reference List
Branaghan, R. (1999). Testing, one -- two -- three: Fundamentals of usability testing. Fitch [Online]. Available: http://www.branaghan.com/fun_utesting.htm [1999, December 1].
Dringus, L. (1999, August 16). HCI web exploration [Online]. Available: http://scis.nova.edu/nova/hci/links.html [1999, November 7].
Flanders, V., & Willis, M. (1998). Web pages that suck. San Francisco, California: SYBEX Inc.
Fleming, J. (1998). Web navigation. Sebastopol: O'Reilly & Associates, Inc.
Genericam. (1999). Small screen viewer thingie [Online]. Available: http://www.occonnect.com/johnqpublic/640x480.html [1999, November 16].
Head, A. (1999). Design wise: a guide for evaluating the interface design of information resources. Medford, New Jersey: CyberAge Books.
Horwitt. (1997, December 15). When things go wrong... Computerworld Emmerce, 18.
Instone, K. (1999). Usable Web: 741 links about Web usability [Online]. Available: http://usableweb.com/index.html [1999, November 18].
Jorgensen, A. (1989). Using the thinking-aloud method in system development. In G. Salvendy & M. Smith (Eds.), Designing and using human-computer interfaces and knowledge based systems (pp. 743-750). Amsterdam: Elsevier Science Publishers.
Lynch, P., & Horton, S. (1999). Web style guide. New Haven, Connecticut: Yale University Press.
Matthews, M., & Poulsen, E. (1999). FrontPage 2000: A complete reference. Berkley, California: McGraw-Hill.