Design feedback

[samanpwbb]

Hey there! The flood map is incredibly promising. I love that you all managed to pull this together so quickly. I think the user experience could be dramatically improved with a few changes.

Map legibility

There are too many competing visual elements on this map. The goal of the map is to show users which streets are flooded and allow users to report additional flooded streets and the map should be laser focused on that goal.

There is no legend. I don't know what I'm looking at. What are the icons with triangles in them?

How does the default pitch setting support the goal of the map?

At high zoom levels the underlying satellite imagery is it too low resolution to be usable. If you want to use the satellite imagery to orient users at lower zoom levels, that's fine: but as the user zooms in, the satellite layer should fade away and be replaced with a solid background so the focus of the map moves to the roads.

Why was the starting template Mapbox streets? The map contains a lot of unnecessary details that distract from the primary goal of the map. I circled three POIs that have the same visual style and same level of visual hierarchy as the relief camps, but are irrelevant to the goal of the map:

Another problem with using the streets template is that the template was designed specifically to work against a beige background. Using a blue background without modifying other parts of streets leads to illegible neighborhood labels and harsh text halos. If the map would have been based on light or dark and then adjusted to match the background color, these problems would go away and the map would be much more legible.

Clearer user guidance

When designing applications, the tool should 1) quickly and clearly teach users how to use the tool, and then 2) allow users to focus on using the tool.

I numbered the areas based on what I think users should see first:

Right now, the map overpowers everything and then the bottom right overlay and the sidebar both have similar, competing visual weight.

It would be best to first introduce users to the tool with a centered overlay with a concise explanation of the tool and how it works, and then afterwards, show just map and the legend. The added advantage of an intro overlay is that the user wouldn't see a distracting GIF infinitely looping in the sidebar when trying to help report floods.

Once the user starts clicking on the map, there should be more feedback. It's far too easy to click on the map and get no feedback and then give up, or alternatively click all over the map without realizing that you're "reporting" floods. When user successfully reports a flood, tell them. Maybe even give user a chance to confirm their changes to avoid misreported flooding. If a user clicks on the map at a zoom level that is too high, tell them.

More pragmatic visual design

What was the intention with using a custom scrollbar? It's buggy and it doesn't add anything to the experience.

Why did you choose to use a semi-transparent sidebar? Semi-transparency might look cool, but it almost always detracts from the legibility of the content in the semi-transparent area and should be used sparingly in UI design.

---

@planemad, @arunasank, @batpad, @prasannavl, @geohacker – Hopefully you find this feedback helpful. Happy to talk about any of these suggestions in more detail.

[prasannavl]

I think that's very useful feedback. But I'd like to think of the possibility how we can use the data to help - I'm a little a fixated on if we could use to find out possible transportation routes for basic services like water tankers, and food transport - which is the most essential to get through the crisis.

Unfortunately as most would understand, people in Chennai like myself are also preoccupied with getting our own supplies - Would be great to see other developers joining on board.

Kudos to the OSM team for initiating this.

Sent from Outlook Mobile

On Wed, Dec 2, 2015 at 8:47 AM -0800, "Saman Bemel-Benrud" [email protected] wrote:

Hey there! The flood map is incredibly promising. I love that you all managed to pull this together so quickly. I think the user experience could be dramatically improved with a few changes.

Map legibility

There are too many competing visual elements on this map. The goal of the map is to show users which streets are flooded and allow users to report additional flooded streets and the map should be laser focused on that goal.

There is no legend. I don't know what I'm looking at. What are the icons with triangles in them?

How does the default pitch setting support the goal of the map?

At high zoom levels the underlying satellite imagery is it too low resolution to be usable. If you want to use the satellite imagery to orient users at lower zoom levels, that's fine: but as the user zooms in, the satellite layer should fade away and be replaced with a solid background so the focus of the map moves to the roads.

Why was the starting template Mapbox streets? The map contains a lot of unnecessary details that distract from the primary goal of the map. I circled three POIs that have the same visual style and same level of visual hierarchy as the relief camps, but are irrelevant to the goal of the map:

Another problem with using the streets template is that the template was designed specifically to work against a beige background. Using a blue background without modifying other parts of streets leads to illegible neighborhood labels and harsh text halos. If the map would have been based on light or dark and then adjusted to match the background color, these problems would go away and the map would be much more legible.

Clearer user guidance

When designing applications, the tool should 1) quickly and clearly teach users how to use the tool, and then 2) allow users to focus on using the tool.

I numbered the areas based on what I think users should see first:

Right now, the map overpowers everything and then the bottom right overlay and the sidebar both have similar, competing visual weight.

It would be best to first introduce users to the tool with a centered overlay with a concise explanation of the tool and how it works, and then afterwards, show just map and the legend. The added advantage of an intro overlay is that the user wouldn't see a distracting GIF infinitely looping in the sidebar when trying to help report floods.

Once the user starts clicking on the map, there should be more feedback. It's far too easy to click on the map and get no feedback and then give up, or alternatively click all over the map without realizing that you're "reporting" floods. When user successfully reports a flood, tell them. Maybe even give user a chance to confirm their changes to avoid misreported flooding. If a user clicks on the map at a zoom level that is too high, tell them.

More pragmatic visual design

What was the intention with using a custom scrollbar? It's buggy and it doesn't add anything to the experience.

Why did you choose to use a semi-transparent sidebar? Semi-transparency might look cool, but it almost always detracts from the legibility of the content in the semi-transparent area and should be used sparingly in UI design.

---

@planemad, @arunasank, @batpad, @prasannavl, @geohacker – Hopefully you find this feedback helpful. Happy to talk about any of these suggestions in more detail.

---

Reply to this email directly or view it on GitHub:
#14

[vmahadrv79]

First this is just a great map . Kudos to the team. But

Legend and depth of water such as a coding of roads impacted like

Red - critical don't go (evacuated or over 6ft)
Pink - approachable or (walkable but over 3ft)
Orange - under water knee high

Some kind of legend would definitely improve .

But as I said this is just amazing guys thank u thank u as I used this map to let my brother in law know that there is water flodded on 8th avenue Ashok nagar and have asked him to take metro from annanagar to get his brother

[planemad]

@samanpwbb @vmahadrv79 Thanks so much for taking the time to do this. This is extremely useful and valid feedback and can guide the improvement work going forward.