Design quick wins

[mvl22]

I've worked on some quick wins for the design, to tidy and smarten things up a bit, as illustrated below.

These changes:

• Deploy a more modern font
• Regularise the menu
• Add hover styling to menu
• Highlight selected menu entry
• Move the icon to the left
• Use a full height menu, which is better for usability as the scrolling is more obviously consistent
• Adds a small amount of translucency to the menu, for some polish
• Adds shadow to the menu and basemap control
• Better padding in the border of the menu / basemap controls
• Spaces out the margin at the bottom of each main menu item
• Improves spacing of the headings of the menu / basemap controls
• Moves the attribution to the bottom left (as otherwise would be hidden behind the panel)
• Simplify the menu HTML structure

I haven't made changes to the main menu layout itself as I think these need more thought and will take longer. For instance, the route network filters are conceptually part of the route network controls, so shouldn't really be shown as a separate box, but that would need other spacing changes and tightening the slider layouts a lot.

Also the menu is not yet a proper list, as it should be, but that is a slightly more disruptive change, and I had to back out after over half an hour of adjusting it.

[Robinlovelace]

Thanks Martin, looking good! Good topic to discuss with Angus on Thursday, assuming all agreed after that we can then merge #146

[mem48]

@mvl22 I trust your expertise on this, but a few quick questions.

1) How does this look on phones and tablets? The larger UI elements presumably block more of the map.

2) is there a reason for full length layer control on desktop? It looks like a lot of white space. I had always aimed to maximise the visibility of the map.

[mvl22]

How does this look on phones and tablets? The larger UI elements presumably block more of the map.

Not much difference, really.

NEW:

PREVIOUS:

[mvl22]

is there a reason for full length layer control on desktop? It looks like a lot of white space. I had always aimed to maximise the visibility of the map.

My consistent experience when using the existing behaviour of the current boxes was one of confusion, because the opening/closing of the accordion headings means the height constantly changes, so it is then difficult cognitively to determine the content of the lower half - it is constantly switching between mapping and controls. Now that expansion moves into a space that the user is already cognitively expecting to be UI.

In general the use of a static block of screen space is considered a standard design approach. Floating map panels really date from an era when Leaflet.js was being introduced, but not so much now.

Given that we expect people will be constantly changing the route network parameters, that in practice makes it full height anyway. We only lose a small amount on the bottom right on screens large enough.

Below is an example from Google Maps, which is a fairly equivalent design and UI purpose. You can see how the panel is kept constant, even though the very initial view has this unused area of space - but it is quickly filled up with stuff once the controls are used.

As a general point, I hope to rework the UI panel entirely in the next phase of the project, as there are a few things that are out of line conceptually. For instance, the Route network filters have their own heading, but really are just controls within the scope of the Route network, and are not a proper grouping in their own right. The sliders also take up a lot of space, as does the Other layers section. At this point I expect the panel on the right will be narrowed a bit.

[mvl22]

I see this has been merged, so I suggest this ticket be closed.