Image Size vs. Scrolling in Photo Thumbnail Browsers

Introduction

Background

Home use of digital cameras and the related computer hardware and software for managing digital photographs has been growing in popularity over the past few years. There are two main reasons for this growth. First, with the decrease in price and increase in software and hardware support for digital cameras, digital photography has become more accessible and affordable. Second, people are using scanners and online photo services to digitize the photographs they have taken with conventional cameras. As users build their collections of digital photographs into bigger libraries, efficient software tools are needed to allow them to manage large numbers of images. One of the most common features desired by users is to be able to find a particular photo or set of photos from their library [11]. Research also indicates that home users in particular tend to browse and riffle through collections of photos rather than doing directed search activities [6].

A popular software tool for such searching and browsing tasks is a thumbnail browser. These browsers display shrunken versions of photographs called thumbnails, usually in a tightly packed grid layout in a single screen window. This arrangement allows users to see more images on the screen at once than if they were looking at full-size photographs, much like the contact sheets used by professional photographers with conventional film. If the thumbnails are large enough so that important features in the images are still easily discernable, scanning a single screen of thumbnails for a particular image can be more efficient than paging or scrolling through multiple screens of photographs.

A large number of commercial and research software systems for managing digital photographs implement thumbnail browsers. MGI PhotoSuite II and Adobe PhotoDeluxe are two popular and powerful commercial packages that allow users to view their digital or scanned traditional photographs in thumbnail grids and perform various searching and annotation tasks. Kodak allows users to get traditional film developed as digital photographs on a "PhotoCD" or posted to their web site, PhotoNet. Both the PhotoCD and PhotoNet software packages offer thumbnail browsers for users to get a first look at their pictures. Kodak also maintains the innovative PhotoQuilt , a giant collage of photos submitted by people all over the world, updated daily and constantly growing. Each photo has an associated story, and the entire quilt is viewable with a zoomable thumbnail browser. Thumbnail browsers are especially useful for the web site version, since downloading the full size images can be slow. A number of researchers are also developing more powerful thumbnail browsers that allow users to search and annotate images based on textual features like dates, events, and people - FotoFile at Hewlett Packard Laboratories [6] and PhotoFinder at the University of Maryland, College Park [5]. Other research is focusing on search and annotation of thumbnail images based on visual features of photographs - ShoeBox at AT&T Labs and QBIC at IBM [3].

The major obstacle faced by the designers of all of these thumbnail browsers is that as photographs are shrunk down to a smaller size, features become more difficult to discern. If these features are important for recognizing or distinguishing an image, the quality of the thumbnail is degraded from the perspective of the user. Thus, there is a tradeoff between the quality and quantity of images available in a single window on the screen. With smaller thumbnails, more images can fit in a window, and less paging or scrolling is required to view all the images. This is an advantage in searching and browsing tasks since paging and scrolling can slow these tasks. However, at a certain point, thumbnails become too small to discern certain features. At this point, the advantage of fitting more images in a single area is lost as users are slowed by having to study images more carefully to see the contents. Where this point lies depends on the quality of the original photographs, particularly whether they were taken with a traditional or digital camera, as well as the resolution of the computer monitor used, the familiarity of the users with the images they are looking at, and the visual similarity of the images to each other.

The goal of the experiment described in this paper was to get a feel for the thumbnail sizes that provide the best balance between minimal scrolling and minimal loss of image quality, depending on the size of the collection being viewed. We considered digital photographs taken with a commercially available digital camera viewed on relatively good monitors that home users could be expected to own. The collections of photographs we used contained no duplicate images and relatively few very similar images. Our subjects were unfamiliar with the photographs they looked at, which is not always the case with real users. However, this use scenario is not unrealistic given the increasing use of the web to share photographs with others who may be far away and/or unfamiliar with the contents of the photos.

Previous Research

A number of previous experiments have looked at related issues. In [10], the authors describe a document management system called Protofoil. One of the features in the system is a thumbnail browser for viewing the results of a document search. In a field study conducted with the tool, users found that the thumbnails sizes were too small to see many detailed features. The authors were able to add a larger, intermediate size thumbnail to solve this problem. The thumbnails in this tool contained text in addition to images, which may have made smaller thumbnails more difficult to see, but the study illustrates that there does exist a point at which smaller thumbnails become less useful in identifying images.

In [2], the authors compared 2-D, 3-D, and zoomable thumbnail image browsers in speed, error rates, and user satisfaction with image collections of size 25, 75, and 225. Subjects were able to recall images with 15% higher accuracy with the zoomable browser than the 2D browser, likely because a lot of scrolling was required in the 2D browser for the 225-image collection. However, as the number of images increased in the zoomable browser, the number of incorrect identifications also increased, likely because most subjects did not zoom in for the 225-image collection and could not see the small thumbnails clearly. This experiment clearly illustrates tradeoffs between scrolling with larger images and not scrolling with smaller images. The zooming interface was not significantly faster or preferred than the type of 2-D interface we tested, but may still prove useful in image browser design.

Students in a previous section of this class performed an experiment similar to ours to explore the tradeoff between image size and number in a thumbnail browser [7]. Subjects viewed 36 images presented 1 at a time over 36 screens, in a 3x3 grid with 4 screens of 9 images each, or all 36 at once on a single screen. Subjects were asked to find a particular image in the collection, either from a written or visual description. Results were significant in showing that both 9 and 36 thumbnails screens were faster than the single image screen in both the written and visual description treatments. However, only the visual description treatment had significant results showing performance and preference advantages for 36 images over 9 images. This experiment clearly illustrated the advantage of presenting more than one image at a time in a visual search task. We sought to refine and extend this theory in our experiment by using 3 different sized collections along with varying the number and size of images on a screen. We have chosen only to test written descriptions of images because this requires users to see enough detail in a thumbnail to discern the contents, rather than doing a simple visual pattern-matching search for a thumbnail that matches the image used as a visual description. We believe this will help reveal when thumbnails are too small to be useful.

Another group of students in a previous section of this class compared five different thumbnail image sizes [4]. Subjects were shown one image at a time and asked to identify it by providing a written description of what they saw. Time to recognition and percent of images correctly identified were measured. The results for time to recognition were not statistically significant, but the times for the middle image size (90x63 pixels) were lower than those for both the larger and smaller image sizes. There were statistically significant differences in correct identifications between the 90x63 image size and the next larger and next smaller image size. This paper helped give us some benchmarks for choosing image sizes in our experiment.

Relevant Psychological, Perceptual, and Cognitive Theories

The basis for the success of the thumbnail browser lies in two theories. First, the vast power of the human perceptual and cognitive system to process and search large amounts of visual information in parallel has been documented in numerous situations [1]. People are able to use this power to rapidly scan a screen filled with many items, such as thumbnail images, and pick out a particular item or items of interest. Our experiment seeks to understand how to maximize the exploitation of this power without overwhelming it. Second, the use of tightly-coupled "overview + detail" views has been found to be highly effective for browsing tasks [12]. One window can be used to show an overview, such as a table of contents for a group of documents or a set of thumbnails representing a collection of photographs. The other window can show one element selected in the overview window in greater detail, such as a particular document or photograph. The goal is to fit the whole overview in one window if possible. Our experiment seeks to explore when the overview of a collection of photographs can fit in one window, and when the collection becomes so large that the smaller thumbnail size required to fit all the images in one window is too hard to see, making a scrolling window with larger thumbnails a better choice.

Although these two theories make thumbnail browsers a useful tool, there are a number of problems besides images being too small to discern important features that can cause difficulties for users. The most obvious and well documented is the effect of Fitts' Law on the time required to point at an object on screen using a mouse [12]. Fitts' Law states that pointing time is directly proportional to the distance of the pointing target from the pointing device and inversely proportional to the width of the target. Thus, small thumbnails and large windows would both tend to slow down users of thumbnail browsers. In our experiment, we attempted to minimize the effect of Fitts' Law on our timing results because we were more interested in the effects of image quality and scrolling. All of our experiment tasks used the same size window with the mouse cursor positioned in the same place when task timing began. The range of thumbnail sizes only differed by a factor of three at the two extremes, and all the sizes were larger than standard icons. Finally, scrolling rather than tracking a mouse over a long distance was the most time-consuming action in the tasks. Thus, while Fitts' Law undoubtedly factored in to our timing results, we did not attempt to measure its effect.

Aside from small image size, sheer quantity of images on a screen at once can also cause problems for users by overwhelming them. In [13], the authors illustrate that while the human capacity for processing large amounts of visual data is vast, there exists a critical number of elements, determined by experimentation, that a person can accurately monitor. However, we only display at most 48 images at a time on one screen, which we do not believe is an overwhelming number. We believe the small thumbnail size required for this number of images will cause more problems than the number of images.

In [14], the authors describe a study whose results indicate that visual search performance time increases monotonically as the visual similarity of the stimuli increases. Thus, photo collections with many similar images will take longer for a person to search through and may require different thumbnail browsing strategies. In [11], the authors explore one such strategy. They evaluated an image-browsing tool where thumbnail images are arranged according to the similarities of their low-level content features (color, texture, etc.). An experiment showed that people were able to find a particular image in the collection with this arrangement faster than with a random arrangement. This experiment illustrates the capacity of human visual processing system to pick up on patterns and other prominent visual cues. It also leads to another technique for improving visual search in a thumbnail browser in addition to optimal size and layout strategies. In our experiment, we tried to reduce duplicate and similar images in the collection of photographs used so we could just focus on the effects of size and scrolling.

Finally, the use of scrolling in thumbnail browsers is potentially problematic. When all of the thumbnails can't be made to fit in a single window, designers must allow users to see the images outside of the window. Scrolling and paging are the two most popular strategies for this function. In [12], Shneiderman argues that the use of scrolling in hypermedia documents is cognitively more demanding than paging strategies because paging gives users a clearer sense of position in a document. However, it is not clear that this same argument applies to collections of photos, which may not have any sense of order. In [8], Nielsen reports that usability studies in 1994 found that only 10% of web users would scroll a navigation page to look for more links. However, by the end of 1997, he observed that most users had started scrolling, probably due to increased familiarity with web pages. In our experiment, we chose to evaluate scrolling instead of paging for two reasons. First, most of the current commercial and research software employs scrolling in their thumbnail browsers. Second, Nielsen's studies indicate that scrolling is becoming more acceptable in web pages and this acceptance will likely carry over to other kinds of software.

Department of Computer Science: Direct questions and comments to the student editorial team