Tag Info

Hot answers tagged

73

You could use a single bar, partitioned into four sections, labelled (or possibly coloured, as I've used in my example image) accordingly. The area where each partition meets would be resize handles, and resizing would accordingly expand and shrink the adjacent partitions, while the entire bar is capped at 100%. With a legend showing the exact percentages ...


46

No visual indicator should be needed, because this is a ubiquitous pattern. Nearly any image editing software has controls like this, and typically the results look bad at the extremes. This really isn't a problem as long as the user can instantly see the effect of moving the slider and correct it if they go too far. Given that you indicated that you have ...


31

Approach 1:- Extreme low and high values can be discouraged by color doing the slider using gradient coloring, as shown below:- Green color in the center to indicate permissible and safe value, ends are colored red to indicate permissible but unsafe values. colors should be linearly transitioned from green to red, since there is no clear demarcation ...


31

Is it necessary to use sliders? Note that a slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, volume or brightness control. If the user has to determine value, you can also give a simple value entry interface along with a "Remaining Value" indicator. Somewhat like this: ...


23

I like JohnGB's answer. It's less fiddly and more visible than the slider. For the sake of offering an alternative, if you do want to retain the slider, I would consider taking the 'never' option out. It doesn't really fit within the concept of a fixed range that the slider implies. In this version, you would only show the duration slider if "Delete ...


23

There are too many issues with overlaying two different dragable items on the same control. For one - if you want both values to be the same then it's going to be hard to see that there are two indicators, or if you then want to adjust one of them it's difficult to make sure you're grabbing the correct item. If there are only two drag points, then why not ...


22

There is also possibility using four sliders to normalize the results, that is, if they sum up to x%, multiply each value with 100/x. Then you wouldn't have to worry the user with constraints while retaining the proportions desired by the user.


21

The way that you have it now breaks the way that we expect numbers to work. 90 days is greater than 10 days, so the 90 days option is on the right. Never is the equivalent of infinity days, and so it should be the last option on the right. The far left option on the slider would correspond to never keeping them in the first place - assuming you want that ...


20

In English the word "slider" can be used to describe anything that slides - which is where your problem lies. Slider in terms of UI elements correctly applies to the first one. The second one is more correctly a carrousel.


17

If you use the slider, stick with it as the sole means of control. Extra controls add too much "tool time" in making the decision and may be confusing. The solution I propose is to simply reverse the fine concept you have. Make "Never" at the END of the slider and 1 as the lowest value on the slider. Set the slider to the default setting or a ...


15

The option of unlimited could be indicated by a simple checkbox which, when checked, disables the other field. This could be located in close proximity to the original field so its association is obvious. The control now becomes a coupled pair of controls that act as one. In the Bittorrent example in the question it would be positioned inside the field ...


15

download bmml source – Wireframes created with Balsamiq Mockups How about this? Just replace the checkboxes with radio buttons. Color channel - selecting Lossless disables the slider, and selecting Lossy enables it. Alpha channel - selecting Lossless sets the slider to 100% and selecting Lossy and setting it to 100% manually doesn't affect ...


15

Make the user's job easy Ask yourself if it's the system or the user that's concerned with 1% accuracy. Does the user really want to think about the distributed percentages, or just the priority of each point? Ask for simple relative values If a high level of precision is purely the domain of the system, consider asking your users how much they care about ...


14

Instead of a slider, how about a roller, only this time oriented horizontally? You can also get rid of the + and - buttons and you've got both fine and coarse control of the three values, little clutter, and a visual interface that would be obvious how to operate. Also, as @JOG notes, "the user in some cases will not be able to see the value in the ...


14

I think the concept of a locked slider that is not disabled is not something you need to put into practice, and you should just not show the slider in the first place. The clue to that is that you are asking Visually, what is the best way to show that a slider is locked? This is not your ultimate goal behind this - you have a bigger problem for which this ...


14

The conceptual model isn't "left arrow moves the elements left"; it's "left arrow takes me to the element on the left". With indirect manipulation like this, it's probably fair to assume that users are thinking in terms of the content they're consuming rather than the spatial projection of the UI.


13

If the slider is locked then don't show the slider at all--only show the element if the user can interact with it. Instead, just show a progress bar with the value: download bmml source – Wireframes created with Balsamiq Mockups Since the value is not editable, then your requirement is to inform the user what the value of the object is. The ...


11

I think the slider's acceptable, but you should lead with the benefits, so it looks something like: Faster Running Time |-----X---|---------| Better Quality People are smart enough to understand they're sacrificing one for the other, or at least not dumb enough to think they're going to get both.


11

Keep the slider, but put the 'never' selection on the right, and notch it so it appears apart from the finite values, as per the mockup below (mind my terrible MS Paint skills): This way, you can use a single UI control with an obvious model of operation (move the slider right for longer intervals, and vice-versa), but you don't have any ambiguity around ...


11

A pattern I have used previously combines a spinbox and a slider. The slider has a reduced range that is both easily usable and useful and which also makes it easier to use because it produces fewer values. The spinbox part however, has a wider range in the event that this is what the user really wants to do. The arrow buttons scan through the full set of ...


10

There is very simple logic behind it and that is difference of perspective. For example Make a frame of your fingers and like shown in the image below and turn your "frame" towards the right and see what happens. you move your frame right and your vision moves left. you move your frame left and your vision moves right. Now you have to pic one of the ...


10

Sliders are an enhancement--not a replacement for data entry. Anyone with motor skill difficulties may have trouble with sliders, so you want to ensure that the input values can also be manually entered via the keyboard. This requires that you make the value field visible and focus-able. The markup should produce an input field by default: Value: [50% ...


10

When one slider is adjusted, auto-adjust the remaining unlocked sliders to keep their total at 100%


9

How about rearranging that whole construct and change its wording? I would suggest something like [x] Limit download rate to [.......] kB/s with the [x] being your checkbox. If unchecked, the whole thing would become disabled. This would work similarly for your transcoding option - ask if the resolution should be changed at all, and if so, enable that ...


9

You can present a simple UI that allows all four values to be set at once. I created a mockup that illustrates this principle. Note that I haven't particularly focused on making sure that the UI doesn't always present exactly 100% (due to rounding). I leave that as an exercise to the reader. This control scheme is an "inverted control scheme," where the ...


8

First of all, I don't think using the scroll wheel for a slider is very practical: Depending on the scroll wheel speed, it can be uncontrollable (i.e. sliding too fast) Scrolling is usually vertical, sliders are horizontal (exception: multi touch input) It's not common, people won't expect it (I'm not aware of any application doing this) If you scroll, ...


8

You can use dynamic tooltip both to visualize the specificity of the control, and to show feedback for the slider control, see the picture: There is a scale with the fixed points within the tooltip. The left and right next points a bit transparent close to edges and the dots convey the continuity of the scale. If desired, "major" tick marks can be ...


7

If we study scrollbars only, the vast majority of mouses support vertical scrolling directly via the mouse wheel. Usually there's no easy way to scroll horizontally.


7

I like JohnGB's answer but I'd go even further and say that under most circumstances people wouldn't care to specify an exact value. They'd rather have a small handful of easy to understand choices, e.g. download bmml source – Wireframes created with Balsamiq Mockups Of course, it totally depends on who the user is and what they are doing. If ...



Only top voted, non community-wiki answers of a minimum length are eligible