5

In a table in a web app, multiple objects of the same type are aggregated. Every object has a condition which is a number between one and five. At first, I thought about using a progress bar-like style where the range would be colored. However, this probably isn't clear to the user when the range includes the one since the user will probably mistake the range for a single value (the highest).

For example, we have a table that stores used shirts. Every shirt has a condition assigned to it. Now we could group these shirts by size and I am trying to indicate that shirts with conditions ranging from medium (3) to high (5) quality are available.

enter image description here

Have a look at the image: Not knowing the interpretation beforehand, one is bound to believe the image shows the value four, not the range from one to four.

What could I do to prevent this?

|improve this question
  • 1
    Every object has a condition which is a number between one and five Isn't it the range from 1 to 5? I don't understand. Can you please provide several examples? – A.L Sep 16 '15 at 13:12
  • 1
    For example, there could be two objects of the same type, one having condition four, the other having condition two. In that case, I want to be able to represent that the current items have conditions between two and four. – chaosflaws Sep 16 '15 at 13:22
  • 1
    Please add an example in your question with something like I aggregate item A which has objects a with condition four and b with condition 2. That's unclear how two conditions define a range. What if you aggregate 6 items? – A.L Sep 16 '15 at 13:26
  • 2
    OK, I did. I guess the different meanings of "condition" were the problem? – chaosflaws Sep 16 '15 at 13:30
  • 2
    What do you want to display if you only have only medium (3) and high (35) quality t-shirts? You can't display a range because you don't have the good (4) quality. – A.L Sep 16 '15 at 16:36
6

If you stick to graphic control to set the range, displaying numbers inside the segments will help you. They are convey the idea of the set, rather than single value.

enter image description here

Of cousre, test this UI.

UPDATE after question was edited

According to your edit, I doubt using the range is the best mean.

Range is mostly understood as the elements within lower and upper limits, or interval. Ranges are good for continuous values, e.g. goods with prices in the range of $100-$200.

In your case you have the set of descrete values, some of them could be in your subset.

Consider the case:
enter image description here
Which information on shoe sizes has more sense for users:

  1. 28–37 available range
  2. 28/29, 36/37 available set

Using toggle-like buttons for setting available options is probably better way:

enter image description here

|improve this answer
  • 1
    For me the first image means that the rating is 3/5, this is not intuitive that this is a rating range. – A.L Sep 16 '15 at 13:09
  • 2
    @A.L it's more about context and user's mental model, you treat the things differenty. Anyway, I changed my answer according to changes in the question ). – Alexey Kolchenko Sep 16 '15 at 14:31
8

Do think about whether showing the range is a useful addition. I've never seen a range of ratings displayed like that, so make sure your specific case justifies it.

(edit: it turns out displaying ranges was indeed not a good solution to the original problem, so A.K.'s answer makes more sense in that context, but the answer below still applies if that's what you need)

If you're absolutely sure, try following common patterns for displaying ranges. In addition, I would add a little margin on either side of the 1 and 5 so that the sliders never reach the endpoints, therefore cannot be mistaken for a single value.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

To note in the above mockup:

  • limits of the range are clearly marked by colour, triangular indicators (could be circles or other), and the values 1 and 5 reported underneath (which also reduce cognitive load)
  • A significant margin is left on either side of the 1 and the 5 to make it clear that what is displayed is not a single value
  • For bonus points, the average rating is displayed on top, along with the word "average". Although you didn't specify this as a requirement, I think it further helps to remove the ambiguity of range vs. value.
|improve this answer
3

Instead of ranges I would use checkboxes (or something similar which looks like less an element of a form) to display the availability of the different qualities of products:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This idea is close to the one at the end of the answer from Alexey Kolchenko.

|improve this answer

Your Answer

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

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