How to design Cash Range Selection

At my job at dmcgroup, I’ve been involved with the UX design of a B2B web application for Austria‘s largest bank chain for quite a while. The application’s task is to monitor and maintain the bank‘s self service device infrastructure.

Recently, we added functionality to support filtering for either single cash amounts or cash ranges in various search masks of the application. For this occasion, I embarked on a small research on Cash Range Selection user interface patterns to challenge our design process assumptions.

What is Cash Range Selection?

Cash Range Selection is a common filter feature in various user interfaces such as e-commerce stores or in financial applications. In the B2B segment, users frequently apply it to filter items that match specific pricing or value criteria.

Users define a cash range by setting a minimum and maximum amount, using input patterns like sliders, plain input fields, or a combination of both. After confirming the selection, the system filters the search results to show only items within the specified range.

Cash Range Selection design patterns support people in narrowing down the number of matching results.

However, the right pattern to achieve the range selection depends on the use case details.

One doesn‘t fit all – Cash Range Selection use cases

The use cases behind selecting cash range filters can be quite diverse, most significantly differentiated by how much users value the definition of specific amounts for the task:

• Exact values don‘t matter – an approximate range is good enough for quick browsing
• A precise range matters – the desired amount range needs to be based on exact minimum and maximum values

The difference between the two use cases stems less from their B2C or B2B nature and more from how much clarity users have or need about the amount range in question.

Price range sliders are common in e-commerce websites. They cater to B2C use cases where approximate values suffice for quick product browsing, making precision less critical.

On the other hand, cash range selection in a B2C banking application requires the option to define exact values to guarantee precise filtering of transactions – at least additionally.

In the B2B application I am working on, we use cash range selection as a filter option in complex search masks. Depending on the search task, users often need exact range values, though approximate numbers suffice in some cases.

The Cash Range Selection Design Problem at hand

In our application, we already had search masks in place to find self service devices and transactions based on various search parameters. To better support bank employees with their tasks of finding transactions matching certain payment value criteria, we needed to add according filters.

Since none of this research tasks is the same, flexibility is key:

• Filter by just a single, exact cash amount
• Filter by a cash range
• Both options need to support inputting negative values as well
• Typically use precise values, but approximate values will also do for certain tasks

With this set of requirements, we looked at some best practice examples for cash range selection.

Design Patterns We Explored for Cash Range Selection

As mentioned earlier, there’s a wide field of Cash Range Selection use cases and therefor, a big amount of user interface patterns exist. I’ve listed some of the most common and widely used ones.

Ideal for quick exploration: Defining ranges with sliders

The range slider is a very common user interface element in online shops.

The slider features two interactive handles that represent the minimum and maximum values of the range which can be adjusted by dragging them along the slider. Corresponding labels display the minimum and maximum value.

Sometimes, range sliders also include optional input patterns for directly entering exact values as minimum or maximum, but it’s hardly required in e-commerce.

Range sliders can be quite useful and intuitive for exploring products within an approximate price range. They work best when defining exact values doesn’t matter, but an approximate range will do.
However, sliders also come with a few problems:

• Sliders are not very touch/mobile friendly as dragging a control over a touch screen can be quite difficult
• Thus, Sliders are quite inaccessible for people depending on keyboard navigation or screen readers
• The wider or denser the selectable range, the harder it gets to select a precise value or match a certain range using the slider

On top of these disadvantages, sliders are mostly used to define a range between positive cash values. The slider pattern is not flexible enough to optionally also include negative minimum and/or maximum values, which turned out crucial for our use case.

Defining exact Cash ranges using a single input

A simple single input field is usually the most usable and effective user interface pattern to input data. That’s also true for entering cash values. Here’s a short summary of advantages using an input field:

• Input fields are standard user interface elements and therefor are widely learned and common, they usually don’t require any instructions
• Input fields are accessible as they can be filled using keyboard input and therefor are accessible for impaired
• It’s the fastest way to enter a specific value
• An input field is flexible enough to support both entering a single value or defining a range

However, in our target application, searching for negative ranges is also a significant use case (searching for negative transactions within a certain range). That’s were using a single input becomes less elegant.

Not only isn’t entering a range the first thing that comes to mind when using a single input field, entering a range with two negative values looks ugly and poses usability risks.

Some disadvantages with using a single input field for our specific use case:

• Entering a range between negative values doesn’t quite work, due to “conflicting” hyphen and minus sign
• Since our cash input pattern features an integrated currency sign per default, it’s not quite suitable for entering ranges
• People are not used to enter a range in a single input field, thus instructions (input hint) would be needed

We had to come up with another solution.

Using two seperate inputs to solve the negative range problem

Most of the time in UX, resorting to the most basic thing will to the job. What could be more basic than offering two seperate input fields for the two values that define a range:

• Make the field for the maximum optional, so entering just a single amount is also possible
• Negative values can be typed into the field
• Due to the order of fields, their labels and a hyphen between the fields (hidden for screen readers), the form becomes quite legible

For our B2B use cases, the solution with two seperate input fields offered these advantages:

• The input pattern is legible and comprehensible and doesn’t need further explanation
• It’s straight forward to input exact amounts either for single amount or range, using the keyboard
• It’s totally flexible and works with each range amounts

Small details matter and require attention

There is no user interface pattern that works in every given context. Understanding use cases and usage contexts is key to crafting the right interface.

Designing cash range selection requires balancing usability, precision, and context-specific needs. While sliders can be convenient for quick, approximate filters, dual-input fields provide the accuracy required in B2B applications. This journey reaffirmed that understanding user needs and iterating on solutions are essential for crafting effective interfaces.