falling-fruit
Photo carousel: choose better signifiers for navigating between photos
Tiny issue for a small UX improvement!
Compare a location with multiple photos - e.g. https://beta.fallingfruit.org/locations/2111424/@55.8276403,-4.2489323,18z - on desktop and mobile. On desktop or on a fully open drawer on mobile, there's a little row of circles in the bottom right corner, showing which part of a carousel you're on. But you can actually also click left and right in a partially open drawer, and navigate between photos, but the interface doesn't indicate it in any way.
We could pick different signifiers that will also work in a partially open drawer: maybe dots on the sides that are visible whenever you can swipe?
See also #605 and #733
@wbazant A quick solution would be to move the dots to the top (to be visible from partially-open drawer).
A more comprehensive solution could be to display photos at a fixed height but variable width (i.e. at their native aspect ratio and without cropping, see #605), which will almost always make visible either the next photo (suggesting a horizontal swipe) or emptiness (suggesting the first photo is the last). Google Maps uses the strategy of sizing the photos so that one never fills the width of the screen so the next ones are always partially visible, but this means having to crop.
Something Google Maps also does is end the horizontal gallery with a "See all" tile and (more relevant to this issue) an "Add photos" tile (which for us could simply link to the review form).
I'd love to help improve the photo carousel navigation experience. I can suggest and implement clearer signifiers such as better arrows, indicators, or thumbnails — to make it more intuitive for users.
Please assign this to me
Welcome to the project and thanks for offering to tackle this! I've assigned you the issue, if you have any questions or problems with projects setup please feel free to ask. Looking forward to the PR.