For our game the player's occasionally required to enter numbers. Sometimes it's the number of units to buy and in that case typically a number between 1 and 10,000, other times it's goods to buy, in which case the span might be 0-100 instead.

I'm trying to avoid regular numeric keyboard input, both to make it more immersive, and also faster and easier to use.

Below is a sketch of my current method of input:


download bmml source – Wireframes created with Balsamiq Mockups

There's the current amount ("243"), and buttons to increase/decrease that amount by 1 (arrows). There's also the slider which allows for quickly either setting a rough amount or easily selecting the max or min value. The rough value by the slider could then be tweaked using the arrows - or that was the idea anyway.

The problem is I don't like it very much. It's not very pleasant. However I'm unable to find a better one.

This sort of design:


download bmml source

...isn't so good since the range might be large - the number of digits will vary too much.

Not using the slider is bad because who wants to tap 10,000 times to buy an army of 10,000?

Something like this could work, but feels cluttered and unwieldy - and not much of a usability win either:


download bmml source

Am I overlooking any alternatives?


Here's how the current version looks in context when the unit type is tapped. Note that there are several types of units (up to 6), the idea was that the interface allows browsing the different unit types and tap on the it to edit amount.

Purchase is designed to be done in a single sweep, since in the game mechanics a purchase is a single atomic game action.


download bmml source

  • 2
    Don't see what's wrong with the numeric keypad myself. Few have a problem using a numberpad to use a phone, or a calculator, or get money from an ATM. If you design it into the game rather than using the OS keyboard then there should be no problem making it 'immersive' to feel part of the game. Oct 26 '13 at 11:07
  • @RogerAttrill Typical input is max or min value, which isn't optimal for text input. Also, the game is presented in landscape mode. A numerical pad in the 1-2-3, 4-5-6, 7-8-9 layout takes a lot of room, which means very little room for other on-screen information that may be relevant to the input (e.g. looking consulting the amount of money owned when buying army). I will also need to handle min-max capping in a good way. But maybe I just haven't seen any good implementation of it? Do you have any good examples?
    – Nuoji
    Oct 26 '13 at 11:48
  • Your slider is designed to pick an absolute number. How about having a slider to pick the relative change: initially at 0, if you drag it a little to the right, the total value increases slowly, drag it further right, the value increases more quickly, release it, the slider reverts to 0. (So it's a little like -1000, -100, -10, 0, +10... buttons amalgamated into a slider.) Oct 27 '13 at 12:29

I'm trying to avoid regular numeric keyboard input, both to make it more immersive, and also faster and easier to use.

For the claimed I suggest re-think interaction when it's possible. Let's think of army. There is a little sense in army of 1 man or 66 ones. Also it's too fuzzy distinction between army of 1000 men and the one with 1002. In terms of a game such options are bad because user hardly can assess his choise between 1000 and 1002.

Take a look at the image to get the idea. It's deffinitely more immersive, faster and easier to use. User easily can repeat the interaction to buy army of 15 000 (10 000 + 5000). Try to apply this way to other artifacts, in many cases it can bring better UX.
enter image description here

The idea is to convert huge number scale (1–100 000) to a limited set of options. The options are meaningful to users and aligned to available money (resources). Then the numeric input task is transformed to selection task, which is not only more usable, but communicates with user on a task-specific language and helps user to make a choice.
enter image description here

  • What is the difference compared to the example with arrows? I don't think I quite understand your suggestion.
    – Nuoji
    Oct 27 '13 at 8:47
  • @Nuoji Sorry if I wasn't clear. The army size scale on the image isn't a slider, it's just example of dividing large scale to several chunks. Oct 27 '13 at 11:02
  • No, I meant is there a real difference between this and the last of my other examples, the one with buttons >, >> and >>> each linked to a different increment (+1, +10, +100 in that example).
    – Nuoji
    Oct 27 '13 at 11:20
  • @Nuoji For me there are two differencies: 1)You leave user with too many choices, which requires decision taking. Don't make him think ). 2)Limits are non-visible and not aligned to user's money. Oct 27 '13 at 11:38

Nothing will be faster for the user than a numeric input field when it comes to setting a precise value. Sliders are exceptionally difficult to set a precise value, and up/down buttons for increase/decrease take too long to use.

For the typical user, these are the most common use cases for numeric input:

  • Choose the current value
  • Choose the maximum value
  • Choose the minimum value
  • Increase or decrease by a specific value (could be 1, could be 100)
  • Choose a specific value

My recommendation would be to use a control similar to the HTML5 number input field paired with min/max buttons.

http://cssdeck.com/labs/2esyxtq8 (non-functional demo)

<input type="number" min="200" max="5000" />
<input type="button" value="Min" />
<input type="button" value="Max" />

enter image description here

Incrementing or decrementing a number doesn't have to stay static amount. For instance, on my dryer I can set how long it should run rather than use one of the presets. When I click the increase/decrease buttons, they go up/down by 1 minute. If I hold down the button, the first 2 steps will change by 1 minute, but the next steps will change by 5 minutes (eg. 10 minutes -> 11, 12, 15, 20, 25, etc.). Since a game is potentially looking at very large numbers, you may want to have multiple points where the step changes (1 -> 10 -> 100 -> 1,000 -> 10,000, etc.)

As a side note, I used to play Final Fantasy XI, which is well known for it's poor UI. If someone were to ask "why does the interface to X suck", the response would typically be "PlayStation 2 limitations" since the developers were not interested in maintaining 2 different clients (one for PC, one for PS2). As a result, everyone got the poorest experience possible.

Their method for number input was to use an input field that would not accept keyboard input. If you want to input the number 10, you would move the cursor to the left once and press up. For 10,000, the cursor would need to move to the left 4 times and then press up. This is ok for smaller numbers that are even values, but incredibly poor for very large numbers (1 million+) or irregular numbers (2957). It is not uncommon for a user to bid 100,000 on an item at the auction house that is only selling for 10,000, just because the poor user miscounted.

  • yes, but the question is explicitly what the alternatives are to both text field and slider.
    – Nuoji
    Oct 27 '13 at 8:46
  • I've amended my answer. As long as your numbers are going to be less than 1 million, the FFXI method of number input might work for you.
    – cimmanon
    Oct 28 '13 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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