Diablo Inventory UI Fan Redesign (Figma + Principle + UE4) — Part II
Once again we find ourselves nearing another quarterly update from Blizzard Entertainment on their in-development title, Diablo IV. In Part II of this series, I take feedback from the community and revise my designs, then expand upon them to create a small interactive prototype using Principle for Mac. All the images you see were created using the web-based design tool, Figma.
Update: As of October 2022, I am an employee of Blizzard Entertainment on Diablo IV. I won’t be able to finish this series for obvious reasons, but you can see my work on the game when it releases next year. Thank you for reading!
Be sure to catch up on my thought process in Part I of this series!
Welcome to Part II of my journey to implement the Diablo IV inventory system in Unreal Engine 4. Considering we’re getting close (most likely within a week of the publishing of this story) to another quarterly update from Blizzard, I figured it’s about time to take a look at how my designs have evolved over the past few months. Here’s the final result, in prototype form (read on for a link to download):
Like Part I, this article isn’t meant to be an in-depth tutorial of the tools used to create these interfaces and prototypes, but more an examination of the iterative process I apply when designing and implementing user interfaces for games. Also, as in Part I, Blizzard proves to be masters of their craft — as you’ll see in my revised mockups, they are much closer to the original layout Blizzard showed off.
Let’s dive in.
Last time, I proposed some changes to the layout of Blizzard’s inventory screen from the February update. Here’s a side-by-side of the two mockups.
After posting my designs, I received some valuable feedback from the community. These discussions led to some revelations about why Blizzard made certain decisions and further reinforced the benefits of their approach to the interface. Here are some of the things I learned about what did and didn’t work in my interface:
What worked
- Adjusting the equipped slots in the character preview to be completely symmetrical made it easier to estimate the navigation grid.
- Many agreed that equipped weapons deserved a larger treatment in the character preview panel. As a small adjustment, it’s an easy win.
- I kept the increased size of the sort button and it’s label, but this needed to move with the tabs, so I moved it back to the original position in the top right of the inventory panel.
- The expanded character details section (which showed the character name, class, and level) worked well, so I kept it.
What I learned (aka, “What didn’t work”)
- The ring equipment slots didn’t need to be smaller than the other slots.
- Many comments I received fought against my initial instinct to move secondary power attributes (Angelic, Demonic, Ancestral) to the character preview panel. Changes to other elements allowed these to move back to their original position in the right character panel.
- The vertical tabs to the left of the inventory did not flow well with the psychology of gamepad navigation. The triggers and bumpers typically lead to left/right navigational thinking, not up and down, so I reverted to a horizontal tab bar.
- The expanding accordions for character attributes proved to be too rigid. I could only fit up to 4 stats under each attribute, and this method didn’t work out the way I’d hoped. I decided to use tooltips instead of accordions, which freed up space and increased the ability to show varying amounts of data. This change also allowed me to move the power attributes back into the character panel.
- The increased inventory capacity didn’t survive the rest of the changes, but I did explore alternative solutions to the single slot items, which you’ll see later on.
- Finally, it turns out I missed something in my design — Blizzard reserves a section underneath the UI panel for additional input prompts or instructional text. I added this back in, which reduced the overall height of my inventory panel by 56px.
Much of what I thought would work or improve Blizzard’s interface… didn’t. As is often the case in user experience design, users will happily point out what’s wrong with your interface, while at the same time reinforcing known patterns and common assumptions.
One aspect of the interface proved to be a very hot topic: How many slots should items take up in the inventory? Let’s take a look at three different approaches to the inventory panel, using previous entries in the franchise as a reference.
Multi-Slot Items
Diablo and Diablo 2 introduced us to the idea of multi-slot inventory items, where an item’s size could differ based on its type and relative real world size. Since this was a PC-only game, the assumed method of input was a mouse and keyboard. Using the mouse, the player could easily drag and drop items to arrange their inventory. This gave a good visual identity to items and showcased larger graphics, but required a lot of what would come to be known as “inventory Tetris”.
While technically possible, this layout is not ideal for gamepad navigation. Designing an interface for gamepads requires decisions to be made regarding what directions the user can navigate in and which of the limited inputs will be used for navigating each element of the interface. Do you create a digital cursor that can be moved around the screen, similar to Destiny 2? Or implement a radial menu system like in the console version of Diablo 3? Or do you use a more established pattern of using cardinal directions to navigate a grid layout? If the player is currently focused on a large item, and there are two smaller items adjacent, to which item should the focus move when the player navigates to said column? You could default to the top item, but this adds an additional input to get to the one on the bottom. Given how much inventory management is required in Diablo games, these little extra inputs make a huge difference over the course of hundreds of hours of play time.
Further decisions come into play when deciding one of these methods, prompting questions like: Does the player still need to be able to run around the environment while the menu is open? Does the game pause when the menu is opened? Does the interface cover the entire screen or only part of it?
The answers to the latter questions are: “Yes, the player retains control of the player’s movement while the interface is open”; “No, the game does not pause when the menu is opened”; and “The interface only covers half of the screen, because a second player needs to use the other half if they choose to open their interface at the same time during couch co-op.”
Answering these questions led me to a potential solution, which was to use the directional buttons to navigate the inventory while reserving the left analog stick to move the character out of danger or continue navigating to a destination. I’m guessing this is Blizzard’s choice of input method since I don’t know of anyone who has seen the game played using a gamepad yet.
These reasons and more likely make up the primary drivers for Blizzard decision to move away from multi-slot inventory items and instead unify items into a single, easy-to-navigate grid.
Dual-Slot Items
With Diablo 3, Blizzard opted for a simplified version of the original inventory layout. Items could fill only one or two slots. This is great for reducing the tedium of the interface and allows more items to be stored in the inventory. With multi-slot items, your inventory capacity was extremely variable depending on if you were storing larger items, like two handed weapons or chest armor, or smaller items such as potions, rings, and small charms.
This is better than the multi-slot layout for gamepad navigation, but still not ideal due to the mismatched item sizes. The problem of “which of two items in a mismatched grid did the player mean to navigate to?” is still a problem in this interface, although the friction is lessened considerably.
Single-Slot Items
In Diablo IV, Blizzard is proposing a single-slot system where every item takes up the same amount of space. In the previous two layouts, there is a lot of variance in how many items can be stored in the inventory, depending on the size of each item. Single-slot items do not have this issue.
Another great benefit is the ability to easily navigate and organize items using a gamepad or mouse across a simple, consistent grid. No more errors in navigating to items of different sizes or additional programming logic to determine sorting and moving items.
Finally, not only is the player guaranteed a consistent number of slots in this layout, they are also given separate tabs of small square slots for utility items like potions and runes, as well as quest items and materials. With this method, the player is guaranteed they can always hold 36 items at a time in the Equipment tab and 60 items in each of the other tabs, for a total of 216 items across 4 different categories. That’s one big inventory!
Now that we’ve decided on a solution for item sizes and taken in all the critiques from the community, it’s time to make some revisions and apply what we’ve learned from this exercise.
You’ll notice some other things have changed while others remain the same. Potions have moved inward to allow for the increased size of the ring slots and shorter character panel. The player level, name, and class remain unchanged, and the inventory tabs were moved to the top of the grid. You’ll also notice I didn’t center the tabs, and instead moved them to the left to allow more room for gamepad prompts and extra tabs without running into the new “Sort” button.
Now that the layout changes have applied, I’m ready to move into the next major element of the inventory UI: tooltips.
Diablo games rely heavily on their icons to give a quick read on an item or trinket’s type, rarity, and value. There’s not a ton of text on the screen by default, and the surface experience is primarily driven by artwork and icons. However, much of the depth of the game design lies in the attributes of each of the items and attributes.
Items have a lot of variability in how many attributes they can contain, and other elements of the UI typically have more depth behind them. Take the primary character and power attributes, for example. These surface level numbers seem simple, and as such are accessible to a casual player. However, these attributes are typically made up of a multitude of underlying gameplay systems.
Tooltips in Diablo IV appear to follow some specific rules that enhance their accessibility, information hierarchy, and flexibility. I’ve tried to capture these elements in my recreation of the tooltips revealed in gameplay and the recent quarterly updates across items, attributes, and other generic elements of the interface.
A few rules I observed while studying the demo gameplay from BlizzCon 2019 related to safe areas around the current selection, repellant zones containing critical interface elements, and dynamic static positioning that allows for an easy reading experience. These three rules make for a great standard, ensuring the interface is readable and easy to navigate with multiple input types, while at the same time giving deeper context to every element. Here’s a look at these rules in action:
- Rule #1 — Safe Areas: Tooltips must be placed 56px away from the focused element to allow players to see adjacent navigable areas.
- Rule #2 — Repellant Zones: Tooltips must not conceal critical navigation elements that cannot be accessed by the primary input method (such as gamepad directional buttons).
- Rule #3 — Content-Aware Static Positioning: Tooltips must not move once displayed. If they must move to accommodate a companion tooltip of a different size, hide the tooltip first, then reveal it alongside the supporting one.
Figma has made creating reusable tooltip components very easy and straightforward. One aspect of the tool I love is the ability to anchor elements to sides of a frame. This allows me to create multiple reusable and extensible elements using a single design component.
I’ve been showing the mouse and keyboard mockups so far, but during the design process I created several button prompts, icons, and other graphics to support playing on a gamepad.
Each of these graphics are vector elements that can be scaled up or down without loss of quality. If I need to support larger screens and resolutions, I won’t have to remake the elements later or work at overly large sizes from the beginning. I can design at a common resolution and then export larger sizes as needed.
Now that we have all the elements assembled for the entire interface across mouse/keyboard and gamepad input methods, it’s time to put it all together and mock up the interactions. Below are comparisons of gamepad and mouse/keyboard control schemes in various situations. I didn’t have references for how Blizzard planned out the shortcuts for gamepad controls on elements like item tooltips, so I decided on buttons I felt should be available to the user when browsing these screens.
For more screenshots of the mockups shown in this article, as well as others showing additional states across mouse/keyboard and gamepad modes, download the archive of high quality images (91.4MB — 2 folders, 29 images).
For me, the key takeaway from these mockups is this: a single interface that can support multiple control schemes unifies the experience across platforms and simplifies development complexity. This allows the development team to try new things and test ideas. Fast iteration is more feasible when a single codebase is used in tandem with a consistent visual language across the entire game’s interface.
Ok, so all these mockups are great, but these graphics are meant to be in motion. This project is for a videogame, after all. Before diving into Unreal Engine 4 to create the final interface, I needed to figure out how these elements would feel and work together. I used Principle for Mac, an incredible prototyping tool, to pull all of these mockups’ elements together into a high fidelity, interactive interface. None of it is truly functional (all the elements are flattened .png images), but it’s good enough to fool the casual observer.
If you have access to a computer running MacOS, you can download the prototype’s standalone Mac app (24.8MB, MacOS only) to interact with it directly, or you can view the demo on YouTube.
Prototyping is an essential part of the design process, and one that is often overlooked by designers trying to get through projects quickly. A prototype can highlight problems with an interface that are not immediately apparent in a static mockup, so I highly recommend getting your designs in motion and putting it in front of strangers for some raw, invaluable feedback. I’m confident it will make your work stronger if you are willing to take constructive criticism and apply it in your design process.
This wraps up Part II in this design series! Thank you so much for reading. I hope this look into my process has inspired you to challenge yourself to design something different with your tools, use prototyping in your process, and in particular, appreciate the work Blizzard has been doing on the design of Diablo IV.
Part III will be published soon and show the process of exporting assets to Unreal Engine and setting up the UMG components and underlying item systems. See you then!
