Site archive. SpicyNodes was active 2005-2018.

Home > Archive > Developers/reference > How Spicynodes works > Intuitive operation

Human-computer interaction studies have concluded that ambience is vital for perception. Systems that require extra effort to find or notice things tend to be distracting, and the time spent on concentration takes away from actual cognition. People cannot function productively below their proprioceptive control limit. A model of eye-hand coordination indicates that movement might give important proprioceptive feedback (Selker, 2005).

SpicyNodes achieves its usability and user-friendly model by seeming to base nodes and connections in a space that is familiar and intuitive to humans. The nodes exert gravitation-like attraction to each other, as node relationships and movement take place in a two-dimensional pseudo-Newtonian space. When focused on the periphery, related nodes (children) radiate from their immediate parent in a cascading manner, just as the sun swirls in our galaxy, planets orbit the sun, moons orbit planets, satellites orbit moons, and so on.

The movement subsystem is designed to mimic motion in the real world as closely as possible. When users click a node, it gathers speed and then decelerates as it settles into its new orbit. This naturalistic mode of movement is aesthetically satisfying, and allows users a much greater sense of actually working with the interface rather than simply using it. The way in which nodes jump from orbit to orbit is similarly elegant: instead of tracing a line based on rectangular coordinates within the graph plane, they follow a route based on polar coordinates. To correct a common problem of earlier radial tree implementations, constraints are placed on the motion of nodes so that the whole layout does not appear to flip in a way that is disorienting to the user. Instead, nodes arc from orbit to orbit, as a spacecraft would when maneuvering under the influence of a planet’s gravity.

To keep the user from getting lost, geometric transformations should retain a familiar view and retain visual memory (Lam et al., 2006). SpicyNodes employs systems for panning and rotation based on physical models of motion, thereby creating a living, organic space and providing intuitive ways for the user to rotate and move a scene (Bourge, 2001). To create a lifelike interaction, we use artificial motion rules, inspired by, but not directly based on, traditional Newtonian motion. Since a mouse can only move horizontally and vertically, the system utilizes a novel method of interaction using centers of mass, momentum, and friction—similar to pushing plates around a dining room table—so that the user can both rotate and pan (3D manipulation: x-transform, y-transform, and theta-transform) using only two dimensions of mouse motion.

Complex working environments are problematic for users who need to know how to keep track of information, how to remember it, and how to use it efficiently. The human memory works best when certain environmental cues serve as reminders. The absence of such environmental cues can create memory problems for the user (Hewett, 2005).

With SpicyNodes, an optional breadcrumb display serves as an environmental cue. Users always know where they are because at any moment they can learn their location by looking at the route map (e.g., Home > Fruit > Sweet > Apples). Also, colors are widely used to group the nodes, either by major group, or by the distance from the center. This helps users keep track of nodes as they refocus from one node to another.

In order to enable a user to locate a specific node and proceed to it by means of a “jump,” the system employs traditional search methods. For example, in small data sets, the misspelling of proper names is a common problem. SpicyNodes incorporates a text search engine based on a fuzzy search algorithm that is designed to detect phonetic and typographical misspellings, thereby incorporating the most flexible aspect of traditional navigation technology—searchability—into its realization of an interface with explorational features.

You can pre-set the zoom slider to initially present your visitors with the view you want them to see. After that, they’re at the controls. When SpicyNodes is fully zoomed out, users are treated to a broad overview of information. They can see the major nodes and can mouseover any node to display its label.

When users zoom in, the orbits expand and fewer nodes are displayed. Zoom in even more, and the center node expands to display additional information and navigate to closely related nodes. At maximum zoom, the center node can display photos and large amounts of text. It can even take up the whole screen.

As SpicyNodes shows both the big picture and the contiguous details simultaneously, it allows users to explore a site’s navigational architecture while keeping track of where they are within the whole structure. In this way, the system not only prevents a user from getting lost, but also allows him or her to search efficiently for information—even if the user is not sure whether such information exists. Because of this feature set, such a radial map might be better described as an “explorational” graphical user interface (GUI) rather than a “navigational” one.

This functionality bears resemblance to what Piazzalunga and Barretto call an “interactionist” interface, which is an environment “with interactive characteristics closer to the user’s natural way of relating — a creation of environments that enable the user to experience and perceive him/herself in relation to his/her interactions with and in the environment.” (Piazzalunga & Barretto, 2005)

Such an approach allows a kind of visualization that lets users see the structures and substructures of information in each section of a web site or database. Also, in each area users are able to perceive the information’s relative density, which provides a panorama presenting meta-models as organic structures.

This perspective, which lays out the component parts and indicates their interdependence, facilitates the experience of Expanded Reality and allows a multitude of creative insights to take place. Creative insights are commonly allocated in three categories: selective encoding, selective combination, and selective comparison (Sternberg, 2005). Selective encoding involves distinguishing irrelevant from relevant information; selective combination refers to taking “selectively encoded” information and combining it in a novel way; and selective comparison indicates a novel way of relating new information to old information.

Radial maps facilitate the creative process by accomplishing several of the same creative goals as keyword searching (see Table 1); however, they do so in a visual manner. As visitors do not take the same path through a site (Allen, 2002), they can discover unnoticed connections, explore in an iterative manner to focus on a topic, and serendipitously encounter new insights.