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





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


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.


[1]     Bederson, B. and Boltman, A. Does Animation Help Users Build Mental Maps of Spatial Information. Proc. of InfoVis ’99, IEEE, pp. 28-35.

[2]     Card, S., Mackinlay, J., and Shneiderman, B. Information Visualization: Using Vision to Think. Morgan-Kaufmann, San Francisco, 1998.

[3]     Druin, A. Cooperative Inquiry: Developing New Technologies for Children With Children. Proc. of CHI ’99, ACM Press, pp. 223-230.

[4]     Druin, A. et al. Designing a Digital Library for Young Children: An Intergenerational Partnership. Proc. of JCDL ’01, ACM Press, pp. 398-405.

[5]     Hourcade, J. et al. The International Children’s Digital Library: Viewing Digital Books Online. Interacting with Computers, 15, April 2003, pp. 151-167.

[6]     Revelle, G. et al. A Visual Search Tool for Early Elementary Science Students. Journal of Science Education and Technology (2002), 11(1), pp. 49-57.

[7]     Yee, K-P, Swearingen, K., Li, K., and Hearst, M. Faceted Metadata for Image Search and Browse.  Proc. of CHI ’03, ACM Press, pp. 401-408.


Web Accessibility