Tuesday, July 10, 2018

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


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



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



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: enter image description here


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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...