Matt Gemmell

TOLL is available now!

An action-thriller novel — book 2 in the KESTREL series.

★★★★★ — Amazon

Scrolling Pie Menus

development & pie menus 1 min read

I’ve been working away on my aforementioned pie menus implementation on Mac OS X, and thought I’d share a screenshot of the current version in action.

Here’s a pic of an application’s Edit menu being displayed as a pie menu:

scrolling pie menu screenshot

The obvious additions since the last screenshots I posted are the title of the currently-highlighted slice being displayed above the pie menu, for easier readability of long titles, and also the ring around the pie.

The ring indicates that there are additional menu items which are not currently being displayed. Prior research has shown that about 8 items are optimal for pie menus, in terms of acquisition speed and accuracy, so we only show 8 items at a time. The ring provides the same visual information as a linear scrollbar, showing in this case that the current options are those at the beginning of the menu, and that about 60% of the entire set of options are currently being displayed. The blue band on the ring is thus exactly like a proportional scroll-thumb.

This “Scrolling” concept is only one of the overflow policies implemented, with the other two being Squeeze (just show all options in a single pie menu, using as many slices as required; a very simplistic “policy”), and Submenu, which shows 7 items at a time with the 8th slice triggering a sub-pie with an additional 7 options, and so forth.

The overflow policy can be set explicitly by the user, or else Scrolling will be used by default. Title call-outs can be disabled. I’ve also added optional sound to the pie menus (yes, the inevitable iPod clicker sound for rollover, and a suitable sound for selecting slices), and keyboard navigation (up/right to move through the slices clockwise, down/left to move anticlockwise, return/enter/space to trigger slices, and esc to close the pie menu). All colors naturally respect the system settings for menu display and color scheme (Aqua/Graphite), or can be set to any colors desired.

More as it happens.