The UI and UX of Arboreal

June 13, 2018

The game I’ve been work­ing on as part as an uni­ver­si­ty project was announced recent­ly, and I’ve been respon­si­ble for the UI and UX for it. It falls into mul­ti­ple genre box­es, includ­ing “adven­ture”, “open world”, “zel­da-like”, “farm­ing”, and more. From the get-go, it was clear this project need­ed a lot of UI, and user friend­ly one as well. That’s where I come in, and use this post to explain what that process was.

Target Audience Research

We start­ed research­ing our tar­get audi­ence, to help the team deter­mine the game design’s core pil­lars. That includ­ed com­pet­i­tive analy­ses and dig­ging through Steam­Spy, but the most valu­able source was a sur­vey, post­ed on sub­red­dits of the games on our ref­er­ence list. This net­ted us 345 respons­es that we could use to iden­ti­fy our tar­get audi­ence with.

With our Steam­spy analy­sis, we found out that play­ers like play­ing these games for a long time…
…while keep­ing indi­vid­ual play ses­sions short. Peo­ple play these games only a few hours per week, much less than PUBG, for exam­ple.
Respon­dents’ age usu­al­ly fell inbe­tween 20 and 30, which became our tar­get­ed age group.
We list­ed all games we had as ref­er­ence, and asked which games respon­dents had played. Of the top four games, the amount was almost equal.
We asked the play­ers how many time they invest in games per week and per indi­vi­dal ses­sion, to com­pare to Steam­Spy.

UI Iteration 1: Double Hotbar Slots

From our tar­get audi­ence research, we start­ed build­ing from the assump­tion that the game need­ed to sup­port play­ers liked micro man­age­ment, as well as more casu­al play­ers, who just want to relax with­out think­ing about things too much. We adopt­ed a key­board and mouse con­trol scheme, where play­ers had five hot­bars that had spaces for two items each. With the left mouse but­ton, 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 man­ag­ing play­ers found it too much work to set up ini­tial­ly, while casu­al play­ers did not get it at all. It result­ed in a lot of nasty edge cas­es, for exam­ple for inven­to­ry man­age­ment and inter­act­ing with items inside of the world. I do think this was a good inven­to­ry sys­tem, but it was not suit­able for this type of game.

UI Iteration 2: Face Button Mapping

It was clear that both micro man­ag­ing play­ers and casu­al play­ers did not want­ed to spend a lot of time inside of bor­ing menus. I had over-engi­neered. My new plan was to make sure items could be swapped in and out as quick­ly as pos­si­ble, and I start­ed pro­to­typ­ing to find out what would work best in our game. We also switched from key­board & mouse con­trols to con­trollers, to sim­pli­fy the con­trols.

Ulti­mate­ly, we decid­ed to allow play­ers to map items to three of the face but­tons, by press­ing that but­ton inside of the inven­to­ry. The fourth but­ton would be reserved for con­text sen­si­tive actions, like talk­ing to NPC’s. This design was received bet­ter, and while it still suf­fered from a large amount of edge cas­es, we had a bet­ter base to work from.

Iteration 3: Polish

We decid­ed to per­ma­nent­ly assign the sword to one of the face but­tons, and adding map­ping for shoul­der but­tons, bring­ing the map­pable but­tons up from three, to four plus the sword. Rolling was brought from a sep­a­rate but­ton to the inter­act but­ton when no con­text sen­si­tive actions are avail­able. Oth­er screens were also final­ized dur­ing this stage in devel­op­ment, and key­board sup­port was added again.

When we start­ed putting out a form for alpha testers, I includ­ed the same ques­tions as back in the tar­get audi­ence research. This real­ly allowed us to learn how well we con­nect­ed with our intend­ed tar­get audi­ence, and with 650 alpha sub­mis­sions, has gift­ed us yet anoth­er pile of data to dig through, show­ing us that we were actu­al­ly reach­ing our intend­ed audi­ence.

Conclusion

Some of the more impor­tant lessons I learned from work­ing a year long on the UI and UX of this project:

Thanks for my team for devel­op­ing the game and help­ing me make the UI! If you liked this break­down, I’m plan­ning to ana­lyze inter­faces from oth­er games in the future! You can fol­low me on Twit­ter, or sign up below to know when I’ve made a new game.