Children’s Interface Design for Hierarchical Search and Browse
Hilary Browne Hutchinson
University of
Maryland, College Park
HCIL, UMIACS, Department of Computer Science
College Park, MD 20742
+1 (301) 405-8913
hilary@cs.umd.edu
ABSTRACT
I propose to design and evaluate a hierarchical category
browser interface for children. Previous tools for handling hierarchical data
rely on text-based visualizations, lose or distort global context, and/or rely
on complex abstractions, excluding children from using them. I will instead use
graphic representations of hierarchical categories and animated query creation
in an accessible, web-based environment to support conjunctive queries. I will evaluate this tool using iterative design
and a study comparing it with a version without animated query creation.
Categories and Subject Descriptors
H.5.2
[User Interfaces]: Evaluation/methodology, Graphical user interfaces,
Interaction styles, Screen design, User-centered design.
General Terms
Measurement,
Design, Experimentation, Human Factors
Keywords
Digital libraries, children, user-interface design
The field of information visualization is full of
techniques for visualizing hierarchical data sets found everywhere from biological
taxonomies to organization charts. However, these solutions require users to
read, lose or distort global context, and/or rely on complex abstractions. For
children, whose reading and cognitive skills may be limited, such
visualizations are unusable. Children also have different needs for computer
interfaces, and designing interfaces to support them addresses the goals of
Universal Usability.
Children do not need to visualize complex hierarchies,
but school projects and games often require that they navigate hierarchically
organized digital libraries or search engines. The lack of support for digital
libraries for children led our lab to begin exploring this problem in 1999 [4]. In my research, I focus on supporting complex
searches of a hierarchy in a widely accessible environment.
Recent attempts to visualize hierarchical data fall
into three categories [2]. The overview+detail technique presents multiple coordinated
views of the hierarchy. The space-filling technique recursively subdivides a
hierarchical space. The distortion technique applies a degree of interest
function to the hierarchy. The technique I use does not fit into any of these
categories, but borrows from all of them. I also use animated transitions for
navigating the hierarchy, which have been shown to have advantages in speed,
preference, and reconstruction of the information space over more traditional
interfaces [1].
In the area of digital libraries, there has been much
research on libraries for adults, but little for children [5]. Recent work in our lab on the International
Children’s Digital Library (ICDL) project [4][5] has produced new interfaces for digital libraries.
The ICDL includes a category hierarchy interface to a library of children’s
books from around the world. The categories, ranging from book length to color,
are directly manipulated with large icons for easy clicking. My research is
also inspired by U.C. Berkeley’s Flamenco, a text-based, hierarchical image
browser [7].
Finally, this research is influenced by our lab’s work
with an intergenerational design team of researchers and children who design
software using the cooperative inquiry method [3]. We prototype with art supplies to build important
system functions and create affinity diagrams with Post-It notes to express
likes and dislikes about a system.
My system (Figure 1) is based on the existing ICDL
software, which consists of two versions: a Java WebStart application and an
HTML version. The WebStart version supports conjunctive queries (i.e. red AND
long books), but only works on certain web browsers. The HTML version works on
any web browser, but does not support such queries. Our team’s user studies [6] indicate that children are able to create conjunctive
queries in the WebStart version, but still have three problems with the
interface.
Figure 1. Interface showing 6 independent category areas. Two leaf categories are included in the search near the top.
First, the category browser does not provide a view of
both the current location in the hierarchy and the overall hierarchy. Second,
the leaf categories that are selected for a search and the preview of the
results are set off in a small area. Third, after navigating the hierarchy and
selecting a leaf category, the user must reverse his path to select other
search terms, losing all the navigation information. Therefore, the goal of my
research has been to redesign the system to include conjunctive searches,
addressing these usability concerns, while maintaining broad accessibility.
Addressing the first problem is challenging because
while most applications only display small, textual nodes, the ICDL must
display icons that are large enough for children to see and click. To solve
this problem, I have developed a novel interaction technique that involves
displaying the top-level nodes and hiding their descendents behind them. Clicking
a node causes it to shrink and its children to animate radially from behind it.
This technique is applied recursively. Shrinking only takes place for the
top-level node to prevent the icons from becoming too small. The animation is
done with linear interpolation with client-side JavaScript and cascading style
sheets so it is accessible from most browsers without requiring any extra
software.
Addressing the second problem was challenging because
of the potential for overloading the screen with information. This may have
been solved by making the area for storing category icons being used in a
search larger, highlighting it when an icon that could be added to it is
moused-over, and removing the display of book covers in the current result set
in favor of just indicating the count of results.
The first technique also helped to address the third
problem. By separating the categories into groups according to their top-level
ancestors, and animating each of these groups independently, the global
hierarchy remains clear while local action at one node takes place. When a leaf
category is selected as a search term, it is animated into the search area and
the rest of the node groups remain unchanged. The selection of a category
reduces the size of the result set, which is calculated using a Java servlet on
the server side, and the page is redisplayed as it appeared before, with the
new count, preserving the user’s navigation context.
To evaluate this system, I will conduct a controlled
experiment with two groups of children, ages 5 and 9. I will use a between
subjects design of 15-20 subjects in each age group to compare the interface to
a baseline system that lacks animation and in-place transitions. I intend to
measure speed, successful task completion and user preference to determine the
effectiveness of the design.
I hope to demonstrate a
generalizable technique for allowing children to search and browse hierarchies
that can be used by other digital libraries and search engines. I hope to
demonstrate that it is possible to design a web interface with complex
functionality that is accessible by a large number of people. Finally, I hope to expand on research
regarding childrens’ abilities to conduct Boolean searches.
ICDL research is funded by grants from the National Science Foundation and the Institute of Museum and Library Services.