Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
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 Apr 5 '13 at 4:58
add comment

3 Answers 3

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

enter image description here

share|improve this answer
1  
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é Apr 5 '13 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 Apr 5 '13 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. –  TotemFlare Apr 5 '13 at 14:37
add comment

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.

share|improve this answer
add comment

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.

mockup

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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