What I Learned from UI Design

After receiving the last piece from Dima, the Sword, I wanted to dive into designing the card template for Boons so I could incorporate the art. So far I've designed the Attribute and Monster card's "interfaces"; I'm using that term loosely. The user-interface, or UI, in video games deals with the HUD elements, menus, and even the relationship with the controls. In a board game the user experience is completely different: they physically move pieces, hold cards, etc. Both worlds share a constant, though: the design of the components directly impacts the user experience.

While the subject interests me, I don't have any real knowledge of UI or UX design beyond reading a book or two. I do have a solid background in both mediums, though; I can tell what works and doesn't because I've played them over and over. And it's with this meager knowledge I've set about designing the card templates for HeroCraft. I've already realized both of my prior designs have rather large problems that I need to correct, but I never expected to really learn from them.

I created my first pass design on the Boon template last night, and sat back with a sigh. It was awful, and I had spent the last three hours working on it. I brought in my friend and regular play-tester Brendan who confirmed my feeling; he said it was off. I took a break and re-examined the piece, and something dawned on me. I was trying to convey too much information; rather that my Boon cards were too complex. Here's the first pass below.

Keep in mind this is a test-piece, so a few things won't make sense (like the repeated text). The first thing I realized is that at first glance, players may mistake this card for a Monster. I was lazy and kept the same frame-design (the metalwork part) from Monsters, despite the two card types being polar opposites: Monsters are bad, Boons are good. I had designed a new look for Attributes, so why not for Boons? I like the copper coloring, though, and so I'll be keeping that similar in the next pass.

The gold coin symbol isn't finished yet, so I'll skip that. I really like the pop of the white sword icon; this dictates that this Boon card is an Item. And therein was my first problem.

In v0.9 of HeroCraft, Items are a type of Boon, and they contain three sub-types: Weapons, Armor, and Shields. After wracking my brain for a way to display sub-type information, I realized that this hierarchy is unnecessarily complex. The sub-types are what's important, so why do I have them organized this way? And why do I have an entire category for Shields when there are only two in the game? I ran this across Brendan and we both agreed that it should be simplified. If the sub-type "weapon" was the most important qualifier, it needs to be a type of Boon and get its own icon.

In v1.0, the first "public" version, there will be five types of Boons: Weapons, Armor, Spells, Followers, and Items. But where did shields go? They're getting nixed. I realized that they were completely unnecessary and instead will be transformed into two new armor pieces instead, bolstering the Armor category. I know this is a good choice; after scanning all of the text in the game for Shields, only one card relied on their presence.

There are a lot more changes I'm going to make, but the purpose of this post was to illustrate a phenomenon I had yet to experience: learning game design from UI design. I'm confident that HeroCraft will be better off with these changes, and for those that will miss shields: I'll make sure they're in the art for armor cards.