Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 3 down vote favorite
1

I've got a web app with two related UIs for adjusting a value. The first allows the user to add or subtract up to 100% of the amount. It's for an estimate, so rough ranges (e.g. every 10%) would be fine, or a continuous selection would work as well. The second selects a percentage of the available range in discrete steps e.g. 100%, 75%, 50%, 25%, 10%.

I've thought of two main UIs -- select boxes:

select box adjustment UI

and sliders:

slider adjustment UI

Note: in the range slider, the upper value will be locked to 100%. Also, FWIW, there will be several rows of these, if it makes a difference:

enter image description here

It seems to me that the advantages of the select boxes are that they're native controls, which always brings a certain richness of interaction, and they're perhaps a bit more explicit in their text. The sliders, OTOH provide a visual indicator, as well as a numeric one. Any other pros and cons of each design? Any other designs I should consider?

share|improve this question
The selection of a range shows nicely that the text 'Top 50%' makes is more explizit/clear, and can help to put the whole selection more into context. I wonder if some dynamically changing text (e.g.) underneath the slider would help to add the same level context? – greenforest Sep 23 '12 at 12:35
1  
If you are going to lock the 100% of the range slider in place, then I suggest you don't use a range slider at all. The handle suggests that you can move it, and it will be frustrating if you can't. Simply color that side of the slider as you are doing now, but don't display the handle at 100%. – André Sep 24 '12 at 7:21
@Fresheyeball: as it says above, "web app" – sprugman Sep 24 '12 at 15:12
@sprugman sorry. Just desktop web app, or mobile web app, or both? – Fresheyeball Sep 24 '12 at 15:26
@Fresheyeball the target is desktop – sprugman Sep 24 '12 at 15:29

1 Answer

up vote 1 down vote

Another option would be radios.
If values are ballpark, then a set of radios associated to reasonable values would let your users pick their choices with single clicks.
If the budget allows, I'd create a control made of a stripe of radios with a js function to somehow highlight all the radios up to and including the selected one.
This would match single-click selection with visual feedback.
Notice that the radios need not be visible. With a bit of js I hide them, showing only their labels. As clicking the related label trips the button, you don't need it to be visible. It will only show in browsers unable to run your js, and in screen readers.

share|improve this answer
@sprugman: I created this fiddle to illustrate my suggestion: jsfiddle.net/VqR63/2 The idea is to make the usr do the less possible. compare with opening a dropdown and choosing, for example. Or with clicking a small target (slider handle) and precisely dragging it. – Juan Lanus Sep 24 '12 at 13:11
now jsfiddle.net/VqR63/5 – Juan Lanus Sep 24 '12 at 13:42
Not sure I want to introduce a brand new control type, but +1 for the suggestion and the fiddle, for sure. – sprugman Sep 24 '12 at 15:13
(I like the way this degrades, as well.) – sprugman Sep 24 '12 at 15:29

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.