Sunday, April 2, 2017

interaction design - Are circular menu / button interfaces intuitive?


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



Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...