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


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?

  • It makes a huge difference to the distance if the job is on the west of a large city/town and the user is also on the west side or over on the east side... You would be better of using the user's exact location if they are willing to provide it. Dec 25, 2012 at 18:14
  • Can't get clearer than this: youtube.com/watch?v=iZhEcRrMA-M (Sorry, couldn't resist ;) Dec 26, 2012 at 2:31

5 Answers 5


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.

enter image description here

  • 1
    That's a good solution for visually representing the radius. But how can I represent the distance between the hometown and the company's location? If there are many results, using a map will result in a cluttered and ugly layout.
    – naf
    Dec 25, 2012 at 10:16
  • @AshwinMertes Represent that in whatever units make sense. Show it as "26km away" if that's what it is.
    – JohnGB
    Dec 25, 2012 at 10:19
  • Ok, but that doesn't solve the problem. The user doesn't want to know how far the company's location is. It wants to know how long it needs to drive to get there. Some places can be 20 miles further away than other places, but the user will reach it faster from its hometown due to less traffic, the presence of a highway, ...
    – naf
    Dec 25, 2012 at 10:24
  • 3
    If you want to try and show how long it will take, then you will have a lot of technical challenges showing that. Ideally then you should let them choose a mode of transportation; a time of the day (to account for traffic); and a maximum time. However I think you will create more problems than you solve like that.
    – JohnGB
    Dec 25, 2012 at 10:51
  • You're right, that seems kinda hard to establish.
    – naf
    Dec 25, 2012 at 10:54

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.


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).

  • Typical "commute time" is often significantly different than one-off travel time due to traffic patterns at rush hour. I'd only show the distance and let people figure out the time.
    – dbkk
    Dec 26, 2012 at 17:51

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


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.

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.