Radial Menu

Also known as: Actions, Contextual-tools, Menu
Tags: contextual tools, selection

Radial menu provides available actions in a context-sensitive, circular popup menu made of several pie slices. It gets activated when the user clicks on an item that can be manipulated.

Songza provides radial menus for selecting from 4 actions that are available for the selected song.

Controls to interact with a song

Radial menu on Songza.com.

What Problem Does The Pattern Solve?

The user wants to commit actions directly with the content.

When to Use It?

  • You need to provide tools for the user in context when he needs them.
  • There are actions on two levels.
    • In the Songza example main level items are “play”, “share”, “rate”, and “add to playlist”. Share and rate have second level actions that are shown when the user hovers over them.
  • There are 3-8 main level actions.

How to Use It?

  • Show a radial menu when the user clicks an item that has actions.
  • Display commands as slices in a full circle or in an incomplete circle.
  • Add sub menus to parent menus if needed.
    • Sub menus don’t need to be in circular.
  • Clicking the center closes the menu.

Why to Use It?

  • Radial menu, which is a contextual menu, is an effective way to provide available command choices to users. It offers only relevant commands that apply to the current selection.
  • It minimizes hand movement needed to access commands, making it fast to make a selection.
  • The UI stays lightweight as the tools are not shown to the user until he needs them.

External Links

Code Examples

Where Is It Used? (2 examples)

Comments

There are no comments posted yet. Be the first one!