EVALUATING LAYOUT USABILITY FOR WEBTV ACCESS J. Assfalg, A. Del Bimbo, E. Vicario Dipartimento di Sistemi e Informatica Via S.Marta 3, 50139 Firenze, Italy {assfalg,delbimbo,vicario}@dsi.unifi.it WebTV is a device which enables access to the Internet using a TV set rather than a conventional computer. User interaction is typically supported by a remote control. This results in a discrete approach to intra-page navigation, which yields specific requirements on page layout. We analyze the factors of page layout that may hurdle discrete navigation of web pages, and we propose a metric supporting a quantitative evaluation of their usability in a context based on a WebTV device. This can serve to evaluate the accessibility through WebTV of sites that have been developed according to the good practice of design for conventional access based on a PC. It can also serve to support competitive evaluation of different layouts and to evaluate the impact of possible alternative choices of design in the construction of a web page. was conceived for tasks requiring a limited INTRODUCTION interaction. Indeed, its initial intended use was WebTV is a device which enables access to the just the selection of one out of few TV Internet using a TV set and a remote control rather programmes and the setting of few parameters of than a computer with a visualization monitor and display. By no way was it intended for supporting an interaction mouse. WebTV has a number of the continuous interaction supported by the mouse strengths that could support the spread on the of the PC. market. On the one hand, WebTV supports Web design can smooth these difficulties, by Internet access with smaller ownership cost than a adapting consolidated principles and guidelines conventional personal computer. It may largely such as IEEE-STD-2001-1999, Nielsen (2000), so accelerate the spread of Internet technolgies by as to take into account the specific requirements reaching the huge and consolidated community of for the accessibility through WebTV. In TV users. This is a major potential for eparticular, this will impact design principles commerce and for the accessibility of public and addressing the usage of text, graphics, and their universal services. Finally, WebTV also layout, for the development of web pages. anticipates the ongoing convergence of terminals used by different services as television, telephony, The issue of limitations deriving from the display and data transmission. On the other hand, in a on a TV rather than on a PC monitor has been more ambitious perspective, WebTV moves one addressed in a number of guidelines Miclea step ahead the idea of interactive TV, favoring the (1998), Nielsen (1997), WEB-TV-GUIDELINES, integration of different media. It opens the way to addressing aspects of presentation such as colors, usage scenarios in which the user moves from a usage of frames, size and the font of characters. passive, broadcast medium, such as TV, to Whereas, little work has been done concerning the selective and interactive browsing of the Internet, specific limitations on navigation usability and viceversa, enriching communication and deriving from the replacement of the mouse complementing the native capabilities of the two through a TV remote control device. media. The problem of navigation usability has been However, WebTV also shows some major largely addressesd in the literature of hypertext limitations. These mainly depend on the fact that Garzotto (1998), Hardman (1994), Rivlin (1994). both output and input devices that have been But, these results mainly focus on the problem of employed were originally designed for a different structure and inter-page navigation, rather than on context of use. On the one hand, the TV monitor layout and intra-page navigation, which is the features different ergonomic characteristics than a actual specific problem raised by the WebTV. PC monitor. It has been originally conceived for Apparently, results on this issue could be inherited moving pictures, and not for static text. And it from the research on web accessibility by users relies on television standards that can not cope with disabilities Asakawa (1998) Goble (2000) with the rapid technological evolution of the and from the corresponding experience of Internet. On the other hand, the remote control commercial products ADYNWARE, IBM-HPR.
However, research in this field still shows a bias towards the problem of presentation, as most of the work addresses the case of visually impaired users, and very few, if any, considers users with motory disabilities. This is also the case of the recent guidelines produced in the Web Accessibility Initiative, which puts a very limited emphasis on the problem of limitations in interaction capabilities WAI-Content, WAIUserAgent. In this paper, we address the problem of specific requirements on page layout which affect the accessibility of web pages through WebTV devices. We first briefly introduce navigation with the remote control on the WebTV. Then, we analyze the factors of layout that may hurdle the navigation of web pages in the discrete approach of WebTV, even in the case of layouts that would be usable in a conventional PC-based context. Further, we present a graph theoretical model of intra-page navigation and we propose a method for the evaluation of a quantitative metric of the accessibility of a web page through a WebTV device. Finally, the application of the metric is demonstrated focusing on the case of the site of a public administration. PAGE NAVIGATION WITH THE WEBTV Using the WebTV, the primary interaction device for navigation is the remote control. A keyboard is usually also available, either as a standard or optional device to support efficient text input, but it plays only a minor role in navigation. The remote control is a discrete interaction device which enables navigation through a keypad (Figure 1). At any time, the focus is located on a link of the current page. The focus—typically shown with a selection box—is moved across links in a discrete manner using the four directional keys of the remote control. The link onto which the focus is moved when pressing one of the four keys is determined by the browser according to the directional displacement and the distance between links. This generally results in intuitive moves, with some subtle exceptions. An enter key is used to follow the currently focused link.
Figure 1. Navigation of web pages with the remote control is mainly performed through five keys: Four directional keys are used to move the focus across links within a page; The enter key (in
the center) is used to follow the currently focused link. AN ACTIVITY MODEL FOR DISCRETE WEB NAVIGATION Interaction with a web site combines inter-page and intra-page navigation steps. The specificity of WebTV mainly derives from the usage of the remote control, which results in a discrete intrapage navigation. This is accomplished by the user through a repeated sequence of elementary activities (see Figure 2): 1. Identification of the Reachable Links: The user identifies a set R of links rj that can be reached directly through a single click from the currently focused link ò; 2. Link Selection: Based on the goals of the ongoing task, the user selects one of the reachable links in the set R; 3. Key Selection: The selected link is associated with one of the 4 directional keys on the remote control; 4. Activation: The selected key is pressed; 5. Orientation: The user updates the model of the page and redefines the target link to reach for the accomplishment of the ongoing task.
Figure 2. Activities (i.e. actions and decisions) involved in intra-page navigation of a web site using the WebTV. Each step involves some user effort, and may be resolved differently by different users at different times. This associates elementary activities of discrete navigation with costs and probabilities, which depend on the page layout and on the user task. The analysis of these costs and probabilities produces a checklist for the identification of factors that may limit the accessibility through WebTV even in the case of a layout design that is correct for a conventional access based on a PC.
1. The determination of the set R of directly reachable links requires a cost c1. This depends on the page layout, and in particular on the number of links close around the current focus ò. The higher the number of links surrounding ò, the higher the effort in determining a reasonable guess. The cost can be augmented by ambiguous layouts hurdling the user in interpreting how the browser will resolve conflicting relations of alignment and distance among links. False or hidden links (i.e. textual/graphical objects with the appearance but not the function of a link and viceversa, respectively) are further factors of complexity, but we do not consider them as they can be avoided through a correct page design, independently from the specificity of WebTV. The same factors that determine the user effort in identifying the set of directly reachable links, also result in different interpretations provided by different users at different times. This is accounted by the probability p 1 (n) that a link n is identified as directly reachable from the current focus ò. In general, the higher c1 , the more flat and variant p 1. 2. Selection of the link in R which is more suited to move the focus towards the final goal of the ongoing user task is accounted by a cost c2. Also in this case, the possibility of different users decisions results in a probability p 2 (n) that the link n is selected as the next position of the focus, conditioned to the fact that n has been identified as directly reachable.
A QUANTITATIVE METRIC FOR THE EFFICIENCY OF DISCRETE NAVIGATION By associating costs ci and probabilities p i with quantitative values, the activity model of discrete navigation can be developed into a metric for the evaluation of the user effort requested for the accomplishment of an intra-page navigation task. This can be used for a competitive assessment of different layouts, and in particular for the evaluation of the impact of alternative design choices and changes on the accessibility based on WebTV. A Graph Theoretical Representation of Page Layout The layout of links in a page and their neighborhood relationships induced by the behavior of the browser can be conveniently described using a graph G=, where vertices ni ∈ N represent links and edges ei ∈ E ⊆ N x N represent neighborhood connections between links. An example is shown in Figure 3. Each edge is labeled with the directional key that determines its traversal (so that each vertex has four outgoing edges, each associated with one of the four directional keys). Edges are also labeled with a cost c and a probability p, that are determined through the analysis of the activities involved in the navigation move represented by the edge. Finally, the current position of the focus is represented by a token on the node ò in the graph corresponding to the focused link.
3. The cost for associating the selected link to reach n with the directional key k of the remote control involves a cost c3 and a probability p 3 (k,n) that k is selected as the key to press, conditioned to the fact the link n has been selected as the next position of the focus. Both the cost and the probability are related to how naturally the direction associated to the required key k fits the spatial relationship between ò and n. 4. The physical action on the selected key k of the remote control is accounted by a cost c4 . 5. Finally, the update of the mental model of the page and the consequent determination of the target link that must be reached for the accomplishment of the ongoing task involves a user effort c5. The larger the changes in the visualization with respect to the previous state, the higher the cost. In particular, the display of a new page results in the highest costs, while low costs are obtained with smooth page scrolls, with few screen objects added or removed and many anchors maintained.
Figure 3. The page graph representing links as nodes and neighborhood relationships as edges. Labels on the edges indicate the directional key of the remote control that determines the edge traversal. In this graph-theoretical framework, each path between any two vertices is associated with a
distance and a probability determined by edge labels c and p. The distance between the vertices corresponding to the starting and target links of the page, averaged over the different possible paths, provides a metric for the effort spent in the accomplishment of a navigation task. Adding Costs and Probabilities Different selections for costs associated to the edges result in different metrics. If all the edges are associated with a unitary cost (c=1), the metric evaluates to the average number of keys pressed in the accomplishment of the navigation. A more elaborate model of cost can be obtained by associating the cost ci of each elementary activity of discrete navigation with a heuristic weight. In this case the cost of an edge is obtained by summing up the costs associated to the elementary activities of discrete navigation (c = Σ i=1…5 ci ), so as to account for the user cognitive effort and for the time spent to accomplish the task. The probability of an edge labeled by the key k can be derived from the probabilities p 1 (n), p2 (n), and p 3 (k,n) associated with the elementary activities corresponding to the edge itself. In fact, according to the definitions previously given, the probability that a link n is selected as the next position of the focus is equal to the product p 1 (n)*p2 (n); the probability that k is selected as the key to press is the sum: p(k)=Σ n=1..N p3 (k,n) * (p1 (n) * p 2 (n)) where N denotes the number of links in the layout graph. In principle, p 1 , p 2 , and p 3 can be determined in a user test, by evaluating the distribution of decisions taken by different subjects on the same layout. In a more practical approach, they can be derived by inspecting the page according to the previously outlined procedure to identify ambiguous alternatives, and to associate them with a heuristic rating. An inspection in the style of the cognitive walkthrough Wharton (1994), basically simplified by the low granularity of elementary user decisions under analysis, supports a systematic approach. During the navigation, the value of probabilities p 1 , p2 , and p 3 can change with the user experience and understanding of the page layout. In particular, this is the case of loops due to wrong user interpretations. In general, we can neglect this dependence, as this kind of loops corresponds to basic design flaws, independently from the specific characteristics of WebTV navigation. In addition, also where a loop is possible, this is
determined by choices with low probability, so that its repetition is definitely unlikely and does not significantly affect the average distance of the navigation. Flow Analysis Under the assumption of a steady transition probability and cost associated to the edges of the layout graph, the average length of the path between a starting and a target link can be efficiently derived using a linear algebraic approach. To this end, let Pn s be the probability that the focus lays on link n after s steps, and let Ps denote the N * 1 vector of Pn s (n=1, … ,N). Given the value of vector P0 , which concretely represents the probability to start the navigation task from any of the links of the page, the sequence of vectors Ps (s=1, … , ∞) is computed iteratively as: Ps+1 = p' * Ps where p' is the transposed of the N * N matrix p, whose element pm,n is the probability of traversing the edge from link m to link n. We assume that, if m* is the target link, then p m*,m* =1, which concretely means that the user correctly detects the completion of the navigation task and never moves from it. Under this condition, since ∀ s Σn=1…NPn s =1, and since any reasonable design does not admit loops with probability equal to 1, the sequence Pn s converges to a vector with Pm* ∞=1 and Pm ∞ = 0 ∀ m ≠ m* . Experience on common pages with a few tens of links indicates that, due to the rapidity of this convergence, computational complexity is not a limitation for practical application of the method. The sequence of probabilities Ps permits to easily derive any index of cost associated to the navigation task. In particular, it is possible to obtain the average cost spent to reach the target link, the average cost spent on each edge of the graph, the probability that any node has been visited at least once during the navigation. APPLICATION We exemplify here the application of metric evaluation of layout usability for access based on WebTV, reporting results from the analysis of the site of the local administration of the Province of Florence (http://www.provincia.fi.it). Experimentation was carried out on three different tasks, consisiting in collecting information on a given cultural resource on the territory of the Province (Progetto Leonardo), determining
opening hours of a given office (Anagrafe), and locating the instructions for the payment of a local tax on real estate in different municipalities of the Province (ICI). We focus here on this latter case, which naturally supports a competitive approach to the evaluation of different layouts implementing the same function. In fact, real estate taxes have common rules but different rates in every municipality, and sites of different municipalities presently have different structure, layout, and graphics. In particular, we report here results referring to the municipalities of Bagno a Ripoli (BR for short) and Campi Bisenzio (CB), which are examples of good quality, avoiding common web design flaws, belonging to two different major categories of site organization.
thus making a longer path more likely than a shorter one (edge next to the right). The navigation cost and effort are therefore expected to benefit from the reduction of the number of redundant anchors in the page. According to this consideration, the layout has been redesigned, so as to have both text and bullet included within a single anchor tag for each item. According to our model, the number of key activations requested by the new layout of the first page of BR dropped from 12.15 to 5.62. This is also reflected by the representation in Figure 5, where the costs that were spread over two edges in the original layout, are now concentrated on a single edge.
The layout graph of the homepage of the site BR is represented in Figure 4. The organization of the site requires the user to visit three pages to reach the final goal of the task. On average, this requires 35.46 key activations: 12.15 in the first page, 11.86 in the second, and 1.45 in the third. Figure 5. New layout of the homepage of the municipality of Bagno a Ripoli, with text and bullet of each item included in a single anchor tag.
Figure 4. Homepage of the municipality of Bagno a Ripoli, featuring a bullet lists, where text and bullet of each item represent each a different to the same page. Width of edges in the graph represents the cost spent on each edge, as evaluated by the model. Analysis of the cost spent on each link reveals that navigability of the pages is limited by the fact that in the use of bullet lists, for each item text and bullet are embedded in two different anchor tags (
), though pointing to the same page. In navigation with WebTV this necessarily results in two successive positions for the focus, thus making the path longer. Width of edges in Figure 4 shows cost spent on each edge. An analysis of this representation reveals that in the accomplishment of the page navigation task, the bullet of the first item is likely to be traversed (thick edge in the upper left corner of the image),
In the site CB, features a link to the ICI rates appears in the home page, thus requiring the access to just one page beyond the homepage (see Figure 6). This basically reduces the cost spent in the accomplishment of the task with a PC and a mouse, and suggests that in designing the site it was considered that providing information on ICI is a primary function for the web site of a municipality.
Figure 6. Redesigned homepage of the municipality of Campi Bisenzio. Removal of
redundant anchor tags did not reduce the navigation cost significantly, as the link for ICI appears at the end of a bullet list featuring several items.
F. Garzotto, M. Matera, P. Paolini (1998) ``Model-based Heuristic Evaluation of Hypermedia Usability'', in Proc. of the AVI ACM Conf., 1998.
Evaluation of costs with our model reveals that completing the navigation task with the WebTV is not efficient. In fact, the average number of key activations required to complete the task equals 28.39. Also in this case, the page features a bullet list, with separate anchor tags for text and bullet. Similarly to BR, the page was redesigned to include both text and bullet in the same anchor tag. However, only a minor reduction (to 25.8) in terms of key activations could be obtained. This can be accounted to the fact that, in the original layout, bullets did not make the most likely paths longer. Whereas, a major hurdle is that the target link appears at the bottom of the bullet list, and thus requires the focus to move across a large number of links to complete the task. In addition, the higher the number of links to be traversed, the higher the likelihood of making errors in the usage of the remote control.
C. Goble, et al. (2000) ``The Travails of Visually Impaired Web Travellers'', in Proc. of Hypertext 2000, San Antonio (TX), 2000.
To improve the overall usability of the site, as computation of the ICI tax is expected to be a frequent task, the link should be moved up in the page, so as to reduce the navigation cost. For example, by making the link the first item in the list, a cost of 1.43 could be obtained. However, this choice violates other design principles, as the link to ICI would appear before other links to more general information on the municipality. Comparison of the two sites is here biased by the emphasis on the ICI task. However, by comparing the cost spent on the traversal of a single page we have observed that such factors as usage of HTML tags, and position of links affect the cost spent in performing a navigation task with the WebTV. ACKNOWLEDGMENT This research was partially supported by the administration of the Province of Florence (Provincia di Firenze). REFERENCES ADYNWARE, Adynware Co., Web Keyboard for Navigator, http://www.adynware.com/ C. Asakawa, and T. Itoh (1998) ``User Interface of a Home Page Reader'', in Proc. of the 3rd ACM SIGCAPH Conf. on Assistive Technologies (ASSETS) '98, pp. 149-156, April 1998.
L. Hardman, et al. (1994) ``The Amsterdam hypermedia model: adding time and context to the Dexter Model'', CACM, Vol. 37, N. 2, 1994. IBM
Co., Home Page Reader, http://www.austin.ibm.com/sns/hpr.html
IEEE-STD-2001-1999, Standard, ``IEEE Recommended Practice for Internet Practices—Web Page Engineering— Intranet/Extranet Applications'', IEEE Std 2001-1999, May 28, 1999. M. G. Miclea (1998) ``How to Design Web Pages for WebTC'', STC Region 8 Conference, 1998, http://www.stc.org/region8/snb/reg8conf J. Nielsen (1997) ``WebTV Usability Review'', Jacob Nielsen's Alertbox, February 1, 1997, http://www.useit.com/alertbox/9702a.html J. Nielsen (2000) ``Designing Web Usability: The Practice of Simplicity'', New Riders Publishing, Indianapolis 2000. E.
Rivlin, et al. (1994) ``Navigating in Hyperspace: Designing a Structure-Based Toolbox'', Communications, Vol. 37, N. 2, February 1994.
WAI-Content, ``Web Content Accessibility Guidelines 1.0'', W3C Reccomendation, May 5, 1999 http://www.w3.org/TR/WAIWEBCONTENT WAI-UserAgent, ``User Agent Accessibility Guidelines 1.0'', W3C WD, January 26, 2001 http://www.w3.org/WAI/UA/UAAG10 C. Wharton, et al. (1994) ``The Cognitive Walkthrough Method: A Practitioner's Guide'', in Usability Inspection Methods, J. Nielsen and R. L. Mack (Editors), John Wiley and Sons, New York, 1994. WEB-TV-GUIDELINES, ``WebTV design guidelines'', http://developer.webtv.net/ 
