21

I'm currently working a sliding filter in a UI that presents a "distance to" option.

Which of the following would best in my situation?

  1. < 2.1 miles
  2. under 2.1 miles
  3. 2.1 miles or less

Example:

enter image description here

Improve this question
14
  • 7
    I think one design factor to consider is how screen readers deal with these sorts of things. JAWS reads < as 'less'. I don't use a mac so I don't know what it does here.
    – C'est Moi
    Commented May 12, 2020 at 23:29
  • 2
    Put a slidey circle handle on the other (left) side of the blue part of the slider too. Then you can make x < y < z queries too.
    – user67467
    Commented May 13, 2020 at 10:51
  • 2
    Is there a map view also where you could show an increasing/decreasing circle perhaps?
    – Viktor Mellgren
    Commented May 13, 2020 at 11:09
  • 14
    Item 3 does not mean the same thing as items 1 and 2. Are you intending to represent "less than" or "less than or equal to"?
    – Eric Towers
    Commented May 13, 2020 at 16:10
  • 14
    Frame challenge: Changing the label to "Maximum distance" would make the intent clearer.
    – chrylis -cautiouslyoptimistic-
    Commented May 13, 2020 at 22:53

7 Answers 7

Reset to default
27

If you want sex just say it

If you want sex just say it - You should strive to convey information in the clearest way possible, when possible.

< 2.1 miles is < clear than less than 2.1 miles.

In the form < 2.1 miles people could infer < as "look left".

< ≠ <=

Note that less than 2.1 miles is not the same as 2.1 miles or less - the former is exclusive (2.1 miles) whilst the later is inclusive. Given the unit though, I don't think anyone will care so the shorter version wins.

X . . . > . . X .

But, in 2.1 miles or less the important quantity is front-loaded, whereas in less than 2.1 miles it is the third token.

Max

You could equally use the caption Max distance to venue, which will leave you having not to think about this - just put 2.1.

DRY

Don't Repeat Yourself - There is already miles in the scale, so you can just use 2.1 instead of 2.1 miles. Can you tell 60 what in this :

A slider with a scale in celsius and a thumb with the label 60

source

Thumbs

And as seen above, you can use a thumb; but that's not great if users need to see the value when not interacting with the slider (unless the thumb is always there).

 Conclusion

It all depends, but my vote is Max distance to venue with 2.1

Improve this answer
10
  • 8
    DRY is in contradiction with the advice to say what you mean. Also, it might be redundant for someone who can see the scale and the label simultaneously, but it would not be for someone using a screen reader.
    – chepner
    Commented May 13, 2020 at 14:48
  • 12
    "If you want sex just say it" also implies some conciseness (according to your own words). I guess it depends on the target audience, but for me "less than 5 milliseconds" is definitely less clear than "< 5 ms".
    – Blackhole
    Commented May 13, 2020 at 14:54
  • 3
    It took me a while to parse “is < clear than”. Same for “< ≠ <=”.
    – Carsten S
    Commented May 14, 2020 at 6:14
  • 8
    Your example with 60 is no good. First, the 60 appears inside a kind of arrow used on the maps, so it's not immediately obvious that this point is 60 °C, rather than e.g. "60 km from the point of temperature measurement" (yes, I'm exaggerating). Second, the scale already repeats "°C" in each tick, so 60 looks even more unrelated to the scale. In this example it should really be 60 °C, not simply 60.
    – Ruslan
    Commented May 14, 2020 at 9:01
  • 3
    @CarstenS It took me a while to parse that too, but that's because "<" isn't a word, so it fits weird in a sentence. In the context of "< 2.1 miles", it's easy to parse.
    – Carl Kevinson
    Commented May 14, 2020 at 13:28
8

The other answers seem to be missing the forest for the trees. The problem isn't visual, but semantic.

When creating key-value pairs, the least ambiguous solution tends to involve defining your left-hand keys such that you can keep the right-hand value side as elementary as possible (e.g., numeric scalars). In your case:

Maximum distance to Venue 2.1 miles

By redefining your "distance" key as a "maximum distance" key, you can avoid your presentation issues completely.

Improve this answer
1
  • 1
    He's not the only one apparently missing a forest 😉, but it's a great line of reasoning alright.
    – Izhaki
    Commented May 13, 2020 at 23:45
7

You could place the minimum value on the left and increments throughout the rest of the bar:

Increment slider bar

The "distance" in the title implies that values "up to" the selected one will be included in the filter.

If the min/max and steps would logically change based on availability and you want to avoid displaying "sorry, no results", you could use checkboxes with user-friendly ranges and show the number of results next to each. (To answer your original question - the example below uses "Less than".)

Distance From filter

Improve this answer
7
  • 1
    The min/max of this slider will be dynamic so the steps won't be easy to determine. It has the potential to range from 0 - 15, while also being 4.3 - 5.2 in some scenarios.
    – Scuilla
    Commented May 13, 2020 at 18:21
  • 1
    What is the scenario where the fine-tuned range would be used? Does the user to define something extremely precise?
    – Izquierdo
    Commented May 13, 2020 at 20:21
  • 1
    This is an app that shows hotels available for a specific conference. The filters change because of availability, not a user action. The min/max is determined by the distances for the closest and farthest hotel.
    – Scuilla
    Commented May 13, 2020 at 21:29
  • 1
    @Scuilla, is that to say that these 'filters' are actually a display feature, not a user input control?
    – Dan
    Commented May 13, 2020 at 22:53
  • 1
    @Dan - I interpret that to mean that the slider will adjust based on the data (how near/far the available options are), rather than having a pre-set min/max. So if there are no hotels closer than 2 miles, the minimum value of the slider will be 2, not 0.
    – Beejamin
    Commented May 14, 2020 at 0:34
5

The slider in the position you illustrate controls a filter which will confine results to those with distance less than 2.1 miles. This is not the same as stating that the distance to one particular venue is less than 2.1 miles. Therefore, I suggest "up to 2.1 miles".

Improve this answer
2

I suggest 2. As user may not understand or overlook mathematical operators.

Improve this answer
3
  • 7
    Hello Kevin, thanks for taking the time to respond to that. We are trying here to include links and examples. Opinions are great but most valuable is research, sources with other places where solution or parts of it exist. Maybe with a small update, the answer can be better.
    – Mike Mark
    Commented May 12, 2020 at 21:42
  • @MikeMark A common principle in UX design is keeping it simple, and that's exactly what Kevin is doing. The only answerer here who uses a link, links to an earlier answer of their own, so I'm not sure how much that backs up their opinion.
    – paddotk
    Commented May 15, 2020 at 10:03
  • UX Design is also about creating trust and confidence. An opinion not based on facts, research and data won't inspire confidence. Sometimes an opinion is enough but this site tries to not become a twitter survey but a place where we learn and base our answers more on data and less on opinions. People adding links to similar questions are not doing wrong if the questions are related. Adding any link wouldn't work.
    – Mike Mark
    Commented May 15, 2020 at 13:01
2

There are a lot of good answers here, but one thing I haven't seen addressed is that you can add clarity by using the more specific set of descriptors for your type of value (distance in this case), rather than the generic ones that work for any type of value (min/max/less/more). These brings in extra information without needing extra words.

  • Inclusive/Generic: Maximum distance 2.1 miles

  • Inclusive/Distance-specific: No further than 2.1 miles

  • Exclusive/Generic: Less than 2.1 miles

  • Exclusive/Distance-specific: Closer than 2.1 miles

You can apply this to lots of things: Price (Cheaper instead of Less), Weight (Heavier instead of More), etc.

In your specific case, it might depend on how the search is working: Closer might imply that it is close to the user's location, rather than the origin of the search (which may be actually or conceptually the same, of course). If you want to guard against that, I might use (Venues) within 2.1 miles.

Improve this answer
2
  • "further" refers to progress; "farther" to distance.
    – Kaz
    Commented May 14, 2020 at 15:09
  • @Kaz - depends on which flavour of English you're writing. US English, definitely - I didn't realise that, thanks! OED/British English (which I guess is where my Australian English derives) suggests they're mostly interchangeable, but farther is comparative (a is farther than b) while further is non-comparative (it's no further than 2km). I probably couldn't have told you that before I checked, but I definitely had a strong preference for 'further' when writing that!
    – Beejamin
    Commented May 14, 2020 at 23:15
1

The UI issue here is that "< 2.1 miles" is contradicted by the slider, which is about halfway between right here and ten miles. It must be nonlinear.

Here is how we fix everything:

proposed UI

Firstly, give me the exact figure. Don't tell me it's a secret number less than 2.1 miles—especially if the only other clue you give me is a position on a nonlinear slider whose only labels are on the endpoints.

Secondly, if the slider has a nonlinear scale, learn from a 1970's audio slider knob and put in some ticks which indicate that.

I would also use round numbers for the slider endpoints: how about 0 miles and 10.0 (or just 10) miles.

Improve this answer
1
  • "Firstly, give me the exact figure" - I think @Scuilla's example is giving the exact figure, just of the maximum value of the range. The "less than" refers to the whole range. Also, they mentioned that the max-value is dynamic based on data - ie. there's at least one data point at or just under 10.7 miles.
    – Beejamin
    Commented May 14, 2020 at 23:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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