11

I have been seeing a few of these 'Circular menu' UI concepts around.

Recently a similar UI was proposed as a central element for a large project I know of. For example, one of the options would be 'Search' when clicked a search box would fly out, allowing you to enter your query. Other menu items would allow access to other key functions of the application.

Question:

Is this an intuitive menu interface? Do you have any evidence or research that can help determine the pros or cons?

Some examples:

Example 1

Example 2

Example 3

3
  • 2
    Only as comment, since it is more a personal observation not backed by data: they are supposed to work much better, but often don't.
    – peterchen
    Aug 24, 2012 at 11:30
  • @peterchen Do you have any example of how it's supposed to work better, and how you have experienced that this often isn't the case? Please note, I'm not questioning your statement, just curious. Aug 24, 2012 at 11:35
  • @AndroidHustle: bloppers I've seen: restricting to small hit targets, location/direction of commands depending on context (preventing muscle-memorization), and sector sub menus deafeating the simplicity. Generally, I've seen a lot first level radial menus "because that's what is cool today", leading into traditional or worse sub menus. In addition, implementations seem to struggle with odd or varying number of items (to exaggerate: everything other than four).
    – peterchen
    Aug 24, 2012 at 20:52

4 Answers 4

10

These are generally calledRadial menus or Pie menus. Radial menus appear around a touch/click target and you move to the section of the circle to make your selection.

Radial menus are a design often used for tablets and touch. There's lots of research out there on radial menus:

There's a lot of research in Human Computer Interaction on this topic: a quick search on Google Scholar for Radial Menu will find you many relevant papers. They're one of those fairly novel concepts that have some clear and supported benefits, but are a bit far outside the typical comfort zone to apply everywhere. I'll summarize some important, consistent findings:

Radial menus have these benefits:

  • Short distance to target
  • Equal distance to each target; no scrolling all the way to the bottom of a dropdown
  • Many options visible at once; no/low Short Term Memory load
  • Muscle memory over long term memory: after learning which options are where, all it takes is a quick swipe gesture to activate the control you want without looking in many cases. Windows turned this into the Flick Gesture system.
  • Very natural action for touch/tablets, just slide your finger/stylus to the target
  • Hierarchical radial menus can present a truly massive amount of options hidden in a visual hierarchy resulting in fast selection by experts.

They have these detriments:

  • They're not common. Novel interfaces always have a learning curve
  • All options are equidistant; sometimes you want to hide uncommon options. This can be done with multiple layers, but that gets complicated fast and harms the practical parts of radials.
  • If using touch/a stylus to interact with them, your hand/pen will cover a small part of the menu. This effect is limited once you memorize the positions of the options

So for a rarely used app with a lot of buttons I wouldn't recommend them, but they can be great for power users, and they can be a simple pleasure if they're exceedingly simple (it's hard to get confused with a 4 button menu)

We've also had some other questions about radial menus with some good answers, though I disagree with the consensus here: Are radial contextual menus better than vertical list menus? I also answered this related question: Should I use a radial menu design for a touchscreen game?

It's important to remember radial menus are often designed for touch or stylus input, where they excel. OneNote 2013 has an excellent implimentation of this:

enter image description here

7
  • 1
    I noticed that you didn't touch on muscle memory and limbic responses to radial menus. This, in my experience, is the primary reason to choose a radial menu. pushing-pixels.org/2012/07/25/… Also, Radial menus with mice also work quite well as "context" menus or "right-click" menus.
    – mawcsco
    Aug 24, 2012 at 18:20
  • @mawcsco I meant to mention that a bit more
    – Ben Brocka
    Aug 24, 2012 at 18:26
  • im certainly referring to radial menus rather tan round buttons
    – Jay
    Aug 24, 2012 at 20:32
  • oh and +1 for the good answer
    – Jay
    Aug 24, 2012 at 20:33
  • I've awarded the "Accepted answer" to you as I felt you gave the best answer by far. I appreciated the thought and links included. One thing I will add is though this could be used in a touch interface, the design was suggested for desktop use.
    – Jay
    Aug 29, 2012 at 12:14
1

I believe this is a tangible control that has transitioned into the graphical domain, for better or worse.

It's easy to point out the benefits using this as a tangible control. The finger can rest in the middle and quickly reach each of the actions , without the user looking, by choosing a direction. Using it this way the interaction will produce a small risk of errors in comparison to interacting with a horizontal/vertical control with four options without looking.

In a GUI however I can't really see what the benefit would be, other than that it's an aesthetically pleasing contraption in comparison with its horizontal or vertical brethren.

2
  • 1
    This answer looks like conjecture and personal opinion. Radial menus have research behind them and do offer benefits (see Ben's answer below).
    – mawcsco
    Aug 24, 2012 at 18:17
  • @mawcsco all right. Aug 25, 2012 at 11:15
0

I think these kind of interfaces are best suited for touch operated (or tangible) devices or as context menus. In both cases they offer the advantage of not having to move your finger or mouse pointer over a big distance while still getting access to the relevant option for the action you're performing.

The PC game The Movies offered something similar. When clicking on a character or a building, you were presented with a bubble menu. It contained the main actions and information about the character or building. Most actions opened another bubble with more specific sub-actions. As you can see on the screenshot below, this allows the main interface to be minimal so more of the game is visible while offering you an easy and intuitive way to access context sensitive actions without forcing you to click on a character, move your mouse all the way to the other side of the screen, click through 2 menu's and repeat the process for every item you want to interact with.

Bubble context menus

0

It involves less mouse movement (same as said that the distance between the actions is small). It is minimal, but if lots of presses of these actions are normal, it might be a reason to use these.

Also keep in mind that touch screens are getting more and more default, so this kind of control will be more comfortable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.