Thoughts on Skeuomorphic Menu Systems

The tradeoffs and benefits of pseudo-realistic menu design

Recently I’ve been playing Splatoon 2, which is a team-based third-person shooter available on the Nintendo Switch. To move between different styles of gameplay, the player must physically move their character in 3D space around a place called Inkopolis Square. This isn’t necessarily a new mechanic in games, but Splatoon’s implementation of it is particularly bold.

Moving through 3D space to make selections

The square acts as the main menu to the game, giving players the ability to start solo play, online play, local play, purchase items from vendors, and more. Most of the areas have non-obvious names like Octo Canyon, The Shoal, Grizzco, and Galleria. The game encourages players to move around the square and figure out what these various places do.

My Squid Kid in the middle of Inkopolis Square, the main menu of Splatoon 2

At the same time, there is a persistent overlay in the bottom right corner which lets the player know they can access a menu with the X button. When the player taps the menu button they get a more traditional menu system which allows them to quick travel to any of the available locations. It also shows them where these locations exist on a map and if they are currently available.

Splatoon 2’s traditional menu system

One of the benefits of moving around the 3D space of Inkopolis Square is that you run into other players. Walking by certain players will reveal drawings they made which give you a sense of what people are thinking about or inside community jokes. Players can also check out each others gear and order the items other players are wearing. All this creates a sense of culture and community in Splatoon 2.

Viewing another player’s drawing

The main disadvantage to this system is speed. It takes a lot longer to move around this space than it does to make a selection from a list menu. A player can become distracted from their objective moving around the square. They can get lost trying to find the place they are going.

This is why Nintendo included the X button menu. When I first discovered the menu, I was relieved that there was an faster way to start games. After thinking about it, I found myself disappointed because it undermines the core value proposition of the skeuomorphic menu by giving players a way to avoid it.

Destiny, an online-multiplayer first-person shooter by Bungie, uses ‘social spaces’ in a similar way to Splatoon. Players must physically walk to vendors, mission guides and postmasters. They must board their spaceship before they can fly to a mission. Unlike Splatoon, Destiny does not offer an alternative 2D menu for these actions. Physical motion of your character in 3D space is required to engage with play modes and vendors.

The Tower, a social space in Destiny, featuring vendors such as a postmaster, cryptarch, vaults, and more.

One of the reasons this paradigm might be so impactful, even if it is inefficient, is that it supports a game world’s sense of immersion and helps suspend disbelief. In a traditional UI this is rarely important, but in a game UI it is advantageous to keep players immersed in the game world.

Inventory management paradigms

In Destiny, players must be in physical proximity to a vendor in order to purchase gear. When acquiring loot during gameplay, players physically pick up gear from dropped engrams.

The reliance on physical space for these transactions adds a realism to the idea that the player acquired something. When the player manages their inventory, they must move their character to the ‘vault’, which allows them to store their weapons.

Approaching this ATM-like console ends up giving the player the feeling their weapons are physically stored somewhere when they are not using them. The action helps keep the player immersed in the experience much better than moving items from one menu to another less prominent menu.

A player using a vault in Destiny

PlayerUnknown’s Battlegrounds also uses physicality in an interesting way with their inventory menu. When the player encounters loot in the game, they can pick it up one of two ways. In the 3D world they can tap the F key, their avatar will bend over and pick up the item. The player can also press the tab key to open a menu that allows them to see what loot is physically near them presented in a list view.

PlayerUnknown’s Battlegrounds inventory menu, the list on the left are items in your reachable vicinity

When the player is in that menu, they must drag-and-drop the items from the left side of the screen to their avatar on the right side of the screen. The developers could have solved this by allowing players to click on the items they want, but the physicality of dragging the loot to the character gives the player a sense of ‘acquiring’ in a more realistic way. When a player drops loot for their teammates, they drag the loot to the left side of the screen and let it go, ‘dropping’ it on the ground for them.

Historical references

The Splatoon 2 menu system reminds me of some old school 90s UI design paradigms. Between 1994 and 1996, Apple had an online service called eWorld. It catered to those who were coming online for the first time. Apple decided to describe features such as email and bulletin board systems as physical locations that mirrored their real life equivalents.

There was an Arts & Leisure Pavilion, Marketplace, Newsstand, Community Center and more. For those who didn’t understand BBSes, email, and content browsers this design offered assistance in the helping the user understand their choices. The user had to ‘travel’ to each feature, which helped educate the user that in order to use other features they would have to ‘return’ to the main menu.

AOL, another online service provider used a less skeuomorphic UI during this time for its main navigation. My guess is people found navigation and repetitive actions easier with a UI that valued visual clarity of choices over education.

AOL main menu in 2003 via http://www.mikerichardson.name/oldaol/

Super Mario Bros. 3 was an early example where physical space and menu systems converged. The game navigation in SMB3 looks like a physical map the player moves their character over. It also acts as a non-linear menu system because the player can select anything that has been unlocked by moving their character to the option.

World 2 map in Super Mario Bros. 3 featuring card games, levels, mushroom houses, castles and warp zones

If you take this same paradigm and move it to a contemporary game like Breath of the Wild you can see how this interaction still applies to the game modes. With contemporary games, the behavior tends to feel more fluid and less obvious because of how avatars flow between various states.

Not all contemporary games employ this technique, for example Ultra Street Fighter II: The Final Challengers is a great example of a list based menu system. No frills, just options presented as text.

Ultra Street Fighter II: The Final Challengers is a contemporary game that features a list based menu system

Wrap-up

Most user interfaces generally need to be fast and obvious because people perform repeated navigation actions in them. Experiencing the Splatoon 2 menu system was shocking to me at first because it felt so inefficient, but there are real advantages to increasing friction by using skeuomorphic design patterns in three-dimensional space.

These menus can help create a sense of immersion, develop social interactions, explain complex concepts quickly by referencing real-life counterparts, and even create a sense of mystery and intrigue by obscuring how simple the system might actually be.

Come hang out and play some Splatoon, my friend code is SW-5160–0900–5248

I’d love to know your thoughts on menu systems, games that use skeuomorphic design to enhance the experience and games that work great with a traditional UI. You can find me on Twitter @charliedeets. I also have a podcast called Games UX. You can listen to episodes on the website or follow along on Twitter @games_ux. My Switch friend code is: SW-5160–0900–5248.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.