Improve screenshots carousel

[fabiospampinato]

Expected behaviour

The screenshot carousel aligns screenshots to the left, IMHO that's not visually pleasing and the current screenshot should instead always be centered in the carousel.

Also the left chevron is shown briefly when loading the page, which is distracting.

Steps to reproduce the problem

Load the link below in a sufficiently wide window.

Specs

• URL: https://snapcraft.io/notable
• Operating system: macOS 10.14
• Browser: Chrome 39

[matthewpaulthomas]

The Microsoft Store, Apple’s App Store Preview, and Google Play all left-align their screenshots too.

What do you mean by “the current screenshot”? You can see more than one screenshot at a time, and zooming in on a screenshot doesn’t scroll the carousel at all, even if the small version is partly off-screen.

If you mean that clicking a chevron should scroll so that a screenshot becomes centered, that would have a couple of drawbacks:

• The first screenshot would be inconsistent with all the others, unless it was an endless cycle with the last one to the left of the first one (which could annoy publishers who wanted their screenshots to be viewed in order).
• Conversely, scrolling to the last screenshot would leave a gap to the right of it, unless it was an endless cycle with the first one to the right of the last one.

[fabiospampinato]

The Microsoft Store, Apple’s App Store Preview, and Google Play all left-align their screenshots too.

• Microsoft's: the screenshots are tiny and unreadable, I'm not sure how much those thumbnails can be compared with Snapcraft's prominent carousel.
• Apple's and Google's: there are mostly vertical screenshots there so it makes more sense to show more than one screenshot at a time, otherwise there would be a lot of whitespace around each image. The Apple TV screenshots, which are more landscape-ish, are unreadable and clicking them does nothing.

I wouldn't really take too much inspiration from their implementations.

What do you mean by “the current screenshot”?

If screenshots are centered the current screenshot is the centered one.

The first screenshot would be inconsistent with all the others

I'm not sure I follow, it would been centered just like any other screenshot.

Conversely, scrolling to the last screenshot would leave a gap to the right of it

I doubt it would be a big deal, it would be a signal that the carousel is at the end and as a nice side effect this would ensure that the chevrons aren't placed in a way that they cover part of the screenshots themselves, like they are placed now.

---

A possibly important thing I hadn't considered is that if there are lots of vertical screenshots my approach could not work the best for them, I'm not sure what the aspect ratio distribution is on the store.

Just some friendly feedback here, I thought I share it with you people.

[matthewpaulthomas]

If screenshots are centered the current screenshot is the centered one.

Ah, I understand now. So when you loaded the page, the first screenshot would be centered. In that case, I think the biggest issue would be that it would increase the overall scrolling required. Particularly snaps with only 2~3 screenshots, at widths that didn’t require scrolling at all before, now often would.

[danielmutis]

Thanks for raising this issue @fabiospampinato. At this moment I don’t necessarily think this issue has a significant impact on the usability of the website, and it refers mainly to aesthetics.

The images are aligned to the left to be consistent with the alignment of all the other elements on the page. Visually, if a user uploaded a single screenshot to their snap, it would show a centred image with everything else left-aligned. We aim to not have any other elements centre-aligned.

However, I think your comment on the chevrons covering the images and their size is worth looking into.

[Zoospora]

Hello Fabio. Thank you for contacting us.

I understand your point of view and the issue you mention.

However, from a visual point of view in this case, the images are aligned to the left, as Daniel indicates, to follow the line of the whole page.

In addition to this, it is possible to see the preview of a second image. In this case, if we observe the different widths of each image, we can establish a relationship between the size of each of the images and the two main blocks of the web (attached screenshot). In this way, the visual weight and balance is more consistent throughout the page.

So, we consider that, in this case, the current layout is justified. However, we will take the different suggestions into account for future improvements. Thanks again for your interest and collaboration.