34

I have a map with locations coming from a user. Sometimes these are sparse (1 location every 500 meters), and sometimes dense (many locations every 100 meters). I have them plotted on a map, similar to this:

enter image description here

However, in my application, they aren't always paths from A to B. Sometimes it is the person leaving home, going for a drive and then coming back again. This causes the route to basically be a circle (sometimes the route home is the same as the route out, but they don't overlap exactly - different side of road). I'd like to be able to show the direction travelled on the map.

One option is to draw arrows, but that isn't always possible. Consider this:

enter image description here

If I'm in a dense region, then I'll either draw many arrows, and they will overlap and be very messy. Alternatively, if I draw no arrows in dense areas, there may be a very long distance between arrow draws.

Are there best practices for this type of thing? An app that shows direction travelled particularly well?

Improve this question
6
  • 5
    I think the arrows are in general a good idea. If you have too many points, simply draw the arrows not on every segment. Define some threshold distance and every time this is exceeded by a point, draw an arrow again. This probably should also change on zoom level.
    – Bowdzone
    Sep 25, 2017 at 10:15
  • 1
    @Bowdzone makes a good point, also the arrows don't have to be huge -- a width along the lines of the greater of twice the track width and twice the (typical) road width is plenty
    – Chris H
    Sep 25, 2017 at 12:57
  • 1
    I would personally use arrows for this. I believe your issue is a technical one, not an interface one. Arrows should be evenly-spaced, no matter how dense your original data is. Convert your data into a continuous path (as you do when drawing the route) and position your arrows based on distance along this path rather than your original data.
    – micheal65536
    Sep 25, 2017 at 13:13
  • 2
    A simple algorithm if you're converting the path to a set of straight lines is to calculate the distance along each line using pythagoras's theorem and when the distance exceeds a pre-decided value calculate the position along the line where the distance is equal to that predecided-value (also using pythagoras's theorem and ratios with similar triangles) and draw your arrow there.
    – micheal65536
    Sep 25, 2017 at 13:14
  • 2
    Also never, ever, use equilateral triangles to show direction, they're a lot harder to interpret at a glance. Use long thin triangles (making the triangles thinner will also make your map appear less cluttered).
    – micheal65536
    Sep 25, 2017 at 13:15

6 Answers 6

Reset to default
39

UPDATE: For a timeline-like view (Not just point A to B)

I'll take the example of Google Maps for just the timeline view in addition to the map-tracks where they represent different trips with colors. However, the color representation isn't very clear if you ask me as it doesn't take color-blindness into consideration as was pointed out by other users here. Also, it becomes ineffective when there are overlaps in the route which is difficult to represent visually.

Solution - Have a timeline next to the map (or at the bottom for mobile devices) that clearly states the directions.

This is how it would roughly look. The points could be dependent on change of direction or a well-known location or placed on an averaged location to make the change in directions clear

Possible solution of circular travel

For other scenarios

Google maps use the blue dot to represent current location and red pin to show locations searched for making the blue dot = starting point and red pin = ending point which makes the direction clear.

Google map example

Uber uses the colors red and green show the points where Green = pickup and Red = Drop-off Uber map example

You can use something similar or use notations like From and To to represent direction

Improve this answer
6
  • +1, a combination of showing the starting point, end point, road traveled and what's left, would tackle all this. Not sure if it'll be immediately obvious which direction the route is heading (like arrows would), but marking start and end with different colours should be enough IMO.
    – Wendy Wojenka
    Sep 25, 2017 at 7:11
  • 1
    Thanks for the response. My use case is a little different - the route may not be a path (i.e. start/end point) and may have the end point as the same place as the start point. I've clarified my question to make this more obvious.
    – robertlayton
    Sep 25, 2017 at 7:42
  • 14
    Interesting that uber use red + green markers with no other indications. Completely useless for red/green colourblind people.
    – Midas
    Sep 25, 2017 at 10:47
  • 2
    @Midas - Agreed! Initially I was going to post just the Uber example but then I realized this horrendous oversight on their part. Also, it's slightly ironic because in their app, they use the combination of circle and square notation which makes so much more sense
    – Shreyas Tripathy
    Sep 25, 2017 at 10:51
  • 3
    I used to use a bike computer app that used numbered flags on quite long sticks (at each km). This was better in that application as it didn't tend to obscure details of the route itself. Also a chequered flag for the finish is quite common and handles colour-blind users/ b&w prints quite well
    – Chris H
    Sep 25, 2017 at 12:55
18

Use Animation

Assuming the main use case is on a digital device, utilizing animation will not add any additional clutter to your UI, but will effectively communicate the direction of travel.

For example, you could show a quick pulse that travels the path from start to end, similar to some Windows loading animations.

loading bar animation

Alternatively, you could use a subtle pattern that moves towards the destination, similar to the following example (pick your pattern to fit your theme/preference).

Loading animation

Additionally, label the start and end so that a screenshot still conveys the necessary information.

Improve this answer
3
  • 2
    kind of unexpected but cool idea!
    – Devin
    Sep 25, 2017 at 22:55
  • 9
    Works at any zoom level and make great use of real estate. I gave this an up vote. BUT the second example: Is it just me or is the the animation going the wrong way for the progress bar!
    – Jason A.
    Sep 26, 2017 at 9:00
  • @JasonA. Totally agree! But I was just using it as a visual to go with my description. Certainly customization is appropriate :)
    – maxathousand
    Sep 26, 2017 at 11:51
9

Another option is to use a gradient on the path. It isn't necessarily immediately apparent, but after continued usage users are likely to pick up on the trend. An example of this is Lyft:

example

Improve this answer
3
  • 8
    The direction of travel is not obvious at all, until seeing the legend at the bottom.
    – 200_success
    Sep 26, 2017 at 6:38
  • 7
    I think the text "Departs" and "ETA" is the key here. Color is very subjective and shouldn't be the only indicator. This example has a good alternative
    – Shreyas Tripathy
    Sep 26, 2017 at 6:57
  • 2
    When I first saw this, I thought it was the opposite of going from light to dark and not dark to light. So, I initially had the direction backward until I started reading the text and saw the bottom dialog.
    – Micah Montoya
    Sep 26, 2017 at 12:49
3

Draw a thick(ish) line with one edge being darker. Make the dark edge the side of the road that you drive on (depends on country).

Then it doesn't matter what scale, zoom factor, or sparseness of data you have. So long as you draw the line at a suitable thickness, you can always see which is the side of the road you drive on, and therefore should be able to tell the direction of travel.

Example (based on driving on the right hand side of the road in the US):

enter image description here

Edit: As indicated in the comments, and judging by the downvotes :), I agree that the user may not immediately recognize that such a decoration indicates the direction of travel, and that an arrow would help to identify the direction.

However it's not an entirely new idea. In the UK, the popular A-Z town maps use a similar decoration on more significant roads to indicate one way roads - and their direction of travel. Although the direction of travel is indicated by use of a red arrow, it's also marked by one side of the road being drawn more boldly than the other - with the thicker edge being on the side of the road on which you drive (in the UK that's on the left).

Example, Aldwych, London:

enter image description here

Improve this answer
3
  • 12
    Not really clear unless the user knows exactly what the weird line means. I'd probably assume that it's just a shadow of some kind, and even if you do know what it means it's still difficult to see at a glance.
    – micheal65536
    Sep 25, 2017 at 13:05
  • 1
    Combine this conceptually with the arrows: Show direction of travel with half arrows on the side of the road you travel on. If two legs of the trip overlap in different directions, you end up with half arrows on opposite sides of the line pointing in opposite directions.
    – Mr.Mindor
    Sep 25, 2017 at 14:54
  • I think the thickness would also need to be at least half of the whole line for it to have more meaning. With this you could use a legend but with the half arrows mentioned the legend could be eliminated.
    – Micah Montoya
    Sep 26, 2017 at 12:52
3

Use ONE arrow.

You only need one arrow for the straight segment outside of any loop, plus one for each loop. Use the points where the path crosses itself to segment the line and put one directional arrow (isosceles typ. better than equilateral) in the direction of travel.

I'd also recommend a smoothing algorithm so that loops below a certain diameter are treated as part of a straight-line motion (through its center, for direction determination), and make sure the arrow indicates motion in the direction of overall travel rather than being placed on one of the retrograde motion part of some small loop.

Alternatively, you could use a graphic to indicate the end state, such as a person indicator or checkered flag to show where they are at the end of the path. Family Circus cartoons come to mind here:

enter image description here

Improve this answer
2

As long as the line is 3 pixels or wider, then you should be able to fit the arrows inside the line. A slimmer version of something like the following. This could also be animated as suggested in another answer.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.