Designing a Useable Inventory System

2016-11-20

Barry Martin

One of the most defining features for me in a RPG is the inventory system. How often do I have to go and sell stuff? Can I only bring the bare minimum with me everywhere, or can I horde to my heart’s desire. How easily do I become encumbered, or is that not a thing? How long into the game am I going to get frustrated and toggle the console to boost my carry limit? Am I going to spend 5 minutes looking for that one scroll I need to cast or am I going to be able to find it right away? All of these are things I use to judge whether a game has a good inventory system. With that said this does not mean these are the only things that matter, but rather things that one should be aware of when designing a system for a game.

Some games do a great job of this, others don't. (I'm looking at you Skyrim). I think one of the main things that got really thinking about this, was a large infographic I saw, which can be found in this Gamingbolt article. One of the main things I took away from this is the use of screen space. A vast majority of the screen is used up for the preview of the item. While this does have some usage in the game, I can honestly only think of a handful of quest that require you to move and stare at an item. The second is the amount of text used. A player can easily and quickly scan for an icon, but text requires each thing to be briefly skimmed before knowing if it is the right thing which is much slower. So, in summary the main two things we can take away that TES: Morrowind did right is, 1: Proper use of screen space, and 2: Use pictures, not text! These were the 2 most important things in my mind as I was designing the inventory system for EoS. From here on out, I'd like to take you through step by step of what I was thinking as I went through this part of the design phase.

Inventory Design Idea 1
So starting out, I wanted to make use of the space I had. This immediately gives off a very Morrowind feel, because if it's not broke, don't fix it. However, it was broke. The search bar is too small to be useful, and there isn't enough space at the bottom for proper display on the various currencies. This is a bit of a problem, so we'll have to change things up....

Inventory Design Idea 2
They say a picture is worth a thousand words, so I replaced all of the filter button text with images. It's a nice change, and frees up some more space. However, if I have a lot of things in my inventory, it's a bit inconvenient to have to use the page selector at the bottom; the most used bits of the UI should be placed closer together to minimize the amount of moving around a player has to do. Which leads us to version #3.

Inventory Design Idea 3
Let's be honest here, all that has really happened is the bottom row became the top row. It's a bit better, but the search shouldn't be the most prominent thing. If the most used thing in my system is the search bar, I've designed it wrong. I'm going to include the next minor change here as well, because it led to the final design:
Inventory Design Idea 3
As you can see all that happened was the search icon moved over to it's more familiar place. However, this got me thinking and I ended up with the final design.

Inventory Design Idea 3
Well, almost. Remember how we discussed making the full use of screen space? Well let's make a small adjustment...
Inventory Design Idea 3
Just like that, we're done! Or so I thought.

It's important to do usability test with someone other than yourself. It's pretty obvious you know where everything is and what it does, because you designed it! I ended up showing the previous photo to a few people and asked some basic questions of what do you think the filters would be if you had no tooltips, etc. The one thing people got tossed up on was the "A" icon for all, and some were unsure about the last filter, which is the general misc./catch all filter, but most got it. Thus, the real final version ended up looking like this

Inventory Design Final