I’m currently working on a project which need a distance filter show on both list view page and map view page. It allows one to decide how far he wants to show posts nearby. Here are two examples attached. I would like to know if it is just personal preference or is there any hiding principles to use them. Thanks in advance!

enter image description here

enter image description here

  • Curiosity: What are the ribbons (1st, 2nd, 3rd) for in the list view? – Marjan Venema Jan 2 '14 at 10:22
  • @ Marjan Venema that just someone's visual work from somewhere. I don't really know about the app either – gracekan Jan 5 '14 at 12:58

Some notes on a distance:

  1. Dealing with distance there could be different distance metrics.

    enter image description here
    Taxicab geometry versus Euclidean distance: In taxicab geometry all three pictured lines (red, yellow, and blue) have the same length (12) for the same route. In Euclidean geometry, the green line has length approx 8.48, and is the unique shortest path.

    Source: http://en.wikipedia.org/wiki/Manhattan_distance

    The metrics are different for the same points, and the difference could be significant. So make sure of using right metric.

  2. 5.813 miles in your first example doesn't look user friendly. People don't need such exact value as it brings excessive complexity. This looks good for robots, not for humans.

    5.8 miles or ~6 miles look more simple.

  3. People are not good in abstract numbers manipulations. Sometimes distance is a metric which should be mentally processed to get some inference or take some decision. This lead to high mental load while task execution. Then it's better to transform the distance (number) to more concrete unit, which could be processed more easy. Look at the picture, the scale of a map has meaningful detalization cues (world, country, etc.).
    enter image description here


Well, the one on top has no bottom limit, meaning that your range always begins at 0. The bottom one lets you specify a "doughnut", without returning results too close to the center. If that's not a requirement, then functionally the two are identical - you just set the radius.

The bottom one allows for much finer definition of the range, but it's mostly relevant for a mouse interface. If you use a continuous slider on mobile it will still provide better granularity than the example on top with the 5 fixed values, but you won't get a resolution as fine as with the mouse.


I vote for 1.

Two reasons:

1- Simple, easy to understand and intuitive interface. Way easy to quickly see the distance selections, this makes it easy for someone on a device to make a decision fast. Remember the users context, on mobile you never know where they are and what their situation is in real life... easy the better.

2- If they are deciding how far to show posts nearby, then they are 0. You don't need to set a beginning point, you already have it - it should be them.

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.