Mobile Design Pattern: Inventory-Based Discrete Slider

Mobile Design Pattern: Inventory-Based Discrete Slider

• By Greg Nudelman Daria Kempka


• October 8th, 2014


• AndroidDesign PatternsUser Experience


• 2 Comments

Sliders are cool. When they’re finished well, business adore to correlate with them. When they’re not finished well, they can means a lot of disappointment (not to discuss mislaid sales) by station between your business and what they want. And removing them wrong is surprisingly easy.

In this article, we will benefaction a solution, including a settlement and code, for a new form of Android slider to residence common problems, along with a downloadable Android mini-app for we to try out. It’s a low dive into sliders formed on a territory in Android Design Patterns. The initial inventory-based slider we will demeanour during would be during home in any focus that asks for a price, a size, or any other faceted submit within a widely distributed range.

Why Sliders?

Sliders are intuitive. They produce affordance, a peculiarity that creates a control right for a sold task. They usually feel right for dialing a value within a range. Sliders interpret good from a earthy universe to touchscreens, where they demeanour good and are easy to manipulate, though holding adult a lot of space. Dual sliders in sold are good for tying hunt filters and form values to a set range.

In a earthy world, sliders offer a duty identical to spin knobs. However, knobs are tough to “turn” on touchscreens, and they customarily take adult some-more space than sliders. For touchscreens, sliders are better.

Types Of Sliders

Sliders come in twin types: singular and double. Single sliders are best for entering one value. Dual sliders are good for acid within a operation of values.

There are also twin kinds of adjustments: continual and discrete. Continuous adjustments are for indistinct values in a range, such as a cost or temperature. Discrete adjustments are for predefined values (such as wardrobe sizes). Both singular sliders and twin sliders can take possibly kind of adjustment. Let’s demeanour during some examples.

Zillow has business use twin singular sliders with continual composition to set a cost range.

¹

The Zillow app uses twin singular sliders, both with continual adjustment. (View vast version²)

This real-estate app Trulia uses twin twin sliders with continual adjustments:

³

The Trulia app uses twin twin sliders with continual adjustments. (View vast version⁴)

Continuous adjustments for prices make sense. Why? Because cost ranges are continuous. But they do concede for some-more pointing than many shoppers caring about. (A cost disproportion of one cent is doubtful to make a patron recur a purchase.)

Discrete adjustments are different. They let we name values, though usually within predefined (i.e. discrete) increments. Facets like shoe stretch include of dissimilar values; in a US and Western Europe, boots are typically incremented in half-sizes: 6, 6.5, 7 and so on. You can’t buy boots in a stretch of 6.25, so providing a control for this spin of pointing would not make sense.

One proceed to know a disproportion is that singular sliders with a low count of dissimilar values are identical to stepper controls: You can dial a value we want, though usually from a predefined set.

⁵

This is an instance of a dual slider with dissimilar composition stops. (View vast version⁶)

Experimental Slider Patterns

Sliders with histograms and sliders formed on register depends are twin good initial patterns that are variations on a prevalent slider. It’s hapless that they are not some-more common since they solve many of a problems that sliders can means for users. We explain a problems with unchanging sliders in a “Caution” territory subsequent and fact a initial resolution in a “Super-Sliders” territory (right after “Caution”).

So, during this point, we competence be thinking, “Sliders sound great. What’s a downside?” Glad we asked.

Caution

Even a best patterns can go bad. Like Harvey Dent, a once constant fan of Batman and Gotham City’s impeccably reliable district attorney, many things have a dim side. There’s a sleazy slope between pleasure and dismay, and many like a Two-Face impression who Dent becomes, sliders can be useful or hateful. It all depends on how they’re implemented.

Here’s how to equivocate slider problems and keep your business happy.

Make Sure Reasonable Values Can Be Entered Easily

Kayak has a continual twin slider for filtering hotel prices (see screenshots below). To get a hotel in Los Angeles that we can means on a common mobile UX settlement consultant’s salary, we contingency place a pegs right on tip of one another. This composition is anything though precise. For far-reaching ranges, cruise regulating a slider formed on register counts, as explained in a “Super-Sliders” territory entrance up.

⁷

The continual cost slider fails to dial a reasonable hotel cost in Los Angeles on Kayak’s app. (View vast version⁸)

Show a Range

Speaking of range, display a tangible operation of prices accessible in an whole collection is a good idea, as shown in a Kayak screenshots above ($38 to $587), instead of regulating capricious numbers such as $0 and max. Neither Zillow nor Trulia uncover a loyal extent and smallest compared with their internal home inventory.

Imagine how useful these sliders would be if they settled from a commencement that they ranged between $476,000 and $3,234,700. Showing a operation also helps to equivocate passed zones, such as when you’re looking for a home in San Francisco labelled subsequent $476,000, that would produce 0 results. Be wakeful of how filtering affects a inventory; environment a operation for a altogether collection though requesting a filters is best.

Don’t Cover a Numbers

As a patron adjusts a slider, a values should seem above a pegs, where a user’s fingers would not cover them. Placing a numbers subsequent or to a side of a slider is not as useful. Kayak’s slider (shown above) is good in this regard: The operation is lonesome while a patron adjusts a slider, though a filter’s tangible value is not, that is about a best we can do on a mobile device.

Opt for a Slider With Discrete Positions

Continuous sliders are voluptuous in principle, since we can dial an accurate series and get usually a register we want. But a existence is that sliders are tough to adjust precisely — both in a earthy universe and on reason devices. That’s since we roughly never see a slider for volume composition on a stereo. Ironically, a incomparable a device, a harder that adjusting a slider precisely seems to be. This is Fitts’ law in action: The time compulsory for an transformation depends on a stretch and stretch of a target. In other words, adjusting a tiny brace in a center of a vast inscription is difficult.

Regardless of a screen’s size, adjusting a continual slider precisely while being bumped around on a sight is hard. (You have accede to impute to this penance as Nudelman’s law if we wish.)

Continuous twin sliders also make it easy to over-constrain a range. For example, formulating a continual slider that enables a patron to dial a cost of $45.50 to $46.10 competence produce 0 formula and would not offer a patron well. On a other hand, sliders with dissimilar positions (i.e. stops) are many easier to adjust. The possibility of dialing a operation that is too tiny is also less.

Super-Sliders Save The Day

How can we exercise a twin slider so that a user is means to submit a cost operation though regulating into a dreaded problem of 0 formula mentioned in a “Caution” territory above? Here’s where a initial patterns discussed progressing come in. These are like unchanging sliders somewhat souped adult — super-sliders, if we will. Let us explain.

Regular Slider

A slider could use dissimilar values organised according to register counts. This form of slider is typically organised in a linear pattern, that means that a certain stretch of transformation on a slider’s pivot represents an equal comprehensive change in value. For example, in a five-position slider, a cost would go from $0 to $100 in $20 increments:

⁹

Each symbol on a pivot represents an equal comprehensive change in value on a linear cost slider. (View vast version¹⁰)

Although this is intuitive, a settlement creates it easy for business to come adult empty-handed, generally if a operation is far-reaching and a register is not equally distributed.

As explained in a “Caution” section, a patron selling for superhero capes competence name a operation for that a register is 0 — say, $40 to $60 — not meaningful that a whole closetful of capes are accessible in a $62 to $65 operation — literally, For a Few Dollars More. (Apologies to Clint Eastwood and Westerns lovers everywhere.)

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

This is where a slider with a histogram (as shown below) is helpful. The thought behind this initial settlement is simple: The 50 to 100 pixels above a fixed-position slider is a histogram that represents a register in a sold territory of a linear cost range. A high bar represents a vast numbers of items, and a proportionally brief bar represents a smaller series of items. That’s it.

¹¹

A linear cost slider with histogram provides some-more information. (View vast version¹²)

When regulating a slider with a histogram, we can still dial a partial of a operation with low inventory; though creation that mistake incidentally is formidable since a register depends are clearly shown in a histogram. You can use a slider with a histogram where a prevalent discrete-position slider would be used; it would take adult usually a tiny some-more straight space in sell for a some-more gratifying patron experience.

No Room for a Histogram?

Another proceed to exercise a slider though regulating histograms is to arrange a slider’s intervals formed on a register counts. To do this, order your whole register — say, 100 capes — into 5 intervals, and you’ll get 20 capes per interval. Now, indicate a cost operation to figure out a cost (rounded to a nearest dollar) that corresponds to a estimate register count of 20. Suppose a initial 19 capes cost between $0 and $60 (remember that we’re presumption no register in a $40 to $60 range), a second 21 capes tumble in a $61 to $65 range, and so on. Here is what such a slider competence demeanour like:

¹³

The choice cost slider is formed on a register counts. (View vast version¹⁴)

Which doing should we choose? It depends on a task. Most people don’t mind profitable a few dollars outward of their budget, though they positively hatred removing 0 results. An register of fewer than 20 equipment in a given interlude is not a gratifying outcome for many tasks, so use one of a other approaches to produce a improved experience. Both a slider with a histogram and a slider formed on register depends are distant higher to a normal slider. Breaking down a interlude according to cost is a some-more stretchable proceed since it shows a placement clearly, while never agreeable 0 results. If a customer’s cost operation is incomparable than that of a singular 20-item interval, afterwards they can simply name a incomparable interlude regulating a twin slider.

Both of a initial sliders out-performed a unchanging slider in a investigate we did for a vast retailer. Try it yourself. Create a discerning antecedent and do some “hallway usability.” Ask users to find some equipment around $70, and review how they do with a histogram version, a inventory-based chronicle and a unchanging version.

Tablet Apps

Sliders perform good in inscription apps. Make certain we mind a warnings in a “Caution” section; in particular, opt for a slider with dissimilar values to safeguard accuracy, instead of a continual slider (adjusting a continual slider accurately on a vast device is harder). Consider device ergonomics and equivocate fixation sliders in a center of a screen. Instead, place sliders nearby a tip of a screen, subsequent to a right or left margin, optimized for one-handed operation with a ride while a fingers reason on to a behind of a tablet.

Depending on a settlement and purpose of your app, examination by carrying twin sets of sliders on a left and right sides of a screen, to be practiced by a left and right hands, respectively. This would be generally engaging in apps such as song synthesizers. Finally, examination with fixation sliders plumb along a corner of a inscription (top to bottom), rather than horizontally from left to right, that is a easiest instruction to adjust precisely with a thumb, while a fingers reason a behind of a tablet.

Try It Out

To see how a slider app feels, a finished slider mini-app is accessible for we to download and try out. If you’re a developer, we can use it in your possess plan giveaway of assign (see a “Code” territory entrance up). To implement it, cruise regulating an app installer such as a one finished by FunTrigger¹⁵, that we can get giveaway on a Play market. Here’s how it works. Connect your Android device to your computer. You should see a Android file-transfer window open automatically. If not, we competence need to implement program on your mechanism such as Android File Transfer (Mac users, take note). Download a APK source record ¹⁶, and place it in a “App Installer” office (you competence have to emanate a directory).

¹⁷

Place a APK record in Android’s file-transfer window. (View vast version¹⁸)

Now, we will be means to launch a app installer on your device. Navigate to a right directory, and daub a idol for a APK record that we wish to install.

Use a app launcher to implement a app.

After a few prevalent Android disclaimers, a app will be commissioned in a normal app area on your device, and we can launch it from there.

Code

We’re providing we with a Java code¹⁹ and a demo of a elementary twin slider with dissimilar stops.

This demo has 5 intervals between a smallest and extent values, that we’ve arbitrarily set to $47 and $302. It’s organised in a linear pattern, that means that a certain stretch of transformation on a slider’s pivot represents an equal comprehensive change in value, creation a increment value $51. In a genuine app, a values would many expected be subsequent from a database.

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

While 5 is a good series in principle, we competence wish to examination with intervals of 7 or nine, depending on a stretch of a screen.

We advise that we use a MOD duty to establish how many capes need to be in any interval. Then, travel a interlude to establish a cost relapse within any range. Finally, if MOD yields a remainder, we can supplement it to a final interval, or we could get fancier and loop by it to supplement one or some-more “excess” capes to any of a intervals. For example, if we have 103 capes, a intervals would be 21, 21, 21, 20, 20. This would some-more uniformly discharge a inventory.

You could use a app as is for your possess projects or as a starting indicate for something fancier. May we advise a slider with a histogram or an register count?

If we do use a code, we’d adore to see what you’ve finished with it.

This formula is supposing giveaway of assign and distributed underneath a GNU General Public License v3. See a README_LICENSE record for details.

• Download a finish source formula for a app.²⁰

Conclusion

• Say it with us, “Done right, sliders delight.”
  
  Sliders spin your business into empowered explorers and present object locators. Don’t let a good settlement go bad: Remember these rules, and equivocate slider problems.


• Make certain that reasonable values can be entered easily, and don’t cover a numbers.
  
  Say no to fat-fingered fumbling with tiny increments in vast ranges. Speaking of ranges…


• Show a range.
  
  Stamp out unhelpful labels like “$0” and “No limit.” Instead, uncover a tangible smallest and extent values that a patron can hunt within.


• Be discrete.
  
  Continuous operation sliders aren’t always a best choice. Discrete stops are improved for tiny sets of predefined values, such as shoe sizes (and garment sizes.) And finally…


• Zap 0 results.
  
  Fight a frustrating impotent search. Want to give your business ninja maritime powers? Add a histogram, or use intelligent intervals formed on your inventory.

That’s all there is to it. Working with sliders is no good mystery. You know a patterns. You’ve nabbed a code. Now there’s zero to stop we from perplexing a slider.

Want some-more patterns? Android Design Patterns: Interaction Design Solutions for Developers²¹ has over 70, including a giveaway settlement mini-course.

(al, ml)

Footnotes

1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/09/01-zillo-app-slider-opt.png


2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/09/01-zillo-app-slider-opt.png


3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/09/02-trulia-app-slider-opt.png


4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/09/02-trulia-app-slider-opt.png


5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/03-dual-slider-opt.png


6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/03-dual-slider-opt.png


7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/09/04-kayak-app-slider-opt.png


8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/09/04-kayak-app-slider-opt.png


9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/09/05-linear-price-slider-opt.png


10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/09/05-linear-price-slider-opt.png


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/09/06-linear-histogram-slider-opt.png


12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/09/06-linear-histogram-slider-opt.png


13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/09/07-alternative-price-slider-opt.png


14. 14 http://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 http://www.smashingmagazine.com/wp-content/uploads/2014/09/08-apk-file-opt.png


18. 18 http://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/

↑ Back to topShare on Twitter

Mobile Design Pattern: Inventory-Based Discrete Slider