UI Iteration #1: Tavern

Ahoy, fellow mates!

It’s been a while since our last meeting, the articles about the interface design process of our upcoming game Nantucket. If you missed them, here you have the links:

• The Way of the Paper – Part 1
• The Way of the Paper – Part 2

Well, I’m here again because of what I said in those articles: iterations. Oh yes. Right after the Milan Games Week 2015 (here’s the full coverage) we analyzed the received feedback and a relevant part was related to the UI not being clear enough.
We decided to rework the UI with the goal of make it more readable. The mistake I run into is trying to have an appealing UI, well integrated with the “Paper” theme. Too much integration leads to less readability of the UI elements, being too “camouflaged”.
An example of this are the generic buttons: too many different styles so the user cannot really say when an UI element is a button or not. Following this principle, I started re-designing basic elements such as button, check boxes, etc. up to whole UI panels.

Today’s article is about the first big change: the Tavern UI, used to hire/fire crew members. If you don’t know what’s this UI is about, please, read the previous article Looking for strong hands and a drink.
I’ll start by analyzing the UI that we had, highlighting those aspects responsible of the not-so-good User Experience.

I thought the Tavern panel as a page of a hired crew book, where the captain takes note of the details regarding his/her crew members. At the same time we needed a list of the available crew for hire in the Tavern. The old UI you see above, presents the list of members “For Hire” and “Hired” one on top of the other. The interior layout of each list is the same: on the left, the list of members and, on the right, the details of the current selected character. Being one on top of the other was thought to let the player compare visually the details. The main issues of this layout were the following:

• Lot of information is displayed in little space.
• Most of the information is in text form.
• The right tabs filters are almost invisible to the user.
• Drag&Drop assignment not clear.
• Prestige points used too “camouflaged”.

As I stated in previous articles, design ideas don’t come from just one person. Actually, Daniele, our programmer, was who suggested a mock-up with a possible solution for the Tavern layout:

As you can see, we started with a rough concept. Nonetheless it contains all the corrections, at least functionally, we needed:

• Separated captain panel, on the left, as in the navigation phase. This way, the captain’s panel is always placed in the same screen area, no matter what phase you’re playing.
• Split into two different panels the lists “For Hire” and “Hired”. The layout remains the same, more or less, but they are visually separated.
• Added two buttons for Hire/Fire in the middle between the “For Hire” and “Hired” panels.
• Bigger filters tabs.
• A popup to be used as help tip for the player.

Even if the main changes are present in the above mock-up, there were still aspects not solved, as the Prestige point/cost. So, after this first suggestion, I worked on a bit more defined mock-up:

As you can see, a step forward has been taken in this second mock-up:

• Added into the details area the illustration of the selected character. This is something that several people told us would have been better to have in order to visualize the person and not having just a name. It should add a bit of depth.
• Each of the two panels “For Hire” and “Hired” has its own action button, “HIRE” and “FIRE”, point toward the direction of the change of places. This way we introduced an alternative to the drag&drop assignment/fire. Regarding the drag&drop, we also introduced a changing cursors while on a dragable element of the interface. This decision has been applied everywhere in the game, not just here.
• Added a Prestige icon for each character label representing the Prestige cost of the person. At the same time, below the “Hired” panel, I added a Prestige Used progress bar, to better visualize the concept. Indeed, the Prestige Used icon and the Prestige Cost icon are quite similar.
• Moved the Cancel and OK buttons to the bottom right. Most of the people who tried the game where always looking in that area the buttons to close/cancel the action.
• The filter tabs are not bigger and colorful!

After this second step, I worked on the final version, the one that we now have implemented into the game currently. Here you have it:

As you can see, some more changes occurred. I moved the tabs on top of the “For Hire” panel because placing them too far on the right made them still a bit “invisible”. Moreover, I placed a darker paper sheet on top of which the two “For Hire” and “Hire” panels are laid. This way I can keep the UI a whole panel. Also, you can see the new style for the buttons: since the paper usually has a lighter color, I decided to go for a darker one for the buttons, to make them stand out more.
The last change is about the captain’s panel: the health bar is now a more “common” red bar with the health value on top. I also added a XP bar, at the bottom of the captain’s picture, with the value showing the current amount against the one needed to level up.

We showed this new version to several people and everyone, even those who saw this UI for the first time, stated that it’s quite good. It’s not perfect but, surely, a big step forward.
We are up and running! We want the best experience for the players and for this reason we chose to keep tuning whenever and wherever possible.

Well, for today I’m done. Don’t worry, though: more UI iterations are coming! So, stay tuned and follow our Devs play video series!