I want to create a graphical interface for inputing skill build orders for an RPG game. A skill build is an ordered list of (skill, number) pairs, like this (see footnote):

(A x1) -> (B *) -> (C x2) -> (A *)

I want to create a graphical interface that can add items to this kind of list, preferably in any position of it.

The main idea I am having now is to make some sort of drag-and-drop interface, with icons representing the skills

current build = (A x1) -> (B *) -> ...
amount: [ 1 | 2 | 3 | 4 | * ] (radio buttons or drop-down selector)
skills: +---+  +---+  +---+
        | A |  | B |  | C |
        +---+  +---+  +---+

Clicking an icon would add the item-number combination to the end of the list (the most common place to add things to) and dragging it to a spot on the result list would cause it to be inserted there instead.

But I imagine having to do multiple clicks to select the number and the icon would be awkward. An alternative might be having a button for each possible pair:

+----+  +----+  +----+
|A  *|  |B  *|  |C  *|
+----+  +----+  +----+

+----+  +----+  +----+
|A x1|  |B x1|  |C x1|
+----+  +----+  +----+

+----+  +----+  +----+
|A x2|  |B x2|  |C x2|
+----+  +----+  +----+
//and so on

But then I think it would get way too cluttered.

What is the best way to input such a list of pairs?

Are there any places where a similar problem was solved and where I can take inspiration from?

Some design considerations:

  • I have 4-5 skills and the numbers range from 3-5 (and the * wildcard)

  • Some numbers (1 and *) will be selected more often then others (2,3,4). All skills are equally likely to be selected.

  • If we choose an asymmetrical design, skills should be prioritized over numbers.

  • I am primarily interested in obtaining a fast and clean workflow. It is OK if the final result ends up a little complicated or unintuitive.

    • This is not intended to be the default interface. I want this to be faster then the simple but slow interface where each skill is entered manually for each level.

For the curious, a pairing like

(A x1) -> (B *) -> (C x2) -> (A *)

can be interpreted as

As a first priority, level up A once
As a second priority, level up B whenever possible
As a third priority, level up C twice
As a fourth priority, level up the remaining levels of A

The main reason for using this is because describing directly what skill to take at each level is longer and less clear:

A, B, C, B, C, B, A, B ...  // this is simple, but less clear
  • What's the number? The rank of the skill or the number of times to train it? Does the wildcard just mean to train it until it's at whatever the maximum is? Nov 14, 2011 at 21:48
  • Its the number of times to train it. I took that part of to avoid clutter and make the question more generic, let me put it back in then...
    – hugomg
    Nov 14, 2011 at 21:53
  • This sounds similar to the skill queue feature in EVE HQ: evehq.net Nov 14, 2011 at 23:04
  • @missingno - what did you end up doing? Dec 30, 2011 at 14:06
  • @RogerAttrill: Real life caught up and I didn't get enough time to finish this part of my side project yet :(
    – hugomg
    Dec 30, 2011 at 14:33

1 Answer 1


You could use a single drag and drop action to pick a skill, drag it towards an amount to 'collect' it as you drag, and then continue dragging on towards a list of your skill build order and drop over an insertion point in the list.

This is illustrated by the sequence below:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

  • Really interesting! Do you know any place this is used (so I'd be able to take a look at it functioning) or did you just come up with the idea?
    – hugomg
    Nov 16, 2011 at 12:29
  • It's my own idea - based on something else I was considering for this question: two level selection. I adapted it for your question, but it's a similar concept. There's widgets out there where you can drag/drop items into a list which makes space for the drop, but I've never seen anything where you 'collect' information during the drag to combine a multi-step process into one action. If I had time I'd love to try it out. Maybe worth asking the OP on that question what they did and how it went? Nov 16, 2011 at 12:42
  • Must the user need to do the second drag? Could they instead choose to instead drag/drop the ABC onto the 1234* and it would then automatically plonk onto the end of the list by default. (Additionally, it should also be possible drag/drop the items in the build order to rearrange, and even possibly replacement ABC / 1234* dropped onto already added skill build items).
    – Erics
    Jan 1, 2012 at 5:51
  • @Erics - it's not a second drag it's a continued drag - ie one operation. It allows inserting into an existing list and anyway, you may not necessarily want to have to figure out the order in your mind before you start doing anything (eg - which pair do I need to do first). But yes - you could also drop over the middle column and have it auto-append to the list column. And also drag and drop within the columns to re-arrange as well - yes definitely. Jan 2, 2012 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.