"Fluid Touch" gesture menus on mobile applications

Question

A few weeks ago, I read a blog post about a way to reduce clicks/touches when selecting items from expandable menus:

The most common behavior is touching an icon to open some menu, and touch again on the item you want to select.

The blog post I read supposed to offer a "fluid" way to interact with the menu: The menu would open on when beginning to touch, and the selection of items would happen when the touch gesture is finished. By making this simple change, it's possible to open the menu and select an item with only one touch gesture, while still offering the common two-touch selection method. An online example of this can also be seen here.

We are developing a mobile version of our web application, so I'm interested if there are any drawbacks of using this? In what cases should this not be used?

Answer 1

This menu system has been around for a while

Mobile and tablet game developers like Gameloft have used the interaction for years before the article (or the source demo it references) were written.

In tablet games, they are used for cases like casting spells in an action game. It's useful to study why they're effective in those interfaces:

• The user hits the spell button, a set of spells pops up immediately (no animation) in a semicircle around the button, and the user slides her finger to the spell she wants to cast, then releases to cast.
• This allows the game developer to maximize limited screen space for game playing, while providing fast menus for players when they are needed.
• Importantly, it allows players to access and select spells quickly without taking their eye off the game action in the center of the screen. This is possible because the players use muscle memory to remember where each spell is, so they don't have to look after hitting the spell key.
  • Equally importantly, the spell key is used hundreds of times in a game so muscle memory sets in quickly.

A similar fluid menu is used by Samsung in its touchwiz interface for pen tablets.

• Holding down the pen (or hovering and clicking it) brings up a circular menu where you can slide the pen to select an option.
• Compared with the gaming interface, this is much less successful. The menu is not used often, so when it pops up its awkward to scan because you have to hold the pen steady and your fingers/wrists can get in the way of seeing the menu.

These examples inform my own view on these controls:

• They are cute but not very good for most apps.

  • Although traditional pop-ups require 2 taps, they are cognitively easier to work with. It actually takes some cognitive load to hold down a button while scanning the popup.
  • The act of sliding from the button to the selection requires more cognitive load than simply tapping on the selection. Particularly when you are sliding over other menu choices to get to the one you want (because you just scanned those items, the brain doesn't view the area as "open space" so it will want to hesitate/process as you slide over them)
  • There are some usability issues with disabled users.

• They can be effective for apps where (a) the menu will be used frequently and then selections don't change; or (b) there is benefit to selecting them through orientation (eg tap then slide left, right or up)....these cases, the slide actually provides cognitive assistance because once the user hits the button, the selection is made positionally by sliding relative to the original tap.

  • Example of (b): the menu choices are North, South, East and West, or up/down/left/right.
  • Example of (a): frequently used menus like game spell casting, the user can memorize orientation so it becomes a muscle-memorized action that can be completed incredibly quickly.
  • Swiping keyboards are a different but related example as Okavango notes. Here, users are familiar with the qwerty keyboard orientation so they can type by sliding towards muscle-memorized placement of keys.

Hope that helps.

Answer 2

It seems to me that Fluid Gestures are very similar to Gesture Typing ( to some extent): Both approaches seek to reduce number of touches required to perform a sequence of actions.

Gesture Typing :

Gesture typing works by sliding your finger across the letters of the word you want to input.

The important thing the above example is users can see the letters they can select so there is a clear "gestural path" to follow and adequate feedback; The keyboard will suggest words that are more likely to be targeted by the user.

Fluid Gestures

I have tried using the gesture and couldn't figure-out what exactly I was supposed to do until I read the instructions! (bad start):

Though I really like the idea! it seems to me that compared to Gesture typing, There is no clear "gestural path" to follow and feedback is unpredictable. So, for this to work, the design needs to be limited to actions that follow in clear, logical, short and predictable sequences of action (to remove uncertainty and to enhance feedback loop:

For example and this is just an informed guess:

• Drag => Drop => save.

• Select=> play => forward

  OR

• Select=> play => Rewind.