March 23rd, 2012

Symbolising bike-share stations

superimposed markers

Selecting cartographic symbols can, depending on the target message, dramatically vary in difficulty. In the context of bike-share systems, which I shall define, let us look at some examples. A bike-share system, third generation, usually consists of stations containing a certain number of bike docks with bikes locked in them. Registered users can easily and quickly check-out a bike, typically for half an hour for free, ride to another station and check the bike back in. In the context of mapping there are actually many elements that can be mapped. A big challenge is communicating effectively the fullness of bike-share stations cartographically. A map must clearly show station locations and whether they have:

  • one or more bikes,
  • one or more spaces/docks,
  • no bikes,
  • no spaces, and
  • problems and are unavailable.

Displaying all these attributes concurrently is not nearly as easy as it initially appears. I will explore what symbols are currently used in online bike-share status maps and try and design an improved set.

At the simplest level we can simply show the presence of stations using one symbol at various locations on a map and ignore the attributes. The symbol can be anything, no need to make it resemble a bicycle or a station as the context communicates what we are looking at. Stations are nominal data showing the presence, absence or location. In this case all icons are exactly the same.

map showing the location of vel'oh! stations in Luxembourg

The www.veloh.lu bike-share website for Luxembourg shows locations of stations only.

By clicking on the markers on the vel’oh! map the attributes are displayed.

Display of attributes in pop-up windows

By clicking on a station marker we get an accurate representation of its attributes.

We can increase the complexity while staying nominal by looking at the quality of the stations. We can now vary the symbol shape or colour depending on the quality of the stations. We can for example make all stations which have bicycles one color and shape and those that do not, another.

Locations and absence of bicycles

These symbols show the presence and absence of bicycles (Spotcycle iOS app)

The same could be done in the opposite manner if we were to look for spaces rather than bicycles. Finding empty docks can be a problem if you are cycling into the business core during the day or the outer fringes of the bike-share system in the evenings.

Let us focus now focus on designing symbols that communicate the five criteria listed above. The Spotcycle iOS app, below, uses transparency to communicate the amount of bikes present at a station. Invisible means empty, no bikes, with many docks available and red opaque means the station is full of bikes and has no docks available for parking. Red is being used for active stations and black for those offline. An additional piece of information is being communicated through the circle sizes, the number of active docks at the station. This is not one of the five criteria listed as I do not believe it has enough importance to bother communicating. Bike-share users just want to know where they can find or park a bike.

Transparency, circle size and colour

Spotcycle uses transparency, circle size and colour to communicate the 5 criteria.

Uses colour, size and border

OOBrian's symbols vary in colour, size and border styling.

The Oliver O’Brien (OOB) Bike-share maps, above, also uses transparency but uniformly improve map visibility behind the symbols. Again circle size shows the stations active dock number. Colour hue is being used to communicate the amount of bikes/docks available. In addition outline styling is used to emphasize when there are no docs or bikes available. I do not find these outlines as effective as they could be. I believe black could be used uniformly for both extremes rather than cyan and yellow.

We’ve completed a review of some of the existing bike-share maps. Let’s see if we can design a better symbol set. In the Spotcycle and OOB maps the ratios of bicycles to spaces was rational meaning the exact values were translated into colours or transparency values. It is quite difficult to differentiate the variation and also in this case unnecessary. I have decided to show categories of values rather than showing actually values as this will remove visual variations and that makes it hard to distinguish station states. I will show only six symbols meaning:

  • No docks/spaces available, the station is full of bikes
  • Few docks available, there are many bikes
  • There are many docks and bikes available
  • Few bikes available, there are many docks
  • No bikes available, all docks are available
  • No information is available on the status of this station

I decided early on that I would use a symbol similar to the typical Google Maps type marker. It has the benefit of allowing a clear view of the location while using stronger colours than when using transparency. The downside is definitely that these more complex shapes that add clutter to the map when compared to the OOB maps. I find Google Maps default colour scheme too vivid to show the data on. I switched the view to the Terrain map which is cleaner with light grey and green tones. The highway and street codes/numbers are quite distracting however – more on this later.

The maps created are meant to be easily useful for determining which station to head to in order to find a bike or a dock. The OOB maps I believe are more analytical. Created to get an idea of the pulse of the bike flows.

My idea was to use the marker as a metaphoric container for bikes. Vel’oh! uses blue as their colour and would their use as a fill colour could implicitly communicate their level of presence. I would use the border styling to communicate the warning levels of low or no bikes or docks present.

Using the fill metaphor

Style 1 - Using the blue fill metaphor with yellow and red borders to warn low/no stock.

Map showing filled symbols.

Figure 1 - The fill metaphor with its various fill levels creates a busy looking map.

The blue lines at different stages within the glyph cause too much stimuli and chaos. I would prefer symbols with more homogeneity.

Symbols with dots for emphasis

Style 2 - Coloured dots adding emphasis to the state of the stations.

Map showing symbols with dots inside

Figure 2 - The fill metaphor is reinforced with explicitly coloured dots. This is helpful but increases crowding of the visualization.

The second style adds explicit dots and removes the coloured borders for uniform black ones. The dots serve as a compromise to the information contained in the borders previously. I enjoy the added contrast of this design but still do not like the half filled symbols.

A simpler map style

Style 3 - Similar to Style 1 without the yellow borders for a more contrast and less clutter.

Map showing simplified symbols

Figure 3 - The yellow outlines have been removed to increase contrast.

The third try attempts to reduce colour variation used for the symbols and increase contrast as the yellow was not as explicit as the other symbols. I still find the partially filled glyphs too complex – do not stare it may cause epilepsy. If not yet then the next one may.

Symbols with red arrows

Style 4 - Adding arrows for emphasis.

Map of symbols with arrows

Figure 4 - The arrows help emphasize the low bicycle/dock count at the select stations.

The arrows, while adding a new emphasis for the lost yellow border, still add clutter. Clearly the partially filled symbol metaphor is not working no matter what I do.

Symbols with uniform colouring

Style 5 - Using uniform symbols rather than partially filled.

Map with uniformly filled symbols.

Figure 5 - Using uniform symbols for a clearer message.

The uniform symbols give the map a cleaner appearance. Placing the yellow outlines within the uniformly coloured symbols does not solve the contrast problem from the white on the insides of the symbols.

Symbols with shadows.

Style 6 - Shading and shadows.

Map with shadows added to symbols.

Figure 6 - The added shadows help plant the markers perpindicular to the ground rather than being layed flat.

Adding shadows to the markers really changes their feel. They look much more planted in the ground than laying on it. This obviously still does little to solve the yellow-white lack of contrast.

Red styling for different levels of bikes.

Style 7 - Use red styling for low number and no bicycles/docks.

Map with red borders only.

Figure 7 - Using an inner border to emphasize low bicycle/docs.

The inner border reduces the number of colours and distraction yet isn’t as clear as an individual symbol.

Red and yellow borders.

Style 8 - The uniform fills and simple borders reduce distraction.

Less cluttered map with uniform symbols.

Figure 8 - The simple fills and borders gives a cleaner result.

The last example above is where the map stands now. I hope to, if I have time, continue to play around with the markers as I’m not completely satisfied yet. There still exists some contrast problems and the markers do not easily/explicitly communicate the values they represent. Currently a symbol legend is still required. Ideally a good symbol set could explicitly communicate their value. That’s what I hope to accomplish.

Update

I have since designed a better symbol that is much more intuitive, has fewer colours and a simpler less distracting shape. The palette:

The palette

Figure 10 – The palette of my best bike-share marker design to date.

The live page:

A better, simpler design for bike share station markers

Figure 9 – The final marker design is clean with few angles/curves and containing few colours.

Tags: ,

Leave a Reply