34

I have a mobile photo app that allows users to adjust things like brightness, contrast and saturation via sliders. The default value for all sliders is the center position between two extremes. While the values at the extreme ends of the scale are valid, and sometimes appropriate to what the user wants to do, in most cases cranking any of these things to the maximum or minimum produces ugly results. This is a problem because while doing UI testing I found that some users, to the extent that they use these sliders at all, only seem to bother trying the default (center), min and max values, and are then unsatisfied with the results.

I want to encourage them to mostly chose values in the range from half-way between the min and the center to half-way between the center and the max, while still allowing use of the min and max should the need arise. I'd rather not display any text to explain this because of limited screen real estate and also localization issues. I'd also rather not dodge the problem by introducing a weird non-linear response to the slider position or doing some automatic image processing magic under the hood to always make it look good no matter what the inputs, because it will make the interface less intuitive and predictable and some users might want the extreme behaviour.

How can I display a slider that visually conveys the meaning of "adjust in a range, but sticking mostly to the middle of the range"?

Edit: screenshot of current UI on small screen device.

Improve this question
12
  • 4
    Probably those test users are not the actual target users. They were just "testing" for the sake of testing, rather than trying to get the best result for their picture. If min and max values really produces unwanted results, then perhaps you could tweak those values at the back-end so that their effects are not too much.
    – Ades
    Commented Jan 23, 2015 at 9:42
  • Is it important that the photo isn't ugly? Is it being used for something important? If not why are you limiting me as a user? It's my photo I can do what I want with it.
    – Wander
    Commented Jan 23, 2015 at 10:18
  • 14
    Are you displaying a preview of the image on the same screen as the slider, showing the effect?
    – user31143
    Commented Jan 23, 2015 at 10:30
  • 3
    @Wander it's important if being ugly leads to user dissatisfacation. The intent is not to limit the inputs but just to suggest a sensible range while still allowing a larger range of possible values
    – samgak
    Commented Jan 23, 2015 at 10:51
  • 2
    @dan1111 yes I am there is a "live preview" of the effects as you move the sliders
    – samgak
    Commented Jan 23, 2015 at 10:51

11 Answers 11

Reset to default
36

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 between safe and extreme values.

enter image description here

Approach 2:- Another way can be by making the slider wider at the center and narrower at the ends.

Both the approaches visually indicates that it is safe to set value other than extremes.

Improve this answer
7
  • 4
    Using color as an indication is a good idea, however I would be worried that using green = safe, red = unsafe might cause accessibility problems for colour-blind users. I like the idea of making the slider wider at the center and narrower at the ends though.
    – samgak
    Commented Jan 23, 2015 at 14:43
  • 5
    For another example of this technique in action, see the settings panels for the software VirtualBox (christophdebaene.com/blog/wp-content/uploads/2011/10/…) - it scales to the current situation and lightly suggests the range you should be in.
    – Nick
    Commented Jan 23, 2015 at 18:02
  • 4
    @samgak: Since this is not a critical feature (the software remains perfectly usable even without it), using color cues is probably safe enough. Presumably, the intersection of the sets of people who are both a) colorblind, and b) dumb enough to crank the sliders to the max and complain about the results, is small enough to tolerate. But if you want to be sure, use a width cue also.
    – Ilmari Karonen
    Commented Jan 24, 2015 at 19:54
  • jfly.iam.u-tokyo.ac.jp/color has a color blind safe palette. I can't connect to the site right now, but there's a copy of the palette here: cookbook-r.com/Graphs/Colors_%28ggplot2%29, but you can consider dark/light contrast in addition to the red/green contrast as an option to make it easier to tell the difference.
    – Sardtok
    Commented Jan 25, 2015 at 14:07
  • Another way to do this, that I've seen around recently, is to shade the whole background of the slider, but according to the current position. For example, leaving it neutral towards the middle, but shading increasing amounts of orange and red towards the edges. Might be appropriate to something a little more important, though :)
    – hobbs
    Commented Jan 25, 2015 at 20:20
49

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 a live preview of the image, I don't see any problem with this aspect of the design.

I suspect the problem is something else. A few possibilities:

  • Testing not being similar to real life use (as suggested by Ades in a comment). The testers may not actually care about optimising the image and are just arbitrarily moving controls around.
  • A real problem with the quality of the effect could also be the reason testers don't like it.
  • Some other user interface design flaw is preventing users from understanding how to properly use the feature. For example, if your preview was too slow to appear, users might make a change before they saw the effect, then be disappointed. Or if the slider didn't have a typical appearance, the users might not understand that it was a slider.

Update: another possibility

  • The feature, not the interface, may be the thing users don't understand. As someone creating image editing software, you may assume that adjusting things like brightness and saturation is universally understood. But these may be more advanced features than you realize. Note how most consumer-oriented image software has features like "auto-enhance". That is good evidence that a significant portion of the market probably doesn't know what "saturation" means or what to do with it.
Improve this answer
10
  • Problem: processing takes a while and the user may forget what a version looked like while processing takes place.
    – Alec Teal
    Commented Jan 23, 2015 at 13:44
  • 2
    Missing the point, the spirit of the question is "how do I give the impression extremes are bad"
    – Alec Teal
    Commented Jan 23, 2015 at 15:02
  • 3
    @AlecTeal Sometimes the correct answer is to tell OP that they're looking for a solution to non-existent problem. We've all done it. I myself have discovered the correct way to do things from answers like this and have abandoned what I was originally trying to do.
    – MiniRagnarok
    Commented Jan 23, 2015 at 15:27
  • 1
    To address the other points: I don't agree that this is a non-existent problem. I tested this with users and it was definitely something that a small minority had a problem with. It could be a user interface design flaw, but I use standard icons for brightness/contrast/saturation that have been present on TV sets since the 80s, and the live preview update is almost instantaneous. The effect quality in preview is not perfect, but "power users" don't complain about it, so I don't think that's the reason that naive users encounter problems.
    – samgak
    Commented Jan 23, 2015 at 15:59
  • 2
    @samgak, Isn't the real problem the short length of the sliders? I can imagine that it may not be clear to users that they have more choices when they move the slider carefully with more precision. On a touch device it may not be easy to make such precise moves with a finger.
    – jazZRo
    Commented Jan 25, 2015 at 17:01
21

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.

That's how Apple does it with their default volume control element (at least in Europe), when it's set at a low level, with the first grab you can't set it to more than ~60% of the value (it stays stuck at 60% and blinks yellow). If you want to go higher, you have to move it again.

Improve this answer
4
  • 10
    That's also similar to some physical behaviours, for example a hot water shower handle that sticks in a notch or is actually blocked by a pin at a certain temperature and if you want to go further you have to also push a little button in while turning the handle so as to get the hotter water.
    – Roger Attrill
    Commented Jan 23, 2015 at 13:54
  • 3
    War emergency power: old fighter planes' throttles had stops that could be broken with enough force, allowing the engine to run above rated 100% rated power for short periods of time.
    – Jeffrey Bosboom
    Commented Jan 24, 2015 at 6:47
  • FWIW: the volume control behavior you're describing is not present in all regions. It may be specific to EU devices.
    – user46790
    Commented Jan 24, 2015 at 20:14
  • 1
    There is a danger here of making a UI that seems broken to the user.
    – kontur
    Commented May 30, 2015 at 18:05
10

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 values and the editable part of the spinbox also allows entry of the wider value range.

So long as the reduced range encompasses all that is generally needed, the extreme range accepted by the editable spinbox caters for the expert user who has a specific value in mind.

This also maps onto the way sliders are typically used:

  • Sliders are awkward 'fuzzy' controls, useful for exploring a range to see the effect.
  • Spinboxes easily allow controlled increments and setting of specific values.

I've found this a great way to keep users out of trouble whilst not preventing people from delving into less used values should they need to. It's also especially useful where the extreme range is significantly wider than the generally useful range.

Note that there are some discoverability issues to overcome, however there is a visual cue in that spinbox arrow buttons are disabled when the value is at a lower or upper limit. Swishing the slider to either extreme would in this case, not cause the arrows to be disabled, thus indicating that there is further usable value-space above or below.

Taking into account the fact that you don't need all the sliders onscreen at one time, here's just one mockup (excluding any other menu/ok/cancel controls etc) of how it could look on a mobile device - firstly by exploring the most useful range of values (eg -50 to +50) with the slider and then the more extreme value range (to +/- 100) with the spinbox.

enter image description here

Improve this answer
4
  • I like the concept. Will it work well on mobile, though?
    – user31143
    Commented Jan 23, 2015 at 13:04
  • That I haven't tested but I believe it could work with a simple well thought out design and clean but clear visual cues.
    – Roger Attrill
    Commented Jan 23, 2015 at 13:08
  • 1
    I like it, but I already have 4 sliders on screen (brightness, contrast, saturation, tone mapping). I think I need to have them all on screen at once because adjusting the colors is basically a multi-dimensional search problem: the user has to be able to adjust them all at once and see how they interact via the live preview. Adding another 4 spinboxes on top of that might be a bridge too far, however perhaps it might work on an "advanced options" screen.
    – samgak
    Commented Jan 23, 2015 at 14:46
  • @samgak As a side-note: Do you need all the controls displayed all the time. You could have quick access to each type of control (tab style), but only one of them actually active at any one time with the slider or whatever other controls you have for the current effect. That's not to say you can't show what values all the other effects currently have - you just don't need to clutter the screen with all the actual controls at once.
    – Roger Attrill
    Commented Jan 23, 2015 at 20:22
3

I've been in the same position a couple of times.

I really like to avoid using colors (like Chetan's answer).
Colors can give issues with people that are colorblind and visibility depending on the color of the background.

I provide the slider with small vertical marks (7-9 or so over the length of the slider bar) to indicate this has more steps than just min/middle/max.
Looks just like an physical volume control slider.
In reality the slider has a smooth gradient, but the marks indicate to the user that there is more possible than just the extreme positions.
Just about everyone seems to be able to grasp this concept at first glance.
It takes very little screen-space, the marks can be shorter than the width of the slider-knob. You can highly simplify the design to fit within a minimalist UI style and still not loose the visual cue to the user.

enter image description here

Improve this answer
2
  • I disagree with that approach. Even colorblind people can see some colors. This is a well studied problem, and there are good guidelines and good tools that can help you test your user interface for colorblindness.
    – Stephan Branczyk
    Commented Jan 25, 2015 at 23:08
  • @StephanBranczyk I happen to have 3 people around the office here that each have a different version of colorblindness. Another problem, that I suffer from personally is low contrast between bright hues (like Microsoft uses in Metro/Windows 8/Office 2010 and later). No matter what color-scheme any given application uses, there is always at least 1 of us that has issues with it when visual cues are ONLY presented with color. IMHO using ONLY color for visual cues is a big mistake. There should always be a cue in the form of a distinctive shape too.
    – Tonny
    Commented Jan 26, 2015 at 10:31
3

I have 2 suggestions:

  • Have presets in a dropdown box like "low", "medium", "high", & "manual". When the user chooses one of these setting, the user can see the slider moving around, but he cant actually slide it (because it's grayed-out). However, once the user selects "manual", the slider becomes available to slide around.

  • Have a % label next to the slider. The center position will read 0%. The far right will read something like 200%, and the far left will read -200%. Users will perhaps understand that they should then keep it between 100% and -100% and not go all the way to the extreme ends.

Improve this answer
1
  • Percentages should only be used if they have a real meaning, in my opinion.
    – user31143
    Commented Jan 26, 2015 at 16:03
1

The problem is that there are two different cases. Some users, like myself, tend to prefer choosing from a small set of presets while others prefer the slider. Perhaps you should provide two different modes to address these two cases. You keep the slider mode for those people who want it, and you add a discrete mode for those who would prefer it. I imagine discrete mode might look a bit like picking filters in Instagram but with fewer choices.

Improve this answer
1

What about giving some sort of visual warning when the slider is set to a value out side the "normal" range.

For example, it could display an explanation mark (!) that could be colored appropriately, could be brighter than the slider, might bounce briefly when an extreme value is selected or (once you're really tired of trying to accommodate the few possible users who will probably never be able to use it correctly yet will still complain about it being a problem with your app) a LARGE RED flashing cautionary symbol (but not flashing so fast as to trigger a possible seizure).

I like using a soft, slowly pulsating glow of a different hue than the slider is normally shown to indicate a questionable setting. Also, several of the ideas suggested could be combined in some way if it helped overall.

Improve this answer
2
  • Did you read Chetan's answer yet? In my opinion, letting the user know the range before he touches the slider really beats the idea of letting the user know about it after the fact.
    – Stephan Branczyk
    Commented Jan 25, 2015 at 23:29
  • Actually I did read his answer and had originally thought of that combined with a warning such as I am suggesting but decided to focus on what I was adding as a possibility thinking that the OP could combine ideas from those received to create the desired effect. I've edited my answer to add this to it.
    – Zhora
    Commented Jan 25, 2015 at 23:36
1

In the Nokia Camera application on my Lumia 1020, elements take on a red underline when the semi-circle sliders are pushed into inadvisable ranges.

This seems like good design to me because it uses behind-the scenes logic to determine what settings are presenting a problem in what combination of ranges and allows me to adjust them until the red underlines go away or simply proceed in taking the (bad) picture without too much intrusion.

UI of Nokia Camera application

Improve this answer
1

Use a circular (rotary) slider that has no end points. Have the 0-180 degrees map to 0-100% and 180-360 map to 100-0%.

A circular slider has no minimum or maximum positions.

Improve this answer
1
  • This doesn't help in any way. The user is not discouraged from setting an extreme value, which is what OP asked for.
    – iFreilicht
    Commented May 2, 2017 at 13:55
1

This isn't exactly a slider, but perhaps one might find this relevant anyway. Here's what Apple does in iOS 8 for the volume indicator:

  • The title changes from "Headphones" to "High Volume"
  • The value indicator dots change from white to yellow and red.

iOS 8 headphones volume HUD

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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