11/7/2022
Since the post-pandemic world, the public involvement process in the transportation industry has been shaken up much like everything else. The days of in-person public meetings have been replaced with websites about the project and some type of survey to allow the public to voice concerns. Even when in-person meetings occur, the new expectation is to have an online option for those who can't make it. As someone who works in transportation, I am seeing the need for these surveys more and more.
While most of the survey questions are simple text inputs, select lists, and checkboxes, one common type of question keeps arising, we want to collect a location based comment (lat,lng coordinate) and a category to group the comment into. Cue, up the interactive map! While this seems pretty straight forward, there are a many user interface designs to solve this question. Most requirements should allow to add multiple location based comments, and allow the user to move, edit, and delete the comment. Commonly the UI/UX design ends up being pretty confusing for most people, especially those not familiar with interactive maps.
Over time, I quickly became obsessed with designing the best user-interface for this type of question and I ended up with these two examples. While there is certainly a better way, this is where I am at currently and I think it is worthwhile to share them. The big idea for these examples was to place the comment input within a pop-up to visually tie the comment to the location the user selected on the map.
Click then click the map to place your comments.
The defining feature of Example 1 is that the category is in a select input within a pop-up on the point. The "add comment" button is placed within the map element. The user can add a point and choose to not add a text comment or select a category offering maximum flexibility. Constraints can be added to guide proper input as desired.
Select a category then click the map below to place your comments.
The defining feature of Example 2 is that picking a category is required to place a point on the map. Color coding the category buttons to the map points doubles as a legend and helps visualize category choices. The pop-up becomes shorter without the select input in it. The downside is, the "add comment" control might be slightly less intuitive when not within the map element. This method adds more buttons adding visual clutter and takes up space which can make it more challenging on mobile.
While I am still in pursuit of the perfect comment map, these two maps are what I like currently from a UI/UX perspective. My goals are for comment maps to be intuitive, reduce clicks, and offer maximum editing and flexibility. If anyone has feedback or better ideas, I would love to know!