abstreet
abstreet copied to clipboard
a-b-street
LTN basemap color scheme
@dingaaling added a major road to the interior of a neighborhood, but then found it confusing that the orange color was similar to the light red showing rat-runs. The "basemap" shows roads in a few Mapbox-based colors -- pink for highways, orange for major roads, white for local roads. Maybe it'd be simpler to just ditch this color scheme for the LTN tool and always draw streets in white, to not conflict with the shades of red on top.
Hijacking this issue to describe the current state of the app and challenges.
It's maybe easiest to just see directly: http://play.abstreet.org/0.3.25/ltn.html?system/gb/bristol/maps/east.bin
Needless to say, the current design is not colorblind friendly at all, but we want it to be.
The basemap
Before any of the LTN stuff, we draw a map that isn't the typical Mapbox / OSM Carto. The basemap style was designed for different projects, and so it's quite likely we need to rethink stuff for the LTN tool's purpose. The most important elements are shown below.
Roads. Motorways are pink, main roads are orange, local streets white, and separated cyclepaths green. It could be simpler to just draw all roads in the same color, but showing the existing rank is useful for people to orient and intuit where traffic may go today. The cyclepaths smushed next to roads is unfortunately messy and an ongoing effort to fix.
Labels. Intersections with traffic signals have an icon. We draw labels over roads that're responsive to moving the map around. (Ignore all the extra color in the screenshot below)
Areas and railways. Green parks and blue bodies of water. The brown lines are rail.
Buildings. The lighter ones are purely residential, and the darker may be multi-use or commercial / a school.
The per-neighbourhood view
The main view happens once we select a single neighbourhood.
There's lots going on! The colored areas are cells, showing how the neighbourhood is split into pieces between which you can't drive without going to the perimeter road around the neighbourhood. The cell colors are totally meaningless; we just cycle through about 5 choices and make sure to not use the same color for adjacent cells.
The red circles with white icons are modal filters. These're usually placed along a street, but can also be diagonal across a 4-way intersection -- and we try to orient the line accordingly. As you zoom out, the icons stay roughly the same size, since they're pretty important to see.
One-way streets are shown with arrows. The user can also modify direction of streets, and it's apparently pretty important to show this. Note the label for Leonard Road overlapping the arrows on the right.
Predicted shortcuts are shown with shades of red. White streets have no cut-through traffic. Dark red means likely lots of problems.
Problem: cell coloring
People have been very confused by the cell coloring. The colors themselves are meaningless; the point is just to clearly divide the space. One point of confusion happens when the same color is used for multiple cells. The two yellow cells aren't related, but the colors suggest otherwise.
Also when you add new filters and effectively create a new cell, the colors can suddenly jump. This is partly good -- creating a new cell is very important, usually a good thing, and so a dramatic change is nice. But all of the existing colors can shift around (because it might be impossible to keep the existing colors and add a new cell without coloring two adjacent cells the same).
One idea is to show outlines around the cells, not fill them in. Example: 
The closest I've come to this is a dashed outline. It's too hard to see the cells now, I think.
We've tried some alternate color in #883 and #876 like 
. It's been hard to find cell colors that don't clash with the red shortcut heatmap.
Some other experiments with more muted colors:
What if we use a qualitative palette, so people don't interpret cell color at all? Using https://colorbrewer2.org/#type=qualitative&scheme=Accent&n=4
Problems: we want to avoid green (parks) and red (shortcuts).
Possible idea: pick a palette with a huge number of colors to cycle through, and never use the same color twice.
More icons incoming
The red "do not enter" icon is very negative; we've gotten feedback that this should instead be something positive, emphasizing the road is open for walking and cycling. Something like this?
Making sure this icon is very visible against all the other color/style choices is important.
When a filter is placed on a bus route, we need to show that it'll be a camera-enforced bus gate of some sort. Something like this, but no idea about the colors:
Buildings right now don't provide much context, but we've had a request to call out schools. Probably we can just put a (more appropriate) icon on the building:
Other ideas
#908 - Maybe we could add a legend to explain the colors? But I view this like documentation -- if somebody has to read it to understand, then we've failed. Good design should be self-explanatory.
Other possible reference. This doesn't show cells at all, but is otherwise nice and simple: 
Happy enough with how things look now. #963 really drove the color work home!
