The way of the Paper (Part 2)

Ahoy mates! It’s me, your loved Captain!

This week has been quite busy for us and, unfortunately, we haven’t been able to prepare in time the full coverage of our experience at the Milan Games Week 2015. It has been postponed to the next week.

Here I am with the 2nd article about “The Way of the Paper”. The past week we uncovered the very first steps we made during the User Interface design process for the game Nantucket. Let’s start from where we left:

As mentioned in the previous article, with this new interface layout we got a lot of information to be displayed on screen. We moved towards a more traditional strategy game. For me, this has been the start for working on the “final” interface artistic style while following the game design guidelines. Consider that I haven’t just copied what Mex had wrote down but tried to re-work his ideas and the interface on two aspects: usability and visual style. This meant several iterations and discussions about how to place the elements and how to make them the most user friendly. Here you have some of them:

At the time of these mock-ups, I wasn’t very satisfied. Each element was consistent with the interface style I had in mind but together they were not well integrated. The overall result was too chaotic. This is the reason why, eventually, I came to the first real version of the navigation UI we implemented later on. Consider that at the time the game development was at a very early stage and there was almost anything to see, not yet:

Top right: Ship Panel
Bottom left: Calendar Widget | Bottom right: Crew Panel

Here the Ship management has been simplified. If you followed this blog, you probably recognize most of the elements described in previous articles. If you haven’t, don’t be lazy: now it’s the right time to catch up!
The design process is really something that doesn’t stop. This way several iterations and elements are added/removed during the development. Here are a couple mock-ups that I blocked out for the new Inventory and Skill tree UI. The idea behind this was to change the least possible of the existing interface, so I thought of something that could be placed on top of it:

 Top left: Skill’s Tree Panel | Top right: Inventory Panel

As you can see, this solution was not very elegant since it covered all the ship information. I decided then to make some more changes and I got this result:

We had the overall left panel split into tabs. It was a little step towards a more tidy UI but it converted the left interface into a huge container where lot of information was not available when looking at other tabs.

This interface layout lasted until January 2015. We announced the game in December 2014 and started to have a playable version of the game, even if it was still missing most of the features and content. During Christmas holidays we had some time to spend playing the game. Consider that when you hit Play (the watch), on the Calendar, the game enters a real-time mode. We realized that the player had too much information on screen:

• Follow what is happening on the map.
• Keep an eye on your resources.
• Managing the ship and your crew.
• He/She cannot look at the crew and captain’s panels at the same time.

For those reasons, we decided to re-work the UI and we came back to the original Mex’s idea of floating panels. Even so, we choose to use collapsible versions of the floating panels,  introducing the widgets. Once again, I created a functional mock-up, to be able to make changes fast:

Above you can see the Navigation collapsed and opened interfaces. Now, the player has all the basic information needed during the real-time mode. This way, the player can open/close the panels he/she needs whenever he/she wants. Moreover, we decided to add to the Captain, Journal and Ship panels, at the top right, a button to let user decide whether that panel has to pause the game or not. We think that these changes let the player customize his/her experience according to his/her tastes. Here you have the final result:

Center left:Captain Panel | Inventory Pop-up | Skills Tree Pop-up
Center right: Ship Panel / Crew Panel | Inventory Pop-up

This is the interface iteration we currently have and the one that we feel, at the moment, as quite good for the navigation phase. Actually this is a mock-up and not an in-game capture. We constantly refine everything we think can change for the better the user experience. Even now there are updates waiting for this UI, especially after a huge feedback received from the people who visited us at our boot at the Milan Games Week.

Well, it’s been a long article but I wanted to show the process that we followed and still follow to approach the UI design and many others aspects. As you can see the differences between the first concepts and the final result are many: both in terms of usability and style. We think that the last iteration is a lot better than the first ideas. Even so, we’d like to know what do you think about. Please, feel free to comment.
I leave you now, but keep tuned. Next week we will publish, for sure, the coverage of the Nantucket’s showcase at the Milan Games Week 2015.

Godspeed and Happy Halloween to everyone!