4

This is my first UX question and Im a noob to UX and this forum so please let me know if you require more detail...

I'm designing a responsive order form, which has a range slider for quickly picking finding a price range. This dynamically changes the price in the page and is pretty fun to play with for the user. However, sliders don't seem to work very well in a mobile scenario, for touch and drag.

So is there a good way to show a range slider that is fun to use on mobile, that I'm not aware of? It needs to be HTML/JS built and usable within a browser. I'm looking for something different and fun to use, instead of the usual default dropdowns etc. Am i just day dreaming - or is there anything out there?

This is my slider that I want to make responsive:

enter image description here

Improve this question
3
  • Are you looking for a design solution, or for a module that implements a draggable slider?
    – Alex Feinman
    May 7, 2014 at 13:56
  • 1
    A UX / design solution or idea based upon the technologies I mention. For example a solution that could only be implemented in Flash or alike, just wouldn't work for my medium.
    – Karlgoldstraw
    May 7, 2014 at 14:07
  • 1
    What do you mean when you say the sliders "don't seem to work very well in a mobile scenario"?
    – Matt Obee
    May 7, 2014 at 15:26

2 Answers 2

Reset to default
4

A circle slider could give a higher and interest driven visual appeal. Below is an elaborate example from maniacdev.com Also, here is another and simpler example on CodePen Aside from a circle, I can't really think of any other options, because a range slider will be a range slider, a point that travels it's base to represent an increase or decrease in range. Although, the styling of a range slider can make a large impact and a lot of examples can be found here, good luck.

http://maniacdev.com/

Improve this answer
6
  • 2
    While that looks emotive, I see big drawbacks. The circle takes up much more space, so you can't show (for instance) the search results changing in real-time below the slider. Dragging circles is more awkward than straight lines. Most importantly: a circle suggests that the max and min value are the same (like in a color spectrum, or a selection of months). That really isn't the case here.
    – Peter
    May 7, 2014 at 15:52
  • In a mobile scenario, its doubtful the result gratification would be imperative. I agree that it's less utilitarian, I was just answering the question as it was asked, which was to provide "range slider that is fun to use on mobile." A circle doesn't mean they are the same, this example however does. A circle could represent completeness, 0-100% as well as negative values.
    – Brian Dillingham
    May 7, 2014 at 16:01
  • Fair enough, I do think it's an answer to the question. Just pointing out the drawbacks for the sake of completeness. A circle could represent anything, of course, but its real advantage over a line comes when the ends meet up. Otherwise the line is better, since points are further apart if they are less similar. With a circle, your two least similar points are right next to each other.
    – Peter
    May 7, 2014 at 16:04
  • Tis true, solved by a spacer between points and or different color start and end points.
    – Brian Dillingham
    May 7, 2014 at 16:15
  • 2
    A circle slider might be useful for selecting a circular interval, for example, hours for a daily timer.
    – Alex Feinman
    May 7, 2014 at 17:03
0

Have a look at the date range widget in Thunderbird's search:

A screenshot of Thunderbird's global search.

The widget first shows a histogram of where the search results fall along the given dimension. It then gives you sub-ranges to click on, so that you can zoom in and out. The advantage of taking the search results into account is that you can offer dynamically calculated ranges that give roughly equal amounts of results.

The drawback, of course, is that users have less freedom in picking their range.

Whether it's applicable depends on the details of your app, but it's one alternative at least.

As a heuristic, I'd say that sliders are good when users will know exactly what their preferred range is (eg. they know what their maximum price is if they're looking for a fridge) and this type of widget is good if users need more information to make that decision (ie. they have no idea what a normal power consumption is and they need to see the histogram to understand how many kWh a power-saving fridge consumes).

Improve this answer
3
  • Looks like a graph more than a range selection, which is a much more visually gratifying presentation but may not be an intuitive solution on mobile devices.
    – Brian Dillingham
    May 7, 2014 at 16:05
  • I guess it could use some more click affordance. For mobile you'd need to reduce the complexity and increase the clickable surface, but it's a starting point at least.
    – Peter
    May 7, 2014 at 16:08
  • Agreed =) I didn't even consider the potential for range presentations as range selectors.
    – Brian Dillingham
    May 7, 2014 at 16:11

Your Answer

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

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