Radial Menu

Also knows as: Pie menu

What

Provide available actions in a context-sensitive, circular popup menu made of several pie slices.

Example image

Songza.com - Songza is a music search engine and an internet jukebox. They provide radial menus (a menu made of several pie slices around an inactive center) for selecting from 4 actions that are available for the selected song. Very nice implementation of Radial menu.

Use when

  • You want to reduce the complexity of the UI and keep it simple.
  • You need to save screen space.
  • Menu has 3-8 main level options.
    • If more, menu needs to be nested

Why

  • Radial menu, which is a context menu, is an effective way to provide available command choices to users. It offers only relevant commands that apply to the current selection
  • Minimizes hand movement needed to access commands
    • Thus radial menu is fast to select from
  • Saves screen space
  • Allows the user to focus on what is important in each step of the process
    • Towards task oriented UI
  • Because the menu is hidden until needed, the design is more simple and clean than when using a menu bar which would be always visible.

How it works

  • Show a radial menu on click
  • 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
  • Menu can be closed by clicking the center

History

This pattern was created by Janne Lammi.

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:


photos in UIPatternFactory.com tagged with 	radial-menuMore photos in Flickr group "UIPatternFactory.com" tagged with radial-menu

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

0 Responses to “Radial Menu”


  1. No Comments

Leave a Reply