Xchanges

Selection of Sites for Analysis

Of the 49 sites extracted from the survey, I selected eight sites to analyze. I selected those sites that I felt represent the best—and the worst—of content that might be delivered to a mobile device. I also selected sites that I thought the mobile user might access. Three of the sites, google.com (Internet search engine), flickr.com (online photo hosting site), and walmart.com (commerce) optimized content for mobile users. These sites were selected based in part on their ranking but also from the services that they provide. Google is perhaps the Internet search engine of choice by users and often the first stop by a user looking for information on the Internet. Flickr, an online photo-hosting site, allows users to upload their own photos and organize virtual photo albums. Walmart, while not in the top 22 sites, has a very large presence in the US economy and retail sales. All of these sites were excellent in their usability.

The three sites I selected that were marginal in their usability are wikipedia.org (online knowledge base), wordpress.com (blog content provider), and the nytimes.com (online version of the NY Times newspaper). For many people Wikipedia is the second stop after Google when trying to find information on topics from the Internet. Wordpress provides blogging software as well as being a blog hosting provider; while probably not as large as Blogger or LiveJournal, Wordpress is considered to be one of the better blogging software developers. The NY Times online site is a source of news for many people.

The two sites I selected that failed in usability in the mobile environment are craigslist.com (online bulletin board site) and imdb.com (online movie database). Craigslist is probably one of the easiest sites to code, being little more than tables with links, yet even a simple design can break down in a mobile environment. The Internet Movie DataBase (IMDB) is an online repository for movie and actor/actress information. The complexity of this site, while it works on a large display, turns into a mush of images and impossible-to-read text in the mobile environment.

Analysis of Sites

Williams’ Visual Guidelines

Web sites, even those that contain primarily text, provide content through a visual medium. Therefore, any analysis of web sites should be through established guidelines on how to best present the visual content of web sites. In his 1999 article, Williams established a series of visual guidelines that can be used to analyze how well web sites display their visual information within the mobile computing display.

Williams’ visual guidelines provide a baseline by which I was able to analyze the selected sites from the survey on the iPod Touch. The visual guidelines that Williams presents are principles of good web design and should be applied when designing and analyzing content for the mobile environment where the visual component is far more consequential for navigation and understanding the context of the site. My analysis is qualitative in nature, based upon my experience in visiting the sites in a mobile environment—the library at New Mexico Tech was selected because it has a strong Wi-Fi signal.

Williams’ guidelines are divided into six categories. Of these six, five will be used to analyze the selected sites. The five guidelines that will be used are: element legibility, designing display elements, type legibility, pictures and illustrations, and icons. The sixth guideline, animation, will not be used due to the fact that few mobile computing devices support animation outside of games. The iPod Touch does not support the Adobe Flash format that is the standard for delivering rich animated content and video files on the Internet. The site hulu.com, for example, will load on the iPod Touch but the video content will not stream because the Flash format is unsupported.

Williams elaborates on his guidelines as follows:

Element legibility: size and contrast. For an element to be legible—“capable of being both apprehended and deciphered”(393)—it has to be large enough to be clearly seen as well as being able to tell what the elements are. For example, can the elements that make up a navigation bar be easily identified? Is the navigation bar itself identifiable? Do the visual elements have sufficient separation from the background or do they blend into the background because it is too busy?

Designing display elements: information structure, grouping, relative importance, consistency and predictability, and sequence. All of these elements can be grouped into the nomenclature of PARC: proximity, alignment, repetition, and contrast, although Williams moves contrast into the first guideline of element legibility. Elements of the display need to reflect a “pattern of logical or functional relationships”(393). Like items should be grouped together or identified by the use of white space. Similar elements or a group of elements should be organized through the use of “color, position, size, isolation, complexity, and tonal contrast”(394), have a consistent use of design elements, and have them in some form of order or sequence.

Type legibility: typeface choice, type size, bold and italic, all caps, alignment, line length, leading, paragraph boundaries, and headings. Is the typeface sans serif and large enough to be easily read? Avoid overuse of bold and italicized words. Don’t use all capitals letters, for “(W)ord shapes provide significant clues to the reader as to their identity”(394). Use flush-left ragged-right alignment for extended reading, keep line length between 40 and 60 characters, and have extra space (leading) between lines of type—“typically between 50 and 100 percent of the type size”(394). Paragraphs should be marked by boundaries of white space for visual chunking of data. Headings and subheadings should be used to organize and identify relationships and hierarchy.

Pictures and illustrations: decorative, supplemental text, information structure, and appearance and perceptual qualities. Pictures and illustrations should reinforce content; therefore avoid the use of pictures and illustrations for decoration. Provide supplemental text to ensure that the picture or illustration is interpreted correctly. Pictures should be used to “reveal the structure or organization of things or ideas—particularly when the structure is not linear”(394). Lastly, photos and illustrations should be used to show how something looks or to “depict a perceptual quality such as color, texture, pattern, shape, relative size, spatial location, orientation, arrangement, or appearance”(394).

Icons: labels, familiarity, and “global” differences. Icons should be labeled and conventional icons “whose use and meaning the user is already likely to be familiar with”(394) should be used such as the home icon to go to the home page of the site, an envelope for an email link, and a question mark for further help. Icons should be designed to be similar to each other in style and color, yet significantly different from other visual elements on the site in order to call attention to themselves as some unique element of the site.

<Previous          Next>