Tag Info

Hot answers tagged

45

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 ...


30

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 ...


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 ...


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.


19

Make your slider stick (ignore further touch input) at about 70% of the range, that will make the user think they've reached 100% of the slider for a few seconds where they're looking at their image preview. If they still want to set it to 100%, they will have to release and "grab" (touch and hold) that slider again to set it to their desired position. ...


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

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 ...


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 ...


13

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 ...


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 ...


13

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.


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% ...


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, ...


7

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 ...


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 ...


7

My intuition says that showing the padlock icon on the slider handle is a bad idea. This is ambivalent and could also try to communicate, that the slider is locked in that particular value (as opposed to the sliding mechanism being locked). If you want to display a padlock icon, maybe do so left or right of the slider. The common standard for disabled ...


7

Place a semitransparent box over the slider, with a diagonal label "Premium feature" across it. This design can also be applied to an other control.


7

Try Recommending instead of showing equal choices. The paradox of choice is a funny thing. You can give someone so many options that they no longer have any options at all. There are plenty of psychological studies that show how paralyzing too many choices can be. Presenting tons of options can be a barrier to entry. In order to combat such analysis ...


6

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.


6

Slider has more cognitive load for a user. Also interaction implementation using slider could lead to some time losses. In a scenario when user keep in mind the intended price range for a product, possible issues are: User should constantly map the intended number and slider position. Even if the intended number is displayed in the slider, some users ...


5

That's a really cool interaction but it's not standard. Sliding across a row is the deletion gesture for Android notifications. You have to educate your users about this control by either letting them stumble across it by accident or creating a first-use experience to show all the cool tricks. See Invitations section in Mobile Design Pattern Gallery for ...


5

Depends on the use case. In general, a horizontal slider is used for adjusting a property of something, and a vertical slider (in the context of a scrollbar) is used for scrolling the view of your application.


5

Sliders give free choice of the price range. Problems with Sliders However, since they are usually one of multiple criteria, and the majority of the screen should present results rather than the filter, they are usually quite small. Picking a specific price requires pixel-perfect positioning (or - in case of a hard limit - isn't even achievable). Range ...



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