while switching between devices for Web page use. A user's cognitive volatility ..... Two of the five darker background pages, were ranked as Poor. For example ...
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
Transformation Volatility and the Gateway Model for Web Page Migration to Small Screen Devices Carolyn Watters and Bonnie MacKay Faculty of Computer Science, Dalhousie University Halifax, Nova Scotia, Canada B3H 1W5 {watters, bmackay}@cs.dal.ca Abstract More people are using their smaller devices to access the Web. In this paper, we concentrate on the effect of migrating Web pages from large screened devices to small screened devices for users who use a Web site first on the larger screen and then use the same site on the small screen. We examine transformation volatility, including cognitive and navigational factors, related to the user experience while switching between devices for Web page use. A user’s cognitive volatility can be minimized by using a transformation method that both enables the user to reuse their existing mental model of a Web page first viewed on the large screen on the small screen and by decreasing the cognitive load required to comprehend the interface components. The navigational volatility relates to a user’s expectation of how to navigate a new instance of a page on a different screen size and is influenced by changes to layout, content, location of options, and legibility. We propose a model for automatic transformation of Web pages called the Gateway that creates reduced replica of the source page. The Gateway transformation model minimizes the effect of transformation volatility for users switching between different screen sizes. Based on a subjective ranking of twenty-five randomly generated Gateways from original Web pages, twenty-two of the Gateway pages were ranked excellent or good. We examine the transformation volatility with three transformation models: direct, linear, and the Gateway.
1. Introduction More people are using the Web as a primary source of information and more people are using small mobile devices as either preferred or secondary information platform. One can anticipate that most of these users also access the Web from standard sized devices, wired or wireless. Users expect full access to the Web on the small device, expect a full range of functionality on
those pages, and expect the freedom to move from one device to another relatively seamlessly. Transformation volatility, in this paper, is used as a measure of the differences users experience when they access the same Web page in different contexts. For example, viewing a page that has been previously used on a large screen device, such as desktops or laptops, on a small screen device, such as Personal Digital Assistants (PDAs). Recognizing the factors that affect the user in these switches is important both for designers of larger pages and for the developers of algorithms that manage automatic transformations of pages for use on smaller screens. In this paper, we introduce the Gateway model and compare that model, with other models for automatic transformations of Web pages on the bases of transformation volatility introduced by the migration process. We use the term migration to refer to the rerouting or transformation of Web pages designed for large screens to small screen devices. We say that a user switches device while a page migrates to the other device. The process of switching, from the user’s point of view, includes the re-establishment of a mental model on the target device so that the task can be completed. The process of migration, from a system point of view, is based on transformations of the data to fit on the smaller screen. Such transformations can be achieved either statically, in anticipation of use, or dynamically, in response to a request for use. Static transformations include the intentional design of Web page versions, one per device, such as the popular service provided by Avantgo (www.avantgo.com). While this results in well designed small Web pages appropriate for viewing on the target device, scaling up this approach for a billionpage Web is problematic. Considerable research has been focused on techniques for use at design time so that predefined components can be used for display on the target device [10]. This approach is clearly preferred for those sites with resources to do so but is not helpful for most pre-existing sites. Dynamic transformations hold the most promise where extensive Web coverage is needed. For example,
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
1
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
a user who accesses a search engine would expect reasonable access to all hits from that search. Furthermore, a user who uses a site frequently would expect a similar experience with that site on alternative devices. There is a trade off, of course, between the quality of pages viewed on the small device and access to the full spectrum of Web pages. That is, one can expect that providing access to every Web site available would result in some Web pages that are difficult to use on the small screen.
Cognitive volatility reflects how much effort is required from the user to adjust his or her original mental model to one that reflects the page as it appears on the target device, while navigational volatility reflects how much more effort is required to navigate on the target page than on the original. Of course, establishing a workable mental model of a page has a direct impact on the user’s ability to be effective in subsequent navigation of that page.
2.1. Cognitive Volatility Factors
2. Transformation Volatility In this paper, we concentrate on the effect of migration for users who have used a site on a larger screen and who then use the same site on a smaller device. We use transformation volatility as a measure of the changes resulting from transformations of that Web page that affect the user’s ability to use the resultant page. Transitional volatility was originally defined by Danielson [6] as a measure of the difference or rate of change of layout structure among different Web pages. Danielson [6] indicates that as volatility between Web pages increases, user frustration and disorientation increase as they move between those pages. We use the notion of transformation volatility to measure the difference in layout structure of a single Web page when presented on devices of different sizes. Moving between devices with different sized screens to view the same Web page requires both a cognitive effort on the part of the user to understand the layout on the target device and a subsequent navigational effort to find the particular item of interest within that layout. We define transformation volatility for a given page migrated from one device to another device as the combination of cognitive volatility, the change in mental model, and navigational volatility, the change in navigational structure.
A goal for automatic transformation of pages from one device to another is to minimize both the effort of the user in establishing an appropriate mental model and any additional cognitive load at the target. A mental model represents objects and semantic relationships that users create to understand the relationships among large amounts of information, i.e., how the information presented fits together semantically. When users visit a Web page, they first engage in a process of constructing a mental model in order to interpret the structure and the content of that page [14]. The structural component of the model is based on the interconnection of the information components and is used by the user to become oriented to the layout of the information. The semantic component of the model is based on an interpretation of how the information fits together semantically. Users create such a mental model to affect order and context on the information by applying their own experiences, expectations, as well as cues from the physical layout [1, 7]. Successful orientation and subsequent navigation are dependent on the construction of an appropriate mental model of the information [19] and incorrect assumptions about the structure of information has been shown to negatively effect performance [1].
Figure 1. Direct migration of the Dalhousie Computer Science web page
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
2
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
Figure 2. Broadsheet layout on the large screen to linear list on the small screen
Cognitive load refers to the effort required of a user to analyze and comprehend the significance of the interface components [11]. When the cognitive load exceeds the capacity of the user, disorientation and frustration often result, both of which have been shown to negatively affect comprehension and performance [7]. In this case, we want to build on the mental model already established by the user in previous uses of the Web page and reduce cognitive load. The transformation algorithm used to migrate a given Web page from one size device to another has a direct impact on cognitive volatility. Direct migration, where the server simply sends the original page to the small device browser, as shown in Figure 1, is fast and easy. The page layout remains static but the user is now responsible for fixing the currently viewable piece within the original and now largely hidden page. On the other hand, transformations that produce linear or hierarchical versions [15], such as that shown in Figure 2, are often used for small pages where the content of the original page can be represented by a list or hierarchy of headings that can be expanded as needed. Transformations of this type require not only that the user re-map the mental model but maintain the navigation in working memory while using the site.
2.2. Navigational Volatility Factors Navigational efficiency reflects how much effort (clicks, scrolls, etc) is required to locate information present in a Web page. On the original page we can assume that one action would be enough to locate any information present. After transformations of the page for the smaller screen, this assumption no longer holds. Danielson [6] found that high volatility between successive pages increased disorientation, decreased global coherence, and decreased navigation performance of users. Navigational volatility is related to the consistency of the user’s expectation of how to
navigate a page when confronted with an instance of the page and reflects how changes in the navigational model affect task performance. Taking extra steps to complete a task accurately may be acceptable while any number of steps, more or less, that reduces task performance is problematic. Many factors contribute to navigational volatility, including: layout change, content change, location change, and legibility. Layout change is a measure of how much the actual navigational model has been altered, if at all, from one version to the other. For example, a broadsheet layout on a large screen may be changed to linear list layout on the small screen (Figure 2). Content change is a measure of how much information has been hidden or even changed in the transformation. Location change is a measure of how many options have been moved and how far from their position in the source page to their position in the target page. Legibility measures reductions in text or icon size. These factors are not independent but may be closely interdependent. 2.2.1. Layout. The layout and underlying model of data and options on the screen has been shown to affect performance (both efficiency and effectiveness) of users in both simple and complex tasks on small screens [13]. Direct migration of a Web page to a small screen device is the easiest and fastest approach and the impact on navigation is straightforward: the user now scrolls vertically and horizontally to shift the current view within a virtual page, much of which is now hidden. Earlier research is, however, clear on the negative effect of additional scrolling, particularly horizontal scrolling, on performance. Albers and Kim [1] show that scrolling and paging through large amounts of information on a small screen causes disorientation, as the user is required to retain a mental concept of the context while moving from screen to screen. Search options, although widely used, may be counterproductive for users on small screens [13].
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
3
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
Using complex data, such as tables, on small screens has been shown to lead to decreases in performance for both simple and complex tasks [20]. Most transformations replace the original layout with either a shallow hierarchy or linear list, as in Figure 2. These replacement layouts also have an effect on performance. Shneiderman [17] found that users could navigate long lists broken up into sequences of shorter lists reasonably effectively in terms of task performance but that the number of back actions increased as the number of items pushed the envelop of working memory. Studies have shown [4] that user performance is enhanced in search tasks when all options are laid out at once in a grid layout, where feasible, on a small screen rather than in a shallow hierarchy. Interestingly, the same study showed that users thought they performed better using the shallow hierarchy. Consequently, we need to be aware that there is a performance cost associated with selecting the navigational model for a page that will be used on a small screen. At the same time, there is a performance cost in requiring the user to maintain alternate models for the same page, one for each device. Typically, a user might accept a loss in efficiency when performing a task on a smaller device but not a loss in effectiveness. 2.2.2. Content change. A technique often used for automatic transformations of pages for use on smaller screens is to modify or remove data [2]. In the example shown in Figure 3, all data except headings have been removed from the original and the user proceeds by expanding headings to get more data as needed. Many systems routinely remove images and graphics on smaller screens. Often, however, data is modified or changed from the original rather than just left out. IBM transcoding is a good example of this approach [12]. A widely used modification technique is the automatic summarization of text by extraction of key sentences, phrases or keywords that provide a sense of what the whole content is about as shown in Figure 4. Images are generally reduced to thumbnails and tables are often converted into lists. Both data suppression and data modification produce an uncluttered screen but a Web page that is distinctly different than the source Web page. Although, with some effort the user can access all of the original data, the content has undergone significant change. 2.2.3. Location Change. As the layout and content change so does the effort of the user to find data or options whose locations were known in the original
page. Target distance, an artifact of Fitts Law [9], empirically measures the trade off the distance the user has to move to hit a target with their accuracy in reaching that target. In the case of migration of pages to small screens, the farther the target is from where the user expects it, the more difficulty the user will have in reaching that target accurately. Consequently, one might want to be careful in replacing entire layouts, especially in reversible transformations. Fitts Law [19] has additional relevance for users of small screens because targets on these devices are likely to be physically smaller than on the larger screen and at the same time the user is much more likely to be in a distracting or moving environment.
Figure 3. Headings only transformation
2.2.4. Legibility. Legibility of icons that replace text become very important as screen real estate is reduced. Crudely calculated an average laptop screen can display about 1000 characters while a PDA size screen can display about 250 characters, for a reduction per view of about 75%. This can be accommodated by removing or hiding data or by reducing everything about 75% to fit. The comprehension of reduced items is variable and depends on resulting font size, use of colors, use of graphics, and prior knowledge of the content by the user. We summarize these effects into four categories: layout model change, content change, location change, and legibility change. Layout change is a measure of how much the actual navigational model has been altered, if at all. Content change is a measure of how much information has been hidden or changed in the transformation. Location change is a measure of how many options have been moved and how far from their position in the source page to their position in the target page. Legibility measures reductions in text or icon size.
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
4
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
Figure 4. Summary transformation
In the next section we introduce a transformation model, called the Gateway, for use in automatic migration of Web pages for users who are familiar with the Web page in its larger form.
3. Gateway Model Earlier work on the generic transformation of Web pages for viewing on small screens was based on a parsing or decomposition of the original HTML into a structural hierarchy (like the DOM) from which rules could be applied to produce appropriate renditions for smaller screens [21]. This approach is not successful, however, for pages that are authored using a page design tool or sophisticated design where a table or similar structure is used to guarantee a layout on the screen. Interpreting the semantics of a table that has been used to impose a layout structure is a complex task with a high error rate. Design standards could be imposed so that the semantics of all new pages are defined by XML and the layout with style sheets but this ignores the reality of a billion page Web. We propose a model for automatic transformation of Web pages, called the Gateway [5], specifically for users who switch between devices to use pages that they have previously used on a large screen. This transformation uses a reduced size replica of the source page, shown in Figure 5, rather than a composition based on the content of the source. The Gateway is similar to Microsoft’s adaptive viewing approach [3], but the Gateway provides a zooming capacity that is superimposed over the replica, reminiscent of focus +
context schemes [17]. Bitstream’s Thunderhawk (www.bitstream.com) and the Opera Browser (www.opera.com) also reduce fonts and images to fit within the small screen width but both require extensive vertical scrolling. Thunderhawk uses a landscape view to increase the horizontal window somewhat, although horizontal scrolling is still required. Opera reformats the original Web page content and creates a long linear format to eliminate horizontal scrolling although vertical scrolling increases substantially. The Gateway is meant for users who are already familiar with a given site and have occasion to access it on a smaller device. The model does not require the user to make adjustments to his or her current mental model of the site and provides a consistent view of the page independent of the target device. These benefits are dependent on previous exposure to a Web page and may not be realized for pages that are only used on the smaller screen or even for pages that users see first on the small screen and only occasionally on a larger screen. The Gateway is built using a scaled replica of the original page, which may result in distortions and illegible icons or text, especially if the original page is quite large, i.e., more than 3 or 4 screen lengths. Users who have significant experience on the larger version generally do not need to be able to read every character but rather need to locate the option quickly and accurately. The user can temporarily expand or zoom in on areas of the screen, as shown in Figure 6, to get a finer grained view of the data as needed.
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
5
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
Figure 5. The large screen web page view and the Gateway
To pilot test the Gateway before launching into major development or testing costs, Gateways were created for twenty-five randomly chosen Web pages. The pages were chosen using Yahoo’s random page generator (http://random.yahoo.com/fast/ryl/). Each page was first viewed on a large screen (15” monitor) and then the image of the page was reduced to fit the small screen. Each Gateway was subjectively ranked by two researchers based on the recognizability of the
reduced page after viewing the page on the large screen. Recognizability was based on how easy it was to understand the layout and locate information after the page had already been seen on the large screen. The pages were ranked using a simple three-point scale of Excellent, Good or Poor. Table 1 summarizes the Web page information and presents the ranking for each page.
Gateway
Focus View of Menu
Select Left Hand Menu
Figure 6. Focus view of the Gateway
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
6
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
Table 1. Summary of large web page information Page Site
Rank Length Layout Style
1 www.coolcurtain.com 2 www.esperanto.se/virtuala/gazetoj.html 3 www.time.com/time/magazine/1997/dom/970929/abook. what_question.htm
Page Type Back- Images ground
E
4.25
Broadsheet Company
Light
15
G
3.5
Linear
List of Links Light
1
E
3.5
Linear
News
Light
0
4 www.hrw.org.prisons 5 www.robertmsmith.com 6 www.chemie.fu-berlin.de/chemistry/gereral/units_en.html 7 www.cnn.com/WORLD/meast/9902/04/arafat.01/ 8 www.sftix.com/ 9 www-2.cs.cmu.edu/~alf/en/en.html 10 www.4cmd.com/circuitmaterials 11 http://bwernicke.vservers.com 12 www.cnn.com/2000/WORLD/africa/04/14/zimbabwe.02 13 www.vblue.com 14 http://alabama.sierraclub.org 15 www.aurasystems.com 16 www.pdvsa.pdv.com 17 http://allafrica.com 18 http://members.aol.com/Firebug106 19 www.ulink.net/waters/mdcp/ 20 www.usatoday.com/sports/basketba/skm/wac/skmj01.ht m
G
5.25
Navigation
Informative Light
2
P
1.3
G
5.5
21 www.ireland.com/newspaper/ireland/1999/0811/hom4.ht m
E
1
22 www.thermo.com/subsid/thi.html 23 www.geocities.com/SouthBeach/Harbour/7728/ 24 www.arabicnews.com/ansub/Daily/Day/991202/1991120 230.html
E
1
P
1.5
E
25 www.gargaro.com/diana.html
G
E
2
Linear
Company
Dark
2
G
5.5
Linear
Institute
Light
0
G
3.5
Navigation
News
Light
3
E
3.5
Broadsheet Company
Light
1
E
1.5
Linear
Home
Medium
8
E
1.5
Linear
Company
Light
1
E
1
Linear
List of Files Light
0
G
5
Navigation
News
Light
1
Linear
E
1
Company
Light
1
E
1.25
Broadsheet Company
Light
4
E
1.25
Linear
Dark
4
Company
E
1
Broadsheet Company
Light
8
E
4.5
Navigation
News
Light
12
P
16
Linear
Home
Dark
22
Linear
Company
Medium
1
Navigation
News
Light
1
Navigation
News
Light
0
Navigation
Company
Light
2
Linear
Home
Light
2
1.5
Navigation
News
Light
7
2.25
Linear
Home
Light
10
*Note: images counted are ones in the body of the information and large images in the Title bars
In total, as Table 2 shows, only three pages were ranked as Poor with twenty-two pages having an Excellent (fifteen pages) or Good (seven pages) rank. The sample pages had an average of 3.6 images (SD of 4.2), where images were contained in the body or were significant in navigational bars. We examined the sample pages to look at the effect of the following features on the success of a given page
as a Gateway; length, layout style, content type, color, and images. Length: One outlier (page eighteen) required scrolling of sixteen screen lengths (based on a 15” monitor) while five samples required no scrolling (one screen in length). The overall average length, excluding the outlier, was 2.63 screen lengths (SD of 1.65) and 3.16 page lengths (SD of 3.12) with the outlier. The average length of Poor Web pages,
Table 2. Summary table for excellent, good and poor pages
Rank Excellent Good Poor
Total 15 7 3
Average Length
Broadsheet
Navigation
Linear
Average Images
1.98 4.36 6.27
4 0 0
4 4 0
7 3 3
4.3 2.6 8.3
Layout Style
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
7
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
including the sixteen page outlier, was 6.27 screen lengths, and the average was 1.4 screen lengths when the outlier was not included. The outlier page ranked as Poor, requires the user to scroll for sixteen screen lengths, despite Nielsen’s [16] recommendation to avoid scrolling vertically past three screen lengths. The Gateway simply reproduces the Web page as is in a reduced format. It does not correct bad Web page design. Layout Style: Three layout styles were identified: Broadsheet, Linear, and Navigation, shown in Figure 7. Broadsheet style has a grid layout and usually contains some images. The Linear style tends to present information in a single column format. The Navigation style contains either left or right navigation bars (or both) and presents the information in a Broadsheet or Linear fashion. Half of the pages were Linear style (thirteen pages), eight pages were Navigation style and four were Broadsheet. Content: In terms of content types, the majority (seventeen of twenty-five) of pages were either Company pages (ten pages) or News Web sites (seven pages). There were four Home pages and the remaining pages were lists of files and others. Two of the pages ranked Poor (page twenty-three and eighteen) look to be Home Web pages, which could explain the lack of attention to Web page design. Color: Most of the Web pages had a light background with dark print, although five pages had a dark or medium background with contrasting print. Two of the five darker background pages, were ranked as Poor. For example, page nineteen’s choice of colour of a medium turquoise background with dark blue writing is difficult to read on either screen size. Images: The most images found on one page were twenty-two (an outlier in the sample), with four pages having no images and overall fifteen pages had two or fewer images. The average number of images per page was 3.6 (SD 4.2).
Linear Style (Page 10)
Based on these preliminary results, some observations can be made based on Web page design and their success for transformation to the Gateway. As suspected, page length does influence the success of the Gateway. Interestingly, two samples ranked Excellent had over four page lengths to scroll on the large screen and four of the seven pages ranked Good were five pages or longer. More than half of the sample (fourteen pages), however, had a length of less than two screen lengths. The layout style does not seem to affect the quality of the Gateway. In our sample, all three pages ranked Poor had a Linear style, but ten others, such as the Linear example in Figure 7, had either an Excellent or Good ranking. Navigation style samples received either Excellent or Good rankings, such as Figure 7’s Navigation sample. All the Broadsheet pages were ranked Excellent. The effect of layout, in our sample, is independent of page length (for example, in Figure 7, the Broadsheet style is over three pages in length). In this small sample, the background color, per se, does not seem to affect the performance of the Gateway. It is hard to determine the affect images have on the Gateway. Figure 8’s Broadsheet style Web page was ranked Excellent with fifteen images, while Figure 8‘s Linear style Web page also ranked Excellent with no images. Perhaps, more important than the use of images is how the information is arranged. Typically, higher ranked pages were shorter than five pages and contained recognizable chunks of information (whether images or text), had a layout with strong contrasting colors using a light or dark background. The sample page shown in Figure 9 has a Linear layout with a medium coloured background, is just over one page in length, with images and larger characters in the title. We were encouraged by the range of pages in the random sample for which the Gateway gave good or excellent results.
Broadsheet Style (Page 8)
Navigation Style (Page 24)
Figure 7. Examples of web pages ranked excellent for the Gateway
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
8
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
.
Broadsheet Style (Page 1)
Linear Style (Page 3)
Figure 8. Example web pages for the Gateway with different number of images
The Gateway transformation model addresses many of the concerns of transformation volatility for users switching between devices of different sizes. Clearly, the factors for cognitive volatility are kept to a minimum. The user is not required to either build a new mental model for the small version or to use working memory to provide context for the data on the screen. The Gateway also minimizes the effect of navigational volatility factors. The underlying navigational model remains static. Additional effort is, however, required whenever finer grained details are required by the user to make an appropriate navigational choice. For example, if the user is familiar with the menu bar, then no expansion is necessary but if the user needs to zoom in before making a choice then an extra step is required.
Page Nine Figure 9. Example of the Gateway
The Gateway method does not result in any changes in the content or layout of the original page.
That is, no data is hidden and no data is replaced with summaries or shortened versions. Furthermore, the data is always where the user’s experience predicts it to be. This is, of course, relevant only when the user has previously used the page. Reducing the source page to make a digital miniature page that fits the small screen may, however, reduce much of the text to a size that is no longer legible. The effect of this depends largely on the dependency of the user on reading the text to make task decisions.
4. Transformation Volatility Comparison of Transformation Schemes Each of three transformation models discussed: Direct, Linear List/Shallow Hierarchy and the Gateway, have advantages and disadvantages for users who switch between devices to use Web pages. Each transformation model has a different effect on the user in terms of the cognitive and navigational factors. In Table 3, we summarize and compare the different effects of each of these factors based on these transformation models. Transformations that produce a linear list or shallow hierarchy change both the look and content of the Web page requiring users to establish a new mental model in order to understand the relationships between the information as presented. The direct transformation, while not making alterations to the original Web page, does necessitate cognitive effort by the user to adapt their existing model to support the mostly hidden information on the smaller screen. Since much of the Web page is hidden at one time, the user must rely on working memory to remember the location of information while the user interacts with the page (i.e. scrolls) to view information. Unlike these
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
9
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
Table 3. Comparison of cognitive and navigational factors
Transformation Cognitive Changes Model Direct User keeps overview Linear or Hierarchy Gateway
Layout Change Add scrolling
New cognitive model
Sequence of expands and contracts Same cognitive model Add zooms
transformation models, the performance of the Gateway relies on the stability of the user’s previous mental model. Navigational factors are influenced by changes in layout, content, location shifts and legibility. The direct transformation makes no real changes to any of these navigational factors, which is quite detrimental for users on small screens. When the Web page is transferred to the small screen, the user must rely on scrolling, both vertically and horizontally, to locate information and navigation features, which can increase frustration and disorientation. Unless the desired information or feature is located in the upper left hand corner of the original Web page, users can spend much time and effort to find this information which could be further hampered by blocks of information or navigation features that are too large to fit within one screen. Most linear lists/shallow hierarchies present information differently from the original Web page with changes to layout, removal or reduction in images and at times deletion of actual content. If information has been removed from the original source, users may become frustrated searching for information recalled from the larger screen version that no longer exists on the small screen version. Further, users may be frustrated if images have been reduced from the original with no way to enlarge the image. Navigation features, such as side menus may be eliminated, shifted or hidden. The Gateway presents the same information as its larger counterpart in a reduced format to fit the small screen that eliminates the need for scrolling. The legibility of the Gateway is largely dependent on the original Web page size. For instance, an original Web page that fits in one large screen is much more readable, than a Web page that takes four or more large screens to be displayed. To aid in readability, the user can zoom in on different sections of the Web page to be expanded and superimposed over the Gateway that continues to provide context for the user. This zooming feature is reminiscent of focus + context [17] methods used for large screen displays that provide a comprehensive overview of large data sets with some
Navigational Factors Content Relocation of Reduction in Change Options Size Same data Same relative No change location Data removed New locations Image reduction or changed and fonts maybe reduced Same data Same location Large change capacity to focus or zoom in on parts of the overview selectively. Focus + context interfaces were developed to help users cope with viewing and manipulating large data sets on computer screens. The premise behind using this style of interface for small screens is that when the amount of information that can be displayed at once is reduced, the user may have an increased need for a consistent context for those smaller units of information.
5. Summary In this paper, we introduce transformation volatility, a measure of the changes experienced by users when switching between devices of various sizes to view the same Web page. It is a combination of both the changes in the cognitive model and in the navigational model that the user must deal with in that switch between devices. Web pages that can be expected to be used on a variety of devices can be designed to minimize the transformation volatility when transformation algorithms are applied. We present the Gateway as a model for automatic transformation of a wide range of Web pages from large to small screens for those users who are familiar with Web pages on a large screen and have occasion to use those pages on a small screen. From a system perspective, this method provides two implementation benefits. First, it works with virtually any Web page regardless of how that page was created and second, it does not require either a complex decomposition or a complex re-composition algorithm to be executed dynamically. From the user perspective, this method addresses many of the transformation volatility factors, in particular consistency of cognitive and navigational models. We are ready to perform user studies to compare efficiency and effectiveness of the Gateway transformation model with the Linear List/Shallow Hierarchy approach. A first study will compare the results of users who first view a Web page on the large screen then switch to the small screen using both the Gateway and Linear List models. A second study will examine the effects of first using a Web page on the
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
10
Proceedings of the 37th Hawaii International Conference on System Sciences - 2004
small screen either using a Gateway or Linear List/Shallow Hierarchy model and then using the same Web page on the large screen. This part of the testing will be used to reinforce the results found in Part I: that by providing the exact layout and presentation as first viewed on one device, users will be able to navigate and perform tasks more efficiently and effectively than by using a different presentation layout. The last part of the testing will compare users using previously unseen Web pages on the small screen device using both the Gateway and Linear List/Shallow Hierarchy model. We speculate that the Gateway will perform better for Web sites previously viewed on large screen devices, however, we may have underestimated the impact of the user’s experience with usual Web page design on the large screen.
6. References [1] Albers, M. and Kim, L. “User Web Characteristics Using Palm Handhelds for Information Retrieval”, In Proc. of IPCC/SIGDOC Technology and Teamwork. Cambridge, MA, Sept. 2000, IEEE: New York, 125-135. [2] Bickmore, T.W. and Schilit, W.N. “Digestor: Device Independent Access to the World Wide Web”, In Proc. of 6th International WWW Conf. Santa Clara, CA, Apr. 1997, 655663. [3] Chen, Y., Ma, W. and Zhang, H. “Adapting Content to Mobile Devices: Detecting Web Page Structure for Adaptive Viewing on Small Form Factor Devices”, In Proc. of 12th International WWW Conf. Budapest, Hungary, May 2003, ACM Press: New York, 225-233. [4] Christie, J., Klein, R.M. and Watters, C. “A Comparison of Simple Hierarchical and Grid Metaphors for Option Layouts on Small-Size Screens”, Accepted Sept. 2003, International Journal of Human-Computer Studies (IJHCS). [5] Christie, J, and Klein, R.M. “Simple Path versus Gateway GUI: A Preliminary Human Performance Exploration”, Nortel Technologies Report, March 3, 1997. [6] Danielson, D.R. “Transitional Volatility in Web Navigation”, IT&Society, 2003, 1(3): 131-158. [7] Dillon, A., Richardson, J., and McKnight, C. “The Effect of Display Size and Text Splitting on Reading lengthy Text from the Screen”, Behavior and Information Technology, 1999, 9(3): 215-227. [8] Feinberg, S., and Murphy, M. “Applying Cognitive Load Theory to the Design of Web-Based Instruction”, In Proc. of IPCC/SIGDOC Technology & Teamwork, Cambridge, MA, Sept. 2000, IEEE: New York, 353-360.
[9] Fitts, P. M. “The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement”, Journal of Experimental Psychology, 1954, 47, 381-391. [10] Gaedke, M., Beigl, M., Gellersen, H. and Segor, C. “Web Content Delivery to Heterogeneous Mobile Platforms”, Advances in Database Technologies, Lecture Notes in Computer Science, Springer Verlag, 1998, #1552, 205-218. [11] Hu, P.J.H., Ma, P.C. and Chau, P.Y.K. “Evaluation of User Interface Designs for Information Retrieval Systems: A Computer-based Experiment”, Decision Support Systems, 1999, 27(1-2): 125-143. [12] IBM. 2002. “Demonstrations of IBM Transcoding Technology” [online]. Accessed: April, 2003, www.research.ibm.com/networked_data_systems/transcoding [13] Jones, M., Marsden, G., Mohd-Nasir, N., Boone, K. and Buchanan, G. “Improving Web “Interaction on Small Displays”, In Proc. of 8th International WWW Conf., Toronto, Canada, May 1999, 51-59. [14] Kayama, M. and Okamoto, T. 1999. “A semantic map approach to a navigation system for exploratory learning in hyperspace”, In Proc. of IEEE International Conf. on Systems, Man, and Cybernetics, Tokyo, Japan, Oct. 1999, IEEE: NY, 3, 839–844. [15] MacKay, B. and Watters, C. “The Impact of Migration of Data to Small Screens on Navigation”, IT&Society, 2003, 1(3): 90-101. [16] Neilsen, J. 1997 Dec. “Changes in Usability since 1994” [online]. Accessed: November, 2002, www.useit.com/alertbox/9712a.html [17] Rao, R. and Card, S.K. “The Table Lens; Merging Graphical and Symbolic Representations in an Interactive Focus + Context Visualization for Tabular Information”, In Proc. of ACM SIGCHI Conf. on Human Factors in Computing Systems, Boston, MA, Apr. 1994, ACM Press: New York, 318-322. [18] Shneiderman, B. “User Interface Design and Evaluation for an Electronic Encyclopedia”, In G. Salvendy (Ed.) Social, Ergonomic and Stress Aspects of Work with Computers. Elsevier: Amsterdam. 1987, 207-223. [19] Thüring, M., Hannemann, J., and Haake, J.M. “Hypermedia and Cognition: Designing for Comprehension”, Communications of the ACM. 1995, 38(8): 57-66. [20] Watters, C., Duffy, J. and Duffy, K. “Using Large Tables in Small Screen Devices”, International Journal of Human-Computer Studies (IJHCS). 2003, 58: 21-37. [21] Watters, C. and Comeau, D. “Adaptive Portals with Wireless Components”, Distributed Communities on the Web, Lecture Notes in Computer Science, Springer, Berlin, 2000, #1830: 34-44.
0-7695-2056-1/04 $17.00 (C) 2004 IEEE
11
