Slide titled “Option 2: Colourful mix” comparing two mobile map screens labelled “Not selected” and “Selected.” The not-selected map shows multiple routes in blue, orange, teal and purple with similar prominence. The selected map highlights one route in thick purple while the other coloured routes are faded.

Update 8: What colouring should we use for route lines?

—

by

Dan Raven-Ellison, Good Ways CEO
in

We’ve got plans for Good Ways to include lots of smart ways for you to choose, find and follow routes.

We’re starting with the most basic feature: being able to see a route as a line on a map.

The colour of route lines really matters. A good colour can make it easier, clearer and more joyful to choose routes.

When browsing a map, which of these options would you prefer?

  1. All routes use one strong colour
  2. Routes use different/random colours
  3. Colours reflect the method of travel, such as walking, wheeling or using a wheelchair
  4. Colours show something else, such as who created the route, distance, difficulty, challenge level or rating

  • Dark green title slide with large white text reading “Map colours.”
  • Slide titled “Option 1: Mono colour” comparing two mobile map screens labelled “Not selected” and “Selected.” Both show walking routes around Tynemouth and North Shields in a single green colour. The selected example highlights one route with a thicker dark-green line while the other routes remain thinner and more muted.
  • Slide titled “Option 2: Colourful mix” comparing two mobile map screens labelled “Not selected” and “Selected.” The not-selected map shows multiple routes in blue, orange, teal and purple with similar prominence. The selected map highlights one route in thick purple while the other coloured routes are faded.
  • Slide titled “Option 3a: Walk mode colour” comparing two mobile map screens labelled “Not selected” and “Selected.” The walk-mode interface uses purple controls and purple route lines. The selected example highlights one route in thick purple while the remaining routes are pale lavender.
  • Slide titled “Option 3b: Wheelchair mode colour” comparing two mobile map screens labelled “Not selected” and “Selected.” The wheelchair-mode interface uses teal controls and teal route lines. The selected example highlights one route in thick dark teal while the remaining routes are pale mint.
  • Slide titled “Option 3c: Cycle mode colour” comparing two mobile map screens labelled “Not selected” and “Selected.” The cycle-mode interface uses bright pink controls and pink route lines. The selected example highlights one route in thick magenta while the remaining routes are pale pink.

And what else should we consider? Are there other line styles you’d like us to look at?

We’ll also be exploring different route line styles for when people are actually following a route. Personally, I think it would be great to have something more fun than just following a solid line! More on that soon.

It’s been brilliant getting responses on our previous updates. You’ll be able to see how that feedback is already influencing our decisions.

No voting this time, but please do comment below with your opinions and preferences.

Thank you.

Comments

32 responses to “Update 8: What colouring should we use for route lines?”

  1. Steve Melia avatar
    Steve Melia

    Definitely make use of different colours, for routes which people need to see on the same map at the same time.

    When considering how to do this, also consider the layering. How could the user create more clarity by switching layers on or off?

  2. Jane Taylor avatar
    Jane Taylor

    For general view I like ‘colourful mix’ because I can see the different routes clearly. A filter to select e.g. ‘routes suitable for wheeling’, which will limit the display only to those routes, gets rid of unnecessary route noise.

  3. Ingrina Shieh avatar
    Ingrina Shieh

    Beautiful! In general I like monochrome, but when all the routes are together it is difficult to differentiate between routes – e.g. the there-and-backs and the circular/loops. So Option 2 to help see the different routes when none are selected.

    However, not sure whether there needs to be an assigned colour per mode for all modes. You can probably walk/run on a cycle route, so maybe assigning colours might lead some to miss routes that are perfectly doable in another mode. Filters can easily be used to choose mode.

  4. Sophie Sadler avatar
    Sophie Sadler

    I feel quite strongly that the routes should have different colours at first glance (not monochrome), since it makes it a lot easier to distinguish which lines belong to which route. Otherwise it’s a meaningless jumble of lines.

    I do like the idea of having different colours for different modes of transport, but it’s tricky because routes may be usable for multiple modes of transport.

    Another suggestion might be to encode categories like: fully paved; paved & bridleways; bridleways & footpaths (no road); mixture of all path types, for example. I would personally find that useful, as when I’m going for a walk I could immediately discount anything with the “fully paved” colour, which is only a personal preference and doesn’t mean the routes are not appropriate for other walkers for example.

    However, this could add complexity which might be confusing for some users. So random colours with filtering would also be completely workable, I think 🙂

  5. Tom Polkinghorne avatar
    Tom Polkinghorne

    I am torn between Option 3 & 4, but I think I will go with 3. Having multiple colours would help to separate out the routes, but unlike with Option 2, having each colour signify the method of travel would give it functional use as well as aesthetic appeal. Perhaps giving each route a different shade or different line type might help to separate them out if it gets too crowded.

  6. John Bone avatar
    John Bone

    Definitely “Colours reflect the method of travel” and colours should be bright without being gaudy. The mono colour scheme is very unappealing, but going too bright and vibrant will make the app look like candy crush.

    I probably shouldn’t say this, but look at the Apple and Google maps apps for ideas of hue, tone, etc. because they’ve spent millions surveying thousands of people.

  7. Mary Austin avatar
    Mary Austin

    Single colour purple gets my vote. Not confusing, different from map base-layer colours. Bold when selected is good. Maybe there should be a menu choice within settings though, like OS, for transparency and thickness as well as colour. Actually, there could be a settings choice for each activity, so users could make them all the same if they wanted, or have multicolour options if they wanted. What I don’t like on OS is that they have little white arrows within the lines, effectively turning them into dotted lines at high zoom, which are difficult to see when it’s sunny.

  8. ToxicToad avatar
    ToxicToad

    Route Colours: It appears unclear what the multicoloured lines represented – different modes of travel or different route sections, maybe something else? Presumably every route is not going to suitable for every mode of transport. I did prefer the multicoloured approach, with the display dimming lines / colours as travel mode options and specific routes (or sequences of routes) were selected, with selected route options highlighted for that travel mode. I prefer the strong colours of OS maps vs. the dull dim pastel wishy washy barely visible gooogle display – particularly on less capable screens with less capable eyes in bright light. Perhaps there should be two schemes, selectable in a settings /options menu, as a friend detests the OS strong colours and much prefers the alternative pastel vagueness.

  9. Philippa Arthan avatar
    Philippa Arthan

    I prefer one strong colour for the initial view and agree with the usefulness of then being able to filter modes by walking/cycling/accessibility etc

    I dislike the monochrome version as I find it too flat. The purple is strong and distinct from typical map colour usages.

  10. andywales avatar
    andywales

    I think there’s a lot to be said for using different strong colours at the initial ‘overview’ stage, as it really helps to differentiate individual routes at a glance. Once a route is selected, the app could switch to monochrome, with the colour indicating travel mode – walk, cycle, etc. This might initially be a bit confusing, but I think users would ‘get it’ quite quickly, it would visually simplify the map once a route had been selected and also reduce the chance of, for example, a cyclist picking a walking route by accident.
    There are standard sets of colours designed to accommodate colour-blind users, and each of these sets could be an option in the settings – that way you don’t unnecessarily restrict colour options for non-colour-blind users and you can optimise colour sets for the different common colour-blind conditions.

    1. Phil Steer avatar
      Phil Steer

      That’s a good idea to have different sets of colours for colour-blind users (such as me!) Some colour choices really can make it impossible to differentiate between them. (I might be able to tell the difference between blocks of colour, but struggle when the same colours are used for thinner lines.) But as you say, you’d want to avoid restricting non-colour-blind users unnecessarily.
      (The NYT Wordle game has a simple High-Contrast Mode setting, which makes a massive difference to me!)

  11. ANDY MULHOLLAND avatar
    ANDY MULHOLLAND

    from the images i assume once a route has been selected to investigate before a trip or while on a journey it is much bolder than the other lines – which i would like. different colours for different possible uses of path or track might be useful. but as some have pointed out colours can be seen differently or have different sensory implications for a range of users. how about once you have chosen a route the user can designate a colour or tone or boldness to aide their use of the map?

  12. j_stamps avatar
    j_stamps

    Of these the mix of colours looks best to me, as there needs to be some way to differentiate between routes. Otherwise the map just looks like a mess of lines- with option 1 there’s no way to tell where each route is going without selecting them all individually. Maybe just a small variety of colours could work, or different shades of the same colour. As long as colour blindness is taken into account.

  13. claremockridge avatar
    claremockridge

    I am also a fan of the one strong colour and filters. The purple is good because it doesn’t muddle with other colours on the OS maps.

  14. Kerry Litten avatar
    Kerry Litten

    I agree with one strong colour such as purple, with filters for type of route.

  15. Sarah Allen avatar
    Sarah Allen

    I like the idea of a different colour depending on the mode of travel but I guess this can be managed with filters so one strong colour suitable for all visual conditions, is fine.

  16. porcovolente avatar
    porcovolente

    I think the single colour (with filters as others have suggested) it makes it easier to avoid the colourblind problem and the method of transport combinations.

  17. Petr Sadilek avatar
    Petr Sadilek

    I’m with one strong colour with the option for filter routes for walkers, cyclists, riders, surface difficulty etc. These categories of users will, I guess, be mostly interested in their favourite option only. Definitely not random colours because no-one wants to be confused about the meaning when they move to another area or open the map on another day.

  18. Malcolm Woolfson avatar
    Malcolm Woolfson

    In my view, it would be easier to differentiate between different routes if different colours were used for each route. Therefore Option 2.

    I also agree that the needs of visually impaired and colour-blind people should be taken into account.

  19. Shona Goulds avatar
    Shona Goulds

    I prefer the straightforward thick solid line – no need to overcomplicate it. Whilst I am inclined to tie routes back to the colour of the star logo I get the point about how would you colour routes that are suitable for a multitude of modes. Also the colourblind issue is central to accessibility so just one colour that is not part of the star if that deals with that. The drop down menus (sorry jumping ahead) look user friendly.

  20. Jeff Pyrah avatar
    Jeff Pyrah

    This is great. Thanks for the continued invitation to input. I think the best colour to use really depends on the base map, but yellow often works well. The colour needs to have transparency so you can read the map underneath and then the line can be quite wide too (like its drawn with a highlighter pen). I think it has to be a continuous line as dots and dashes can be confusing to read where there are junctions or changes of direction. Different colours for different surfaces would be great if it’s possible, otherwise fillers to focus on the right paths for each user. For example tarmac, gravel, grass or dirt/mud [or more simply road or trail] and then the user can decide if it’s suitable for their mode of transport.

  21. Rick Leslie avatar
    Rick Leslie

    Option 2 – Colourful Mix seems best to my Red-Green colourblind eyes.

  22. Kate Cheema avatar
    Kate Cheema

    I think option 1 in a bright pink or lurid purple would be my preference! I agree a solid line might be a bit dull, so perhaps some dotted/dashed options could be good to look at?

  23. Alison Griffies avatar
    Alison Griffies

    One strong colour. Purple would be good as it won’t get confused with red roads and green footpaths.

  24. Paul Spencer avatar
    Paul Spencer

    Option 1; keep it both simple and accessible

  25. Graham Mitcheson avatar
    Graham Mitcheson

    One strong colour please. The mix of colours was an unusable pot mess for my colourblind eyes.

    Maybe have the filters overlay shades/line thickness of the one colour to highlight options that match the filter selections (bike, 10km+ etc)

  26. John Myerson avatar
    John Myerson

    Single colour I think. Not red (road colour), not blue (water and motorways), not green (existing footpaths).

  27. C Cash avatar
    C Cash

    I concur with Ian Thomas, all the men in my family are Red / Green colourblind. So both colours appear to be just slightly different shades of ” Toffee “! Could you find a couple of people with the same condition to advise you?

    Otherwise, Option 2, is the one for me. The Colourful Mix, gives a good differentiation between routes
    Thank for asking,
    C

  28. Ren avatar
    Ren

    I would suggest a simple, single colour to clearly denote available routes, with filters for each “domain” (method of transport, accessibility, difficultly/distance), which allow multiple selections (eg cycling, easy, <10miles).

    I'm not sure how allocating a colour for each designation would work – for example, if there is a route which is suitable for walking (blue) and cycling (orange) what colour would the route be 🤔

    1. Ren avatar
      Ren

      I prefer the mono colour version… Less overwhelming, and potentially clearer for those with visual impairment .

  29. Ian Thomas avatar
    Ian Thomas

    I like either the lilac or pink because they’re quite distinctive. The main concern for me would be that, whichever colour you choose, the contrast is good for people with sight conditions. I guess that might rule the pink out.

    1. Richard Kenyon avatar
      Richard Kenyon

      I agree with most of Graham’s comments above. I would prefer default colours for different activities, but I would also like to see the option of user selectable colours, transparency and thickness too, as some have suggested. What about low light or dark modes when the map may need to switch to a different background? Would the route colour stay the same as it might also need to switch to more visible colours under those conditions.

Leave a Reply