Best way to represent distance in a clear way?

Question

I'm building a job board and the user can search for jobs around its hometown. It can adjust the radius using a slider.

Example:

1) User enters "Brussels" in the input box. 2) User changes the radius through the slider to 60 miles. 3) User gets jobs that are within 60 miles of its hometown. Each result indicates how far its location is from the hometown (e.g. "23 miles from Antwerp").

Is there a better way to represent the distance between the hometown of the user ("Brussels") and the locations of the companies ("Antwerp", ...)?

I for a fact have a hard time imagining how far for example 63 miles is. I think that users are much more interested in how long they will have to travel. How can I represent this in a better way?

Answer 1

Most people think it terms that are relative to their experience rather than abstract distances. A good way would be to use a map and overlay the radius on it so that users can visually see the area they are searching within.

Answer 2

The way to tell users how long it'll take to get to a location isn't the crow-flies distance, it's the actual travel time. There are various public APIs that expose this information, but their reliability and cost wouldn't be certain. Many provide free access for low-volume usage, to attract startups.

Otherwise, radius is a pretty poor indicator of travel time, because 10 minutes on a North-South motorway (or highway, as our American cousins call them) is a lot further than 10 minutes traversing around a city center. As the distance isn't that helpful, you shouldn't put so much weight on showing it precisely.

Much as JohnGB suggested, the best solution is to show results on a map, so that users can directly see the travel routes to each respective item, can see how 'brittle' the travel routes are (can distinguish places that are well connected and won't be unreachable if certain routes are closed). You may have to use aggregate pins at low zoom levels (perhaps with numbers that count the entries they collect.

Again, like JohnGB, I'd probably use a radius marker of some kind, but show results outside that radius (because elements just outside the radius will often be acceptable nevertheless, and the map will already be zoomed close to the circle). I'd shade the body of the circle slightly - though be careful, because you don't want to obscure the colours of the map's roads and symbols.

So, basically, this post is less an answer than an argument to go upvote JohnGB's post.

Answer 3

I think it is best to display BOTH distance AND travel time (or a ratio of the two). The latter can be provided by Google's Distance Matrix API

The Google Distance Matrix API is a service that provides travel distance and time for a matrix of origins and destinations. The information returned is based on the recommended route between start and end points, as calculated by the Google Maps API, and consists of rows containing duration and distance values for each pair.

However, note that there are also restrictions to its use (number of queries per day).

Then, if you only rely on dots on a map to indicate locations (either home, or job location) then the colour of the dot can indicate the effort needed to reach the location (blue dots are close by, or quick to reach, while red dots are far away, or difficult to reach). You can let the user filter out what they deem to be "effort" (only colour based on distance, not time, or vice versa, or use the ratio instead).

Answer 4

You can represent an origin and destination in this manner. You need to make the ratios of distances more dynamically (bewteen each other) so they represent reality more accurately.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 5

The answers so far are good. I find these automated techniques don't always work as expected. Usually, expert knowledge from the user is needed, due to factors other than distance/time. There's a website in the UK called RightMove that allow you to specify your own boundaries for a search. You can save the boundary, and change it at any time. I find this to be the best solution for the problem.