RADIAL MENUS IN VIDEO GAMES

Cover image from Videogame Pavilion

In user interface design, a radial menu is a circular context menu where the selection depends on the direction. It pops up when pressing or holding a hotkey, making a circular component made of several slices to appear, which is why it is also known as pie menu. A slice can be assigned a simple option or another menu. In case of being the last mentioned, the selected choice can take the center, creating a hierarchy of radial menus.

An example of a radial menu with one level.
Animation by Ivan Pashko on Dribbble
An example of a radial menu where the second level takes the place of the first level.
Image from Syncfusion
Example of a radial menu where the second level is shown without the first disappearing.
Image by cagatay celebioglu on Dribbble

The original goal of this type of menu is to provide a smooth and reliable gestural interaction style for novices and experts, requiring fewer mouse movements or fewer buttons being pressed. It also trains muscle memory for certain actions, allowing to eventually select the desired option without looking at the pop-up selections or reading the labels. As Jaron Lanier of VPL Research has noted: “The mind may forget, but the body remembers”. Pie menus take advantage of the body’s ability to remember the movement and direction of the muscles, even when the mind has forgotten the corresponding symbolic labels.

The first documented radial menus are attributed to a system called PIXIE in 1969, but in video games the concept originated from console RPGs, introduced by the “Mana” series, beginning with “Secret of Mana” and “Secret of Evermore”. However, they have evolved and been put to different uses over time. To know more about radial menus, let’s talk about some video games that use them. So, let’s get started!

SOME GAMES THAT USE RADIAL MENUS

As mentioned above, “Secret of Mana” in 1993 and its successor “Secret of Evermore” in 1995 were the firsts video games to employ the radial menu, and it consisted of a ring with icons. This is why the game is said to have a unique “Ring Command”.

The Ring Command was designed to solve the problem of losing the player in a maze of text-filled screens and to let the flow of battle in Action RPGs to be less interrupted. This was accomplished by pausing the action and summoning a ring of icons on the fly, literally at the touch of a button, while keeping the geometry of the game visible. In addition, the contents were simple, and the steps to choose what it wanted were few to get back in action quickly.

“Secret of Mana” Ring Command
Image from Shmuplations
“Secret of Evermore” Ring Command
Image from Super Adventures in Gaming

From these games, this style of menus became popular and began to be used in different ways. For example, in simulation video games such as “Viva Piñata (2006)”, the passive mechanics grant the employ of radial menus to provide the user with all the actions in a fast and clear way. It is worth mentioning that, since “Viva Piñatas” is a gardening game, the shape of this type of menu was also a good design choice because it allowed it to be transformed into a flower, highlighting the theme of this game.

Radial menu in “Viva Piñatas”
GIF from Stumpt’s video on YouTube
Menu of “Viva Piñatas”
Image from Rare Gamer

“Sims (2000-2014)” falls into this same category and although it is not recommended to use many items in the radial menus since this tends to counteract the benefits of the same in the first place, this game has the peculiarity that it knew how to accommodate without problems many options in a small space, plus these consisted of pure text.

Circular Menu from “Sims 2 (2004)”
Image from The Ninth Wave Sims

Another way to utilize the radial menu is to choose options, for example in conversations. In this case, it is very common that these are not more than four to allow assigning a response to each of the buttons of the “ABXY” scheme of the control of the consoles. This is because in these circumstances, circular menus are considered faster and more reliable than linear menus due to they reduce player’s work by avoiding the use of directional buttons by pressing only the button of the desired answer. One game that applies this method is “Final Fantasy XIII-2 (2011)”.

Live Trigger sequence in the Xbox 360 version, where each option is assigned to a button on the console control (ABXY).
Image from Final Fantasy FANDOM

“Valkyrie Profile (1999)” applies this same mechanic, but in combat, where each of the party members is assigned one of the control buttons (Square, Triangle, Circle, or Cross since it is a PlayStation game). By pressing the corresponding button on the player’s turn, that character is commanded to attack.

“Valkyrie Profile” battle screen
Image from Malditos Nerds

However, this menu still had areas for improvement that were noticed over time due to the appearance of more complex mechanics.

A common problem in circular menus that is also seen in the “Secret of Mana” Ring Command is the way in which context is lost when there are multiple hierarchies. When an option that contains others is chosen, the new ring that opens has nothing to indicate the path that was followed to get to the current menu.

“Temple of the Elemental Evil (2003)” is an RPG in which the creators decided to use the radial menu and tried to solve the aforementioned problem by using concentric circles to keep all hierarchies visible. In this game, the central menu item is the face of the focus character, and the first level employs the icons of the six main actions. When the player picks an icon, a fan of options appears. This same fan technique is followed in the case of more hierarchies. However, this method is not practical when there are more than three levels, as it takes up too much space on the screen, forcing the player to scroll or reposition the menu to see it in full.

The menu can take up a lot of space and needs to be moved to see everything.
Image from IGN

Another notable disadvantage of this solution is that from the second level, the options are presented in rotated labels, making them more difficult to read. In addition, if one wants an option of the third level or higher, it is necessary to go through the entire label of the previous levels, hindering mobility and speed, which is precisely what is sought to be optimized with this menu.

Rotated text is difficult to read.
Image from Let’s Play Archive
The number of options and the length of the text make navigation difficult.
Image from GameBanshee
In this video is possible to see how the menu of this game works, and the disadvantages mentioned so far.

Note that an issue that may arise, which does not occur in this game but does in others, is that the text within the radial menus segments overlap each other. And even if the explanation is shown in a tooltip, the problem still prevails. That is why in “Secret of Mana” it was applied from the beginning that the name of the focused icon was seen at the top of the screen.

“Secret of Mana” only shows the description of the focus item and in the top part of the screen to avoid overlap.
Image by gooddream on steemit

In games where the complexity and the number of options grow, the decision is to utilize the radial menu for quick actions. This is very common on weapon wheels in games like “Grand Theft Auto (1997-2021)” or in shooting games to select ammo.

Radial menu in “Grand Theft Auto V (2013)”
Image from gtagaming

“Neverwinter Nights: Enhanced Edition (2018)” also uses a pie menu for quick commands, but it does handle hierarchies. In this case, the difference is that a preview of the sublevel is displayed. When the player focus on an icon, if it has another level, small circles appear around it that are the preview of it. If the player chooses the option, it takes the center and its options occupy its surroundings. This is similar to the “Secret of Mana” Ring Command but giving context.

When the focused icon has more options, there is a label that says “More Actions” and a preview of them.
Image by Nathan Garvin from Gamer Guides

With this, it is possible to observe that the reason why there is a great variety of types of menus is because each of them has a purpose. Therefore, applying them correctly brings a good user experience.

For example, the “Secret of Mana” Ring Command is considered one of the best menus of the time, but because it had a well-established purpose. Over time, the new mechanics forced it to be modified and adapted to meet the requirements of other games.

This evolution also brought with it the combination of menus or the use of several types in a single game. For example, in “Final Fantasy XIII-2” the main menu, the battle menu and the conversation menu are different to adapt to the game mechanics. Despite this, it maintains homogeneity in all aspects and offers a good experience to the player.


It is true that there are more video games that use radial menus, but the ones mentioned in this post cover most of the ways in which these types of menus are used. I hope you like this post and that you can share what other games you know that use circular menus in a good way or in a bad way. I await your answers in the comments. Until then, see you on my next post!

BIBLIOGRAPHY

I'm a Graphic Designer in love with Otomes and JRPG. I like the interface design area and that's why I really like to talk about this theme. You can win me over with a good videogame Illustration book and a good capuccino.

4 thoughts on “RADIAL MENUS IN VIDEO GAMES

  1. Radial menus are so cute! >//<
    I like the usage in many games, but Mass Effect and Dragon Age: Inquisition are my favorites in
    dialogue options, for the arrangement of each text option is previous thought in this game, like oposite ideas that are put in contrary sides to show us how them are differents.
    One important thing to think about is about the good response of your movement in the menu, how smooth or how hard navigate is, can be very important when we think what the kind of game we are playing.
    I just don't like radial menus when my analog stick is broken and all turns into a mess 🤭

    Like

  2. It’s really ɑ cool and helpful ρiece of info. I am satisfied
    that you simply shared this useful info with uѕ.
    Please stay us up to date like this. Thankѕ for sһaring.

    Like

  3. Ηowdy! I could have sworn I’ve visited this website before
    but after going through some of the posts I rеalіzed it’s new to me.
    Ꭺnyhow, I’m definitely happy I discovered it and I’ll be ƅоok-marking it and
    checқing back oftеn!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s