We now use an accordion in the scorecard to hide the details shown on the initial page load. Motivations:
Fix information hierarchy. Our most important information is a) the map itself, b) city name, then c) what % of parking. Much less important are details like parking score and population, albeit useful for some users. By showing all the details on the initial load, we were detracting from more important information.
Remove bad scroll experience on mobile. The expanded scorecard is too tall on mobile to show without covering up the map, so we before were truncating the scorecard. But this results in a confusing experience where you have to scroll to see more details; the scroll wasn't obvious either.
before: mobilebefore: desktopafter: mobile - unexpandedafter: desktop - unexpandedafter: mobile - expandedafter: desktop - expanded
This change allows us to always show the scorecard in the same location in the top right corner. That consistency is a better UI.
To counteract the scorecard covering the top of the map, we now translate the map downwards 40 pixels.
A follow up PR will revamp the top header to further improve upon this new map layout. I also still want to improve the scorecard entries, but in a follow up.
We now use an accordion in the scorecard to hide the details shown on the initial page load. Motivations:
before: mobile
before: desktop
after: mobile - unexpanded
after: desktop - unexpanded
after: mobile - expanded
after: desktop - expanded
This change allows us to always show the scorecard in the same location in the top right corner. That consistency is a better UI.
To counteract the scorecard covering the top of the map, we now translate the map downwards 40 pixels.
A follow up PR will revamp the top header to further improve upon this new map layout. I also still want to improve the scorecard entries, but in a follow up.