UI design mockups work in progress

Over the past few days, I’ve been working on the design for one of the last broad game mechanics of the game; user demands.

The first of these demands is going to be demands to buff or nerf different player classes. And as part of that, I’m revisiting how the player would actually do those things.

We already have a GUI for editing class abilities. But as testers know, it’s horrible. The best thing you can say about it is that it’s functional… but it’s absurdly huge, it’s poorly laid out, many of its GUI widgets misbehave in subtle ways, and even if all the above weren’t the case, it’s also completely unintuitive. So… I’ve been trying to figure out a cleaner design for the interface, to make class editing easier.

When designing interfaces, I find that it’s a lot faster to design them with pen and paper, or with a mock-up tool. As an example, here’s a mock-up for a revamped “Admin Request” interface:

This is a combination of two different windows in the current interface. I’ll probably implement this someday; it seems a little cleaner. Or maybe this alternate layout, which requires a larger window but would involve less scrolling:

Side note: I have too much fun coming up with quest names. Except for “Mr. Zombie Loves To Dance”, which I’m absolutely certain was an actual silly quest name from something I’ve played… I feel like it must have been City of Heroes or Champions Online, but Google doesn’t show me anything. So maybe I’ve just invented it?

But back to class editing. My current thinking is that I’m going to move class editing into windows more like the current “Info” windows which display information about whatever you’ve selected; a smaller window with tabs along the bottom. Here’s a mock-up of what I’m thinking about:

There’s still some clean-up to do there, but you can see how that would work. The real trouble is over on the “Abilities” tab. Let’s take a look at the mock-up:

Screenshot from 2017-09-17 13-50-53

So. To my mind, there are some big improvements here over the current GUI. For one, you can still see the full list of abilities, while you’re editing one of them. Additionally, the attack range setting has changed from being a freeform text box accepting numbers, to a combo box providing a limited number of options that can be selected using the mouse. (In this mockup, the options are “Melee Range”, “Missile Range”, and “Sniper Range”). Similarly, the cooldown range has switched from being a freeform text box, to a combo box (In this mockup, the options go from 1-5 seconds, then jump to 10 seconds, 20 seconds, 30 seconds, 1 minute, 5 minutes, 10 minutes, 30 minutes, 1 hour, 1 day).

But I think it’s pretty obvious that the major problem here is figuring out a nice interface for specifying the “Costs” and “Effects” for each ability. Right now, these are absurdly freeform; each ability specifies a number of costs and effects, each of which can affect either the ability’s user or their target. So you could, if you wished, create an ability which uses some of the target’s mana to heal the user. (Or more usually, use the user’s mana to heal the target. Or to damage the target. Or drain their ‘rage’ or whatever.) I don’t really want to lose that freedom… but I’m willing to give it up, if it’s the only way to simplify the editing interface.

Right now, under the GUI shown above for editing costs/effects (which is basically the same as what’s in the game right now), it requires far too many clicks to set things up. You need to click the ‘+’ to add an effect, click twice on each combo box to set the person affected and the attribute to be modified, and then somehow set the amount you want the attribute to be modified.

I don’t really have a good solution for this right now. I suppose I could do something like this:

Screenshot from 2017-09-17 13-45-29

Here, we just give people a matrix of attributes vs. people the costs/effects, and let them fill in the numbers. I’m never really thrilled at giving people what is fundamentally an excel spreadsheet to edit, but… maybe this is the simplest way to do it?

Very interested if other folks have ideas about how to make editing these things simpler, easier to read, and more fun!


I’m no UI designer but I think the second layout for the abilities tab is your best bet.

You could remove some traits/attributes that don’t make sense from a class mechanic perspective (e.g mana on Warrior) to simplify things.

In addition, I think it’s also important to add a dropdown box to specify the nature of the ability. Is it DOT? Single-target? Buff etc.

Honestly speaking, there is going to be a trade-off in the UI if you intend on allowing players to freely create their own abilities/classes as such so if I were you, I wouldn’t really stress about it :slight_smile:

1 Like

Oddly enough, we don’t have buffs in the game right now; our combat system isn’t complex enough to really support them.

The combat system does support DoT attacks. It used to be that monsters would often auto-generate DoT (damage-over-time; the target continues to take damage for a period of time after being attacked). But it led to a lot of players dying after killing a monster, as the monster’s DoT continued to play out even after the monster had died… like… a lot of players dying that way. So we stopped giving DoT attacks to monsters by default, because it just looked weird to see players dying when there were no monsters around. There’s no way to actually configure a DoT attack in either the current GUI, or in the new ones I’m currently designing, at the moment. Not sure if we’ll ever bring them back; they require even more configuration data (how frequently does the DoT effect tick, how many ticks does it have, etc… and I’m really trying to make the GUI simpler, not more complex!)

After trying a few more different things, I agree with your general preferences; I’m leaning toward this one, which is only a very slight revision over the one you liked:

Screenshot from 2017-09-17 15-49-47

I’ve also been designing how to actually reach this window. Right now, when you choose to edit the basic game design, we open a terrible, ugly, huge window which looks like this:

And when you select ‘Classes’, the window changes to this:

In that window, ‘top’ takes you back to the view from the first screenshot. The buttons along the left let you choose different classes, and their abilities are shown in the buttons to the right.

This whole GUI is, as I’ve mentioned before, horrible, and desperately needs replacing. :blush:

So instead of using that window, I’ve been thinking about doing something like this:

Screenshot from 2017-09-17 15-57-12

The current “Design” button in the bottom right corner of the HUD would open this new panel, and you would just select a class to open its configuration window (as mocked-up, above). Each class icon in this panel would be a snapshot of the model.

It’s maybe a little awkward that this new design interface uses multiple windows (one for the “index”, one for each class you’re viewing). But maybe that’s okay? It means you can view and compare the abilities of multiple classes simultaneously, which the old/current UI can’t do at all. In the old/current interface, you’re always having to bounce up and down between different views in the window…


I liked the other UI for setting up Abilities… I find the columns approach to be … very unfamiliar; looking at it initially I have no idea what it is asking me to do. Where the first one is very clearly setting up a statement that says “the [user]'s [rage] changes by [-2]”, so I can read it, and more importantly I can think it and see how it would be represented.

Pre-populate the costs and effects with one line each (based on a default assumption for the attribute), give me a “+” (at the bottom, not the top) so I can add more in each section, and a way to remove any line (including the default ones), and let me fiddle, and I’d be good.

The other one might be more succinct, but I think it is opaque.

At least that’s my view. It is your UI! :slight_smile:

1 Like

I can see your point!

Needs more thought. I just really want to avoid the widget salad that the current implementation suffers from, if I can.

1 Like

Perhaps you could generate the text description below the spreadsheet, as it is edited. That would give me my sentence, and would quickly make sense of the spreadsheet. Again pre-filled by default, to demonstrate how it works. Perhaps not elegant, though…

1 Like

I actually have a mock-up of that, where it shows a plain text description of the ability until you choose to edit it.

Finding language that works nicely is challenging, but it’s definitely a possibility!

1 Like

What about this one?

Screenshot from 2017-09-20 13-41-33

I like this visually, but I’m a little uncertain.

Right now, a game ability has both “costs” and “effects”. Both change attribute values (health, mana, etc) of the user and of the target; the only difference is that a “cost” must be paid in order to use the ability, while “Effects” are applied after the ability is activated.

So for example, if “User Rage -2” is a “cost”, then you can’t use the ability unless you pay that cost. If it’s an “effect”, then you can use the ability as much as you want, even if you don’t have any rage, but your rage value will drop by 2 (to a minimum value of 0) each time you use it.

The idea of this interface was to try to have the software determine what’s a “cost” and what’s an “effect” automatically, instead of asking users to specify that themselves. So anything which affects the user in a negative way, that’s a cost. Anything that affects the user in a positive way, that’s an effect. And the opposite, for targets. (It you have an ability which specifies “Target Health +3”, that’s probably a cost; something you have to do in order to get to use the ability at all).

This all kind of works up until you let players work in a team, at which point your “heal my teammate” ability (User Mana -2, Target Health +3), both of those changes look like ‘costs’ in the system I just described, which means that you wouldn’t be allowed to use the “heal my teammate” ability unless the person you were healing could be healed by at least 3 points of health.

I guess this could be solved by distinguishing between “Friend” and “Enemy”, instead of just using “Target”. But that starts to feel complicated again.

Or maybe there can be a way to specify whether each of these bars is a “cost” or an “effect”. Or… maybe I really do need two different boxes for these things to go into. Maybe it’s just this:

Screenshot from 2017-09-20 14-03-12


Anything that raises an attribute can’t be a cost, surely? As long as costs on “my” ability can’t be paid by anyone other than me (that sounds like a fair assumption, but it is a limitation), you should be able to tell that a cost is something that the user pays (a -ve), and an effect is everything else. Yeah?

That said, I like the bottom version as most clear, to me.

1 Like

I’ve always hand-waved about someone creating an MMORPG with a different set of character attributes, which work in different ways than the MMORPG standards. For example, instead of having a “Health” bar, they might have a “Poison” bar, which causes death if it ever fills up, instead of if it reaches zero. In that system, someone gaining a few points of “Poison” could absolutely be a “cost”.

But the more I’m thinking about it, the more I think that I should just remove attribute customisation from the game entirely, at least for the first release; it just all gets overly complicated, and likely too difficult to teach to players. The whole “customise the basic game rules” mechanic hasn’t proven itself to be fun to engage with yet, so… I’m trying to trim things back and simplify, until we find where the fun actually is. Probably worth removing “rage”, too; just keep things simple and have just “Health” and “Mana”, until there’s a good argument about having more attributes to play with makes the game better.

1 Like

I think than this can make the game more detailed and complete, but is a little bit " advanced " for players that are playing casual.


Mockup from a few weeks ago:



The character images on the buttons are live images; you can actually spin them around inside the buttons, if you want. Clicking on the buttons opens and closes info windows for editing each class type.

For each class type, the mockup was:


Here’s what that looks like, now:

Everything except the “FOTM Tier” there is working right now. (Calculating “Optimal DPS” was a fun challenge! That’s actually calculating the maximum damage which can be inflicted over a 60 second duration, and then dividing by 60, so big ‘alpha strike’ attacks with long cooldowns don’t affect the value disproportionately.)

I’m currently partway through implementing the “Abilities” tab, and the “Stats” tab. Things are going a little slower than usual because I’m currently doing an apartment hunt; lots of time and energy is being lost to that right now! But there’s still progress. :slight_smile: I have some exciting stuff coming in a build in a day or two; not sure whether this updated class editing stuff will be ready in time for that build, but it’ll come in the near future!