How would you represent distance graphically?

by

Ok,

So this might be somewhat “subjective” but I am looking for some ideas.

I want to represent distance as a bar graph (kind of) that gets “fuller” the closer the people are.

The farther they are, the less full the bar graph if you will.

I’m not sure how I would represent that. I have created this graphic to show you my thought process.

distance shown graphicaly

Do you think people would understand? Should I specify the “FAR” and “CLOSE” edges? Or just display distance?

Would people understand that as the bar graph fills, the people are closer?

Should I also maybe specify the actual distance? (Either meters, km, etc?) Or forgo the bar graph altogether?

How would you represent distance graphically so that people at first glance have a good idea how near or far the other person is?

EDIT: Ok, so spoke to client for more details and what they came up with was something akin to the circle that @Scott provided, where the current user is “in the middle” and the people around the user are in “orbit”. They’ve seen it somewhere and want that, as opposed to showing the distance for each user.

I will therefore have to display text like “150m”, or “Nearby” as opposed to a bar graph with the distance.

However, I wanted to also thank EVERYONE for providing answers, some of the examples are fantastic, I love them and it gives a great panel of ideas to draw upon. Since the “brief” somewhat changed from the initial request, I figured it was best to edit this question to provide some more feedback.

Answer

Updated example using a wedge design. For clarity, sample distances were added to the graph, and the text was removed.

enter image description here

Example with Start and Finish text

enter image description here

Since small size is a factor for handheld, here are two 100px by 100px space saving options.

enter image description here

enter image description here

Brainstorming based on Latest Requirements

Here’s a space saving idea for mobile that places the app in a dropdown. With the larger size of a dropdown, the map can contain more information like user labels, and a distance grid.

enter image description here

Attribution
Source : Link , Question Author : fizzy drink , Answer Author : Talkingrock

Leave a Comment