We've moved!

TechKnack.blogspot.com has officially moved to TechKnack.net. You should be redirected in 3-5 seconds. Thank you.

May 8, 2008

Circular Menus and Usability

Add this post to Del.icio.us. Del.icio.us (0 saved)

Circular menus. Ever heard of them? I'm not sure if they have an "official" or "common" name, but this name is pretty descriptive.

Circular menus are superior in usability to the typical rectangular slide-out menu. Why? Because, ideally, each menu item is the same distance from the initial pointer position as each other item. Look at the iPod buttons, for example. Play/Pause, the most common function, is in the middle, and the other functions are equal distances from there.

Also check out the SecondLife context "spin menu". The pie pops up surrounding the cursor, and all the available options are an equal twitch away from the center.

Submenus? Just expand the circle. For example, here's a quick mockup I made converting much of my current FireFox context menu into a pie menu:

But how feasible would such menus be inside a website? WebToolkit.info has a mostly-working demo that uses images exclusively. I tried substituting text for the images, but the menu simply disappeared.

Credit for image: iPod image and SecondLife image

2 comments:

Anonymous said...

There used to be a plugin for firefox that did this called radial context. It hasn't been updated much for last couple of years. http://www.radialthinking.de/radialcontext/

Anonymous said...

The term used back in the 90s was "pie menus" because it divided the choices up into a pie. The idea was to use multiple-directions to help muscle memory and also avoid the user having to move the mouse in the most uncomfortable direction (down and out) so often.

The one drawback was that if the menu changed over time, the muscle memory was useless and they'd still go right back to having to read the choices - if the number of menu options went from say, 4 to 5, a lot of mistakes would be made early on that might have bad consequences.