User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

We have a UI requirement, where users need to be able to create several ranges from 0-1000.

Without overlap (including overlap from other parent records)

So, parent 1, has range 0-10, 20-30, 50-55.

Parent 2 is being created, the values parent 1 has chosen are to be unavailable.

There could be dozens of ranges per parent.

Free-text, though my preferred option, has been shot down.

I don't like a long list of 1000 numbers, where you disable already selected values, and allow them to pick all the values that are allowed. But it's not "range based", so I don't like it.


share|improve this question
So in your example where you have those ranges for parent 1: then for parent 2, the range 11-19 and 31-45 would be ok, but 15-45 would not, correct? – Roger Attrill Dec 20 '12 at 21:18
Roger, Roger. (sorry, had to) – CaffGeek Dec 20 '12 at 21:24
This looks like a great question, but more context would help. Would users prefer continuous ranges? And if those aren't available then consecutive ranges? Ranges from different sides of the 0-1000 stretch? Do they prefer round numbers? Of what order (10s/100s)? Can there be meaningful defaults? Meaningful incrementation steps? How many parents are there going to be in a typical use case? – Vitaly Mijiritsky Dec 21 '12 at 6:38

A parent (or whatever it is) can have a bucket of ranges.

But to make things easier to start a new parent off, you could set a min/max of say 0-80 and have a button 'extract allowable ranges' that adds to the bucket of ranges for this parent in such a way as to automatically eliminate invalid ranges - thus adding 11-19, 31-49, 56-80 to the bucket.

Then you have an interface to the bucket that allows you to remove ranges from the bucket, or to adjust the min/max of a range in the bucket, (eg sliders and/or spinboxes) with an automatic stop where you would enter an invalid area.

This then alllows creating of parent N that is 'everything else' - guaranteed because you set min to 0 and max to 1000 and hit the 'extract allowable ranges' button.

This is merely food for thought, as I would imagine that your requirements are quite specific to your particular context and that there are alternatives or optimisations to this kind of idea that suit your particular workflow in your particular scenario.

share|improve this answer

I would suggest free text fields for both, but with a specification of whats actually selected.
With 1000 items you should really avoid to use a list.


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
While I agree, free text is ideal, the users don't want it. – CaffGeek Dec 21 '12 at 17:44
@CaffGeek: Well, sometimes the users don't know what they want. You shouldn't exclude any options just because your users thinks it will be difficult (or whatever) to use. You could try, without being an arrogant besserwisser(!), to explain your experience with various solutions, provide some pros&cons with the various alternatives, and perhaps even run a few q&d tests to get some feedback or ideas (or some tangible "profs" about the best option). Having such an active and participative usergroup is a good thing. Use them! – Jørn E. Angeltveit Dec 22 '12 at 14:11
up vote 0 down vote accepted

We are actually going with a table of numbers, with a responsive layout so it will add/remove more numbers to the row as the page width changes.

With a little javascript, holding select and clicking two numbers will allow you to select all available numbers between the two.

Each number can have three states.

  • Available
  • Already used by another parent
  • Selected for by this parent

By it not being a vertical list (like initially thought), and being a table, we are able to easily show what is available, and what is selected, and ranges are better highlighted than if it's a giant list (with one number per row) that you need to scroll.

Even though, technically, it's still a giant list, with the ability to easily select a range, and view what ranges are selected, it satisfices the main requirements.

share|improve this answer

I think a table would be the clearest way to present/edit it. The purple cells here show who has what numbers, while the blue columns indicate the numbers are taken and not available. It would take some fancy zooming and scrolling to accommodate 1000 numbers but it could be done.


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
we actually don't show all the Parent elements at a single time. Just the one you are dealing with. – CaffGeek Dec 21 '12 at 19:40

Your Answer


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.