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.

  • 1
    It might help if you added some context -- specifically, what is the distance you're trying to represent, and for what purpose? – Ilmari Karonen Nov 6 '14 at 0:51
  • I think either Ryan's and Scott Brown's solutions are going in the right direction. BUT color for "far" should be cyan or blue, not green... red for "close" is ok. – Sandra Nov 6 '14 at 1:22
  • Note that relying on colors alone may break accessibility for people with color blindness and sight issues. – Thorbjørn Ravn Andersen Nov 6 '14 at 7:20
  • 3
    In the context of your application, is the goal to have people be closer, or far away? You would want to present a stronger impression on the screen for what the desired state is; so if users are seeking to be closer to other users, you don't want farther to be the strongest impression (i.e. you want to fill up a bar as people get closer, or use a wedge with a larger side for closer). You may actually wish to ask this question on ux.stackexchange.com, I feel you will get better advice about the concept there, then come back here for graphic representation of said concept. – Jason C Nov 6 '14 at 20:37
  • When I see "distance" followed by a long line, I think "far away", whereas your graphic is supposed to indicate "close". – David Richerby Nov 7 '14 at 9:18

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

  • 2
    Perhaps it should be big close and thin far... Just an idea objects close tend to be bigger. – joojaa Nov 5 '14 at 19:28
  • aren't those numbers backwards? Or the labels? :) – Scott Nov 5 '14 at 19:28
  • 1
    Yeah I realize it was just a quick mock up. That's why there was a smilie :) – Scott Nov 5 '14 at 19:42
  • @Scott, +1 for the good suggestion and friendly comment:) New mock-ups were added for clarity. – Talkingrock Nov 6 '14 at 21:48

Years ago I had an Amiga game called F19 Stealth Fighter. The HUD on this had something very similar to what you describe. For bombs that you dropped, rather than fired, you were shown a line with two 'posts' at each end getting closer together the nearer you got to a target.

Here's a simple modern representation:

enter image description here


If you want to show the distance between two persons, it is probably most intuitive to show a distance between two persons. In the rough mockup below there is still some sort of bar, but it is pointing backward. Distance is shown by position (by moving the person to the right) and size (shrinking the person).

enter image description here

When you want more of a barlike indicator, you could colour part of triangle as below. And you could add labels to the lines.

enter image description here

Perhaps the 'reference' person on the left could be dropped.


I think the distance items work better and are far more intuitive, but I'd reverse things a a bit. Great distance should be long and red, short distance should be short and green. What you've posted seems to read the opposite of this. I'd expect long bars to be "far away" and be red.

Without knowing your overall layout, another possibility maybe to use a circle with dots.... enter image description here

  • Ok, so a long "red" line for far away, and short and "green" near by. So just keep the name "Distance" ? – fizzy drink Nov 5 '14 at 19:01
  • 1
    @fizzydrink yes. To me "far away" would always be red. And a greater distance would mean a longer bar. This is, of course, merely my interpretation and how I would intuitively read things myself. – Scott Nov 5 '14 at 19:03
  • 1
    Color adjustment helps but the circle much more so. Distance between moving objects needs a point of convergence to make much sense IMO – Ryan Nov 5 '14 at 19:07
  • Can the circle "fit" within an iphone app? Imagine a list of people, each with their own row, approx 100 px with the profile picture on the left. Can I use the circle? Or perhaps use the circle idea on an overlay of a map... – fizzy drink Nov 5 '14 at 19:28
  • 1
    Like I posted.. no clue about the overall layout and if a bar was mandatory :) Sounds as if it sort of is. – Scott Nov 5 '14 at 19:29

Using the image Talkingrock created:

enter image description here

I think what would make the most sense, to me, would be for it to be swapped like so:

enter image description here

Starts at Far Apart and lights up as you approach together. I think the change of text from "Far Close" to something more like "Far Apart" "Together" or "Met" or something indicating its two people arriving at a single destination will help communicate the idea further.

  • See my interpretation (being English speaking) is that the point of convergence is the left edge. The longer the bar graph the further away the right edge is, thus displaying distance. – Scott Nov 5 '14 at 19:11
  • You're talking on the second, "Distance" one, not the first "Far/Close" one? – Ryan Nov 5 '14 at 19:13
  • Right, the first one is unusable in my eyes. – Scott Nov 5 '14 at 19:14
  • 1
    You would want the bigger end to be what you want; so if it is desirable in the context of this application for somebody to be far away, then this example makes sense. If it is desirable for somebody to be close, it should be reversed. – Jason C Nov 6 '14 at 20:35
  • 1
    @Ryan If the desired state, in the context of this application, is for users to be closer together, then having a stronger indication for users being farther apart brings more attention to the undesired state. If the goal is to motivate users to achieve the desired state, then having the stronger indicator represent the desired state would be parallel to that goal. Think also e.g. the now-ubiquitous signal strength meter on cellular phones - there is always motivation to have "4 bars", never motivation to have 1. – Jason C Nov 6 '14 at 20:53


That's the opposite of what a bar graph shows, though. The higher the value, the larger the bar. Wanting to do just the opposite is likely going to add confusion or visual dissonance to the actual data.

To make the point a bit more direct, replace 'far/near' with 'big/small'. This just wouldn't make any sense:

                     ---    | |        
              ---    | |    | |        
       ---    | |    | |    | |
       | |    | |    | |    | |

As such, I think you need to drop the idea of 'flipping' the scale with the labels. If you're trying to communicate a greater distance, let the large bar indicate that. It's the most intuitive correlation.

But maybe the solution isn't a bar graph at all. It sounds like you're trying to implement some sort of 'locator signal' metaphor. The closer you are, the stronger the signal. I think that's a good idea, but consider a visual other than a bar graph for that. Maybe a 'blip' (or dot) of some sort.


You ask how to represent distance graphically, but all the answers seem to rely on text within the image (the words "far" and "close" etc). Therefore I suggest you just write "3 miles apart" or "200m to go" and use any sort of 'progress meter' background which fills up horizontally.

Giving the numerical distance isn't necessarily useful in terms of a person reading the actual numbers, but the numbers and measurement unit do make it completely clear at a glance what you are measuring, and if there is a change occuring.


Your context isn't clear but is important. Conceptually, is distance really what you want to represent? Or is it actually about representing how close a user is to the state they're seeking to be in, where "distance" just happens to be the metric for that?

Consider that what you are actually trying to represent is how close a user is to achieving a desirable state. The desirable state should be given the strongest impression on the screen.

In other words, in the context of your application, if users seek to be closer to other users, then you would not want a bar (or anything) that gets stronger with greater distance, as this impression is the exact opposite of the users' goal.

This goes for colors as well; in a red -> green scheme you would typically want green to correspond with the target state, and red the opposite, so if users were seeking to be closer then you would want green to be a smaller distance.

With that in mind, either the bars or the wedge will do, but in either case you will want the bars / wedge to be green and full (and the wedge larger) on the desired state side (e.g. lower distance if users seek to be closer).

Along those lines, accessibility aside (this is just an illustrative example), if all you are really attempting to do is give an impression of how close a user is to their desired state rather than give accurate information about distance, an indicator could be as simple as a static square that fades from red through e.g. yellow then to green at the target state (be it closer or farther), perhaps gaining a label, border, or animation when the target state is [nearly] reached.

The design options in the other answers here are all great, but from a UX perspective be sure to think about how you are using those designs and what you are attempting to do: If you are attempting to encourage users to reach a target state, you do not want, for example, your bars to get shorter and disappear at that state. That is anti-motivation.

Anecdotally (I have no evidence at hand) I would also suspect that it is easier for a user to pick out the largest bar in a group at a glance as opposed to the smallest. I would then imagine that if you have multiple indicators on your screen and your application wants to let users quickly find the "best" (closest or farthest depending on context), having the stronger indicator represent the more desirable states would help in this regard.

Personally I prefer a wedge, with the larger side on the right, turning green as it fills, and with closer being the larger side (assuming closer is the goal), as this is reminiscent to me of the now familiar and ubiquitous cell phone signal meter (4 bars is exciting, 1 is not).

  • What I want is the distance of users compared to the distance of the current user, the one to whom is displayed the "distance" – fizzy drink Nov 11 '14 at 16:04
  • @fizzydrink Why is this information important to the person using the application? (Although seeing your edit, that the issue is resolved, the topic is more academic now.) – Jason C Nov 11 '14 at 16:08
  • It is a location aware app where you get results based on the distance of the other users around you. How close they are to your current location, within let's say 500 meters or closer. – fizzy drink Nov 11 '14 at 16:10

I think you should make the bar all one colour, then use a significant marker like an arrow or a different coloured bar going vertically overlaid to show relative distance from the start on the left and the end on the right. (Edit: I believe the official term is a slider bar)

Here's an example from a game where character icons are used as the marker and more than one marker is present: Sonic A2B Slider

And here's a more realistic example: Slider bar

Edit: (A bit of justification for my suggestion)

The original versions as presented in the question look too much like progress bars which are expected to represent progress, not distance. If something that looks like a progress bar (even if it's labelled) starts going backwards, some users are going to be confused because it looks too unnatural and is counter-intuitive to what people expect.

By having a single coloured bar with some form of marker the marker then becomes the focus and it feels more natural that it should be able to move either way along the bar. The addition of notches to this also give the sense that some form of measurement is going on (in this case distance).

Your Answer

