Mirrored from my blog: https://auroriax.com/the-ui-and-ux-of-arboreal/

The game I've been working on as part as an university project was announced recently, and I've been responsible for the UI and UX for it. It falls into multiple genre boxes, including "adventure", "open world", "zelda-like", "farming", and more. From the get-go, it was clear this project needed a lot of UI, and user friendly one as well. That's where I come in, and use this post to explain what that process was.

Target Audience Research

We started researching our target audience, to help the team determine the game design's core pillars. That included competitive analyses and digging through SteamSpy, but the most valuable source was a survey, posted on subreddits of the games on our reference list. This netted us 345 responses that we could use to identify our target audience with.

UI Iteration 1: Double Hotbar Slots

From our target audience research, we started building from the assumption that the game needed to support players liked micro management, as well as more casual players, who just want to relax without thinking about things too much. We adopted a keyboard and mouse control scheme, where players had five hotbars that had spaces for two items each. With the left mouse button, you'd use the item in the left slot, and the right press for the right item. And scrolling the mouse wheel would swap between the slots.

This approach didn't seem right once it was in game. Micro managing players found it too much work to set up initially, while casual players did not get it at all. It resulted in a lot of nasty edge cases, for example for inventory management and interacting with items inside of the world. I do think this was a good inventory system, but it was not suitable for this type of game.

UI Iteration 2: Face Button Mapping

It was clear that both micro managing players and casual players did not wanted to spend a lot of time inside of boring menus. I had over-engineered. My new plan was to make sure items could be swapped in and out as quickly as possible, and I started prototyping to find out what would work best in our game. We also switched from keyboard & mouse controls to controllers, to simplify the controls.

Ultimately, we decided to allow players to map items to three of the face buttons, by pressing that button inside of the inventory. The fourth button would be reserved for context sensitive actions, like talking to NPC's. This design was received better, and while it still suffered from a large amount of edge cases, we had a better base to work from.

Iteration 3: Polish

We decided to permanently assign the sword to one of the face buttons, and adding mapping for shoulder buttons, bringing the mappable buttons up from three, to four plus the sword. Rolling was brought from a separate button to the interact button when no context sensitive actions are available. Other screens were also finalized during this stage in development, and keyboard support was added again.

When we started putting out a form for alpha testers, I included the same questions as back in the target audience research. This really allowed us to learn how well we connected with our intended target audience, and with 650 alpha submissions, has gifted us yet another pile of data to dig through, showing us that we were actually reaching our intended audience.

Conclusion

Some of the more important lessons I learned from working a year long on the UI and UX of this project:

Thanks for my team for developing the game and helping me make the UI! If you liked this breakdown, I'm planning to analyze interfaces from other games in the future! You can follow me on Twitter, or sign up below to know when I've made a new game.