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

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

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

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

Speed

Comfort

Subjective Visual Appeal

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

Disadvantages

Scalability

Information Density

Items may be obscured

Affordance

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

Use few, static items

Prefer a radial layout for efficiency

Items should be large and with enough spacing

Best as a shortcut for frequent items/actions

Include a fallback or hint on tap

Tap-based radial menu fallback to bring tap and gesture closer

Provide feedback for gesture start, progression and completion

Use large, spaced and distinguishable items for comfort

Avoid obscuring items through placement and layout

Examples

Messages

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:

Affordances: insufficient hints

Performance: low

Layout: items likely to be obscured

Feedback: insufficient gesture feedback

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

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.

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.

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

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:

Layout: hard do scale and remain comfortable beyond 3 items

Interaction: relies on vertical accuracy and horizontal dexterity

Contents: variable thus unpredictable, preventing muscle memory

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

“we compare two main characteristics of radial and linear layouts: a) the time is takes to find an item(i.e. visual search time), b) the time it takes to navigate to an item (i.e. pointing time). We use objective and subjective measures, two menu sizes, three menu levels, one linear and three radial layout variations.”

“providing easy and fast access to these [menu items] is a real challenge”

“the issue is especially important for professionals who utilize menus extensively, invoking hundreds of commands during their normal work session (e.g. 3d modelers or video editors)”

“a set of cascading menus is one of the most widely used designs to access hierarchies of commands [multi-level hierarchies present higher error rates due to item size/interface, is time-consuming]”

“One approach to decreasing the navigation requirements in menus is to use alternative layouts (i.e. different spacial placement of the menu items). Radial layout is one example that both shortens the distances between the menu items and increases their size.”

“Novices unfamiliar with the menu content and command locations have to search for commands visually. In this case, the overall selection time depends on visual search and pointing times. However, users quickly develop and rely on spatial knowledge for menu item locations (i.e. they become expert users) if the layout of the menu is stable. Consequently, visual search time decreases as users become experts and the overall selection time then depends mainly on decision and pointing times.”

“In terms of the use of gestures, a key observation reported in Callahan et. al. [2] was that items could be selected very quickly because selection could be performed without looking at the menu since direction of movement distinguishes an item.”

“Further work by Hopkins [4, 5] reported that as an artifact of operating system input event buffering, a user could make the mouse movement needed to select from a hierarchic pie menu without having to wait for the system to display each menu.”

“Hopkins believed that this resulted in faster menu selection times (especially when the display of menus is slow). Later work by Hopkins formalized this “mouse ahead” concept by explicitly suppressing the display of menus while dragging.”

“Kurtenbach [6] further refined the “mouse ahead” artifact by introducing the concept that cursor movement during selection generates a path that identifies a particular menu item. Furthermore, if the cursor left an ink trail when generating one of these paths, a mark that identifies a menu item is created.”

“Kurtenbach then introduced the notion of scale independence: a mark can be draw at any size and only the shape of the mark, not its size, identifies the menu- item being selected. Kurtenbach believed that scale independence was a critical property in allowing very fast selection. In earlier pie menu systems, the user, even when selecting using “mouse ahead” still had to be aware of the size of the menus and carefully control their movement. Kurtenbach believed that with this constraint removed, menu selection could be performed even faster and this effect would even be more pronounced in hierarchic menus.”

“gestures get embedded in muscle memory, which is faster to access than visual memory.”

“It looks visually interesting, but they are not spatially efficient. The use of screen real estate (particularly on smaller screens) is a trade off between readability and aesthetics. This seems more aesthetic than readable from a small screen perspective.”

“A mouse is optimal for precise targeting, and touch is great for broad strokes such as scrolling and zooming. In some postures, such as standing, touch is the preferred input, while the efficiency of typing at a desk is hard to beat. Each posture and input characteristic is great for some jobs and not as good for others. We wanted to make sure Office apps felt intuitive, natural and comfortable as across different postures and different kinds of input.”

Other