Published on <a href="https://blog.prototypr.io/putting-the-rad-back-in-radial-menus-66ea76a39acc?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Lucy Morris 
I’m willing to admit it. I have a problem; I love radial menus.
I work as a Senior UI Designer at a major mobile games company by day, a job which I started early 2017. Fresh to the company, I joined a project as Lead UI Designer on one of our titles in production, and the first thing I did? That’s right. Radial menu, right out of the gate. Sadly it didn’t survive past the first iteration, a folly that was doomed to fail as soon as I wire-framed it in Photoshop while blinded by my own hubris — but I maintain, the radial menu has so much to offer us while copping so much unfair flak that I feel like we need to have a talk about them.
Come, sit with me. Let’s talk pie.
<img alt="" src="https://cdn-images-1.medium.com/max/940/0*yv42te4bDza2vntc.">UI/UX can be as delicious as you want it to be.
Radial menus, sometimes known as pie menus or weapon wheels when specifically dealing with weapon management in games, are interesting and nuanced beasts. In terms of software development as a whole, radial menus have been with us as early as 1969. If you just happen to be someone who wants to read an academic text about the history of a menu, the early history of radial menus is available <a href="https://www.autodeskresearch.com/publications/menuhistory">here on Autodesk’s website</a>. But we’re not here to talk about software radial menus — we’re here to talk about their cooler older sister, the games menus. So, let’s get down to it.
The grandmammy of the illustrious radial menu in games would likely be Secret of Mana’s (1993) Ring Command system.
<img alt="" src="https://cdn-images-1.medium.com/max/512/1*uTFTxhfyULvcnGgH6OLSdg.gif">
Lacking the screen break and preparation time that traditional RPG games afforded before battles, action RPG Secret of Mana had to develop a way to allow players to equip themselves on the fly. At the touch of a button, a ring of icons surround the player over a darkened screen, and with simple D-Pad navigation, items, equipment and all other critical core game systems are accessible with minimal menu navigation. Without losing the player in a maze of screens full of text and numbers, the Ring Command system arguably allows the <a href="https://www.gamasutra.com/view/feature/166972/cognitive_flow_the_psychology_of_.php">player flow state</a> to be less interrupted by keeping the game geometry visible, and the contents simple.
Our delicious radial menus proliferated and are now a somewhat common paradigm in games UI/UX, especially due the upswing of mobile game development. Why? They’re useful due to the ease in which they work with common mobile gestures and the compact nature of how they display information. Mobile game interfaces often have to do a lot with very little screen real estate, with radial menus just happening to be a convenient solution to that (nb: in design-appropriate circumstances). With phones growing larger in size and the bones in our fingers not seeming to follow suit, the need to find compact paradigms to store menus and information is becoming more of an issue.
<img alt="" src="https://cdn-images-1.medium.com/max/375/0*aubxq_DtEsW82DQi.png">Scott Hurff’s mobile Thumb Zone diagram, demonstrating where radial menus could sit nicely in the stretch scale. Avoid ‘OW’.
The Sims (2000) is another classic early-ish example of the convenience of radial menus — a game full of complex systems and large amounts of options on any given object that worked around it by compacting these choices into collapsible menus. Reasons why I think The Sims is a good example:
<blockquote>Despite lack of iconography like other, simpler radial menus, the text is succinct and easy to understand.</blockquote>
<blockquote>The bobblehead at the centre gives an extra layer of context for the choices being made without unnecessary fiddling.</blockquote>
<blockquote>The bobblehead follows the choice you’re pointing at, which is just a nice UX icing on the cake.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/810/1*g12t95sH-Acqdf21f3WwWA.gif">
Radial menus are also often (not always!) optimised for use with game controllers, and can have some amazing effects on the player flow state. One of my favourite games, Trauma Center: Second Opinion (2006) for the Wii, also houses one of my favourite radial menus of all time. In Trauma Center, you play as a doctor through increasingly difficult and hectic surgeries. From heart spiders to bomb defusal, your M.D. will cover it all. The game is all about precision, timing and speed, (obviously) completely controlled by the player with the Wiimote and nunchuk.
<img alt="" src="https://cdn-images-1.medium.com/max/561/1*V1H5U2yJsiJqxot_FFVX6Q.gif">Perfection.
The radial menu is your surgical toolbox (bottom left), controlled solely by the nunchuk during surgery cutscenes. It’s perfect for the Wiimote and nunchuk — your tools never change positions so muscle memory is learned, you can swap to different tools in a fraction of a second and missteps don’t cost you a lot of time. Tool management is done completely with your nunchuk hand, positional and confirmation control is done with your Wiimote hand. In a game that requires fast reaction and tactic changes as the levels alter, the awkwardness of inventory management is totally mitigated by assigning the radial menu solely to the one feature of the controller best suited to handle it. It’s just really, really good.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BhVuR-XtqkXH3d8RCPX7-w.gif">Monster Hunter: World has hella radial menus.
That’s honestly one of the best features of radial menus, and why they’re still used. They’re fast. Radial menus perfectly encapsulate a common law of UX, <a href="https://lawsofux.com/fittss-law">Fitt’s Law</a>: or rather;
<blockquote>The time to acquire a target is a function of the distance to and size of the target.</blockquote>
Every option in a radial menu is generally the same distance from where the menu sprouts from, presenting the player equal effort to select any one of them. The more a player uses a radial menu, the faster they’ll become as well — location of options becomes ingrained in muscle memory, as long as the order of the options doesn’t switch.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*sh1XK7vdWTHKN1EK.jpg">Counter Strike: Global Offensive (2012) does a good weapon wheel.
There are a couple of drawbacks to integrating radial menus in a game — obviously UI/UX design is contextual, and they won’t fit the context of every game, as much as I’d love to say they do. They’re a little awkward to learn the first time, they’re pretty weighty size-wise and they don’t scale great; if you have more than eight options in your wheel, you probably either a.) need another wheel, or b.) need a different menu solution.
However, designed correctly and implemented well, radial (or pie!) menus are a beautiful way of assisting the player make quick choices, compacting information away from a maze of menus, and capitalising on peripheral features.
Now, here’s a .gif of the Beyond Good and Evil (2003) input select screen which is actually a spiral menu, and has nothing to do my proselytising apart from the fact a group of people lost their shit at it in my Twitter mentions. Enjoy.
<img alt="" src="https://cdn-images-1.medium.com/max/629/1*FWbeQ9xSZnM4UkzYg_AsWA.gif">Kidding, it’s actually an amazing innovation on text input. Check it out.
Image Credits:
<a href="http://superadventuresingaming.blogspot.co.nz/2017/10/secret-of-mana-snes.html">http://superadventuresingaming.blogspot.co.nz/2017/10/secret-of-mana-snes.html</a> <a href="https://www.youtube.com/watch?v=59-5yN6RJAQ">https://www.youtube.com/watch?v=59-5yN6RJAQ</a> <a href="http://www.scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens">http://www.scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens</a> <a href="http://www.swordandsharpie.com/wp-content/uploads/2015/07/counter_strike_go_03-1080x675.jpg">http://www.swordandsharpie.com/wp-content/uploads/2015/07/counter_strike_go_03-1080&#215;675.jpg</a>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=66ea76a39acc" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/putting-the-rad-back-in-radial-menus-66ea76a39acc">Putting the ‘Rad’ Back in ‘Radial Menus’</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Putting the ‘Rad’ Back in ‘Radial Menus’

Top Stories