Atom Interface
Written by Krystian SampAugust 2007
New Version Coming Soon!
Introduction
Tree structures (Fig. 1) come in many flavors and literally can be found everywhere. It can be a hierarchy of species, a classification tree of articles, a directory tree with folders and files, a well defined taxonomy like DMOZ, facets and their values for a set of resources, categories and sub-categories for a bunch of photos, a menu with options, etc.
Figure 1. Tree structure
However, current interfaces for browsing and exploring trees do not use the full potential of tree structure and do not take into consideration many factors that influence user performance, experience and task completion. Some of traditional approaches, for example, visualize the items using orthogonal shapes and containers usually in form of vertical lists (e.g. MS Windows start menu).
Figure 2. Folder/List view |
Figure 3. Traditional menu box |
This has some serious disadvantages and implications. Firstly, the distances for reaching various items can differ a lot and are not optimal. The longer the distance the lower the performance, since more time is required to reach an end point (see Fitts' law). Secondly, if the navigation task requires traversing the levels of a tree the user has to be very accurate and focus his visual attention since the margin of error is very low. How many times have you missed your selection going from a parent node to the box with its children? It slows down the whole process of navigation and is very inconvenient, irritating and pulls focus (attention) away from the real task. The third disadvantage of traditional interfaces is they do not highlight the relationships and connections which exist in tree structures. They do not give a good, esthetic overview of the space of possibilities. Children of a parent node do not gather around a parent node, some of them are far away at the bottom of a list and the hierarchical concept of belonging is flattened and not exposed. This causes the user to incorrectly interpret and misunderstand the structure of the space. It also takes more time to memorize and learn how the information is organized. The fourth problem arises as traditional solutions usually use little graphical cues to visualize the information. Nodes are of the same shape, size, and color. This lowers the user interface bandwidth and closes the door to adaptation and user specific adjustments.
Finally, current approaches focus on single trees and do not try to show the relationships between two or more hierarchies. Imagine exploring two instances of the same taxonomy of books (products, people, etc.). Going through two different paths you could explore books corresponding to two different categories. Two result sets, however, could contain some of the same items. It would be very valuable if user could see this clearly.
Connections between trees enrich the visualization giving it more semantics and allowing perceiving and understanding more than traditional solutions.
All these problems make it difficult to move around a tree fast, especially if the user deals with new, unknown spaces. The performance of exploring, browsing, memorizing and finding things is very poor and the effort put into the process of traversing and navigating tires and discourages the user.
This research
This research presents a novel approach to visualize, navigate, browse, explore and interact with tree structures and graphs. It takes into consideration all mentioned disadvantages and problems of existing solutions to build more efficient, meaningful, natural, and engaging interface. It is based on the metaphor of electrons, atoms and molecules and thus the name Atom Interface. Since it is all about interaction, visualization and user interface it is probably not a bad idea to see it in action (YouTube video).
Atom Interface presentation
Compact Radial Layout
The foundation of atom interface is a so-called compact radial layout (Fig. 4). It is a new way of organizing items around their parents in a circular fashion within a single atom.
Figure 4. Compact Radial Layout (Atom) (without legend)
Although radial layouts and menus are not a new idea and have been around for many years (Fig. 5, 6) this presented layout differs from existing solutions in a number of ways: (i) it is focused more towards exploring and browsing small and large trees by collapsing/uncollapsing paradigm (as opposite to visualizing the overview of the entire tree or graph), (ii) is more compact in order to emphasize relationships and ease learning and understanding the structure, (iii) preserves full context. The compact radial layout is designed to fulfil and address the problems listed in the introduction.
Figure 5. Maya's pie menu |
Figure 6. Neverwinter nights' radial menu |
Circular organization of the information (shells and nodes) ensures that the distances between subsequent nodes are shorter and that the targets have more optimal shapes in term of aiming and selecting. This addresses the first two problems making the navigation process faster, more convenient and requiring less visual attention.
During the exploration process new shells and nodes are revealed. However, the context is fully preserved and the user can see the entire path leading from the central to the last selected node. This addresses the third problem defined in the introduction and helps localizing the information and understanding its origin.
The physical positions of children are carefully selected to emphasize parent-child and child-child relationships - this also addresses the third problem. Since those positions don't change the user can learn and memorize the space's spatial arrangement and structure over time.
Atom Interface and its compact radial layout are suitable for both small, and large tree structures and graphs (up to several hundreds of thousands nodes). It can be used to perform many different tasks but is especially good for exploration and browsing where the parts of the space are initially hidden and uncollapsed/collapsed on demand.
Adaptive visualization
The construction and design of Atom Interface is flexible and has great adaptation potential since it uses more graphical cues and elements to encode the information than current approaches. Compare it with traditional folder or list view where only icons, position and text can vary differentiating the items. Atom Interface, on the other hand, can additionally customize shapes, sizes, colors, transparency and rotation solving the fourth problem. This is a perfect field for adaptive techniques to adjust the interface according to the user profile, needs and goals. For example, the sizes of nodes can indicate their importance according to the temporary user goals (Fig. 7).
Figure 7. Adaptive Atom Interface
Molecule metaphor (many atoms)
Atom Interface is capable of displaying many connected trees (Fig. 8). Every tree is represented by an atom which uses compact radial layout for item organization. This addresses the last problem defined in the introduction.
Figure 8. Molecule (connected atoms)
Visualizing more than one tree simultaneously gives an insight into the data from many different perspectives. Connections between the items of separate trees helps to relate the data, conclude, make decisions, understand, and grasp more details. This missed feature appears to be very crucial and useful in many tasks. For instance, it is easier to find items of desired characteristics.
Limitations
Shells closer to the central node are spatially smaller and provide less space than the subsequent shells. Thereby Atom Interface (compact radial layout in particular) is more suitable for trees which are sparse on the first levels and denser on subsequent levels. This ensures that the spatial portions devoted to nodes are big enough to provide convenient interaction and satisfying performance.
If the tree has too many nodes on the first level one can consider changing the data structure itself by applying some clustering algorithms. The problem can be also mitigated leaving the data unchanged and using such techniques as fish-eye where only those nodes under focus are enlarged.
Deep hierarchies require many shells to be created. The screen space becomes a limitation here. The problem can be overcome by using zooming technique (which is implemented in our prototype).
Sometimes the user doesn't need to see the full path from the center to the certain node and is more interested in exploring a tree further from that particular node. In this case the context isn't important and the node of interest can become a new root node meaning that the inner shells can be discarded. However, it can lead back to the problem of too many children since our new root node might be deep in the data structure and we start exploration from the beginning with spatially small shells.
Prototype
We implemented a prototype of Atom Interface to try and evaluate the metaphor and the idea. You can find evaluation results and conclusions in the articles.
In our prototype we have implemented some additional features (Fig. 9, 10, 11) to easy navigation and interaction: (i) using a mouse roll the user is able to rotate the outermost shell with its children, (ii) ctrl + mouse roll zooms in/out the whole atom under focus, (iii) the atoms are transparent so it is possible to see their content when overlaid.
Figure 9. Transparent atoms |
Figure 10. Rotating the shells |
Figure 11. Zooming in/out |
The prototype is written in Python using Qt library for drawing.
Currently an intern Jedrzej Gontarczyk works on web-based version (Flash) of Atom Interface which will be available for public use. It will be as flexible and customizable as possible allowing people to adjust many parameters influencing appearance and behavior. One of the main goals is to make it very easy to use in your own web sites and projects.
Publications, presentations and demos
| May 2007 | - | Atom Interface presentation by me at DERI, |
| July 2007 | - | Atom Interface poster (pdf ~ 15.5mb) was presented at Summer School Multimedia Semantics 2007 in Glasgow. It was highly commended and got an honorable mention, |
SSMS07 - Highly commended posters  Atom Interface poster |
||
| May 2007 | - | Atom Interface (Flash implementation) presentation by Jedrzej Gontarczyk at DERI (slideshow at slideshare), |
|
Slideshow of Jedrzej's presentation |
Acknowledgments (in alphabetical order)
- Bill McDaniel
- Cosmin Basca
- Dragos Andronic
- Jedrzej Gontarczyk
- Maciej Dabrowski
- Sebastian Kruk
- Stefan Decker (my supervisor)
- Tadhg Nagle
- Uldis Bojars
I'd like to thank also all the people from DERI (my workmates), SSMS07 and my friends for tons of valuable comments, suggestions and ideas related to Atom Interface.
Feedback
Comments, related work, similar things, opinions are more than welcome! Also if by any means, my work inspired you please let me know (you can find my contact details on the main page or you can leave a comment below)
Thank you guys!
Krystian