Building a Web-Features Taxonomy for Structuring Web Design Guidelines

This paper proposes a framework for structuring web design guidelines that incorporates the hierarchies of web features and their semantic relationships with HTML and CSS. It is argued that this approach will be synchronous with the mental model of web designers, thus making the guidelines more usable. In addition, this approach embraces both external and internal aspects of web design, so there is little compromise on the coverage of web design issues. An experiment was conducted to compare the relative effectiveness of the proposed framework with other guideline structures (e.g., principle-oriented and a mixture of principle and feature-oriented). There was evidence that the principle-oriented guidelines performed worse than the other structures, but the analyses failed to establish that the proposed framework as the most effective. The experiment showed promising results but it suffered from small sample size. In spite of this, it is believed that the proposed taxonomy and framework has laid the groundwork for future research.


INTRODUCTION
Although one of the objectives of the web is to afford everyone with publishing ability, the growing diversity of web designers has caused many web usability problems.  argued that, ideally, web designers should also be experts in human-computer interaction (HCI). Yet, web designers with proper knowledge or training in HCI are rare Ratner, Grose, and Forsythe, 1996;Mayhew, 1998;Farenc and Palanque, 1999). In addition, web design is different from traditional software design, e.g., the user population is increasingly diverse and designers are unable to assert fill control over the web user interface. Therefore, web design guidelines have been developed to assist web designers in building usable web sites. However, web design guidelines themselves should also be properly designed to ensure acceptance and usage among the community of web designers.

PROBLEM DEFINITION
This paper presents an alternative approach for structuring web design guidelines. In order to match design guidelines to the characteristics of designers, a proper definition of the user population is needed. However, web designers are trained in various professional fields (e.g., computer science, graphic design, engineering, and medicine) and this diverse background of web designers complicates the effort to define a homogenous professional population. A straightforward approach would be to structure design guidelines according to design features of the web (e.g., page layout, graphics, and navigation). However, the structuring of design guidelines using web features alone is a limited approach because web features represent only the external aspects of a web page. In fact, a web page is made up of coding languages that form the basis of all web features. Therefore, it was determined that the guidelines should be structured according to a taxonomy that covers all aspects of web design, particularly web features and coding languages.
Currently, HTML (Hypertext Markup Language) and CSS (Cascading Style Sheet) are the lingua franca of the web. Therefore, it can be assumed that web designers are knowledgeable in both coding languages. This assumption serves as the motivation for structuring web design guidelines according to the hierarchy of web features and their relationships with HTMLESS. Besides, & I S approach is capable of embracing both the external aspects (web features) and internal aspects (coding language) of web design. As a result, there will be little if any compromise on the coverage of web design issues. In addition, it is suggested that such an approach will be synchronous with the mental model of web designers, thus making the guidelines more usable.

LITERATURE REVIEW
The research on guidelines generally can be categorized into three types of studies: high-level, middle-level, and detaillevel. High-level studies often address issues of guideline structure (e.g., Pribeanu, Mariage, and Vanderdonckt, 2001). Middle-level studies investigate issues involving the user interaction and the usage patterns of the guidelines (e.g., Mosier and Smith, 1986;Souza, Long, and Bevan, 1990;Tetzlaff and Schwartz, 1991;Thovtrup and Nielsen, 1991). Detailed studies of guidelines usually concentrate on the content of the guidelines themselves, such as the types of sub-content that guidelines should possess, and the applicability, validity, and presentation layout of guidelines (e.g., Mosier and Smith, 1986;Souza, Long, and Bevan, 1990;Thovtrup and Nielsen, 1991;NCI, Among the studies listed above, the template for structuring design guidelines proposed by Pribeanu et al. 2001). (2001) is worth mentioning. Based on a set of pre-determiued attributes that a guideline should possess, Pribeanu et al. proposed a template that is essentially an entity-relationship model that specifies the relationships among the attributes. Pribeanu et al. claimed that the proposed structure would be more effective in aiding knowledge transfer to its users. Kemp and Buckner (1999) described a taxonomy for categorizing various hypermedia design guidance. Design guidance was referred to as a collection of all types of design assistance while design guidelines were regarded as one subset of design guidance. Design guidelines were further categorized as either feature-oriented or procedural-oriented. For featureoriented guidelines, the researchers produced a subset of feature areas usually found on hypermedia documents. On the other hand, the procedural sub-categories classified guidelines based on hypermedia design processes and methodologies. The authors did not address the question of how well the subcategories captured all possible instances. However, their categorization of hypermedia feature areas laid the groundwork for the current research.
Four sets of existing web design guidelines were examined in order to identify commonly used reference structures. Two were published as printed text (i.e., Nielsen, 2000;Lynch and Horton, 2001) and the other two were webbased (i.e., W3C, 1999;NCI, 2002). Both printed guidelines were structured in hierarchical order. However, the web-based guidelines were linearly arranged. In addition, close examination of the W3C guidelines revealed that the structure was completely principle-oriented; it was written and structured based on HCI design principles. The other guidelines were structured using a mixture of two or three types of orientation: feature, principle, and procedural. Web features can be viewed as the design elements available on a typical web page. A collection of web features is displayed on a browser to form a web page. Web features can also be loosely defined as the external aspects of a web page because they are the visible elements of the web interface seen by the users. At the other end of the spectrum, the internal aspects of a web page are its coding languages. Users rarely interact with the underlying code but they interact regularly with web features. Even so, proper coding plays a vital role in designing for usability. To illustrate, an a 1 t statement should be specified for important web graphics so that they are accessible by users with a non-graphical browser. Therefore, it was determined that both internal and external aspects were equally important in designing for web usability.

Development of the Taxonomy
In order to categorize web design guidelines according to web features, a taxonomy of web features was developed. The development of the proposed taxonomy began by first identifylng the high-level web features used in existing design guidelines. This step involved extracting feature-oriented headings from the existing guidelines, while ignoring those were not feature-oriented. These headings were then sorted and assimilated by asking the question: What are the components of a web site? Clearly, a web site is made up of individual web pages and its content. Hence, the first step produced SITE DESIGN and PAGE DESIGN as the main web features. The second step added user interaction components, i.e., NAVIGATION DESIGN and CONTENT DESIGN as main features. Although CONTENT DESIGN could be considered a sub-feature of PAGE DESIGN, its importance to web page design resulted in its inclusion as a main feature.

s3?!@
To streamline the categorization of sub-features, the main features of Table 1 were first defined. SITE DESIGN was defined as relating to the design of the overall web site structure. PAGE DESIGN involves the design of individual pages that make up the site. CONTENT DESIGN includes the design of elements that populate an individual page. Finally, NAVIGATION DESIGN describes the mechanism that provides users with ways to navigate within the same site and between different sites.
The common strategy used in the sub-division process was to ask the question: What are the components that make up this feature? This strategy was used repeatedly to sub-divide every web feature. Theoretically, the sub-division process continues until nothmg is left to be sub-divided. In other words, the subdivision of a feature ends when the hierarchy yields HTML attributes or CSS properties. Table 1 illustrates the first three levels of the proposed taxonomy.
Further extension of this taxonomy was conducted by utilizing a conceptual model to describe the relationship between a web feature and its corresponding HTML elementdattributes and CSS properties. This relationship is represented in Figure 1. Generally, a web feature is coded by one or more HTML elements. In addition, behaviors and characteristics of an HTML element are dictated by its corresponding attributes, which may be superceded by newer CSS properties. Furthermore, web features are not mutually exclusive but are dependent on each other and may be interrelated. For instance, GRAPHICS primarily belongs to the sub-category of CONTENT DESIGN. However, when it is used as a navigation button, a unary relation can be drawn from CONTENT DESIGN to NAVIGATION DESIGN, whch is shown by the dotted-line arrow that loops back to the web feature block in Figure 1. In addition, certain HTML elements only work if they are contained within another element. This relationship is represented by the second dotted-line arrow in Figure 1 that points back to the HTML element itself. The Web Feature-HTML/CSS Relationship Model can be illustrated with a working example. Noting the arrows in Table  1, a web graphic generally belongs to the categories CONTENT DESIGN -NODES + GRAPHICS. Continuing through to the end of the hierarchy, the GRAPHICS feature is usually coded with the cimg> element, which is specified by an array of HTML attributes, namely s r c , alt, align, border, height, and width. However, the align and border attributes are superceded by the CSS text family and box family of properties in the latest HTML specification. The above relationships can be easily captured by the Web Feature-HTML/CSS Relationship Model, as shown in Figure  2.  Referring again to the GRAPHICS example, a relevant external guideline would be to "avoid using text in graphics" (Nielsen, 2000). Note that this guideline is not programmatic in nature because it does not require any modifications to the code. An example o f an internal guideline for GRAPHICS would be "include the a1 t statement to all c img> elements" (W3C, 1999). Note that the guideline requires some modification to the code and thus it is an internal guideline. There are many instances of internal and external types of guidelines that simultaneously apply to the same web feature. The GRAPHICS example presented above illustrates the capability of the model to capture such events.

EVALUATION
Four prototypes were developed to compare the relative effectiveness of different guideline structures. The prototypes were developed to emulate the structural properties of the Web Style Guide (Lynch and Horton, 2001), the Web Content Accessibility Guidelines (W3C, 1999), the Evidence-Based Web Design Guidelines (NCI, 2001), and the proposed framework. For this study, structural properties are defined by the composition of guideline orientation (i.e., feature, principle, or a mixture of both) and the number of hierarchical levels (i.e., single or multiple). The structural properties for the prototypes, stated in the order presented above, are mixedmultiple, principle-single, mixed-single, and feature-multiple. In order to create the content for the prototypes, 45 individual guidelines were randomly sampled from the existing three sets of web design guidelines. These 45 guidelines were incorporated into the prototypes, according to their respective structural properties.
Thirty-one individuals volunteered to participate in the study. Participants were fust required to pass a screening test excerpted from a professional web design certification examination (CIW Study Site, 2002;Pith and Valentine, 2002). The screening test was needed to ensure that participants had sufficient knowledge of web design and web coding languages. In addition, the test scores were later used as a covariate for statistical analysis. Seventeen participants passed the screening test with a score of 50% or higher and subsequently completed the experiment.
The experimental task required participants to identify possible design violations on a designated web page, using one of the experimental prototypes as reference guidelines. Participants were told to identify as many design violations as possible on the web page. Participant responses were tallied in terms of successhl design violation identifications or hits (H), unsuccessful design violation identifications or misses (M), and misidentification of design violations or false alarms (FA). The index of sensitivity (SE-I) was also calculated for each subject as the ratio of H to the summation of H and M.

Test of Proportions
In order to compare the effectiveness of the four different prototypes along the sensitivity measures, six pairwise comparisons of were made using tests of proportions. In order to control the type I error rate familywise, the a = 0.10 was adjusted using the Bonferroni inequality; the resulting 01 per comparison was 0.0167. By taking the two-tailed tests of hypothesis into account, the decision rule was to reject the null hypothesis if the computed p-value was smaller or equal to 0.0083.
Only one of the six painvise comparisons was found to be significant. The Web Style Guide (WSG) prototype was significantly different than the prototype of the Web Content Accessibility Guidelines (WCAG) (z = 2.463, p = 0.0069).
Based on the sample proportions for the WSG and the WCAG, it was found that the WCAG performed worse than the WSG. However, there was not enough evidence to differentiate the WCAG from the other two prototypes.

Analysis of Covariance
It was suspected that the participants' knowledge of web design could affect their performance on the task. Regression analyses showed that the screening test scores accounted for Conversely, no significant differences were found among the prototypes in regard to the number of hits. In addition, Bonferroni multiple comparison procedures (MCP) found that the prototype mirroring the Evidence-Based Web Design Guidelines was significantly different from the prototype modeled after the WCAG (p = 0.0611 < 0.10) for the measure of M. However, the MCP failed to distinguish among the prototypes for the measures of H and SE-I.

DISCUSSION
Both the test of proportions and the ANCOVA found that the prototypes were significantly different along one or more measures. The test of proportions revealed that completely principle-oriented guidelines (i.e., WCAG) performed worse than the WSG, which is largely feature-oriented. ANCOVA found significant differences among the prototypes in M and SE-I; however, it failed to find differences in H. Such inconsistent results could be due to participants' limited knowledge in HTML codes, as a majority of the design violations employed in the experimental task was focused on the coding aspect of the web page. Even though participants were screened prior to participating in the experiment, the screening test was not specifically designed to verify their competency in HTML or CSS coding. It is M e r speculated that the small sample size used in the experiment greatly reduced the power of the tests, thus, increasing the type I1 error rate. This was evident in the pairwise tests of proportions. The value of sensitivity for WCAG was substantially lower than any of the other values. In fact, the painvise difference was largest for one of the non-significant tests of proportions. However, the small sample sues, which differed for each prototype, limited the identification of any other differences as significant.

REFERENCES
Not all guidelines are written specifically for web features. Many guidelines are written as general principles. It is argued that, ideally, all guidelines should be written according to web features. To do so, principle-based guidelines should be interpreted, rephrased, and placed under the categories of the taxonomy to which they apply. If a principle-based guideline is too general to be associated with a web feature, then principleoriented headings may be added in the hierarchy. However, it is cautioned that the hierarchy should not be overwhelmed with principle-oriented headings, as this will defeat the purpose of building a feature-oriented framework for structuring guidelines.
In addition to principle-based guidelines, there is evidence that many guidelines are procedural in nature (Kemp and Buckner, 1999). The proposed framework was developed to include guidelines pertaining only to issues of designing web elements; procedural guidelines are intended for a different dimension of the web design process. Therefore, it is suggested that procedural-oriented guidelines should be considered in a separate framework. Such a proceduraloriented framework can then be used in complement to the proposed feature-oriented taxonomy. This is a feasible and valid suggestion because procedural guidelines are applicable to the design process, while feature-oriented guidelines are applicable to specific design issues involving web elements of interest.

Future Directions
To strengthen the experimental results, the experimental task should be redesigned. It is suspected that the experiment task was not a real representation of how guidelines are used. In contrast to post-hoc evaluation of web pages, web designers often consult with design guidelines during the development stage. Therefore, the task should be designed so that participants are asked to design web pages, using one of the prototypes as the reference guidelines. However, it is cautioned that this task can be very time-consuming and finding sufficient number of qualified participants can be prohbitive.
To M h e r validate the guideline categorization, it is suggested that a simple card sorting study should be conducted with multiple web design professionals. Then, the proposed framework can be implemented in a database-driven application. It is envisioned that the application can be either stand-alone software, or as an extension to existing web authoring software. In either case, the structural template as proposed by Pribeanu et al. (2001) can be incorporated into the application. Secondly, an automatic cross-referencing mechanism should be included in the application to overcome the possible inadequacies of the categorization. It is hoped that, the application will be a repository of web design guidelines that is easy to use; thus, ensuring acceptance among the community of web designers.