Improve image comparison (adding new requests)

[danielfdsilva]

Overarching issue to further discussion on improving the image comparison workflow. We'll be listing smaller items to help achieve this.

[nbumbarger]

@smit1678 We put some time into researching intuitive image selection methods, and have settled on a thumbnail approach where the selected source is shown in detail while secondary possibilities are shown as minimaps.

This approach provides users with a quick overview through the thumbnails, while at the same time allowing them to inspect particular sources in more detail. Panning and zooming on any of the maps will affect the other maps on the screen. Of the different options we tried, we feel that this one strikes the best balance between the need for overview and detail when comparing the imagery.

Prototypes

We prototyped three other options in our research. If you're interested, you can have a look by loading the comparison-test--multiple branch, logging in as a coordinator and navigating to their endpoints.

1. Minimap with preview
   /#/imagery-search-thumbs
   The selected approach with 3 thumbnail minimaps, used to select a source for the larger preview area.
2. Carousel
   /#/imagery-search
   Carousel through a list of sources, with one visible at a time.
3. Side by side
   /#/imagery-search3
   Three equally-sized sources, side-by-side
4. Imagery swipe
   /#/imagery-search-swipe
   A two-panel map, with dropdowns for selecting the source shown in each panel. We found that the drag interaction in this approach was a poor fit for the task. It can be useful for comparing change over time, but for image selection it will be important to see the entire images side-by-side and quickly switch between them.

Next step

Later this week we will start implementation of a more complete version of the Minimap with Preview. Let us know if you have any comments by then.

[smit1678]

@nbumbarger @danielfdsilva @ascalamogna Really nice work. I think the minimap with previews work well and agree with your assessment. I dig this a lot. It looks and feels great. Makes sense on the others.

Couple points we'll want to address but perhaps these things are already on your list of completing and polishing:

• let's not put this behind the login
• the bullets feel out of place and just floating there
• clear labeling of which map is which

Can you list out what is next on the backlog to finish this out?

[danielfdsilva]

Next steps on this:

• Cleanup code
• Add map indication
• Design polish

[danielfdsilva]

Implemented in https://github.com/hotosm/imagery-requests/pull/67