Constructing User-Centered Websites: The Early Design Phases of Small to Medium Sites
By Michael Bernard
Much has been said about the early phases in the design process of websites. However, the majority of this discussion has focused on the communication between the web designer and the client, such as establishing a "feel" for the wishes and expectations of the client organization. This includes such things as establishing teams that will focus on creating a layout that conveys the desired mood or theme of the client organization. This is a very important concern, but ultimately web designers should first lay the groundwork for producing websites that are considered "usable" by its users. That is, users may be enticed by websites that are aesthetically pleasing and promote an interesting mood, but they tend to be far more satisfied and stay with websites that are designed for their use in mind (see Tedeschi, 1999).
Typically, usability is defined as how learnable, efficient, memorable, reliable in use, and satisfying and subjectively pleasing a system, in this case a website, is for its users (Nielsen, 1993). These usability attributes were originally designed for non-hypertext graphical user interfaces, but they apply here as well. For example, a website should be easy to figure out and learn (its layout should be as intuitive as possible), it should be efficient or require as few steps as possible to retrieve the desired information (the hierarchy should be broader than deeper), users should easily remember the steps needed to retrieve information, the information should be up-to-date and accurate, and a site should leave the users with a positive feeling about the site and the organization as a whole.
Moreover, usability in this sense should be predicated on the notion that the design of a web interface ought to focus on the typical users' mental model of what constitutes the structure of a website, along with how they intend to use the website and the means to accomplish this. Knowledge of mental models is especially important here because navigating within a website requires at least a rough idea of how the site is organized in order for successful navigation. Unfortunately, mismatches frequently occur between the mental model of the user and the layout of the website. For example, one study found that 58% of users typically made two or more navigational errors while searching for information (Forsythe, et al. 1997).
In order to help create a proper match between the typical user's mental model and the website design, it is suggested that the client organization first answer the question, "why design a website?" This compels clients to think about and articulate the chief purpose(s) for constructing or redesigning a website, as well as assessing the goal(s), the needs or wants of the organization with respect to the website, and the intended users will allow the web designer to understand the objectives of the client with respect to the web design. A well articulated objectives statement will, in turn, make it much easier to build a website that matches the objectives of the client to the goals and characteristics of the intended users. It also allows both parties to informally, as well as formally, agree to the objective of the website.
In thinking about the intended users, it is suggested that the client and web designer both begin by considering the needs and wants of the user population, as well as their goals and usage characteristics (i.e., demographics and web sophistication) with respect to the website (Vora, 1998). One of the fist steps in doing this is to perform a user analysis on the targeted user population by collecting as much data as possible about the average age, web experience, education level, level of technology (i.e., modem speed, etc.), income level of users, and other factors that could have an impact on user preference and performance. General surveys on web use (i.e., Georgia Tech's GVU) can give some data on the average web user. For instance, the most recent GVU survey (10th survey) states that 33.6% of web users are female and that the average person using the web for a year or less is 41.5 years of age. This data gives us some indication of the typical web user, but it is still fairly broad. Thus, informal focus groups, or even surveys to targeted user populations (i.e., representative users) may be useful in providing information about the demographics, goals, and web-usage habits of potential users. This should help shape the content of the website. For example, knowing the interests and concerns of the targeted population should serve as a guide for the type of organization and content that is presented in the website.
After the primary user-characteristics are determined and the general content of the site is agreed upon, we typically perform what we call a concept analysis of the proposed content. A concept analysis' purpose is to plan the proposed website according to representative users' beliefs about how the site should logically be organized. This should give an indication as to where users will typically think specific information will be located within the site. Knowing the representative users' mental model with respect to the structure of a site is obviously very important because it allows designers to construct the site according to users' expectations, and thus, letting it be as intuitive as possible for the users. The process of performing a concept analysis involves the categorization of each individual node&emdash;the portion of information that would encompass one web page&emdash;within the hyperlink structure by representative users according to their mental model of the appropriate hyperlink organization. This categorization will then indicate to us the possible hyperlink connections within and between the hyperlink categories.
To do this, we first write a brief summary (several words or a sentence) description for each individual node that makes up the content of the proposed website on an index card. For small websites this would include all of the nodes proposed for that site. For larger sites, designers may have to perform a concept analysis for each major hierarchical level of the site in order not to be overwhelmed with the shear number of nodes to be examined. Representative users would then sort these cards according to their idea of where each node should be placed underneath a particular category, such as the categories: "What's New, " "Services", "Research", and "Links" (see Figure 1). That is, representative users should follow a card-sorting technique that arranges the cards according to how well they "fit" within different hyperlink categories, hierarchy, and the like. Through concept analysis, the representative users' mental model of how this particular website should be organized is examined by observing and recording how the representative user ordered and ranked the nodes within the site. The representative users should be encouraged to indicate if a node does not fit in more than one category or, if they are unsure as to where a node should be placed.
Figure 1 Using the card sorting technique to figure out users' mental model of the site.
Each card-sorted layout should then be recorded. After a sufficient number of representative users have card-sorted the proposed website's content enough to present a relatively common hierarchical pattern, the layout of each representative user's hierarchical diagram may be analyzed. What has worked well in the past is to reproduce each of the users' layouts by drawing it out on computer and then comparing the various layouts to one another in terms of their similarity. Here, nodes that are regularly placed under a particular category should obviously be hierarchically linked to that category. On the other hand, nodes which do not easily fall under any major category, or are consistently grouped by several representative users under more than one category, should be linked to the associated categories as well. The reasoning, here, is that the representative users have different ideas as to where certain information should be found. To illustrate this, we used arrows to show the linking of nodes between more than one category. The circles serve as a placeholder that represents the same node that is linked to another category (see Figure 2). Using this technique has helped us in organizing the site according to users' mental model - as opposed to just the web designer's mental model - of how the website should be laid out. It also can help explain the site layout to the web designers and the clients. In addition, the clients have a greater opportunity to analyze the website's structure and comment on its layout. It is suggested that the client formally approve of the structure of the website at this point.
Figure 2 The blue lines indicate nodes that are linked to two or more categories.
Once the websites' hierarchical framework is determined, the design of the actual website can begin. A discussion of the construction and the usability evaluation/iteration process will be discussed in the next issue of the Usability News.
References
Forsythe, C., Ring, L., Grose, E., Bederson, B., Hollan, J., Perlin, K., & Meyer, J. (1996). Human Factors Research and Development for the Internal Web at Sandia National Laboratories: A Review and Update (conference proceedings).
Georgia Tech Research Corporation (1999). GVU's 10th WWW User Survey [On-line]
http://www.gvu.gatech.edu/user_surveys/survey-1998-10/tenthreport.html
Nielsen J. (1993). Usability Engineering. San Francisco, California: Morgan Kaufmann Publishers, Inc.
Tedeschi, B. (1999). Good web site design can lead to healthy sales. The New York Times on the Web E-Commerce Report [Online] http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html
Vora, P. (1998). Human factors methodology for designing web sites. In Forsythe, C., Grose, E., & Ratner, J. Mahway (Eds.), Human Factors and Web Development (pp. 153-172) NJ: Lawrence Erlbaum Associates.
