I have a field in a system called "Score" which ranges from an undetermined negative number to an undetermined positive number. I am trying to figure out a UI for the user to create "bands" of numbers that can be labeled. (Example: Low, med, high)

The coverage of the bands has to be complete (to negative and positive infinity) and also be mutually exclusive (no overlap).

I have been experimenting with sliders, but this is a tricky problem. Has anyone done this before?

  • 1
    Can you post an example or two of the slides that you've been experimenting with?
    – Hisham
    Commented Dec 15, 2010 at 22:33
  • Its not much to look at but try: commadot.com/public/sliderBanding.pptx
    – Glen Lipka
    Commented Dec 15, 2010 at 23:46
  • What's the purpose, what will be done with these name/range combinations? Who'll be using it (a scientist of some kind?)
    – Tucker
    Commented Dec 16, 2010 at 17:03
  • Its probably a marketing person with an analytical bent or an analyst. So its a power user.
    – Glen Lipka
    Commented Dec 16, 2010 at 19:18

6 Answers 6


I'm a bit distressed that people living in a world exposed to things like Google Instant and StackExchange sites could possibly still be suggesting any "rigid" and "form-like" approaches! :-/ I'll paraphrase @BobbyJack and Wendy's by saying "Where's the beef?"

For instance, why should I have to sort the numbers as opposed to letting the computer do that for me? Can't I just give a list of split points and have it make the ranges? What if my data is coming from a source that has the numbers already in a list--how might automated processing help?

But it is better to light a candle than to curse the darkness, no? :) I'm on holiday and it's been a while since I've updated my blog, and Glen suggests there wasn't any prior art on this. So I thought I'd take a crack at coding it up which you can actually try out online (obviously "unfinished"):


(Update: 20-Mar-2015 I have added a short demo video.)

screenshot of the program in action

You can enter freeform text. It picks out everything that's a number, discards duplicates, and generates the ranges. If you want to add a new number you can just type it in there (nothing stopping you from putting on more buttons too, but it's kind of nice to just edit the list of split points independently).

The arrows let you specify the inclusive/exclusive boundaries of the range. Click on an arrow and it will jump into the adjacent band group and flip direction. (So in the above diagram, "blah" is for anything greater than 20 but less than 40... while 20 will go to "Default" and 40 will go to "next".)

I did a simple history mechanism, but one can envision something much better. Basically if you just add a new split point and it wipes out a mapping you've entered... it keeps that old value around along with the memory of the range it was associated with. For the moment I only automatically pull history entries back in if a range with the same numeric bounds comes back. It would also be possible to make suggestions out of the history, or drag and drop from it.

It's open-source, MIT licensed, and making it better is left as an exercise to the reader :)


  • Interesting approach. Im not sure why you think the others are bad, then again you are "hostile fork" so I guess its to be expected. In your example, I think the functionality is cool, but the end result is a little hard to read and understand the bands. Its worth playing with though.
    – Glen Lipka
    Commented Dec 20, 2010 at 5:08
  • @Glen: If you aren't familiar w/the term "hostile fork" hostilefork.com/about - in any case, while I may feel confident on my soapbox to say that the other interfaces are "bad", the best way to figure out what your specific users like is through testing. If they're power users, give them lists to enter and then modifications to make. Get their feedback afterward. Compare to how they feel about my prototype. But definitely whatever you use needs to have an answer to the question of what to do with values on the numeric bounds... Commented Dec 20, 2010 at 6:02

First off, how well acquainted with the symbol for infinity will your users be? It's a small point, and I'm guessing they will be OK with it, but still worth checking.

Second, I can't see how a slider with infinity (positive or negative) at one end can ever work. Your example shows 20 near the middle; what value would be used close to one end? 1 million? 1 trillion? 1 googol?

If the values are genuinely unbounded, you need a fast mechanism to enter them, and any kind of slider or '+'/'-' buttons aren't really going to be suitable for huge numbers. Freeform text begins to seem like the only option, and it's certainly the most flexible, if not the most attractive.

Can you give an example of a set of bands? I really want to get a feel for whether they're something like:

-INFINTY - -100
-100 - 100


-INFINITY - -1,000,000,000,000
-1,000,000,000,000 - -500,000,000,000

or whether really anything is possible.

  • Its multi-purpose, so the field could be different things. The one I am most concerned about is Lead Score, which tends to be 1-3 digits (-999 -> +999) and can definitely be negative. I've looked around and just can't find any example of a banding UI that will cover this. Its quite vexing. ;)
    – Glen Lipka
    Commented Dec 16, 2010 at 19:20

I 100% agree with HostileFork's approach of a textbox style entry. When I was reading the question it instantly made me think of the classic print dialog UI for inputting what pages are to be printer - it's a similar problem, and textbox input is still the best solution I can see.

I think there are a few more things to be considered as well:

  • Users might want to sub-divide into equidistant bands, this would be fairly painful with a textbox UI because the user is forced to enter every bucket boundary manually (very painful if the bands are small compared to the value range of the data)
  • I think it's important to visualize the bands to help the user realize they are potentially creating non-equal sized bands
  • I think manually naming the bands is an edge case, the app can do this using a standard band-naming convention (with the user choosing to rename only if he/she so wishes)

Here is a mockup: enter image description here

  • You can imagine the blue range visualization animating the sub-divisions as you type the values in the textbox
  • Because the range visualization is to scale there is the problem of buckets being created which are too small and don't allow any room for labels. The labels would appear where they can but will be dropped if there is no room; the user can hover of the blocks and get this info (and more) through a tooltip.

The problem of mixed units:
For hierarchical continuous dimensions (such as time) there is the problem of input from different hierarchy levels. For example, in the case of tenure, users might want to specify the first few tenure bands in terms of months and the rest in terms of years; however, the textbox UI requires all input to be in the same time unit (e.g. years). One option is to use a decimal years approach, with the input rounding to the nearest month (e.g. if user entered 0.27 it will round to 0.25, which is equal to 3 months). Of course, this isn't great usability - I can just see users sitting there with a calculator trying to figure out what is 5 months in years decimal format. Another approach would be to have a time unit toggle beside the textbox (mockup below). Regardless, I think the auto-naming of the bands should do unit conversion and avoid decimals! enter image description here

  • Nice visualizations.:)
    – Glen Lipka
    Commented Oct 29, 2012 at 15:15
  • Nice idea to throw in the scale; that's something I didn't consider. I was mostly just trying to optimize the data entry process, but you've taken it a step further showing how visualization could inform the process of doing data adjustment. In certain applications that may be more important. I think the best solutions allow switching between multiple modalities to the one most relevant for the task at hand. (As sometimes you want a spreadsheet to see the columns of numbers, sometimes you want a graph!) Commented Feb 1, 2014 at 17:57

One possibility a friend came up with.

alt text

  • 1
    Looks quite good, but isn't there an error in your example? It should be 80 and above in the last line, no? Also, what would happen if you deleted one of those inner ranges?
    – Bobby Jack
    Commented Dec 16, 2010 at 21:20
  • Yes, typo :). Sorry
    – Glen Lipka
    Commented Dec 19, 2010 at 19:03
  • You didn't see why I thought this was "bad". First is that it doesn't define what to do for the precise values of 20, 40, or 80. There are no buttons on the first or last row..which leads to the tip of the iceberg question of what this would look like when I want to assign a single value to (-inf, +inf), and that's the logical starting point for this UI, right? The semantics for what [x] and [+] do are left to the imagination...if I add a new range, what does it choose as the initial split point, halfway between the ranges? Practically speaking, entering many ranges would be laborious. Commented Dec 20, 2010 at 6:35

I think you’re on the right track with graphically representing the ranges. My first thought to test is something like this, with range names clearly between the range bounds:


A plus button splits the range adding a default bound (perhaps midway) and default name, with focus placed on the new bound for adjusting. User can click or tab to either range name to change them if desired.

alt text

You need two Deletes per range, one to delete the name and the upper bound, and one to delete the name and the lower bound:


The spacing between the boundaries may be proportional to their separation, in which case you probably need to also support zooming in and out. You also may want to allow users to drag and drop a boundary to change its value. However, if your users can get an adequate sense of the size of a range just from the numeric values, then for the sake of simplicity you may want to pack the boundaries (like I’ve done) together so they only represent their ordinal ranking. In that case you may want to make the boundary controls spinners (like I’ve done) to allow an alternative to typing a value.

The above design is fairly self-documenting, although you probably have to fiddle with the graphic design, particularly for communicating how the two Delete buttons are different (my crude drawings are unlikely to be adequate). However, the design is also relatively space intensive and cluttering (although, again, better graphic design may help). If space is at a premium, you may want to sacrifice some self-documentation and consider an object-selection-action model, where each range name has an icon to support selection and a menu (both a pulldown and context ) to provide the options. It also allows you to include as an option copying ranges to a different score line:


This implies you support multi-select through the usual idioms.

I can think of two viable ways to handle the user changing a boundary value so it leap-frogs another boundary:

  • Prevent. Simply don’t allow it. If the user types in a leap-frogging value, throw up an error message. If the user drags or spins up to another boundary, provide graphic feedback that the user is at a limit (e.g., the limiting boundary turns bold and red). This is best if leap-frogs tend to be errors (e.g., the user typed an extra digit). It’s easy to recover from this.

  • Squish. Change the leap-frogged boundary (or boundaries) to equal the leap-frogging boundary. This is best if leap-frogs tend to intentional –that the user plans to adjust or delete the leap-frogged boundaries or ranges when they’re good and ready. It’s flexible but harder to recover if it’s an error since it changes the values of any number of boundaries, especially if you don’t support Undo (but you will have Undo, won’t you?)

  • 1
    Fascinating approach. It feels a bit heavy to me, but definitely interesting. Thanks for expanding my thinking on it.
    – Glen Lipka
    Commented Dec 20, 2010 at 5:10

I suggest labeling the axis with 0, -[big number], and +[big number] with a tail after each of those which will ascend exponentially

  • Not sure what this means. Sorry. :(
    – Glen Lipka
    Commented Dec 20, 2010 at 5:11

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.