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?
Answer
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"):
http://jquery-numband.hostilefork.com
(Update: 20-Mar-2015 I have added a short demo video.)
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
No comments:
Post a Comment