clean-and-green-philly icon indicating copy to clipboard operation
clean-and-green-philly copied to clipboard

Improve map toggle

Open thansidwell opened this issue 1 year ago • 2 comments

The current map/list view toggle likely has usability problems.

  • The four squares icon likely isn't commonly recognizable as a view control, while other icons like filter, plus, minus are more commonly understood.
  • Being top left, it seems to blend into the interface and is likely overlooked.

https://github.com/CodeForPhilly/vacant-lots-proj/assets/1965986/d716ff82-44ec-4a83-b6a0-d8253ff4b93b

Making these improvements will likely improve the usability. View Prototype

  • Add a fixed button center bottom floating above the map and the list
    • Clicking this button toggles between the map and the list
  • Remove the toggle from the top bar row. The row shouldn't need to change from desktop to mobile.

This new button takes up extra space there, which overlaps with the legend.

  • Make the legend on mobile collapse to just an info icon
    • When users click on it the legend should fully appear
    • Clicking on the title should collapse the legend again

https://github.com/CodeForPhilly/vacant-lots-proj/assets/1965986/03887bd2-76ec-4c1c-8c29-928bc41a1a4a

thansidwell avatar Apr 27 '24 15:04 thansidwell

I would like to work on this. :)

amyyeung17 avatar Apr 30 '24 23:04 amyyeung17

Assigned!

bacitracin avatar Apr 30 '24 23:04 bacitracin