Tag Info

Hot answers tagged

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


20

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


19

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


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

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

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


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


9

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.


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.


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.


4

I would use the second concept, but with a few significant changes. First, this is not a slider, these are distinct choices; radio buttons would be the more appropriate Windows control for this selection. The most appropriate similar example is a survey where you rate your customer service. Second, since it is a continuous scale from worst to best, I would ...


4

Are sliders absolutely out? Could you 'make sliders more bearable' for your client - some kind of 'custom' slider that eases the pain that sliders can often have. For example, sliders could have 'magnetic lock points' when you get to default or historical values. Spinboxes too, could be customised to pause spinning for a short while when they reach a ...


4

If you automatically change some text input, the user may not notice that it has been changed. That will lead to a mismatch between what they expect and what happens. I can see two possible solutions to this: Only allow the value to be changed with the slider, and make the input field a read only field. This is the simplest to do, and I believe the ...


4

Why don't you display your three options? It's makes perfect sense, the way you explained it: download bmml source – Wireframes created with Balsamiq Mockups That 10 means "never", in your example, does not make obvious sense, though. If you do want to keep the one range input control, you could just write out what it means in a label. At ...


4

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


4

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


4

2 arguments in favor of sliders: If I'm shopping for foo, I'm usually operating with an upper price boundary but not a lower one. Not always, but usually. A slider lets me keep my lower limit at $0 while I tweak my upper limit. Links to set price ranges force me to chunk out my search for the perfect foo (click link > scroll through lowest price range > ...


3

The mousewheel has a very specific functionality that users know well - it scrolls the page. You're suggesting that one widget hijack it, probably without a good visual clue that would explain what's going on, and use it to a completely different end. So on my whole page it behaves as usual, and then there's one area that changes this behavior, and you can't ...



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