This was my Master’s Thesis at NYU Polytechnic School of Engineering.
Click here to view the entire thesis.
Try the menu on your own device here: http://bit.ly/RadialMenuPrototype
Why Radial?
- Current stock of mobile devices vary in size / form factor.
- Menus are often biased for right handed access.
- Menus sometimes get out of reach of a normal hand hold of the device, often requiring a change in the way the device is held.
Radial menus offer a lot of advantages over conventional stacked menu systems
Ambidextrous:
Radial menus are not biased for a particular handedness.
They can be called with equal ease by a left handed or right handed hand hold of the mobile device.
- Natural range of motion of the thumb on the screen is in an arc.
- Radial menus exploit this to make each menu item easier to access.
- Makes navigation smoother with gestures
- Works with tap and select as well as with gesture inputs
Placement on mobile devices
The menu can be called up anywhere on the screen. So instead of making the thumb chase for a hot corner on an opposite end of the screen, the radial menu can be summoned at any convenient location on the screen. This completely removes the need to re-adjust one’s hand hold on the device.
A radial menu is also ambidextrous and as we can see, it works well in portrait as well as landscape orientations. The number of menu items displayed may vary depending on the screen space available, but there are ways of working around this, and will be talked about later.
Takes advantage of Muscle Memory
Frequent use of the menu makes users familiar with the layout
Over time, user no longer needs to look at the menu or read its contents to make common selections.
Is Context Specific
Can display different options based on which part of the screen the menu is invoked. Eg: Summoning the menu over selected text gives options to cut-copy-paste, while a blank area gives options to email, reload page, or print.
Menu Hierarchy
The radial menu offers an intuitive way of showing menu levels. Each subsequent level forms a concentric circle around the menu.
Based on studies about the reach of the thumb on a mobile device, and the active target area, it is suggested that menu items should be 0.8 to 1.0 cm wide, with a space of 0.1 to 0.2 cm between them. This means that we can comfortably place two levels of menus around the centre.
The menu levels are linked by arrows, to indicate the slections made to arrive at the position in the menu the user is in at the moment.
After two levels, I suggest that the subsequent menu levels be displayed in a radial menu of their own. The previous parent menus can be faded out slightly to allow for no confusion about which is the active menu. Again, this can work in tap-and-select as well as with gestures.
Menu Traversal and Input Methods
Menu traversal can happen with gestures, or with tap and select.
Grouping is important. It allows users to find similar functions in a menu system. Options 1 through 3 are displayed connected to each other, but disconnected from the menu system. The white space gives the illution of being part of the menu but without any visible connection. Eg: edit fuctions, program functions, etc.
Visual Feedback
Menu items that are currently selected need to show some sort of visual feedback to make navigation easier.
Two methods : Glow/ Aura, or actually increasing the size of the menu element. In both cases, the idea is to increase the visual footprint of the menu item being selected so that it is visible around the finger when it is on the screen.
It is recommended that the menu elements should be 0.8 to 1.0 cm in size. This means that the level 1 menu can comfortably contain 8 menu items. The level 2 menu can contain 12 items.
If any level of the menu requires more items to be displayed, these can be indicated by arrowheads on either side of the visible menu items. Tapping on those arrow heads, or making gestures to move the menu items like a rotary dial of an old telephone will allow the user to view the additional menu options. An added visual indicator can be to make part of the menu items fad away at the edges when they are next to hidden menu items.
User Study
A study was conducted where users had to perform tasks with the default menu in the android browser, and the menu that I’d created in a sandbox environment.
I measured the time taken between subsequent taps while executing tasks.
Task 1: Navigation Task: Navigate forward till you find the purple page.
Task 2: Navigate to one of six bookmarks (selected at random with a six sided die)
Key observations in Navigation Task
- Radial Menu is faster
- Immediate decrease in time between taps after the first interaction
Key Observations of Bookmark Task
- Radial Menu is faster in most cases
- Time spent between taps is less with the radial menu
- Users spent more time before they tapped an icon in the radial menu than in the default bookmarks page
Takeaways from the Study
- Input with a radial menu is faster
- Participants seemed excited about the new menu design
- Participants indicated that they liked the idea that they could call the menu from wherever they want on the screen
Click here to download the entire thesis.
Try the menu on your own device here: http://bit.ly/RadialMenuPrototype