Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
1  
Can you post an example or two of the slides that you've been experimenting with? –  Hisham Dec 15 '10 at 22:33
    
Its not much to look at but try: commadot.com/public/sliderBanding.pptx –  Glen Lipka Dec 15 '10 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 Dec 16 '10 at 17:03
    
Its probably a marketing person with an analytical bent or an analyst. So its a power user. –  Glen Lipka Dec 16 '10 at 19:18
add comment

6 Answers 6

up vote 6 down vote accepted

I'm a bit distressed that people living in a world exposed to things like Google Instant and StackExchange sites could possibly still be making interfaces like the other suggestions. :-/

It seems like when programmers design user interface, they get horse blinders on and recast the goal as making sure the UI can't get into an "invalid" state in the data. They're so busy handcuffing the user that they miss every opportunity for what a computer might actually bring to the table (vs. a piece of paper). 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? The pictures people have posted feel like every button is an entry point to a data structure operation... and that's not a design, that's an API! Plus if we're truly programmers here... shouldn't it be addressed what to do with when values fall on the boundary itself?

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 says 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"):

http://hostilefork.com/shared/jquery-numband/

alt text

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 :)

https://github.com/hostilefork/jquery-numband

share|improve this answer
    
+1 very nice idea! –  Baelnorn Dec 19 '10 at 13:54
    
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 Dec 20 '10 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... –  HostileFork Dec 20 '10 at 6:02
add comment

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

share|improve this answer
    
Nice visualizations.:) –  Glen Lipka Oct 29 '12 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!) –  HostileFork Feb 1 at 17:57
add comment

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:

[img

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:

[ing

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:

[img

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?)

share|improve this answer
1  
Fascinating approach. It feels a bit heavy to me, but definitely interesting. Thanks for expanding my thinking on it. –  Glen Lipka Dec 20 '10 at 5:10
add comment

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

share|improve this answer
    
Not sure what this means. Sorry. :( –  Glen Lipka Dec 20 '10 at 5:11
add comment

One possibility a friend came up with.

alt text

share|improve this answer
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 Dec 16 '10 at 21:20
    
Yes, typo :). Sorry –  Glen Lipka Dec 19 '10 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. –  HostileFork Dec 20 '10 at 6:35
add comment

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
100 - INFINITY

or:

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

or whether really anything is possible.

share|improve this answer
    
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 Dec 16 '10 at 19:20
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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