The design I'm working on has the user assigning a value to each item, then if the value is more than 1, a second dependent attribute appears (as shown). I want the numbers to be large and not default to an ugly and busy text box. However, the only solution I could think of is an even uglier and busier -/+ button combo which is also incredibly space expensive (and, I've found, nearly impossible to fit in mobile mode).

Is there a better way to do this?

enter image description here

  • 2
    As it stands there isn't enough information in this question to be able to answer it. How likely is it that users will want any attribute to be significantly different from its starting value? Is this information something the user is very used to entering like a birth date or credit card number? How important are updates to the visual style of the numbers to the numbers themselves (e.g. if changing one number would dramatically affect other numbers, waiting for a field to lose focus is probably going to cause issues)?
    – Kit Grose
    Commented Apr 5, 2013 at 4:58
  • Did you ever find an answer to this? Maybe you could just write an answer yourself or accept whichever helped you solve the problem?
    – Luciano
    Commented Aug 21, 2019 at 9:18

3 Answers 3


What about the following UI controls: textfields (restricted to numbers) to access any number a user need.

enter image description here

  • 2
    I find that standard UI control to be one of the worst ever invented. The tiny + and - buttons are very hard to acquire, making operation on them very slow. On touch, they are plain impossible to use.
    – André
    Commented Apr 5, 2013 at 7:05
  • 2
    A good innovation (which I first noticed in photoshop) is the ability to increment and decrement using the up and down cursor keys and the scroll wheel. Then, the +/- buttons are just there as a hint to make that shortcut a little more discoverable. In the same way nobody clicks the arrow buttons on the scrollbar anymore.
    – Peter
    Commented Apr 5, 2013 at 10:52
  • @André It's true that this design is less usable on smaller textfield. Combining it Peter's answer below would address this.
    – SuperFluxx
    Commented Apr 5, 2013 at 14:37

Plus/minus buttons as a UI for picking a value can be an acceptable solution, but only in specific cases, such as:

  • The range of possible choices is small (so the user isn't left clicking 20 times)
  • There is an immediate visible effect when changing the value (e.g. updating a graph)

If the number of choices is relatively small, you could just use a drop-down select box. This would allow you to style the number quite large, and to change it you simply click/tap the number to open the select box.


You can try the following approach: normally the numbers appear as-is, without any additional buttons or textboxes. However when the user touches the number, a small slider appears underneath, with labels "+" and "−" at the ends. Sliding the number to the right would increase its value (the speed of increase depends on the distance from the center of the slider), and sliding to the left reduces it. When the user releases her touch, the number moves back to the original position, lined up with the rest of the numbers.


download bmml source – Wireframes created with Balsamiq Mockups

If horizontal space is really at a premium, you can make the slider vertical instead, in which case when adjusting a number you would dim down all other numbers and paint the controls on top some of them.

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.