Category Archives: Navigation

Circular navigation

I have a slightly unhealthy obsession with circular navigation solutions (or pie menus).  Tell me, who isn’t bored of tabbed or cascade navigation?

Although, it’s not just because it’s aesthetically pleasing ways; and that it almost always has the desired effect when clients look at it… it makes alot of interaction design sense too, especially on touch devices, when hand jitter, pen skipping, mouse slipping, or vehicular motion (not to mention tectonic activity) could be a factor when interacting.

Here are some advantages:

  1. More reliable than linear menus, as it requires very little cursor motion.
  2. More memorable, it makes use of the body’s ability to remember muscle motion and direction, even when the mind has forgotten the corresponding symbolic labels.

The main disadvantage:

  1. Because of the circular layout, this naturally doesn’t make it as efficient in use of space.
  2. The trick is to crack the labeling – preventing overlapping menus and clearly associate labels with their direction.
    Avoid using rotated labels
Here are a few examples circular navigation solutions:
Sketchbook X - iPhone app - Touch screen

Sketchbook X - iPhone app - Touch screen

Circular navigation with sub nav

Circular navigation with sub navigation

Mobile half-circle nav

Mobile half-circle nav

Usability – Jack Callahan’s study
Jack Callahan’s study compares the seek time and error rates in pies versus linear menus. There is a hypothesis known as Fitts’ law, which states that the “seek time” required to point the cursor at the target depends on the target’s area and distance. The wedge-shaped slices of a pie menu are all large and close to the cursor, so Fitts’ law predicts good times for pie menus. In comparison, the rectangular target areas of a traditional linear menu are small, and each is placed at a different distance from the starting location.

Callahan’s controlled experiment supports the result predicted by Fitt’s law. Three types of eight-item menu task groupings were used: Pie tasks (North, NE, East, and so on), linear tasks (First, Second, Third, and so on), and unclassified tasks (Center, Bold, Italic, and so on). Subjects with little or no mouse experience were presented menus in both linear and pie formats, and told to make a certain selection from each. Those subjects uising pie menus were able to make selection significantly faster and with fewer errors for all three task groupings.

The fewer the items, the faster and more reliable pie menus are, because of their bigger slices. But other factors contribute to their efficiency. Pies with an even number of items are symmetric, so the directional angles are convenient to remember and articulate. Certain numbers of items work well with various metaphors, such as a clock, an on/off switch, or a compass. Eight-item pies are optimal for many tasks: They’re symmetric, evenly divisible along vertical, horizontal, and diagonal axes, and have distinct, well-known directions.

Source: 1991 by Don Hopkins.
Originally published in Dr. Dobb’s Journal, Dec. 1991, lead cover story, user interface issue.

Read more here