Meaningful
Presentations of Photo Libraries:
Rationale and Applications of Bi-Level Radial Quantum Layouts
Jack Kustanowitz
Dept of
Computer Science
University of Maryland
College Park, MD 20742
+1 (301) 405-1000
jkustan@umd.edu
ABSTRACT
Searching photo libraries can be made more
satisfying and successful if search results are presented in a way that allows
users to gain an overview of the photo categories. Since photo layouts on
computer displays are the primary way that users get an overview, we propose a
novel approach to show more photos in meaningful groupings. Photo layouts can
be linear strips, or zoomable three dimensional
arrangements, but the most common form is the flat two-dimensional grid. This
paper introduces a novel bi-level hierarchical layout with motivating examples.
In a bi-level hierarchy, one region is designated for primary content, which
can be a single photo, text, graphic, or combination. Adjacent to that primary
region, groups of photos are placed radially in an
ordered fashion, such that the relationship of the single primary region to its
many secondary regions is immediately apparent.
A compelling aspect is the interactive experience in which the layout is
dynamically resizable, allowing users to rapidly, incrementally, and reversibly
alter the dimensions and content. It can
accommodate hundreds of photos in dozens of regions, can be customized in a
corner or center layout, and can scale from an element on a web page to a large
poster size. On typical displays (1024 x 1280 or 1200 x 1600 pixels), bi-level
radial quantum layouts can conveniently accommodate 2-20 regions with tens or
hundreds of photos per region.
Categories
and Subject Descriptors
H.5.1 [Multimedia Information Systems]
H.5.2.[User Interfaces] Screen design (e.g.,
text, graphics, color)
General
Terms
Design, Human Factors.
Permission to make digital or
hard copies of all or part of this work for
personal or classroom use is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that
copies bear this notice and the full citation on the first page. To copy
otherwise, or republish, to post on servers or to redistribute to lists,
requires prior specific permission and/or a fee.
Joint Conference on Digital Libraries ’05, June 7–11, 2005, Denver,
CO, USA.
Copyright 2005 JCDL.
Ben Shneiderman Dept of Computer Science
University of Maryland
College Park, MD 20742 +1 (301) 405-1000
ben@cs.umd.edu
1. INTRODUCTION
As
digital cameras become ubiquitous, users have begun accumulating collections of
thousands of pictures. Frequently users do not have the time for or interest in
annotating these pictures, and they end up in the digital equivalent of the
proverbial shoebox, never to be found or used again. In response, researchers
are developing innovative interfaces to manage collections, encourage
annotations, and facilitate browsing [11, 20].
Effective
annotation (automatic, semi-automatic, or manual) could vastly expand the
usability of photo collections, enabling improved search and meaningful
layouts. Many tools have emerged on the
market to aid in the annotation process [1, 2, 18],
However, the habit of regularly annotating photos, a requirement in museums and
libraries, has yet to take a strong hold in the larger world of
consumer-oriented digital photographers.
Contemporary
photo library software allows users to define hierarchies of tags (for example,
“Family” with subtags for each family member, or
“USA” with subtags for each state), and allows
sorting and selective display based on those tags. The final set of photos, however, is
displayed in a flat rectangular grid, with no meaningful grouping based on
metadata for the selected photos. Showing multiple groups tied to each tag
would be a natural extension to these flat grid designs.
Similarly,
customers using professional web sites for the growing market in stock photos
could benefit from more effective presentations than the grid. Corporations such as Getty Images, PunchStock, Veer, and Corbis could make their search
results more comprehensible and easier to browse.
Finally,
museum, library, and research photo collections often limit users to viewing
lists of photo descriptions or a single image at a time. Academic users and
professional librarians could also benefit from enhanced presentations showing
meaningful groups of search results for their image libraries.
The following sections
contain screenshots of domains in which the approach of a bi-level radial
quantum photo layout might be useful.
Guided by user needs and available metadata, we discuss useful
parameters in determining the layout, and appropriate properties for a creation
tool. The techniques for determining
photo size and layout are described here, while in-depth analysis of the
algorithms is discussed separately [12].
2. PROPOSED APPLICATIONS
To
demonstrate some of the possibilities, we show ten layouts, for personal and
commercial applications. The screenshots
are meant to be illustrative; users will be able to alter the design with
regard to line weight, color, fonts, text content, etc. to suit their needs.
These screenshots show the layouts, but the interactive experience is
compelling; users can resize and reshape the windows, add or delete regions, or
add more photos. The interactive experience may be one of the strong
attractions.
The
availability of useful metadata governs the potential for producing these
enriched layouts. While timestamps provided by digital cameras are a good
starting point, many researchers have hopes of providing much more
automatically, semi-automatically, and manually. Automatic geographic location is likely to
become a part of photo metadata by way of cell phone locators, Geographic
Positioning Systems (GPS) built into camera, or other triangulation strategies.
Content metadata may come from image analysis software, which could amplify the
benefits of manual notations. For example, if the photographer annotates the
name of a child at a birthday party, then image analysis tools are likely to be
able to find other images with that child during the same time interval. Face
recognition strategies are improving but image analysis strategies are far more
effective in matching the color of a bright shirt or party hat, and occasional
mislabeling can be repaired if an adequate interface is provided [22].
Content
and theme labeling is more difficult to arrange automatically, however
innovative solutions based on social network strategies may provide some
solutions. One idea is to make a game of
labeling or annotating web images [3]. Other emerging strategies are to take text
that accompanies photos on web pages or in email as the basis for annotations
[13]. The enormous growth of cell phones with cameras has led to annotation
strategies that encourage data entry by cell phone [23] or posting the images
to websites such as flickr, where web-based
annotation becomes possible.
In
summary, the desire for annotation seems strong, and technological solutions
seem promising. These lightweight strategies may never equal the quality of
annotation provided by professional photo librarians, but they may provide
sufficient metadata to enable the visual presentations that we propose in the this paper.
The
ten layouts we present were automatically generated using a program that
implements the bi-level radial quantum layout algorithms, called
BRQ-Layout. After a layout was generated
from the photos’ metadata, adjustments were made to the final size and location
of the primary region, as well as to the custom graphics drawn in the primary
region.
2.1 Family Photo Collection
Figure
1 depicts a family layout, with the primary region showing a newly married
couple and the secondary regions showing key family members. One region
illustrates the capability of putting more than one tag in a single region (Simmy & Lani). The color of each region gradually goes from a brighter beige to a darker beige, to encourage the user’s
eye to track radially clockwise from the upper left
hand corner.
There
are many photos in this view – to show fewer photos, users can choose to only
show “Favorites”, or restrict by a secondary tag such as “Event” or by a date
range (see later examples). Figure 1 contains similar quantities of photos for
each region, which lends itself to a balanced view. Layouts with reasonably similar quantities
can reduce wasted space, and with user manipulation of the size/position of the
center region, create a layout which is efficient and attractive.
2.2 Honeymoon Trip to Italy
Figure
2 depicts a generated layout of photos taken on a trip to Italy with a
representative photo in the primary region.
The generation software keeps the photo groups in the original order, so
that the user can readily find a part of the trip that was towards the
beginning, end or middle. This also
prevents regions from moving around during dynamic resizing, which has been
shown to be a distraction [21].
Figure 2: Honeymoon in
Italy showing 6 locations during a two week trip
In
this case, all photos are shown. As in the Figure 1, dates are shown that
reflect the creation date of the photos.
This provides a calendar perspective on the layout beyond the implied
ordering.
Strategies
for handling geographic metadata are being refined rapidly so that photos in
the same area will get labeled with appropriate and meaningful names [17].
2.3 Faculty of UMD CS Department
Moving
away from family photos, Figure 3 shows a primary region with the chair for the
University of Maryland Computer Science department. Secondary regions (6 in
this case), contain a photo for each faculty member in each research area. To
generate this layout, groups of photos were annotated with the correct
department and research area. In this case, individual captions would be
helpful, potentially drawn from faculty name annotations.
Figure 3: UMD Computer Science Department with 6
research areas
2.4 Real Estate Browser
Figure
4 presents a hypothetical real estate web site, containing a hierarchical photo
layout within a web page. The primary
region gives the identifying information about the real estate agency and the
secondary regions show search results by city. As users change the size of the
browser window, the regions and photos all resize dynamically to allow for the
largest photo possible given the number of photos in each region. This strategy extends the now common
re-flowing of text on window resize to photo layouts. Any of the photos could be clickable, leading
to more information about that house, and each label and/or region could link
to more information about that locale, for example “College Park”. The title for each region shows the price
range of the displayed houses, thus providing more information about the
visible houses at a glance.
Figure 4: Real Estate
Browser with 5 communities and the price ranges of selected homes
Should
a new house come on the market in College Park, Olney, or Silver Spring, it
would fit nicely in the blank space under the seven houses currently
visible. A new house in one of the other
regions could push the photo size smaller, or might instead cause the secondary
regions to be distributed differently about the primary region, possibly
without requiring smaller photos.
Creating a commercial
tableau like this one is possible with existing tools, but requires extensive
cutting and pasting, and constant re-adjustment of the photo sizes. The ability
to dynamically create such a layout provides the page designer with a new expressive
power to convey relationships between images, and gives users the real-time
ability to get photo-based feedback on filtering operations.
2.5 Magazine Table of Contents
Sometimes
there is a need to show a graphical overview of a publication, to create a
large billboard at a book signing or as a navigation tool on a web page. Figure
5 shows such a layout for an edition of ACM Interactions magazine, with
the first page of each section. Page numbers of each section could be added to
each region.
Figure 5: Magazine Table of Contents with the
lead page from 8 articles
2.6 Magazine Contents (Left)
In
addition to the radial layouts seen thus far, the main region can be located in
one of the corners, or in a column along one side. Figure 6 presents the
magazine layout again, this time with several pages from each section, and the
magazine cover in the left hand margin. As suggested in the previous
screenshot, page numbers for each section of the magazine were added to each
region.
Figure 6: Magazine Table of
Contents (Left)
2.7 Child With
Parents (Left)
Figure
7 is another example of the left hand layout, this time showing a child with
his parents to his right. As the number
of photos grows, producing smaller thumbnails, users could limit the collection
to favorites, a date range, or other criteria. Alternatively, to preserve
larger thumbnail size, scroll bars could appear in each region to help navigate
the collection.
Figure 7: Child with
Parents
2.8 Siblings (Left Corner)
Figure
8 suggests a layout of all of the siblings in a particular family, where the
primary region photo is chosen by the user as being representative of the
collection. The number of secondary regions below the photo vs. to the right is
chosen automatically, so as to maximize the thumbnail size (which depends on
the relative placement of the secondary regions). The layout generation program allows users to
dynamically adjust the size of the primary region, and to override the default
choice of region placement.
Figure 8: Sibling Photos
2.9 Child’s Narrative of an Event (Left Corner)
The photo layout could be
done by a child as well as an adult, within the context of a child-centric user
interface. In Figure 9, the photos are
placeholders (in that they were not taken during a
4th
of July barbeque), but one could imagine an event tag “4th BBQ” being associated
with a collection of two dozen photos or so, which are additionally tagged with
the names of the people in them. With
the help of an appropriate interface, children could create a poster, greeting
card, or piece of artwork that placed and sized the photos automatically and
then they could put more time and energy into the primary region’s content. As a creativity support tool, the ability to
automatically choose an optimal layout lets a designer, whether a child, adult,
professional photo librarian, or hobbyist, spend time only on the creative part
of the process by handling the calculations of thumbnail size transparently in
the background.
Figure 9: Child’s
Photo-Based Narrative
2.10 Wedding Souvenir (Left Corner)
Following
an event (wedding, birthday party, or other family celebration), customized
cards or 8x10 collages could be distributed to guests. Figure 10 suggests a
wedding souvenir, in which all the photos of one guest and the three women that
he danced with are shown in an organized layout. While the photos shown are once again not
representative in content, one could imagine a photographer generating layouts
like these for all of the immediate family members.
As another example, a
layout of all of the table photos (one table photo per region, for 10-20
tables) might be of interest to the bride & groom, as a way to see all of
their guests on one layout, organized by where they sat. If instead of one table photo per region, all
table photos were shown in each region, the layout might provide a convenient
way to choose a “best table photo” for each table (for a fancy album, for
example), comparing table photos of the same table and also photos of other
tables.
3. GENERATING A BI-LEVEL RADIAL QUANTUM LAYOUT (BRQ-Layout)
The
BRQ-Layout algorithm is capable of reading an annotated collection of photos
and dynamically generating a photo layout. The goal is to present a primary region
that conveys a message about the selected images plus a set of secondary
regions that are meaningful components of the collection. The collection can
have an internal hierarchy, or it can be set by the user from within the
program.
3.1
Automatic Requirements
BRQ-Layout
must be capable of the following automatic operations with real-time user
response:
Read
a Collection –
This can be any collection of photos that has been annotated either manually or
using an automated tool.
Dynamically
Add/Remove Ordered Photo Groups – As users add tags, photos corresponding to
those tags (optionally only photos labeled as “favorites”) are added to the
layout, in the optimal position and with the maximal thumbnail size. Order should be preserved, so (for example)
if users add tags A, B, C, D, E -- C and D should always be adjacent. Removing a tag causes all other regions to
reflow to maintain maximum thumbnail size.
Dynamically
Drag/Resize the Primary Region – A strong component of the appeal of this
interface is the capacity for users to play with the layout by dragging the
primary region around the screen and then resizing it. This aspect of user control enables users to
change the emphasis on the primary region, giving it less prominence to
highlight the secondary regions or enlarging it to make it dominate. Figure 11
shows the results of first dragging and then enlarging the primary region.
Dynamically Resize the Entire Window – Users can play with the
size and aspect ratio of the entire window that frames the primary and
secondary regions. Users with larger
size screens could enlarge the window to allow for more and larger thumbnails
in each secondary region. Users may also
alter the aspect ratio to get square (Figure 2), landscape (Figure 3), or
portrait (Figure 4) layouts to fit their screens or create a desired graphic
style.
The requirement for rapid
response (as close to 100msec) ensures a high degree of user control and
engagement. This means that backtracking
algorithms that run in O(n2) would not be
acceptable. Satisfying the numerous constraints to provide pleasing layouts
with large thumbnails, and little blank space became a programming challenge.
The additional requirements of coping with varying numbers of images in secondary
regions added to the challenge. Typical
optimization methods, such as gradient following to find local optima, had to
be abandoned because of the quantum nature of images. Small changes in size of regions or
thumbnails gave radically differing results. Such unstable behaviors usually
typically produce np-complete problems which a
provable insoluble, so we made numerous heuristic choices to guarantee rapid,
although possibly suboptimal, solutions.
3.2
Customization Support
Another requirement was to integrate user
control to ensure customization needed for a particular application. Users can
perform the following actions via a direct manipulation interface:
Change the height & width of the overall
layout Change the height &
width of the primary region Change the position of the primary region Change contents of primary region Add, remove, and edit text captions Add or remove single or multiple photos, or
entire
regions As users make these modifications,
thumbnail size and position are updated automatically, maintaining the
optimality constraints that they had when they were first added. The goal throughout is to allow the user to
create interesting designs that illustrate the relationship between groups of
photos, while freeing the user from thinking about optimal thumbnail size and
distribution about the primary region.
The result is a fluid experience of photos flowing and resizing that
resembles the response of a word processing program as an image is moved around
the page as the text reflows around it.
4. CONSTRAINTS
The
Bi-Level Radial Quantum Layout (BRQ-Layout) is a tightly constrained
two-dimensional surface. The quantum
nature of photo sizes means that small changes to region sizes dramatically
affect layouts and that there will be some blank spaces in most secondary
regions. Among our many assumptions was
that thumbnails in all secondary regions would be the same size. The algorithms
that maintain and balance these constraints are covered in detail in [12]; a
brief description of some of the interactions and tradeoffs is presented here.
First, we define the following terms:
Secondary
Region: A
region is a logical grouping of photos, most likely because they share a tag.
Primary
Region:
The top level of the hierarchy, of which all secondary regions are logical
children.
Quadrant:
The area
surrounding the primary region in the center layout is divided conceptually
into 4 quadrants (see Figure 12 below). Each quadrant contains one or more
secondary regions.
For
a given overall length & width, the first decision the user makes is the
size and location of the primary region, as this constrains several other
variables. If the primary region is
placed such that thumbnails will be below a minimum size (configurable), it
will snap to the closest side, generating a side- or corner- layout (Figures
6-10).
Once
that choice has been made, the parameters described in Table 1interact in
disturbingly complex ways.
Table 1
Parameter
|
Determined
By |
Directly
Influences |
Primary
region |
Window
|
Placement
of |
size
and |
dimensions
|
secondary
regions |
placement
|
(default),
user |
|
|
customizable
|
|
Number
of |
Number
of tags |
Placement
of |
secondary
|
chosen
from the |
secondary
regions |
regions
|
photo
collection |
|
Number
of |
Photo
collection |
Placement
of |
photos
in each secondary region |
(user
chooses “all photos”, “favorites”, or some other constraint, |
secondary
regions, photo layout (rows & columns), photo size |
|
such
as date range) |
|
Placement
of |
Number
of photos |
Photo
layout (rows |
secondary
|
that
will fit in each |
&
columns) |
regions
|
secondary
region, |
|
|
primary
size & |
|
|
placement
|
|
Photo
size |
All
other |
Photo
layout (rows |
|
parameters
|
&
columns) |
Photo
layout |
Photo
size |
Photo
size |
The photo layout is both determined by photo size (smaller photos enable placement of more on a row, for example), and determines photo size (a decision to have only 1 row forces small photo size in order to fit in the region). Since all other parameters influence photo size, all parameters are pulled into this non-linearity, forcing a high degree of algorithmic complexity.
An important constraint was added that there be only four quadrants (Figure 12). This was to make the layout cleaner by allowing only rectangular regions, preventing C and L shaped regions, with the accompanying user difficulties of figuring out the directionality of rows, etc.
If there are four or more secondary regions, they will be distributed as evenly as possible in the four quadrants. (For fewer than four secondary regions, or when the primary region is along an edge instead of in the center, a modified algorithm is used.) Once the secondary regions have been placed in the proper quadrant, the relative size of each region within the quadrant is set based on the number of photos in that region. A photo size is then chosen which is guaranteed to be an upper bound, and reduced incrementally until no quadrant has overflow, i.e. photos that are too big for the region. As these are simple calculations and the photo width/height, number of photos, and number of regions are small and finite, the algorithm can proceed in time that is linear in the worst case.
The layouts can become problematic if there is one ratio with substantially more or fewer photos than another, for example 5 regions of 2, 3, 5, 60, and 4 photos each. In this case, scrollbars may appear in one or more region in order to prevent the creation of tiny thumbnails to accommodate the largest photo set. This modification will allow the algorithm to scale to photo collections that are not as balanced as those shown in the figures of Section 2.
While the layouts generated are optimal in the sense of maximizing thumbnail size, future work could explore allowing users to override the automated choices, either to make improvements (if possible), or to be convinced that the layout is indeed optimal. These overrides might include changing which secondary regions get placed in which quadrant, the relative region sizes within a quadrant, and the thumbnail size. These increased choices should give users more of a feeling of control over what is currently an automated process.
In such a model of increased user control, users could also explore reducing or eliminating some of the constraints discussed in this section, for example allowing thumbnail sizes to vary per region, or setting a maximal number of thumbnails beyond which a scrollbar would be shown.
5. USABILITY EVALUATION
To
gauge user responses to these bi-level radial quantum layouts we asked four
knowledgeable users of photo library software to review our interface for 30-40
minutes each. In this modest usability
study, they were shown the on-screen, but static layouts in Figures 1-4, in
order and asked what they understood about the layout and relationship among
the regions in each Figure. They
responded positively, easily recognizing that the secondary regions were
“closely associated” with the primary region, and appreciating the aesthetic
value of a novel presentation of a photo collection. The color gradient was
successful in suggesting the order of the radial sequencing, especially when
combined with a second cue such as alphabetized region captions. They were happy
with the generated layouts as a way to see a filtered view of a photo
collection, although some suggested that a more traditional, linear approach
might be more efficient for search-related tasks.
Then
we asked them to drag and resize the primary region, exploring possible
layouts. Our goal was to understand if
they grasped the degree of control and could make satisfying choices. These
four users understood the principles and readily dragged and resized the primary
region. They also tried clicking on thumbnails
in the secondary region, suggesting an implied invitation to interact with the
collection and not just view it as a final, generated presentation. Although they understood the dynamic
thumbnail resizing (one user reported noticing only “large” or “small”
thumbnails), they were sometimes surprised by the appearance of larger blank
spaces and seemingly smaller-than-needed thumbnails, and all four requested an
option to relax the constraint of equal thumbnail sizes at user discretion, so
that the space could be better utilized. All users reported a preference for
larger thumbnails whenever possible.
With
experience they came to understand the possibilities and were delighted with
the capacity to create their own arrangements.
One user said, “Ahh! There we go!” as she
started moving the central region around, and later
said that she would love the tool for what she’s currently working on. Another
reported some uncertainty in how to visually scan the radial layout, especially
in the context of a search task. All
four spent time moving the primary region around and watching the photos resize
and rearrange, coming up with novel arrangements not described in this paper
such as full-height primary region with left & right columns, and
top-middle primary region surrounded by the secondary regions in a U formation.
In
summary, this modest usability test confirmed our belief that organizing photos
into meaningful regions was beneficial. When the text labels and color gradient
clearly indicated the grouping and sequencing, users were appreciative, but
without such cues they struggled to grasp the sequencing. The users clearly
desired additional interactive features such as clicking photos to get more
information, selecting a photo to be the primary region, and moving photos
across regions.
6. RELATED WORK
There
are several commercial applications that allow photos to be quickly tagged and
organized. Adobe PhotoShop Album [2],
for example, presents a grid of photos containing photos with selected tags or
from a given date range. While useful, this view contains no notion of a
hierarchy, nor is there a primary region, and it is not intended to be printed
or otherwise distributed. Since temporal clustering is such a key aspect of
personal photo library retrieval [7], PhotoShop Album includes a timeline
viewer to allow users to select by time period.
A grouped view of the temporal clusters with BRQLayer
could enhance presentations of temporal clusters.
Several
web-based photo tools (Yahoo, Ofoto, and Snapfish, among others) allow sharing, slideshows, grids,
and linear strip versions of the photo collections. Again, once users choose a subset of photos,
all visible photos are on the same conceptual level. A review of home-based
photo albums provides further support for the utility of viewing search results
that are grouped by content features and by contexts [16].
According
to [19], there is a benefit to laying out photos based on visual similarity,
although that study dealt with visual similarity instead of similar contents.
Our generation software takes their suggestion to incorporate captions and
labels where possible, and not to rely solely on the grouping to convey the
meaning of the divisions between areas of the layout.
Quantum
Treemaps and Strip Treemaps
[4] similarly group photos into categories, and lay them out dynamically in a
way similar to that described in this paper.
The layouts described in that paper are not hierarchical, however, and
layout is done in a linear, top to bottom fashion, instead of the radial style
described above.
Adaptive
Layout is a technique already in use for document layout [8], in which
constraints are defined, and then an algorithm generates page layouts that meet
as many of those constraints as closely as possible. The text flow around pictures described in
that work is similar to the flow of photos around the primary region in
BRQ-Layout.
The
output of BRQ-Layout is a collage of sorts; various other collage-generation
packages do exist [6, 10]. These layouts
strive to be artistic and visually interesting, but do not convey a
hierarchical relation. While
BRQ-Layout’s layouts should be visually appealing as well, they have a
practical goal which goes beyond the scope of these other collage generators.
The
WeightMap is a technique for evaluating the visual
balance of an automated layout [14], and it is helpful in deciding placement of
images of different brightness and color within a layout. While BRQ-Layout’s sequence of rectangles is
dictated by users, the ordering of photos within a rectangle could be decided
by the WeightMap or other techniques [5]. This might
be an interesting user option that would increase the visual appeal or
usefulness of the generated layouts.
Elastic
Windows [9] is a browser that creates multiple hierarchical windows within the
program as the user visits different web sites, with the goal of reducing
disorientation and cognitive overhead. The hierarchical rectangles generated
through usage resemble the secondary regions produced by BRQ-Layout, as does
the dynamic layout as regions are added and removed.
7. CONCLUSION
This paper motivates a novel design of a
two-dimensional bi-level radial quantum photo layout. While many tools exist for generating layouts
dynamically, BRQ-Layout creates layouts with an immediate and intrinsic
hierarchical relationship between a primary region and its secondary
regions. This layout has interesting
applications for personal photo libraries, allowing parents to be surrounded by
their children, as well as for commercial applications, as in a magazine table
of contents or a real estate browser.
Since layout is automatic, these layouts demand
minimal effort by users, while providing the ability to customize if
desired. And since the layout is dynamic,
the algorithms are well suited to a web environment, allowing photos to reflow
layouts in a way that is analogous to dynamic text reflow when the browser
window is resized.
Further work is needed to refine and test the
algorithms with varying browsers, screen sizes, and metadata annotations. While
utility with small libraries and small result sets seems clear, scaling up to
large libraries, complex metadata, and larger result sets provides further
challenges. Semantic web ontologies could provide
another natural structure to organizing photo library search results,
facilitating richer generated presentations.
Feedback from our usability evaluation suggests
relaxing some of the constraints such as constant thumbnail size, in order to
give the largest possible image. Future work might provide greater
interactivity at the region level, allowing full direct manipulation of all
elements of the layout including region size, color, and labeling. The
interactive nature of the layout gives users a compelling sense of control as
they playfully explore the layout possibilities.
8.
ACKNOWLEDGEMENTS
We would like to thank Adobe Corporation for
their support, which has made this research possible.
9.
REFERENCES
[1] ACDSystems,
http://www.acdsystems.com/English/Products/ACDSee/ind
ex.htm. Last
visited January 26, 2005.
[2] Adobe Photoshop Album,
http://www.adobe.com/products/photoshopalbum/main.htm
l. Last
visited January 26, 2005.
[3] L. V. Ahn and L. Dabbish
(2004). Labeling images with a computer game. Proc. ACM Conf. on Human
Factors in Computing Systems CHI 2004, 319-324, ACM Press, New York.
[4] B. Bederson, B. Shneiderman, and M.
Wattenberg (2002). Ordered and quantum treemaps:
Making effective use of 2D space to display hierarchies. ACM Transactions on
Graphics, 833-854. ACM Press, New York.
[5] M. Das and A. Loui (2003). Automatic face-based image
grouping for albuming. Proc. IEEE
Conference on Systems, Man and Cybernetics, 3726-3731, October 2003. IEEE Computer Society, Washington DC.
[6] A. Girgensohn and
P. Chiu (2004).
Stained glass photo
collages. Proc. ACM Symposium on User Interface
Software and Technology (Posters), 13-14. ACM Press,
NY.
[7] A. Graham, H. Garcia-Molina, A. Paepcke, and T. Winograd (2002).
Time as essence for photo browsing through personal digital libraries, Proc.
2nd ACM/IEEE-CS
Joint Conference on
Digital Libraries¸
326-335, ACM Press, New York.
[8] Charles Jacobs, Wilmot Li, Evan Schrier, David Bargeron, David Salesin (2003). Adaptive grid-based
document layout. ACM
Transactions on Graphics (TOG), 838-847, July 2003. ACM Press, New York.
[9] E. Kandogan and B.
Shneiderman (1997).
Elastic windows: evaluation of multi-window operations. Computer-Human Interaction, 22-27, March
1997. ACM Press, NY.
[10] A. Kerne (2001). Collage
machine: interest-driven browsing through streaming collage. CAST
Proceedings, 241-244, 2001. Creating Media, New York
[11] B. Kules, H. Kang,
C. Plaisant, A. Rose, and B. Shneiderman (2004). Immediate Usability: A
case study of public access design for a community photo library, Interacting
with Computers 16, 6, 1171-1193.
[12] J. Kustanowitz and
B. Shneiderman (2005). Bi-level hierarchical layouts for photo libraries:
Algorithms for design optimization with quantum content, Univ. of Maryland
Technical Report.
[13] H. Lieberman, E. Rosenzweig and P. Singh (2001). Aria: An agent for annotating and retrieving
images, IEEE Computer, July 2001, 57-61.
[14] S.
Lok, S. Feiner, and G. Nigai (2004). Evaluation of visual balance for automated layout. Proc.
Intelligent User Interfaces, 101-108, January 2004. ACM Press, New York.
[15] Moghaddam, B., Tian, Q., Lesh, N., Shen, C., and Huang,
T. (2003). Visualization and layout
for personal photo
libraries, Proc. Int’l Workshop on
Content-Based
Multimedia Indexing
[16] P. Mulhem, J. H. Lim, W. K. Leow,
and M. Kankanhalli, Advances in digital home image
albums, In Multimedia Systems and Content-Based Image Retrieval, Idea
Publishing, chapter IX, 201-226, 2003.
[17] M.
Naaman, Y. J. Song, A. Paepcke,
and H. Garcia-Molina (2004). Automatic organization for
digital photographs with geographic coordinates, Proc. 4th ACM/IEEE Joint
Conference on Digital Libraries, 53-62, IEEE Press.
[18] Picasa,
http://www.picasa.com/picasa/. Last visited January 26, 2005.
[19] K.Rodden
and W. Basalaj (2001). Does
organization by similarity assist image browsing? SIGCHI 2001, 190-197. ACM Press, New
York.
[20] C. Shen, N. Lesh, and F. Vernier (2003). Personal Digital Historian: Story sharing
around the table. Interactions (10) 2, 15-22.
[21] B. Shneiderman and
M. Wattenberg (2001). Ordered treemap
payouts. IEEE
Symposium on Information Visualization. IEEW
Press, Piscataway, NJ, 73-78.
[22] B.
Suh, B. and B. B. Bederson (2004). Semi-automatic
image annotation using event and torso identification, Tech Report
HCIL-2004-15, Computer Science Dept., University of Maryland, College Park, MD.
[23]
A. Wilhelm, Y. Takhteyev, R. Sarvas,
N. Van House, and
M. Davis (2004). Photo annotation on a camera
phone,
Proc. ACM Conf. on Human Factors in Computing
Systems CHI 2004,
1403-1406, ACM Press, New York.