The half-radial menu

A proposal for a new menu type that marries the newer radial-menu and traditional linear menu.

Half Radial Menu

In a recent article over at Smashing Magazine, the author discussed Fitt's Law and User Experience. Though the entire article was a great read, one that I would suggest to anyone working with UX, the section "Fitts’s Rule Number 4: Exploit The Prime Pixels" looked at two specific types of contextual menus based on the right-click: linear or radial menus.

Demo

Linear menus are clearly what we are all used to from years of working with both Windows and Mac OS: right click anywhere on this page and you will see a linear menu. Radial menus, however, seem to be a largely new innovation (at least in my experience). Though I would suggest taking a look at the original article for a great description of the pros and cons of each, the author break's down the discussion with a quick checklist:

"
  • You have to integrate many options,
  • You have to work with sub-menus,
  • You want to group and rank menu entries,
  • Screen real estate is critical.
From Smashing Magazine. Bold added for emphasis.

Screen Real Estate

What stuck with me about this list was the consideration for screen real estate. More specifically, a radial menu expands to all sides from the cursor click. This leads to two main problems: the menu is more likely to cover whatever it is you have clicked on and are working with; and, if the click occurred near the edge of the screen, the center of the contextual menu must either appear away from the click or some of the radial menu must appear outside of the screen.

What the radial menu bring as a benefit, however, is that each menu item is the same distance from the cursor from the point at which the context menu was triggered. With linear menus, some consideration has to be made to determine which functions are the most commonly used, that they may be placed toward the top of the list of menu items (and thus closest to the cursor) requiring less mouse movement to activate.

The Half-Radial

The half-radial menu is an experiment to see if the benefits of the radial menu can be preserved while maintaining the manoeuvrability of the linear menu. It is pretty simple: take the radial menu and cut it in half!

Half Radial Menu Illustrated

Strengths

The strengths of the half-radial are almost identical to that of the radial menu. Most specifically, it follows Fitt's law by placing each menu item at the same distance from the cursor, thus decreasing the amount of mouse movement necessary to utilize any item in the menu. It also offers slightly larger target areas (than the normal linear menu) due to its shape. Where it goes beyond the strengths of the full radial menu, however, is in its ability to be repositioned based on context.

By removing half of the pie of the radial menu, it becomes far more flexible and can avoid some of the major pitfalls of the full-radial. With the full-radial, there are a number of trouble areas in which it cannot appear correctly. Near the edge or the corner of the screen, for example, some of the menu must either be lost outside of the screen or the menu must appear at a point not directly surrounding the cursor. The half-radial, however, can behave similarly to the linear menu by positioning itself intelligently. This means reacting differently when near the edges or corners of the screen or moving out of the way of the content that one is working on. Take a look at the demo and play around to see how the menu can manoeuvre itself based on the cursor's position.

Weaknesses

One of the big weaknesses of a radial menu is present in an exacerbated form for the half-radial: it can contain only very few menu items. The number of possible menu items for the half-radial should likely be constrained to a maximum of four.

Though it far outstrips the full-radial menu in its manoeuvrability, it still would not be able to perform perfectly too close to the corners of the screen. Though it could appear at an angle, as is shown in the title image, were the cursor to be closer to the corner of the screen, the menu would not be able to appear with its center directly on the cursor point. In the demo, just click in the extreme corners of the page to see the problem illustrated.

Context Menus

In many situations this is completely unworkable, but where fewer menu items are acceptable, it provides a unique answer. Often, linear menus include a number of unnecessary options: if the user can accomplish an action elsewhere (in as efficient a manner), then the menu option should not be included in the context menu. Context menus are designed to provide options specific to a context, nothing else. Just as with mobile-first design, work to limit the number of menu options you try to cram into a context menu. Provide the user with the best method for accomplishing something, not multiple methods of varying levels of efficiency.

Conclusion

The half-radial menu is just an experiment: it clearly does not fit into every situation and has very clear limitations. I did feel that it had a place as a possible context menu type in that it solves some of the problems of the radial menu while maintaining the radial menu's strengths.

What do you think: does this have a place in UI design, or are the constraints too cumbersome? Have you seen this type of menu used before? Let me know below.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>