I am glad to say that a lot of work has been going toward getting the effects mapped out via the card creation tool that Peter shared last week. I should be doing another pass of the entire card set tomorrow, where I’ll define the new effects that Peter has added the tool. Carissa has completed a few pieces of concept art and she will be posting about herself and the art she’s been working on. Today, however, I am going to go through a UI design example like I promised last time.
Pictured below is a mock up of the the main lobby, the fist screen returning users will be taken to after logging in. New users will have a separate flow they will have to follow before arriving here, but that is another topic. This mock up was done using a tool call Balsamiq. Balsamiq is a handy tool for rapidly creating UI mockups that has a free web interface or a thick client version that is a bit more robust, though that version has a price tag. The program uses Mac UI conventions and is well suited for visualizing everything from mobile apps to more heavier projects. I have caught some flak from multiple graphic designers for using this application because it uses the Comic Sans font everywhere there is text. Apparently that looks unprofessional. Who knew! Oh well, you know me, I like to ignore everybody.

The gateway to the rest of the game client. It is a first iteration, and will certainly be changing between now release day.
So, what are the main features of this screen and why did I include them? Here is a quick list:
- A big promo banner at the top
- Player and game info beneath that
- A path to the store with promo info
- A contextual help area
- Extra space for graphics and widgets
- Icon based navigation to other areas of the client
Nearly half of the screen real estate can be devoted to promoting purchasing products. Like I said in an earlier post, monetizing you efforts is an important part of doing a game like this, so making sure players know how to get to where they can make purchases is foremost. The Promo Banner at the top will likely contain whatever promo of the day we want to inform players about, such as deals on product or special events that are running at the time. It is a more dynamic content area in that it could lead to different places depending on what it up at the time. Its main purpose is to point players toward whatever we want them to participate in. The Store button is obviously more static. It will send the players to the store to check out what we are selling. The size of the button isn’t an accident either. It is like that so players can’t miss it, and though they may not buy anything at first they will certainly know how to get to the store if they ever change their mind.
The little info banner wedged between the Store button and the Promo Banner will show how many active games are being played at the moment, how many players are online, and other indicators of game health. This is an important piece of info for players to see when they first log on. For new players, it will tell them at a glance whether they should spend any amount of time there. A decent activity level immediately makes the user feel a bit less wary of trying things out. Its similar for returning users. If they were to log in and find only a few players on, their expectations of finding a few good matches are suddenly dashed. Its a double edged sword to a certain degree, especially if you don’t reach critical mass, but I think it is worth including for now.
The Contextual Help Area is one of the keys to helping new players understand what they are looking at and giving them the information they need to get into the game. When a player reaches this screen, there will be a default message there, one that gives basic instructions on what to do next, namely mouse over any part of the screen to learn more about it. This area may also include announcement type info, but its main purpose will be to inform the user on what each of the icons and buttons do. For example, mousing over the Library icon would bring up some help text that gives an overview of the subsequent screen’s functionality. View you collection! Auction your cards! And so on. The aim is to quickly familiarize the player with almost every part of the client without the added hassle of having to navigate to each screen and back again.
The icons at the bottom of the screen are the paths to other parts of the client. If I had to choose icons or text and I didn’t have the luxury of both like I do here, I would choose icons every time. There are several reasons for this. First, you are building your own visual language within your game client. This can be a big advantage if you ever have to localize your software into other languages. You won’t have deal with ugly translations, and you can move with ease into different countries. That is a bit far reaching, and I admit we don’t have plans to build an international empire with this game. We would be happy reaching a couple thousand english speaking users. Even though that is the case, icons are still where its at. The visual language that you are creating with these icons is also an opportunity to build your brand. Not only do they become recognizable for what actions they perform in the game, they become recognizable as part of the game as well. If you tie these icons into the marketing of the game, as well as the game itself, they become more meaningful. Having this kind of visual recognition is a useful tool to have at any stage in a product lifecycle.
Those icons you see will certainly change by this time we get something out to the public; I am already thinking about dropping the Profile that you see there for something more useful. I do hope that this example has been helpful, though. Analyzing your thinking by putting it down on paper is a good way to strengthen or refute your rationale. Writing this has helped my see a few things I missed the first time around, as well as a few ways to make what I’ve got a bit better.
That’s it for now. Its time for me to dig in and map out the rest of the card effects. See you next time.