Building context: toy-like interfaces in games

There was a trend in graphic design a few years back that more junior designers used as a crutch, and more experienced designers shook their fists at and told to get off their lawn. Remember the intricate leather stitching of the old IOS calendar app?

Why.

It’s called “skeuomorphism” - essentially making user interfaces look more like real-world objects than they need to. It was frequently abused, even if the spirit was genuine. Skeuomorphism isn’t completely bad! It can be used to help people understand interfaces better by providing them with real-world context. That was the intent behind the leather-stitching, really. People who had this kind of calendar on their desks would have immediately recognized the digital version as a calendar. The problem was the other people who had never seen such a thing, therefore couldn’t relate. The app just looked overworked, unnecessary. 

Games are different than apps, though. Games are “played”, apps are “used” and I feel like this distinction makes skeuomorphism more appropriate for games. 

I’m a huge fan of games that represent themselves as little interactive toy-like dioramas. I find them immersive, rewarding, and easy to understand. Little enclosed ecosystems that exist solely for you to poke at and explore. Ever since reading this Unwinnable piece about how Diablo feels like a little table-top diorama, I’ve been thinking about how looking at a game as an enclosed diorama helps us understand how to engage with it. I also think we as game designers can learn a lot from this concept. Remember these? 

You remind me of the babe

Labyrinth isn’t an easy game by any means, but it’s clear how it works just by looking at it. The knobs control the tilt on two axes, and the tilt gets the ball into the goal. The interface is built into the object itself, in context. Like Monument Valley, which incorporates its various toggles and handles into the architecture itself. The world provides the context, and just begs to be fiddled with. Playing with the world in a toy-like way helps you understand it better, and provides you with the context to be able to solve the puzzles provided.

It looks like you can rotate the middle thing, because you can.

Another great example of this in games is Xeodrifter, a neo-retro Metroidvania which wears its influences proudly on its sleeves. 

Xeodrifter, by Renegade Kid

Like all Metroidvania-style games, Xeodrifter has items to collect that upgrade your character in meaningful ways - health upgrades, weapon upgrades and new abilities. What makes this game unique is how it utilizes the bottom screen in the 3DS version. The screen functions as a little dashboard, as if it were an actual control panel being used by the character in-game. You’ve got a series of area maps with arcane markings, slots for items and this array of socket-looking things. Tap them and you get a bit of audio feedback - a blip telling you that you can’t do anything with it now (but that you will be able to in the future, probably). Get a gun upgrade and you can put that point into any one of the upgrade trees plainly laid out in front of you. Other games might obfuscate these trees in a separate options screen, menus upon submenus. Xeodrifter lays the upgrade trees out proudly, which only helps add to the atmosphere and feeling of agency. 

One of Xeodrifter’s primary influences, Super Metroid, does this in a similar way with its suit upgrades, and you can imagine if that game were released on a dual-screen platform today that Nintendo would implement this in the exact same way.

This is me, dreaming

Papers, Please is the ultimate example of skeumorphism seamlessly adding to the interface of a game. The interface is cumbersome and arcane, yet never frustrating. The friction always comes from the player trying to juggle all of the tasks presented before them, and feeling like they don’t have enough time to deal with paperwork filling up their workspace while listening to someone’s story about how they should be allowed to enter the country. The player might even find themselves feeling satisfied from a job well done when they finally establish a good workflow for checking passports, entry tickets, cross-referencing issuing cities and properly placing the passport under the stamp interface. Interface mastery is a core part of the experience of Papers, Please. I can’t imagine the game being as powerfully affecting without skeumorphism.

Document organization has never been so satisfying (and soul-crushing)

The Paper Mario games have always been great examples of games-as-diorama, but none as much as the most recent entry - Paper Mario: Sticker Star. The games have always felt like you were operating a papercraft Mario world, but in Sticker Star you are actually affecting the world with stickers you collect in a cute little sticker book on the bottom screen. Tilt the 3DS back and forth while viewing the shiny stickers, and be instantly taken back to childhood, begging your parents for quarters for some cheap holographic sticker from a vending machine at the grocery store. Complete a level, and the path to the next level on the world map tears away like a pull tab on the back of a FedEx envelope. In fact, some areas in Sticker Star were built out of paper in the real world first before being digitized for the game.  

Pull-tab paths! So cute!

More games need to utilize the gyroscope like this. The light shines on the sticker like it would in actual sunlight.

This context is helpful in puzzle solving. If I know the world is made of paper, and I understand how paper works in the real world, then I should be able to master puzzles in-game. Tearaway for the Vita does a great job of this, where you are literally bringing your fingers into the game world to poke through layers of paper and interacting with the denizens of this cute little papercraft universe. 

Tearaway, by Media Molecule

So, when doesn’t this concept work? When does an interface go from useful and full of beautiful game-world context to confusing and full of visual cruft? Let’s take a look at a free-to-play game, Frozen Free Fall. F2P games prioritize keeping their interfaces as friction-less as possible, in order to reduce churn and increase player retention. Interface confusion can cause a player to quickly lose interest. Free Fall has lots of cool ice effects (naturally, being based on the movie Frozen) but there are a few areas where it is used more in service to the theme, rather than the player. The ice theme makes it difficult to pick out what is a tappable button, and what is just decoration. Interactive elements don’t look interactive, and are presented inconsistently. Buttons can be flat or rendered, messages are presented with and without frames, and it’s difficult to immediately know how to close a window, or activate a boost. 

These are all buttons. Some look like ice, some don't. Inconsistency knocks you out of the game flow and creates confusion. 

Generally, I’m more inclined to design simple, unobtrusive user interfaces. My philosophy can be symmed up with the adage “a user interface is like a joke: if you have to explain it, it’s not very good.”

I do believe there is space for interfaces in games that are complex, detailed and peppered with intentional friction - as long as they make sense within the context of the game. The more toy-like your game is, the more people are going to be inclined to explore it, learn more about it, and develop mastery of its systems.

What are your favorite examples of games with toy-like, natural interfaces?