Trade screens and the wireframing process feature - HOPE

Hey all. I figured I'd explain a little about the process of designing UI in case it might be useful to other developers and people watching the game's development to understand the process I use.

It seems to me, that of all design tasks, the one I find hardest and generally dislike the most is designing user interfaces. I do it, but I dislike the process because it doesn't feel like "progress" towards a playable game. Yet it is quite likely the most important area of game development, because it is the conduit that you as a designer use to communicate potential ideas to the player.

So I figure I'd share a little of my thought and design process for a particular UI aspect of the game I've been working on, in this case its the inter-rig trading mechanic.

Quick recap for those not following the game (you should be! ahem) basically the game is about building a small community via manufacture, salvage and trade, set on a flying oil-rig type structure. My goals are to give players the feeling of community by letting them build one, while offering the chance to roleplay in a unique setting. Its kind of survival without the combat.

When I first started making the trade systems UI, I was thinking entirely about function, I wanted the player to have access to a number of other rigs to trade with. The player needed to see a list of these potential traders, s/he could then "offer" a number of items, or currency, which would then be matched be offers from various trading partners. This is the UI that is currently in the game in limited form and is what prompted me to go back to redesign the system.

As you can see by this image, I'm using a web tool called balsamiq to draw these wireframes. Wireframing is the technique UI designers use to try and determine how a particular UI should look. There are lots of options for wireframing, although they seem to vary between expensive and very expensive, apart from one free tool called Pencil, which is a wireframing tool for the Firefox web browser. In this case, I made an initial mockup using balsamiq's web demo because it was enough for me to work with on designing a single screen. I've also used wireframe sketcher studio and would recommend that for more heavy duty UI work.

Anyway, on with the design issues. The problem with this design, is that it distances you from the notion that you are actually trading with people. It becomes more of a spreadsheet type arrangement and doesn't reinforce the closeness of community that I want to run throughout the game.

I cast around for ideas, but it is quite difficult to find concrete examples of inventory trade screens when doing a google search. I then remembered that the early fallout games had a similar kind of "junk" based feeling to them that I was aiming for. So I did a quick search on YouTube for let's play videos of fallout 2, which is something I do quite often when designing, looking at other games via YouTube videos gives me a feeling of how some of their systems work. As it happens this video shows almost perfectly an example of fallout 2's trading mechanics and UI. I really like fallout's ideas here, because it reinforces that you are actually trading with someone. The notion is simply that you each have an inventory and an "offer", once the offers are acceptable to both parties a trade can take place. This is the essence of bartering and they even call it "barter" on their UI button.

As it was a barter-based system I was going for, this provided some great ideas for the UI. Most notably the idea of showing who you were trading with more prominently, alongside the idea of "offers". It turns out that this UI is actually more efficient in some ways because buying and selling are not isolated actions like they are in most game trade UI's.

The updated wireframe shows more clearly the trade partner. It has the advantage of also reducing the need for other inventory UI to be on-screen at the same time, as it shows the player inventory and the partner inventory as well as having inventory space for each side's offer. This aspect of highlighting the partner is good, because managing relationships with trade partners will be another aspect of the game. Each trade partner will have different personalities, social structures and beliefs. These aspects will effect who they will trade with, what costs of trades are etc. An interesting side effect of this, is that you will have to manage these relationships, for instance trading in specific goods might upset some trade partners.

I'll show you this whole system functioning next week as I've still got to flesh out the procedural generation of partner rigs, distribution of starting goods and requirements etc. The system is getting quite complex but I think it will be worthwhile and will offer a lot of depth to what is a core function of building communities.

Anyway, will show more of this next week. Til next time!