In the Use Live Text to Digitize Your Cookbooks article, I tried something new—using a slider to display multiple iPhone screenshots. They’re tough normally because one is too narrow and looks weird, two side-by-side is great, three side-by-side starts to get small, four or more side-by-side gets really small, and stacking them takes up a ton of vertical space. Hence the slider.
So what do you think? Is it an effective way to display screenshots when I’d like to show more than two iPhone screens next to each other?
I like the idea, but this particular implementation could be improved a bit. Without knowing what you can and can not change…
I think the speed of the sliding should be increased. I’m not sure what the ideal speed should be, but this one feels slow. Maybe try 1/2 second?
I think it’s a bit strange that the new image slides “over” the previous image, instead of the old image sliding out as the new one slides in. But this is really a matter of preference.
On my 12 mini (in portrait orientation), the Next and Previous buttons are hidden (they’re also hidden in a desktop browser 1280px wide when zoomed 200%). The “pips” that indicate there even are multiple images are layered on top of the screenshots and are hard to see. One has to guess that left-right swipes can change the images viewed. If the “pips” were positioned below the images in an otherwise empty area, it would be more clear what’s possible.
As is often the case for sliders and carousels, there are accessibility issues.
The developer used real button elements Next and Previous buttons and gave them good names but there’s no indication to a screen reader user that clicking them does anything; for this use-case, it could probably use an ARIA live region to announce the alt text for the current image so the screen reader user wouldn’t even have to navigate to each image. The alt text for each image doesn’t really convey what’s in them but that’s up to you to provide.
For a sighted user who uses a keyboard only (or keyboard equivalent), they can’t tell when they’ve tabbed to the Next and Previous buttons because the developer has hidden focus indication (.seriousslider-control:focus { outline: 0; } though it’s not sufficient to get rid of that, there’s something else going on).
There’s basically no contrast difference between the gray and purple pips, some people’s colorblindness would prevent them from being able to tell them apart (they’re also just hard to see when layered on top of images). If the current image’s pip not only turned purple but also had the white ring changed to black, that would make it clear without relying on color.
The slider seems to somehow limit how much images can be zoomed as part of the page. Regular images are enlarged proportional to the text but within the slider they only get slightly larger (on a phone, pinch-to-zoom works as expected).
I was pleasantly surprised when I encountered the screenshot slider.
I don’t see any timed transition; perhaps it’s some setting I’ve altered in Firefox or macOS. However, in this instance, I would prefer to click to get the next image, as it gives me time to glance back and forth between the text and the screenshot.
I’m not colorblind, and I had trouble seeing the difference. Since I wasn’t relying on the pips for any information, it didn’t matter to me. I only looked for the difference (and the pips themselves) after reading @cwilcox’s comment.
As a proof of concept, I liked it. The screenshots were quite readable on a Studio Display. (I concede that may not be the case with smaller iPhone screens, as an example.)
While I agree with other’s critiques concerning the pip colors, etc., I’m also a proponent of the concept “don’t let the perfect be the enemy of the good”. Compared to other sites’ implementation of this same concept, this is every bit as good and possibly superior.
I’ve since discovered that Serious Slider does badly in email and RSS (it shows all the slides at full size, stacked one on top of the other, making for a very long scroll), which may cause me to avoid using it except in very specific situations. Hmm…