Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Mobile Design Pattern: Inventory-Based Discrete Slider

Sliders are cool. When they’re done well, customers love to interact with them. When they’re not done well, they can cause a lot of frustration (not to mention lost sales) by standing between your customers and what they want. And getting them wrong is surprisingly easy.

In this article, we will present a solution, including the design and code, for a new type of Android slider to address common problems, along with a downloadable Android mini-app for you to try out. It’s a deep dive into sliders based on a chapter in Android Design Patterns. The experimental inventory-based slider we will look at would be at home in any application that asks for a price, a size, or any other faceted input within a widely distributed range.

Why Sliders? Link

Sliders are intuitive. They provide affordance, a quality that makes a control right for a particular task. They just feel right for dialing a value within a range. Sliders translate well from the physical world to touchscreens, where they look great and are easy to manipulate, without taking up a lot of space. Dual sliders in particular are great for limiting search filters and form values to a set range.

In the physical world, sliders serve a function similar to twist knobs. However, knobs are hard to “turn” on touchscreens, and they usually take up more space than sliders. For touchscreens, sliders are better.

Types Of Sliders Link

Sliders come in two types: single and double. Single sliders are best for entering one value. Dual sliders are great for searching within a range of values.

There are also two kinds of adjustments: continuous and discrete. Continuous adjustments are for indeterminate values in a range, such as a price or temperature. Discrete adjustments are for predefined values (such as clothing sizes). Both single sliders and dual sliders can take either kind of adjustment. Let’s look at some examples.

Zillow has customers use two single sliders with continuous adjustment to set a price range.

01-zillo-app-slider-opt-5001

The Zillow app uses two single sliders, both with continuous adjustment. (View large version2)

This real-estate app Trulia uses two dual sliders with continuous adjustments:

02-trulia-app-slider-opt-5003

The Trulia app uses two dual sliders with continuous adjustments. (View large version4)

Continuous adjustments for prices make sense. Why? Because price ranges are continuous. But they do allow for more precision than most shoppers care about. (A price difference of one cent is unlikely to make a customer reconsider a purchase.)

Discrete adjustments are different. They let you choose values, but only within predefined (i.e. discrete) increments. Facets like shoe size consist of discrete values; in the US and Western Europe, shoes are typically incremented in half-sizes: 6, 6.5, 7 and so on. You can’t buy shoes in a size of 6.25, so providing a control for this level of precision would not make sense.

One way to understand the difference is that single sliders with a low count of discrete values are similar to stepper controls: You can dial the value you want, but only from a predefined set.

03-dual-slider-opt-5005

This is an example of a dual slider with discrete adjustment stops. (View large version6)

Experimental Slider Patterns Link

Sliders with histograms and sliders based on inventory counts are two great experimental patterns that are variations on the standard slider. It’s unfortunate that they are not more common because they solve many of the problems that sliders can cause for users. We explain the problems with regular sliders in the “Caution” section below and detail the experimental solution in the “Super-Sliders” section (right after “Caution”).

So, at this point, you might be thinking, “Sliders sound great. What’s the downside?” Glad you asked.

Caution Link

Even the best patterns can go bad. Like Harvey Dent, the once loyal ally of Batman and Gotham City’s impeccably ethical district attorney, most things have a dark side. There’s a slippery slope between delight and dismay, and much like the Two-Face character who Dent becomes, sliders can be helpful or hateful. It all depends on how they’re implemented.

Here’s how to sidestep slider problems and keep your customers happy.

Make Sure Reasonable Values Can Be Entered Easily Link

Kayak has a continuous dual slider for filtering hotel prices (see screenshots below). To get a hotel in Los Angeles that you can afford on a humble mobile UX design consultant’s salary, you must place the pegs right on top of one another. This adjustment is anything but precise. For wide ranges, consider using a slider based on inventory counts, as explained in the “Super-Sliders” section coming up.

04-kayak-app-slider-opt-5007

The continuous price slider fails to dial a reasonable hotel price in Los Angeles on Kayak’s app. (View large version8)

Show the Range Link

Speaking of range, showing the actual range of prices available in an entire collection is a great idea, as shown in the Kayak screenshots above ($38 to $587), instead of using arbitrary numbers such as $0 and max. Neither Zillow nor Trulia show the true maximum and minimum associated with their local home inventory.

Imagine how useful these sliders would be if they stated from the beginning that they ranged between $476,000 and $3,234,700. Showing the range also helps to avoid dead zones, such as when you’re looking for a home in San Francisco priced below $476,000, which would yield zero results. Be aware of how filtering affects the inventory; setting the range for the overall collection without applying the filters is best.

Don’t Cover the Numbers Link

As the customer adjusts the slider, the values should appear above the pegs, where the user’s fingers would not cover them. Placing the numbers below or to the side of the slider is not as useful. Kayak’s slider (shown above) is good in this regard: The range is covered while the customer adjusts the slider, but the filter’s actual value is not, which is about the best you can do on a mobile device.

Opt for a Slider With Discrete Positions Link

Continuous sliders are sexy in principle, because you can dial an exact number and get just the inventory you want. But the reality is that sliders are hard to adjust precisely — both in the physical world and on touch devices. That’s why you almost never see a slider for volume adjustment on a stereo. Ironically, the larger the device, the harder that adjusting the slider precisely seems to be. This is Fitts’ law in action: The time required for an action depends on the distance and size of the target. In other words, adjusting a tiny peg in the middle of a large tablet is difficult.

Regardless of the screen’s size, adjusting a continuous slider precisely while being bumped around on a train is hard. (You have permission to refer to this hereafter as Nudelman’s law if you wish.)

Continuous dual sliders also make it easy to over-constrain the range. For example, creating a continuous slider that enables the customer to dial a price of $45.50 to $46.10 might yield zero results and would not serve the customer well. On the other hand, sliders with discrete positions (i.e. stops) are much easier to adjust. The chance of dialing a range that is too small is also less.

Super-Sliders Save The Day Link

How can you implement a dual slider so that the user is able to input a price range without running into the dreaded problem of zero results mentioned in the “Caution” section above? Here’s where the experimental patterns discussed earlier come in. These are like regular sliders slightly souped up — super-sliders, if you will. Let us explain.

Regular Slider Link

A slider could use discrete values arranged according to inventory counts. This type of slider is typically arranged in a linear pattern, which means that a certain distance of movement on the slider’s axis represents an equal absolute change in value. For example, in a five-position slider, the price would go from $0 to $100 in $20 increments:

05-linear-price-slider-opt-5009

Each mark on the axis represents an equal absolute change in value on a linear price slider. (View large version10)

Although this is intuitive, the design makes it easy for customers to come up empty-handed, especially if the range is wide and the inventory is not equally distributed.

As explained in the “Caution” section, a customer shopping for superhero capes might select a range for which the inventory is zero — say, $40 to $60 — not knowing that a whole closetful of capes are available in the $62 to $65 range — literally, For a Few Dollars More. (Apologies to Clint Eastwood and Westerns lovers everywhere.)

Super-Slider (With Zero-Results-Fighting Histogram) Link

This is where a slider with a histogram (as shown below) is helpful. The idea behind this experimental pattern is simple: The 50 to 100 pixels above the fixed-position slider is a histogram that represents the inventory in a particular section of the linear price range. A high bar represents a large numbers of items, and a proportionally short bar represents a smaller number of items. That’s it.

06-linear-histogram-slider-opt-50011

A linear price slider with histogram provides more information. (View large version12)

When using a slider with a histogram, you can still dial the part of the range with low inventory; but making that mistake accidentally is difficult because the inventory counts are clearly shown in the histogram. You can use a slider with a histogram where a standard discrete-position slider would be used; it would take up only a little more vertical space in exchange for a more satisfying customer experience.

No Room for a Histogram? Link

Another way to implement a slider without using histograms is to arrange the slider’s intervals based on the inventory counts. To do this, divide your entire inventory — say, 100 capes — into five intervals, and you’ll get 20 capes per interval. Now, scan the price range to figure out the price (rounded to the nearest dollar) that corresponds to the approximate inventory count of 20. Suppose the first 19 capes cost between $0 and $60 (remember that we’re assuming no inventory in the $40 to $60 range), the second 21 capes fall in the $61 to $65 range, and so on. Here is what such a slider might look like:

07-alternative-price-slider-opt-50013

The alternative price slider is based on the inventory counts. (View large version14)

Which implementation should you choose? It depends on the task. Most people don’t mind paying a few dollars outside of their budget, but they absolutely hate getting zero results. An inventory of fewer than 20 items in a given interval is not a satisfying result for most tasks, so use one of the other approaches to provide a better experience. Both a slider with a histogram and a slider based on inventory counts are far superior to the traditional slider. Breaking down the interval according to price is the more flexible approach because it shows the distribution clearly, while never yielding zero results. If the customer’s price range is larger than that of a single 20-item interval, then they can simply select a larger interval using the dual slider.

Both of the experimental sliders out-performed the regular slider in a study we did for a large retailer. Try it yourself. Create a quick prototype and do some “hallway usability.” Ask users to find some items around $70, and compare how they do with the histogram version, the inventory-based version and the regular version.

Tablet Apps Link

Sliders perform well in tablet apps. Make sure you heed the warnings in the “Caution” section; in particular, opt for a slider with discrete values to ensure accuracy, instead of a continuous slider (adjusting a continuous slider accurately on a large device is harder). Consider device ergonomics and avoid placing sliders in the middle of the screen. Instead, place sliders near the top of the screen, next to the right or left margin, optimized for one-handed operation with the thumb while the fingers hold on to the back of the tablet.

Depending on the design and purpose of your app, experiment by having two sets of sliders on the left and right sides of the screen, to be adjusted by the left and right hands, respectively. This would be especially interesting in apps such as music synthesizers. Finally, experiment with placing sliders vertically along the edge of the tablet (top to bottom), rather than horizontally from left to right, which is the easiest direction to adjust precisely with the thumb, while the fingers hold the back of the tablet.

Try It Out Link

To see how a slider app feels, a completed slider mini-app is available for you to download and try out. If you’re a developer, you can use it in your own project free of charge (see the “Code” section coming up). To install it, consider using an app installer such as the one made by FunTrigger15, which you can get free on the Play market. Here’s how it works. Connect your Android device to your computer. You should see the Android file-transfer window open automatically. If not, you might need to install software on your computer such as Android File Transfer (Mac users, take note). Download the APK source file 16, and place it in the “App Installer” directory (you might have to create the directory).

08-apk-file-opt-50017

Place the APK file in Android’s file-transfer window. (View large version18)

Now, you will be able to launch the app installer on your device. Navigate to the right directory, and tap the icon for the APK file that you want to install.

09-app-launcher-opt

Use the app launcher to install the app.

After a few customary Android disclaimers, the app will be installed in the normal app area on your device, and you can launch it from there.

Code Link

We’re providing you with the Java code19 and a demo of a simple dual slider with discrete stops.

This demo has five intervals between the minimum and maximum values, which we’ve arbitrarily set to $47 and $302. It’s arranged in a linear pattern, which means that a certain distance of movement on the slider’s axis represents an equal absolute change in value, making the increment value $51. In a real app, the values would most likely be derived from a database.

private static final int RANGE_MIN_VALUE = 47;
private static final int RANGE_MAX_VALUE = 302;
private static final int[] RANGE_STEPS = new int[] {
47, 98, 149, 200, 251, 302
};

While five is a good number in principle, you might want to experiment with intervals of seven or nine, depending on the size of the screen.

We recommend that you use the MOD function to determine how many capes need to be in each interval. Then, walk the interval to determine the price breakdown within each range. Finally, if MOD yields a remainder, you can add it to the last interval, or you could get fancier and loop through it to add one or more “excess” capes to each of the intervals. For example, if you have 103 capes, the intervals would be 21, 21, 21, 20, 20. This would more evenly distribute the inventory.

You could use the app as is for your own projects or as a starting point for something fancier. May we suggest a slider with a histogram or an inventory count?

If you do use the code, we’d love to see what you’ve done with it.

This code is provided free of charge and distributed under the GNU General Public License v3. See the README_LICENSE file for details.

Conclusion Link

  • Say it with us, “Done right, sliders delight.”
    Sliders turn your customers into empowered explorers and instant item locators. Don’t let a good pattern go bad: Remember these rules, and sidestep slider problems.
  • Make sure that reasonable values can be entered easily, and don’t cover the numbers.
    Say no to fat-fingered fumbling with small increments in large ranges. Speaking of ranges…
  • Show the range.
    Stamp out unhelpful labels like “$0” and “No limit.” Instead, show the actual minimum and maximum values that the customer can search within.
  • Be discrete.
    Continuous range sliders aren’t always the best choice. Discrete stops are better for small sets of predefined values, such as shoe sizes (and cape sizes.) And finally…
  • Zap zero results.
    Fight the frustrating fruitless search. Want to give your customers ninja navigational powers? Add a histogram, or use smart intervals based on your inventory.

That’s all there is to it. Working with sliders is no great mystery. You know the patterns. You’ve nabbed the code. Now there’s nothing to stop you from trying a slider.

Want more patterns? Android Design Patterns: Interaction Design Solutions for Developers21 has over 70, including a free design mini-course.

(al, ml)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2014/09/01-zillo-app-slider-opt.png
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2014/09/01-zillo-app-slider-opt.png
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2014/09/02-trulia-app-slider-opt.png
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2014/09/02-trulia-app-slider-opt.png
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2014/09/03-dual-slider-opt.png
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2014/09/03-dual-slider-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2014/09/04-kayak-app-slider-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2014/09/04-kayak-app-slider-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2014/09/05-linear-price-slider-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2014/09/05-linear-price-slider-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2014/09/06-linear-histogram-slider-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2014/09/06-linear-histogram-slider-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2014/09/07-alternative-price-slider-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2014/09/07-alternative-price-slider-opt.png
  15. 15 https://play.google.com/store/apps/details?id=com.funtrigger.appinstaller
  16. 16 http://provide.smashingmagazine.com/slider-demo-app.zip
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2014/09/08-apk-file-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2014/09/08-apk-file-opt.png
  19. 19 http://provide.smashingmagazine.com/slider-demo-app.zip
  20. 20 http://provide.smashingmagazine.com/slider-demo-app.zip
  21. 21 http://www.androiddesignbook.com/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Greg Nudelman's Design Caffeine designs stuff that works for today’s top companies.

Daria Kempka leads interactive marketing at Marquette University by day. By night, she is a senior producer at Design Caffeine.

  1. 1

    A slider with histogram? I think you overestimate the average visitor… if it would have any effect (unsure) it should at least have labels (20 items, 10 items etc) else visitors will have no idea what the histogram is for (if they know what a histogram is at all). I like the idea tho :)

    Wouldn’t it be better to have direct message/indicator of items?
    Something like:
    “20 items within this range” (beneath the slider)

    4
    • 2

      I agree the histogram confused me instantly and I’m a dev.

      I like the inventory based slider idea though.

      2
    • 3

      Well, without reading anything i saw it and understood it inmediately. I think it’s a great idea. But, if too much people doesn’t get it, it’s not a great idea.

      0
    • 4

      Agreed.

      The article nails it on the head with the remark, “most people don’t mind paying a few dollars outside of their budget, but they absolutely hate getting zero results.”

      I loved the concept of showing the inventory; however, the histogram itself made me stop and think for a few [valuable] seconds. As a user, without the context of the article, I would have been left confused and discouraged.

      0
      • 5

        Greg Nudelman

        October 8, 2014 6:39 pm

        Thank you for your comments! In our research we found that people who did not get the histogram, just ignored it and continued to use the site without any issues. When testing this feature it’s important to do *task-based* usability, not ask about a feature, as I talk about in my upcoming book, $1 Prototype: https://publishizer.com/1-prototype/ when you are focused on the task, you tend to filter out details you don’t find pertinent.

        In fact, none of the people we tested (over 20) had any issues with the histogram. And that was about 8 years ago! (NOTE: of course, this does not mean there AREN’T any issues or that there will not be any issues if you implement a histogram. You can’t prove a negative with usability testing. It just means what it means: that we did not see any issues.)

        Pete Bell, CEO of Endeca (acquired by Oracle), had this to say on the subject:

        “I think this is a great example where the devil is in the details. So, the concept of a range slider, particularly with histograms that show the distribution of what’s available, depending upon where you set your minimum and max, that it’s a very attractive concept. But if you don’t get the details right, you can actually have problems.
        So, I’d say as I would say with a lot of things it’s not that range sliders with histograms are uniformly intuitive. It’s that if they are designed well and you pay attention to the details of the design elements and follow some principles they can be extremely intuitive.” http://www.uie.com/BSAL/trans/mark_burrell_followup_transcript.html

        If you want to try an actual slider with histogram implementation, point your browser to: Prisjakt category browser: http://www.prisjakt.nu/kategori.php?k=1427

        Now isn’t that awesome?
        -Greg

        2
  2. 6

    Much like the shoe example, it is also worth mentioning that increases in value can be stepped according to the value range of the item using a pre-defined formula. For instance a $200-400 range might increase by $10 each step, whereas a range of $0-20 might increase by a dollar or even as little as $0.25. This will help the user focus on getting the most useful range instead of spending extra time to make sure the selection says $250 instead of $248 because their finger moved a bit when lifting it off the screen.

    As long as the steps make logical sense and aren’t strange values like $0.37, a dynamic way to increase steps based on price range might be more intuitive for the consumer.

    0
  3. 7

    I’m curious to know how people with disabilities find using sliders? People with motor control issues or the visually impaired? I know iOS does a pretty good job with it’s speaking functions for the visual impaired. Would a non-static control like a slider present challenges to text-to-speech?

    2
    • 8

      Mark, that’s a great question. We haven’t tested sliders with visually impaired users or those with motor control issues, so we can’t say for sure if sliders cause problems for them. Definitely worth investigating further.

      0
  4. 9

    Jessica Enders

    October 16, 2014 2:12 am

    Hi Greg

    Interesting article and the underlying ideas (i.e. preventing a zero response) are great ones. I’m still not convinced, though, that sliders are the best choice for the examples you’ve given. For instance, instead of your “super slider” for (discrete) price selection, why not use radio buttons with the number of matches shown in parentheses? Yes, it may not seem as “sexy”, but it’s far more accessible and usable (not to mention a much simpler solution).

    Furthermore, the discrete positions chosen by the business — to avoid the motor control issues that come with continuous sliders — often don’t suit the user. Australia’s two main real estate websites force your rental search into $50 categories (e.g. $300–$350), whereas my range may well be $340–$360. Why wouldn’t two text fields, one for each end of the range, be a better option in such a case?

    Look forward to hearing your thoughts,
    Jessica

    1
  5. 10

    Well, we have also used a slider in an android app that we developed recently as that induce users not to set the range of numbers. And also this has a great effects compared to the physical numbers added. This sliders as a default in android devices made us to think out of the box and built the app with vertical sliders. Here it is explained in an informative and interactive way: http://goo.gl/UJvu8G

    0
  6. 11

    RY

    0
  7. 12

    Good explanation. Can I expect few more sliders which will be user friendly?

    0

↑ Back to top