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 did­n’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.