Clicky

Home

Louie A.

Mobile UX Design

Get In Touch

Gesture-based Radial Menus

A thorough look at speeding up interactions with Gesture-based Radial Menus.

Nov 17, 2014

10 min read

Being able to do more is no longer enough, we want to do more and we want to do it faster than ever.

The challenge is finding a balance between how much we can do and how quickly we can do it.

Because of that, we must explore new patterns without forgetting the lessons we learned from the early days of Human-Computer Interaction.

In this post we’ll revisit Gesture-based Radial Menus, their advantages, guidelines, and look at a few existing and possible examples.

Problem

image of Photos app — a simple messaging app that's been iterated but still elegant

We want more, we want it faster. Apps grow in complexity over time, even well-designed ones that do just one thing are likely to add a few more options over time.

Customers however, don’t care about the app, they simply want to book a cab, share a picture, send a text as easily as possible and go onto their lives.

One of the answers to this problem has been called ‘The Great Unbundling’, where a set of features from a larger app is encapsulated into a smaller, more focused app. Facebook Messenger is one example of this, it does one thing and does it extremely well.

But even within these focused apps, certain actions are so frequently used that we notice every tiny bit of friction.

Solution

Example Linear Gesture-Based Radial Menu

This is where linear gesture menus come in. When paired with certain layouts, they allow for quick visual search and selection times.

Radial menu layouts are most common, and when restricted to a single level they’re also most efficient. While not as efficient, linear gestures can also be applied to vertical or horizontal menu layouts.

Efficiency is mostly impacted by content predictability and layout.

If content is static and items large and equidistant from the initial contact point (i.e. Radial layout), then visual search isn’t needed and we can simply use gesture muscle memory resulting in very quick selection times.

By comparison, dynamic content is unpredictable requiring visual search, and non-radial layouts force us to determine selection based on distance instead of direction.

Using direction is less error-prone, and more comfortable on larger devices as shorter finger movements are less likely to leave the comfort area of the original touch.

Advantages

For the reasons described above, linear gesture menus can increase selection speed, while maintaining comfort and the radial layout may introduce some novelty.

Disadvantages

Every pattern has its disadvantages, in order to ensure visual search and selection speed, linear gesture items can only contain a small number of items. This is because smaller items are harder to select, and large items use up more of the limited screen estate.

The required item size in combination with the most efficient layout — Radial — doesn’t leave much space to display extra information such as text labels.

Items may also be obscured by fingers, one solution is limiting items to an area that’s more likely to be visible. This can be tricky, the best is to avoid assumptions about handedness, and either start the gesture from the center of a screen edge (i.e. Path) or use layout intelligently (i.e. Mass Effect).

Guidelines

radial menu overlaid on top of iPhone 6 Thumb Comfort areas

Examples

Messages

Radial menu animation from Messages for iOS 8

Messages on iOS 8 implements a gesture-based radial menu for quickly sending media.

It has few, static items displayed on a radial layout. This implementation has the following issues:

Voice input hint animation from Messages for iOS 8

Voice input does indeed provide a hint, but tapping the camera icon provides no clue about linear gesture support. While this feature is non-essential and aimed at advanced customers, tap and gesture input could still share the same UI. This would make it easier to provide an animated cue perhaps, and would help transition novice into experts customers.

Performance is (intentionally?) low, gestures can only be performed after pressing either button for 1 second and . This might be an error-prevention mechanism, but perhaps the same could be achieved by analyzing gesture length and speed.

Mass Effect

Radial weapons menu from Mass Effect: Infiltrator for iOS

Mass Effect is overall a great example of non-casual mobile game design, it has all the key elements from the original game — story, sound, environment — and its controls are perfectly adapted to touch.

Linear gestures are used for quick Weapon and Power selection, implemented as radial menus positioned on the top corners.

This implementation has few, static items displayed on a radial layout. Items are large for easy selection, and placed far from the initial touch point to ensure they’re not obscured by the finger.

animated image of different options being selected

As the finger moves into one of the items, the initial touch point — which is no longer hidden by the finger — updates to display the item that will be selected upon finger release.

animated image of an item being selected

Upon release, selection is confirmed and the gesture shape slowly fades away, reassuring which gesture was recognized. Being a radial menu, the trail is easily distinguished via its direction.

Fluid-Touch Floating Action Button

Fluid-Touch Floating Action Button Demo on a Device

This “Fluid-Touch Floating Action Button” prototype uses a vertical linear gesture menu with an optional(?) horizontal gesture for confirmation.

Unfortunately it has several issues:

On a positive note, it supports non-gesture selection and still manages to add some visual appeal.

Wrap Up

When implemented correctly, linear gestures provide very quick access to a small number of actions and help introduce some novelty.

Don’t compromise on muscle memory, if you do so, this pattern becomes nothing more than a gimmick. A novel but hard to discover menu.

Number of taps isn’t a performance metric, cognitive load is. Tapping or swiping can be equally bad if their outcome is unpredictable.

Hope you enjoyed this article, feel free to share it and check out my work. Contact me if you’re interested in working together or have any constructive feedback you’d like to share.

Credits

Research

Supporting menu design with radial layouts.

Notes on the History of Radial menus, Pie menus and Marking menus

Touch Means a Renaissance for Radial Menus

Apple experimenting with “radial” menu design

Are Radial Menus The Future Of Office?

Other

latest articles

more articles

latest work

more work