"Analysis of Web Content Delivered to a Mobile Computing Environment"

Anthony Perreault 

Anthony Perreault is a senior at New Mexico Tech, majoring in Technical Communication with an emphasis in computer science and web design. While taking classes, Anthony also works full-time at the National Radio Astronomy Observatory's Pete V. Domenici Science Operations Center as an operations specialist for the Very Long Baseline Array radio telescope where part of his duties include maintaining and upgrading operational documentation. Anthony worked with Dr. Julie Dyke Ford on his senior thesis project, Analysis of Web Content Delivered to a Mobile Computing Environment.

Contents

Abstract

Introduction

Background of Wireless Technology

Literature Review 

Survey of US Web Traffic

Selection of Sites for Analysis

Analysis of Sites

Google.com

Flickr.com

Walmart.com 

Wikipedia.org

Wordpress.com

NYTimes.com

Craigslist.com

IMDb.com

Conclusions

Suggestions for Further Research

Final Thoughts

Works Cited

Literature Review

With a basic understanding of the technology behind wireless communication in place, a literature review will now be conducted to look at the state of designing content for the mobile environment. The proliferation of mobile computing devices has presented the technical communicator with new challenges in providing coherent content for the mobile user. While the medium for the technical communicator has not changed, the canvas of the mobile computing device is far smaller. The information has to be concise and laser bright to burn through the clutter. Plus, the technical communicator has to be aware of how the software of the mobile computing device might alter the content, and thus the context, of the information. But the role of the technical communicator remains the same: to design the information to effectively communicate the context of the idea to the user.

This literature review explores research performed by technical communicators and engineers concerning how to best present content on mobile computing devices. Technical communicators are concerned with the design of information rather than technological/engineering methods on how the information is displayed. Engineers, according to Dr. McCoy from Star Trek: The Motion Picture, “Love to tinker with things;” their methods are how to alter how the information is displayed via hardware and/or software means. I have organized this review into two sections: the design of information and engineering methods. Both are important when it comes to discussing how to display content on mobile computing devices; engineers and technical communicators should know how content is best displayed for ease of communication, and technical communicators should be aware of innovations by engineers in altering how content is displayed.

Please note that while the research performed by Michael Albers and Loel Kim was focused specifically on a Personal Digital Assistant (PDA) such as the Palm PDA, the scope of this literature review and my research will be that of mobile computing devices that are Internet-capable. Mobile computing devices include, but are not limited to: traditional PDAs, “smart phones” such as the RIM Blackberry, Apple iPhone, and Google’s Android, other cellular telephones that have the capability to connect to the Internet, and other devices such as Apple’s iPod Touch.

Technical Communication Field

The first in-depth qualitative look into displaying information from the Internet onto mobile computing devices was performed by Michael Albers and Loel Kim in 2002. Albers and Kim focus on how a user interacts with a Personal Digital Assistant (PDA), assigning the role of the PDA as a task-oriented device. They provide examples to support the PDA as a task-oriented device: the use of PDAs by military personnel in the U.S. Navy, by medical doctors (45), and by auto-parts salespersons (47). In order to be a task-oriented device, the primary function of a PDA, according to Albers and Kim, is as a data storage device. The secondary function of a PDA is to be able to access information from and place information on the Internet “allowing many individual users to access a common body of information and contribute to or modify it” (47). Chu, who is cited by Albers and Kim, also provides a real-world example of an insurance company that provides its field agents with PDAs in order to download policy manuals and process insurance claims online from the field (53).

The main problem with the PDA is the small size of the display screen and its resolution as compared to desktop displays (Albers and Kim, 50; Chu 53-4). Albers and Kim report on studies that show users spend more time scrolling to find information on a PDA. Due to the size of the smaller display, not as much information can be shown, necessitating vertical and/or horizontal scrolling in order to find information (55).

For technical communicators, the guidelines for the design of content and navigation for Web sites were formulated in the mid- to late-1990s. Articles by Farkas and Farkas, Spyridakis, and Williams provide a comprehensive set of guidelines for the development and organization of content (Spyridakis), the design of the content (Williams), and web site navigation (Farkas and Farkas).

Spyridakis’s article is concerned with how to organize the content of web pages. The guidelines that Spyridakis presents are by now fairly well known within the technical communication community. Minimize the amount of text on a page and group like information together; “readers organize information in LTM (Long-Term Memory) in a hierarchical fashion…Chunking or grouping information items facilitates the reader in building these LTM frameworks”(365). Paragraphs should be written with the conclusion first; “readers perform better with a deductive organization—with topic sentences appearing at the beginning of paragraphs”(366).

Web content should be written so that the pages are scannable through the use of bulleted lists, heading/subheadings, white space, and, according to Jakob Nielsen (whom Spyridakis cites throughout the article) the use of bold fonts to highlight keywords in the text. Spyridakis disagrees with Nielsen’s suggestion of highlighting text to create scannable text. Highlighted text, according to Spyridakis “constantly pull the reader out of the syntax of the sentence and interrupt the reader’s processing of the overall meaning”(367). Spyridakis suggests the use of “good style principles”(368) such as bulleted lists, keywords, headings/subheads, and white space. Finally, writers should write concisely with easy to understand words; “authors should focus on clarity and principles of good technical writing—in this case the use of concise language, clear topic sentences, explicitly stated relationships, logically ordered information, and short pages”(371).

William’s article deals with the effective display of the content after it is organized. As an analogy, while Spyridakis is concerned with the mechanics of a car, Williams cares about the paint job, chrome trim, and the bobbing-head dachshund on the rear dash. Like the guidelines that Spyridakis provides, the ones that Williams presents are also well known to the technical communication community. Display elements should be legible and easily interpreted; “Legibility, therefore, should be a primary consideration of any graphic element in a display”(383) and “an even more practical consideration is whether or not an object on the screen can be interpreted once it’s noticed”(384). Seeing the display element isn’t enough, the user has to also understand the context of the element. Visual elements on the screen should reflect the organization structure of the information; “Good design reveals structure when it visually mimics the logical relationships that exists among elements in a display”(385). Humans look for visual clues to help understand the organization of information. Even if you can’t read, looking at a table of contents reveals that the book has some form of organization and structure.

Williams disavows us of the canard that people read more slowly on screens; “the basic finding that people, do, indeed read more slowly from monitors appears to be disappearing as the quality of text displayed on screens improves”(388). Williams explains the use of sans serif fonts over serif fonts. Serif fonts “may display irregularly when they fall on the boundaries between pixels”(389) and that “(serifs can) appear blocky and disproportionately large, especially when displayed in small type sizes or on low-resolution screens”(389). Williams also presents now commonly known guidelines concerning font size and style, justification, and the use of headings/subheadings to display visual relationship among text elements.

According to Williams, images should be supplemented with text or labels. Images should be used to reveal structure or organization that is non-linear in nature, and be used to “show what something looks like or to depict a ‘perceptual quality’”(391). He also addresses the use of icons; “...icons, because they are pictorial, are almost invariably easy to interpret” (392). Williams is quick to point out that icons within a page should be sufficiently different from the icons used by the browser. Using the same Home icon in a web page that the browser uses, for example, could lead to user confusion: does the Home icon in the web page take the user to the Home page of the site or does it send them to the Home page that they have set as their default launching point? Williams also states that “conventional” icons should be used, such as an envelope for email, in that they are “uniformly and consistently interpreted”(392).

Farkas and Farkas’s article presents rules for effective web site navigation. This article starts off with hypertext theory, the idea that “chunks of Web content (roughly corresponding to individual Web pages) can be understood as nodes and that we navigate from node to node via electronic pathways called links”(341). The Farkases then present the four major ways that nodes are linked: hierarchical, linear and multipath, web, and matrix (342). The guidelines for effective web navigation are also broken down into four major categories: how to design an effective link, how to manage a large number of links, orientation information to tell the user where they are and where they can go, and augmentation of “link-to-link navigation”(352).

An effective link is one that the user knows is a link, “the user must know ‘what’s hot and what’s not’”(342). Identifying a link can be done through various means such as underlining or changing the color of a text link, or the use of graphical links (buttons or icons). Links can be lost if the user has to vertically scroll in order to see them. Links should be clear on their destination to avoid user confusion and frustration. As for organization of links, the Farkases favor breadth over depth in navigation. “The burden of having to negotiate more levels of depth is worse than scanning a longer list of links”(345). Secondary links—shortcuts to nodes deeper within a site—can supplement primary links of the site, providing users with immediate access to content deeper within the web site. The navigational interface should represent the underlying structure of information. “Whatever design choices are made, the goals should be to provide navigational freedom and to enable the user to build a conceptual map of the nodes and links”(348).

Orientation information, according to the Farkases, is “what the user needs to know is the name of the site, the general purpose, and the sponsor”(350). This information should be clearly visible on the home page of the site, but it doesn’t “need to be explicitly stated”(350). As an example the Farkases use Steinway, the famous piano maker. Only the “corporate name in its familiar logotype (the visual representation of “Steinway”)”(350) is needed to understand what the web site is about. The information to fill the orientation role needs to be “highly conspicuous—so that it is noticed immediately—and both very brief and very clear—so that it may be processed quickly”(350-1). Orientation should continue throughout the pages of the web site. Some users may follow a “deep link” (a link from an external site that bypasses the target site’s home page) to the web site. Providing orientation information will help them navigate the site.

Link-to-link augmentation for a web site, according to the Farkases, are specialized links: links to a site map (a page that has links to, at the minimum, every major page in the site), to the home page on every lower level page, and links to search and index features for the web site (352). Site maps, while useful, suffer if the web site is modified on any regular basis by adding, removing, or renaming pages. Content management systems such as Joomla! have third-party modules that automatically generate site maps, saving the web site maintainer time. “The search interface,” state the Farkases, “should typically be configured both for users who simply type a word or phrase and for those who wish to formulate more complex searches”(354) with the results “listed in the most useful order”(354). The link to the home page on all pages serves several purposes for the user: if they become disoriented, they can go back to the home page because “it is a familiar location,” it is also a logical starting point to “begin a new information-seeking task,” and for users who come to the site from another site, they might want “to use the home page for orientation”(355).

Johan Hjelm states “the sparsity of the mobile environment forces designers to re-think their designs, just as the early Web did” (qtd. in Chu 56). Just as the displays of the early Web browsers were limited in size and resolution, so too are the displays of a PDA. In the early 1990s a screen display of 640 x 480 pixels, a color depth of 8 bits (256 colors), and a resolution of 72 (or 96) pixels per inch was common. With their limited processing power, memory, and display capabilities, a mobile computing device is analogous to early computer technology (Albers and Kim, 56; Chu 53). The implication of Hjelm’s statement is that when developing content for mobile computing devices, technical communicators should look back to the Dark Ages of the Internet for design considerations. A picture may be worth a thousand words, as the adage goes, but a thousand words can download far faster.

Engineering Field

The engineering methods reviewed use the same basic process to achieve the display of content on mobile computing devices. These methods use proprietary software, sometimes called “middleware,” to re-interpret the web page that the user requests. While the conversion algorithms may vary, the process across the methods is similar: the user requests a web page, the request goes to a proxy server that downloads the web page, then the page is re-interpreted by the conversion algorithms for the mobile browser and sent on its way.

The first method is software developed by Baudisch et al. allowing the user to select displayed content in order to expand or collapse it. This method is similar to how the user expands and contracts content on the display of an Apple iPod Touch/iPhone. On the iPod Touch, the user either spreads their fingers to zoom in or closes their fingers to zoom out (collapse). Baudisch’s method uses a stylus and a specific stroke action across the touch-sensitive display to collapse or zoom content. The collapsing of content items allows other content to automatically expand until the information the user wants is visible. Baudisch’s method is similar to the other methods in that it uses an algorithm to separate the requested web page into sections that can be expanded or collapsed.

Buyukkokten et al. introduce the Power Browser. The algorithm for the Power Browser strips a web page of nothing more than links that the user can use to navigate the web site. Vertical lines on the left side of the display represent the hierarchy of the web site, graphically showing the user how deep they are into the site. This format maximizes the amount of information that can be shown on the limited display space of the mobile computing device. One of the problems that Buyukkokten et al. addressed was that of link descriptions. “If the link is associated with text that is, a regular browser would show underlined text to indicate the presence of the link, then we check whether the text is one of a few popular link descriptions that are useless for our purposes” (432). Buyukkokten et al. then uses the ubiquitous “Click here” as a “stop description” for the software. Once the software encounters a stop description it “turn(s) to the URL associated with the link. If it (the link) points to a directory, we use only the right-most element of the URL and capitalize it. If the URL ends in a file name, we remove the extension, and use the capitalized file name” as the link descriptor (432). In a quantitative survey with other PDA browsers, the users of Power Browser were able to find information faster and had less stylus interaction (taps and gestures).

Hattori et al. developed a method that analyzes the formatting of the web page, looking for HTML tags that delineate content sections such as <DIV> and <TABLE>. Once the tags are found, the content between the opening and closing tags is extracted and reformatted by a proxy server for display on the mobile browser. Research by Hattori et al. reveals that many sites have “irregular HTML, i.e., Web pages which contain HTML grammatical errors” (363) and that the ratio of pages with irregular HTML is from “8.5%-27.1% which varies among site categories, e.g., news, entertainment, and sports” (363). The algorithm that Hattori et al. uses takes into consideration irregular HTML and defines a “content element” as being “one of four types of data…(a) Anchor specified with <A> tag, (b) Image specified with <IMG> tag, (c) JavaScript with <SCRIPT> tag, (d) All text data other than (a)-(c)” (363). Hattori et al. performed a quantitative using the web page segmentation algorithm against Google Wireless Transcoder (www.google.com/xhtml). Google Wireless Transcoder formats web content into a single-column display, emulating the display of mobile browsers. The web segmentation algorithm proved to be more effective than the single-column display when scrolling to find links was involved.

Lam and Baudisch present the Summary Thumbnail method. This method doesn’t reformat the layout of the web page like previous methods. Instead, Summary Thumbnails “are thumbnail views enhanced with fragments of readable text” (682). Through the inclusion of readable text, the user is able to identify the area containing the content that is being sought. Selecting the Summary Thumbnail content segment causes the segment to be replaced by the original section of text. The user studies for the Summary Thumbnail method included both qualitative and quantitative studies. The qualitative study was performed, obtaining general user feedback on the Summary Thumbnail method and providing a list of tasks to be accomplished during the quantitative study.

From the qualitative study, Lam and Baudisch formulated four hypotheses that were then tested by the quantitative survey: “1. Displaying web pages in a way that preserves their original layout allows users to locate information faster and more accurately. 2. The presence of readable text reduces the need for zooming navigation. 3. Shorter pages require less scrolling. 4. Effect of incomplete text fragments are tolerable”(687–8). The quantitative study used three display methods: the default browser method of single-column display, a standard thumbnail method, and the Summary Thumbnail method. The results of the study showed that “Summary Thumbnails were found to be more effective in supporting web browsing than the single-column browsing technique that currently dominates the commercial market of small screen devices”(690) and that “the vast majority of participants preferred Summary Thumbnails over traditional thumbnail views as well as single-column browsing”(690).

Wobbrock et al. present WebThumb, “Web Exploration using a Body of Techniques for Handheld Ubiquitous Mobile Browsing” (206). WebThumb is an amalgamation of the Summary Thumbnails method of Lam and Baudisch combined with a variant of the collapse-to-zoom method of Baudisch et al. Like Summary Thumbnails, WebThumb retains the original layout of the web page on the screen. The user then selects content from the displayed thumbnail that expands, similar to the collapse-to-zoom method. The zoomed content, however, can be left on the screen as a collapsed, persistent window. Tapping on this collapsed window with the stylus will open it up. Unlike the other methods previously presented, WebThumb “demonstrates that web browsing on handheld devices can and should depart from the experience of its desktop predecessor”(208). WebThumb takes advantage of “interaction techniques designed” for mobile computing devices, such as the use of thumbnail views of web pages and the ability to tear off and keep persistent windows collapsed to save valuable screen real-estate (208).

Synthesizing the Technical Communication and Engineering Fields

Albers and Kim addressed the issues facing the technical communicator when designing content specifically targeted for mobile devices, and acknowledge that with technologies that change rapidly there can be issues in “identifying problems and developing solutions”(56). A survey of the literature has shown that, since the work by Albers and Kim, there has been no further research published in the field of technical communication concerning the role of technical communicators designing content for mobile computing devices. A factor that should be taken into consideration is that around the time Albers and Kim published their article in 2002, the tech bubble had burst followed by the dot com implosion. Undoubtedly some companies that might have conducted further research into this field, at least from a technical communication perspective, either no longer existed or couldn’t get venture capital funding. The simple solution was to treat the mobile computing device as just another web terminal. This simple solution, however, isn’t necessarily the best solution.

While research into this problem from the field of technical communication is scarce, as evidenced in the Engineering Methods section, there was other research being performed. Software engineers developed a variety of methods to alter how content from a web page could be displayed on the small screen of a mobile computing device. Usability studies were performed, comparing the new method against the single-column display format that is the default configuration for mobile browsers. Across the board, regardless of what the new method was, it was preferred over the single-column format. Unfortunately, there has been no study that compares the various methods listed in this review against each other to see if there is a clear user preference.

The goal of technical communicators and engineers is not mutually exclusive: both want to achieve the same result of content optimized for the mobile computing device. Technical communicators and engineers should work together in order to obtain this goal, rather than working in relative isolation. The mobile computing devices of today are several generations removed from the ones that Chu and Albers and Kim looked at: the displays are larger with better resolution and color, the computing power has increased, and available memory has increased. It is time to review the current state in mobile computing devices and consider carefully how to design content for them.