Emerald Kingdom

We here at Double Cluepon spend our Saturdays actually working, believe it or not. One of the things we did this weekend? Started tightening up our interface mockup, so the art department can begin working on the actual elements.

While we know and pretty much have the basics set for the Alpha client, as we add functionality for actual feature sets, we of course need a way to visually reference these in the interface. That process has been ongoing in a somewhat off and on basis. As of this quarter however, it’s taken a front seat.

In designing the interface, we wanted to try for something a little less intrusive than what we ourselves have been used to: a lot of scattered functionality. We could name names, but we wont. What we will say is this: there are a lot of badly designed interfaces in the MMO world. We don’t think this is intentional in any way. We think it’s a natural consequence of the way MMO User Interfaces tend to evolve; as new features are added, the UI for them gets sort of “tacked on” the end, which after a year or two tends to make the UI clunky or in some extreme cases, completely unapproachable.

What we really want from the Emerald Kingdom interface then, is something more akin to a dresser full of drawers. We want to be able to organize things in such a way that you can:

• Minimize the number of clicks to get to something.
• Organize things in such a way that it’s natural as to where you will find them.
• Build a system that, when it’s time to add functionality, it blends well with what is already there.
• Build and maintain with a philosophy that viewing the world should not be impeded. i.e: seeing the world is always important.

Awhile back, we posted our basic mockup of what the initial UI should look like:

Our original mockup. We used this as a base for rapid iteration. Ignore the ass hiccups. We're a strange bunch.

While we liked the original, we also realized there was no way any of this was set in stone. For instance, since doing this particular mockup, the way we’re doing quick bar functions has actually changed. Chained attacks will be set up differently. While we have not designed that bit yet, we know full well going into this, we cannot be married to anything we see in the original.

But, the basics are here. We have a mini-map, a modal window, chat, shortcut bar, money indicator, top tabs, and your status in the upper left corner. All of this is raw material, really. What comes next is re-iterating with the raw material you see here, in order to come through with a nicer, easier design. It will still be rough, but at least we can get a handle on where to put things.

There are a few things that will need to be put into the game first and foremost. Number one on the list is character profiles. Character profiles are going to be central to a lot of the social functionality of the game itself. Profiles will tell you a number of things. What the player is rated at for their skills, what aspects they’re currently aligned with, marks they have, achievements they’ve earned, and stuff they own like shops and whatnot. It will also tell you a bit about their social groupings that they are associated with.

A quick and dirty mockup of profiles. This one was generated simply using HTML/CSS.

The original mockup I did for player profiles was quick and dirty, I wanted to start picturing how they would look, what information they would display and how it would display it. As you can see from this basic put together there are some really basic items on here. You can see Marks, Skills, Social Associations, and ownership. You can also see some initial ideas about ratings, along with how they are displayed.

Now, while this profile mockup worked in a web context, and it let me get some of my ideas out of my head, it was in no way anything that was going to be used. It’s important to realize that when you’re designing something, you actually throw away a lot. Learning what goes on the cutting room floor is just as important as learning what goes into the final product. At this stage in the game, you really cannot get hitched to anything. That said, the basics here were looked at, and migrated to where they need to appear first: the client. Even though player profiles will be visible from a regular web browser, they need to fit the client first and foremost, because that’s where they will be primarily used.

Note that, some of the structure of the original profile exists. Some of it was shaved down.

So, then, we got back into the client mockup. Uriel re-organized the layers, and we got down to business. One of the first concerns brought up was this: how to display all the information without creating a feeling of “information overload”. What we learned was important: it felt like we were dumping too much in, at the top under the player name. We had it ordered along the following:

* Faction
* Confederation.
* House.
* Band.
* Military Rank.

It was at this point Uriel spoke up, and said it felt like it was “too much” stuff. We then went into a discussion about “how much was too much?”. Looking back on it, that was the wrong way to go, because what we discovered was that it was not the volume, but the format in which it was displayed. Uriel then changed it up a bit, and what it wound up being was what you see in the shot:

* Band
* Faction
* Confederation
** Rank.
* House.

It’s the same amount of information, but ordering it in a more sane fashion made it easier to parse from a human standpoint. That’s another important lesson here: knowing when to change things up a bit, as opposed to cutting. Sometimes, you can have your cake and eat it too.

The next thing we covered, was the picture of the player. Originally, I simply wanted a user Picture. (We plan on having photobooths, where you can take really detailed and nice looking pictures) but Sandalphon got into the game: she felt it was important that we’re able to see the player as they are at that moment; She wanted to see the players avatar as it appeared “in the world”. My initial concern was this: if we do that, what drive do people have to get Pictures taken? It was suggested that perhaps we give the player an option: use the avatar by default, if the player wants to replace this with a picture, which will look nicer, they can.

Let me jump in here and just say: if we can give the user an option, especially when that option has to do with how they present themselves..we will where its possible. I personally think that all too often, user options are sacrificed out of sheer laziness.

The next thing we got into the UI was how marks are displayed. The Mark display is shown in the above picture, as purple boxes above the picture/avatar. Now, there are 32 Sprite Marks in Emerald Kingdom. While it’s not possible to gather them all, it is possible to get a fairly significant number. How to display them? We eventually decided that a hover over the marks would “Window shade” them down, over the user avatar/picture. We will add a preference to let someone choose 5 marks to display at the top.

From there, we placed the Aspects. Aspects in Emerald Kingdom relate to our “Pluggable Attribute” system. (We wont be getting into that now). Up next was: how to display skills. Skills in Emerald Kingdom do not have numerics. (In fact, if you have not noticed by now, there are next to no user facing metrics. This is by design. Numbers suck!) What skills in Emerald Kingdom do have, is ratings based on your skill with them. This design choice then, was really simple and straightforward: iconography, followed by a rating.

Achievements and Ownership are pretty straightforward; Iconography is used, with hover over tooltip style labels. Again, options for what to display will be available to the player, and a link provided for other players so they can view all of them.

One of the things you may notice is the background of the player profile. This is the “Mark of Grief”. We’ve spoken about this a bit in the past. One of the Sprites can bestow the “Mark of Grief” on players, literally our front end on the Anti Griefing system we are developing. If a player has it, it will show up in the background of their profile, as well as be transparently masked over their picture or avatar. Why? We want other players to know if someone has been a less than desirable player. We want this apparent as immediately as possible. We think if you’ve been griefing people, then it should show. The Mark of Grief (like other marks) fades over time, and will do so here as well. If the player does has not been Marked with Grief, again, we will place an option for the player to display the mark of their choice in the background.

The original status indicator.

Once we had the main profile laid out, we turned our attention to Status. The Status indicator as it was, contained a few simple things. It had the “Knockout bar”, A place for the head of your avatar, and the “Soul Meter”.

While this worked, we soon realized that something was missing here. In Emerald Kingdom, we have what amounts to a separate “sub economy”: Gel. Gel powers everything in Emerald Kingdom. Weapons, Spell Wheels, “Magic” Weaving, eventually it will also power other bigger ticket items and other large stuff as well. Gel is planned as a natural environmental feature as well; everyone will be able to collect, refine and use it. Even in the field.

But the thing is, if you’re using a pistol, or a spell wheel…both of which rely on Gel Batteries, knowing the status on this is going to obviously be pretty freaking important. As Uriel was already itching to redesign the status display, we went to work.

The old status indicator on top, with a very rough sketch in of the new. Note that we did try to work with the old one first, but felt it was a bit too tacked on, and important stuff was hard to discern.

We tried many variations, using the original status display. We used a gel meter on the bottom, we shifted the Soul Meter a few times. Tried different ways of displaying the number of batteries left in your inventory.

We spent a lot of time trying to save what had been previously done. Sometimes, it pans out, sometimes it does not.

In this case, it did not. The old meter had to go. What Uriel sketched out looked a lot cleaner, and more readable in the long term.

Gone was the “tacked on” feel of the old iterations. The fill bars move in opposite directions, which we think will enhance their viewing ability. The Gel meter empties up, the knock out meter empties down. It’s also easy to understand: the gel meter is “tied” to the battery count, and the knock out meter is “tied” to the Soul Meter. This reinforces the idea that getting your clock cleaned by something bigger than you may affect your “Soul Meter”, just like running out of juice on your Spell Wheel’s battery will affect your battery count.

All in all, everyone liked the new design. We went on to figure out how many pieces it would wind up being in terms of layers and parts.

By this time, however…it had gotten to beer ‘o clock. So, we saved everything, and Sandalphon got the first Blue Moon of the evening. Caelum took a full hour before he started asking for wild concoctions.

It was a productive day. We have another one of these UI/UX Sessions this Saturday as well. If you have questions or ideas…let us know. You never know, you might be able to one day point at an element in the Emerald Kingdom client and be able to say…”I suggested this!”

Everyone wins. =)