Should I use a radial menu design for a touchscreen game?

Question

We are working on a game for android. We had a normal menu where each menu entry is below the other. As we find this boring, we looked to different approaches and came across the lock screen on tablets with honeycomb, where you have a start point and you need to start there and make a swipe gesture to the border of a bigger circle to unlock the screen.

To make the story short, here is a video of our prototype: http://www.youtube.com/watch?v=7oC8AEHIMuo

We are not sure if the approach is a good one, if it is intuitive without being "just like everything else".

Maybe you have some ideas on what we should improve, on what we should keep an eye or if we are completely of the track and should go back to the normal menu layout.

Answer 1

I've seen a similar approach used successfully in pointer and stylus based input systems. It's called a "Pie Menu" or "Radial Menu".

Radial Menus are a bit uncommon but they have very good Fitt's Law results Here's a great article about designing pie menus. Radial menus don't always have the "drag" control like your proposed menu, but it's been shown to be effective for pen-based inputs.

Since Windows XP Tablet edition and through Windows 7, Microsoft has included a pen "flicks" feature that is similar; a user drags the stylus or their finger in a direction to initiate an action (such as flick down for a page-down command). Windows' Flicks are a bit different however as they don't display a menu, they simply perform the action after you perform a flick.

Here's a good example from Circle Dock via Pocketables.net:

An important divergence in your design from a radial menu is that the selection points are very far away from the starting point and don't have logical positioning; most use a "compass" style set of around 8 options in cardinal directions, this is where we get the great Fitt's Law results. Most pie menus also don't require you "press down and drag" to the menu item, however this makes a lot of sense on a touch device as a hover action does not exist.

Edit: Roger Attrill rightly noted that for touch interactions a full radial menu can be obscured by the user's hand; making the menu items an arc above the touch point (rather than a full circle) is a great way to prevent the user's hand from obscuring items, assuming you have few enough menu items.

Answer 2

I agree that it is too far from left-to-right. But try it for yourself: hold a bigger mobile phone or a tablet in your hand, and do that movement. You'll see it is too complicated and hard to do.

With the circle (compass) positioning it is much-much easier, and more easily understandable.

I would only try something like your option, if the whole application is centered around long swipes, because than your users will be or get used to it. And the long swipes will be the added UX to them. (especially if strengthened with funny design)

For example in Fruit Ninja, you have to slice everything with your fingers, even in the menu because the whole app is centered around the slicing experience.

Answer 3

I think it is actually too far from the bottom left to the other side.

I would be inclined to try and make the swipe movement segments equal in length so that (for example in your case of the video), the distance from the starting point to either option is the same distance AND ideally, the distance from one option to the other is also a similar distance - eg place all interactive elements on the vertices of a grid of equilateral triangles.

That way, each possible swipe/gesture movement is of same or similar length which makes the interaction easier and more consistent than having to perform different length swipes for different tasks.

I'm also keen on trying out the concept of combining or collecting information during a single gesture - for example see my answer on this question here on ux.se which maybe you could utilize as a way of introducing a two stage swipe - topic first - then action, maybe. (ie 2-stage menus implemented as a single swipe)

Answer 4

I want to write a comment but i cant (i think to less points), i am the second developer for this game: We already thought about the Circle, we want to use it inGame to build something. But for the main menu we dont want to use a circle. The item organisation is just there, we dont know yet how exactly we want to organize them (maybe like a half circle on the right side). Do you think that the way is to long for the users from the down-left side to the right?

The circle has two problems, when it is a full circle you dont see everything if you move your finger and the second is, when you use only half of a circle whats about the left handed users? (i figured out this problem in my bachelor work with something similar)

I dont know how many left-hand users are in the world, but doesn't we need to handle this as well? Do they really use the left hand to swipe?