I am working on an app that we show a chart to a user and let the user decide what values they want to focus on. The requirement is that the user should be able to pick multiple ranges or just multiple single value but not both.

For example: On a chart, we showing on x-axis like this: 100-200, 200-300, 300-400. Then the user can either select: 100 to 200 and 300-400 , Or the user select: 100 or 300 or 400, But not both like this: 100 to 200 and 300.

Can anyone give a suggestion on how to layout the UI for this? Thank you

EDIT: adding a graphical image enter image description here

  • Welcome to UX.stackexchange. Can you provide an example of what you have so far? – Mayo May 7 '15 at 21:25
  • So far, what I have is that a drop down list box that has 2 options: select single, or range. Depends on the user's selection, I will render whether 2 textboxes for "from" and "end" or just 1 text box for a single value. – ngunhacrab May 7 '15 at 21:26
  • Do you have a graphical display of what you have in mind? It will make it clearer to everyone looking at it. If you don't have something mocked up - the very process of doing so will help clarify the issues. – Mayo May 7 '15 at 21:30
  • I added an image. Depends on the user selection from the drop down, I will either hide the 2 textboxes or 1 textbox. But I think the layout looks a bit weird – ngunhacrab May 7 '15 at 21:35
  • To clarify more, for the image I show, the chart happen to use ranges for the x-axis, but there are charts that show only a single value on the x-axis – ngunhacrab May 7 '15 at 21:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.