Inventory UX Design – How Zelda, Resident Evil, and Doom Make Great Game Menu UX


Today’s episode is sponsored by Squarespace,
the all-in-one platform to build a beautiful online presence. Get 10% off your first purchase with the offer
code DESIGNDOC. Inventories are not the stars of the show. No game is centered around how their inventory
works. Except maybe this one. Or this one. Or this one. OK fine, sometimes they’re the stars, but
not often. Even so, that doesn’t mean an inventory
should be an afterthought. A bad one can severely tarnish a game, and
a great one can become a highlight all its own. There’s a whole field of study dedicated
to the little details that make good menus User Experience, or UX. UX is closely related to UI, but it’s not
the same thing. UX takes into account the mechanics of how
a person interacts with the interface, how it feels to navigate menus, how easy they
are to understand. You can think of UX as being about the experience
of using the UI. Inventories are just specialized menus, so
the principles that apply to UX design usually help make better inventories too. I could go on for a long time about UX design,
but for today, let’s start with a quick tour of a few examples of inventories and
how their UX evolved over time. Then we’ll talk about a couple UX guidelines
that aren’t too complicated, but do a lot of the heavy lifting to make inventories feel
better. Inventories are all about items. Holding them, interacting with them, combining
them, anything that has to do with items. But there are lots of different styles of
inventories, each tailored for the different ways each game handles items. To understand how inventories have developed,
we have to go back. Way back. Further. Keep going. Back. A little more. Wait wait wait, stop! Well, we can’t go back to Pong, so let’s
start the tour here. Ok, first up: Zork. Not the first game with an inventory, but
boy is it basic. Type in the word ‘INVENTORY’ to see what
you’ve got! Zork keeps track of all the stuff you’ve
picked up and shoves it into a text list. The items you’re grabbing are mostly specialized,
one-off things used to solve a particular problem at a particular stage of the game. The inventory’s aesthetics are minimalist
to a fault – I mean, it’s just text. What you see is what you get. Zork’s inventory did do its job to make
it feel like your character was progressing through the game’s world, keeping track
of the little mementos from the places you’ve already visited. It’s not much, but hey we’re talking about
1980. Having an inventory at all is an accomplishment. There was plenty of room to improve. With, like, you know, visuals. Fast forward a bit. Here’s some visuals! Final Fantasy. Final Fantasy’s inventory keeps a running
tally of all of your items, and lets you gather as much stuff as you can find and buy in shops. Its inventory is just a big ledger of junk
that you’ve hoarded over the course of the game. Anything you found, you’ve got it! Forever! The aesthetics were still very minimal. Some of the later games added some icons,
but it mostly looks just like a big spreadsheet full of entries and amounts. Since each item in the game didn’t hold
that much unique value, lumping all of them together in an entry in the spreadsheet was
easy to understand, and worked fine. Keep going. Point and click adventure games. This is not far off from the Zork inventory,
but with sprites this time. Some of the earlier adventure games just had
sprites on a grid in a box. Later games would start theming the inventory
itself with some appropriate skeuomorphism. Now it might feel like looking at the dashboard
of a car, or a chemistry set holding each of your key items in its proper place. The new detailed sprites emphasized that each
item you collected was unique. The visual component of the inventory let
designers use those sprites for new types of puzzles and dialogue. Visual puns. OK let’s see… Door ajar. Uhh, take the door ajar? Wait. What? The door wasn’t ajar the door was ac- *whispering*
oh my god are you serious. It’s more immersive in a game like Monkey
Island if you can actually see the item you needed to use in a specific situation. It’s more fun this way than if it were a
Final Fantasy style spreadsheet of items, with just a text entry for the same object. Around the same time, early FPS games were
experimenting on how to adapt the inventory to a faster-paced genre of game. The original Doom used a hotkey system that
allows you to quickly swap between your weapons. Instead of having to dive into a separate
screen to tinker with your loadout, all of your collected weapons were just a single
keypress away. For fast paced action games, Doom’s hotkey
weapon switching fit perfectly. Just a bit later we get some immersive RPGs
like The Elder Scrolls series. They were combining their inventories with
other gameplay systems to make the game feel more grounded. Item weights were a thing even back in Elder
Scrolls: Arena, the first game in the series, and the system continues through Skyrim today. The encumbrance system lets you carry whatever
you want until you get close to or pass a weight limit. Now you don’t have to think about how your
character was holding 99 swords in his backpack. The system models reality more closely, which
contributes to the game’s immersiveness. It’s a little risky though. Just like how the Uncanny Valley affects realistic
animations, an inventory that attempts to model realism can break your suspension of
disbelief if you can cheese the game into letting you carry, say, only 100 paper clips,
or that you become immobile all of a sudden if you carry just one more pound of items. Over time, other genres built their inventories
to work thematically with the rest of the game. Survival horror games are, in part, about
resource management. Their inventories are built to support managing
a limited set of items – think the attache case in Resident Evil 4. Survival horror games often had inventories
with skeuomorphic aesthetics, but the aesthetics help players better understand a gameplay
hook. Its look says that this inventory has a limited
space with specific rules. In RE4, you have to Tetris around your items
to fit in the pack. Big items take up more physical space, and
everything you need to survive has to fit somehow in the room you have. The aesthetic of the attache case helps drive
home that there isn’t a bottomless pack to use. As you get closer to the modern day you’ll
start seeing a lot of games that add new fun gameplay systems to their inventories. Take Moonlighter’s item curses. In Moonlighter, items can be cursed, which
means they change the properties of the items located nearby. The curses can be positive or negative, and
figuring out how to best arrange your pack to get big ticket items out of the dungeon
without losing them to a curse becomes a little puzzle in itself, and a big part of the strategy
of the game. The games with the most effective inventories
use them to help drive home some other aspect that the game is trying to emphasize. They work with other game systems to amplify
the same message. Are the items meant to be a precious limited
resource that you’ll only use when absolutely necessary? Then maybe a survival horror-like inventory
with limited space and a matching aesthetic would work well. What if you’re making a sprawling RPG with
a crafting system that rewards you for diligently exploring the world and picking up every glowing
orb you come across. It would pair well with an inventory designed
to hold a ton of items with no strict limits and with good sorting options to help keep
track of everything. The right inventory emphasizing the right
things can help turn item management from a chore to a well-loved part of the game. Ok, so there are lots of different flavors
of inventories. But even if you pick the perfect style for
your game you’ve still got work to do. There’s so much more that goes into making
an inventory feel good. An inventory, like any menu, is there to help
you do a task, like look something up, change a configuration, maybe use something – you
have to get a job done, and you have to do it through your inventory. And, the faster you can finish a job the better. In a perfect world you’d design a menu to
make every task take as little time as possible. But if that’s too complicated, you can do
a lot of good by making the most common tasks quick to do. If you bury commonly used items deep in an
inventory, it will feel clunkier. It seems like a no-brainer, but tailoring
a game’s inventory around its most common tasks isn’t always obvious. Lots of otherwise great, high profile games
mess it up all the time. The Zelda games have gone both ways on this,
and have fixed some of the problems in remakes. Take the Iron Boots in Ocarina of Time. People bring up the infamous Water Temple
pretty often as a lowlight in the N64 version of the game. Its dungeon layout can be monotonous and confusing
for new players, but the game’s inventory design compounds the problem. To navigate the dungeon, you have to change
the water level and walk through flooded corridors. To sink to the bottom of the water, you need
to put on the Iron Boots. Unlike most other key items, the game classified
the Iron Boots as ‘equipment’ instead of an item like your bow or bombs. This meant that you couldn’t hotkey the boots
to the C-buttons. You would have to open the menu, go to your
equipment, equip the iron boots, and back out of the menu. Run around underwater for a short amount of
time, open the menu again, then repeat the steps to take them off. Even for people who know the layout of the
dungeon by heart they still have to take the boots on and off a good number of times. For new players it was torturous. They fixed it in the remake, though. The original release of Majora’s Mask had
a related, but slightly different issue. It used the same C-button ‘hotbar’-like
system as Ocarina of Time, but there weren’t nearly enough spaces for all the items you
commonly used. All the normal Zelda gear – bows, bombs, bottles,
and so on – plus DOZENS of new masks all had to share space in the same 3 C-button slots. You swapped between masks all the time, too. You couldn’t just ignore them. The more time you spend swapping items in
the hotbar, the less time you save by having the hotbar at all. If you could just add more hotbar slots it
would cut way down on the amount of time you have to fiddle with the hotbar. Unfortunately, you’re stuck with the N64 controller
layout, so there’s not much more that could be done. Or was there? We’ll get back to this in a minute. Luckily, the Wind Waker port on the Wii U
had a secret weapon. For Wii U ports, each developer had to somehow
try to use this big new screen on the controller. If they didn’t have any better ideas, they
usually defaulted to making it an inventory screen. It sounds like a clunky fix, but it’s actually
not a bad idea. An always-available inventory screen means
one less step EVERY time you use it. You never have to open it up yourself. Plus, the screen is touch-sensitive, and let
users tap and drag items around directly instead of using the analog stick and moving a cursor. The dedicated inventory screen streamlined
lots of actions. It’s maybe a little wasteful to use an entire
screen on just the inventory, but at least it did improve the game’s UX. And they barely had to change the look or
feel of the old game’s inventory. At least it wasn’t as wasteful as the Mario
Kart horn. HOOOONK. Wind Waker’s port had a little more custom
work done to smooth out some of the rough edges of the original games’ inventory. Context-specific items like the sail were
moved out of the menu. It made the sailing, one of the more tedious
parts of the original game, a lot more bearable. The port also automatically adapted its D-pad
depending on context. Before, you had to set the grappling hook
and bombs onto hotkeys yourself to use the scavenger arm and cannon in the boat. In the port, the game just moves those context-sensitive
actions onto the D-pad whenever you set sail. The Zelda 3DS and Wii U ports did a pretty
good job at streamlining their menu UX, but not every game gets the same opportunity. That second screen only exists on a few systems. So if you don’t have a whole second screen
to leverage, and your controller only has a small number of buttons to use, what else
can you do to make it easier to access your inventory? Try a quickwheel! Quickwheels are an ingenious way to use the
precision of the analog stick to squeeze out more quick access item slots. Instead of using a button as a hotkey directly,
the button opens the quickwheel menu. You then use the analog stick to pick from
a bunch of slots around its circumference. You can comfortably fit 8 slots around the
edge, and you can expand that more by using another button to access different items. You could also just divide up the wheel into
smaller pieces if you want. With the extra slots, you can get at more
items faster. Plus you don’t have to swap around what’s
available on the wheel nearly as often. The number of times you need to dive into
the menu plummets. Problem solved! Quickwheels make your UI feel much snappier,
but they also reveal a new problem that applies to ALL menus, not just quickwheels. Games are a window into a created, simulated
world. Inventories are a bridge into that world,
but they aren’t necessarily a part of it literally. They could be, but that’s up to you. It’s a UX problem unique to games. So what do you want the world to do while
you’re looking in your inventory? Stop? Slow down? Keep going? There’s no right answer – each choice has
tradeoffs. Games like the Dark Souls series and ZombiiU
don’t stop for nothing. Your inventory is a part of the world. While you’re tinkering in your backpack,
a zombie can gnaw your arm off. Or you can get back stabbed. It can be more immersive, since it feels more
realistic for the world to keep ticking along while you’re looking for healing items. It encourages players to be aware of their
surroundings and to pick a safe place to dig in to the inventory. For designers it also makes it extremely critical
to design your inventory to be as clean as possible. Fighting through an inefficient menu while
you’re slowly dying is a joy killer. DOOM 2016 slows down time while you mess with
its weapon quick wheel. DOOM is a game with very fast, flowing combat
where you’re always swapping weapons to fit with the situation and the types of enemies
you find. Sometimes it’s too fast, and too varied,
for even a normal quickwheel to keep up! To help fix this, they let you tap the quickwheel
button to switch to your last weapon used. It makes the single most common action the
quickest it can be, and keeps the fights flowing. Both are great goals for any UX designer,
but if you need to use the full weapon quickwheel the game slows down time. It gives the player a moment to think about
the situation and what they should do next when the player’s ‘usual’ weapon combo
won’t do. Or, the game could always just pause the world
entirely. It’s sort of the default option. It lets players gather themselves, plan out
moves, and really think about how they’re going to solve the problem. There really is no right way to go, but you
do have to think through the implications of any option you choose. The UX will drastically change, but it’s
all a matter of what fits most snugly in your game. It drives home the point that UX is not always
a hard and fast science, sometimes it’s just a matter of style. Inventory design is complex, and there are
so many possible paths to go down. Inventories rely on standard UX design principles,
but they can also be a creative tool. Sometimes they’re a very utilitarian system
to support the rest of the game, and sometimes they’re a fun gameplay hook on their own. There are UX guidelines that can make one
inventory feel better than another, but how each game designs its inventory is a matter
of the game’s core gameplay values and the designer’s taste. Inventory design is its own puzzle with infinite
answers. You know who else appreciates great menu UX? Squarespace. We’ve built a few websites over the years,
and in our experience Squarespace is by far the easiest way to get a killer looking website
up and running extremely quickly. They’re a one-stop shop, with domain registration,
easy drag and drop tools, no plugins necessary, and great traffic monitoring tools so you
can watch all those sweet page views roll in. Go to squarespace.com for a free trial, and
when you’re ready to launch, head to squarespace.com/designdoc and use offer code DESIGNDOC to save 10% off
of your first purchase of a website or domain. *chill vibes outro from Moonlighter*

100 Comments

Add a Comment

Your email address will not be published. Required fields are marked *