The product gallery on a phone: it obeys the finger, not the page

The photo follows the finger, and the page holds still

On a phone people browse a product with their fingers: they swipe the photo to see the next one. In a typical gallery several things go wrong at that moment: the photo does not move until the finger lifts, the next frame arrives late behind a grey placeholder, and if it has different proportions the whole page jumps and the “Add to cart” button slides out from under the thumb. We drive the gesture ourselves. The photo strip follows the finger in real time, a short quick flick turns the page just like a long drag, and you can loop through the photos in either direction from any frame.

• Neighbouring frames are preloaded. While the visitor looks at the current photo, the browser is already fetching the previous and the next one — switching is instant, with no grey placeholder. Preloading starts after a pause and only while the tab is active, so it never steals bandwidth from what the person is already looking at.
• The frame keeps its height. The photo block takes its height from the first frame and never changes it, so everything below the photo stays put while browsing.
• Tapping either half of the photo also turns the page — back or forward — and the tapped half lights up for a moment so it is clear where the tap landed.

Bars instead of dots: you always know where you are, even with sixty photos

Under the photo, galleries usually draw a row of dots, one per frame. With ten photos that is tolerable; with sixty, the dots merge into a grey picket fence across the whole screen and it becomes impossible to tell where you are. We replaced the dots with bars, like the stories format in social apps. Seven bars are visible at a time, the strip scrolls along with the active one, and the bars at the edges fade — so it is immediately clear there are more frames beyond. Frames already seen are filled, frames ahead are empty, and the active bar shows a running progress.

• The gallery advances on its own. Only on phones and only while it is being looked at: each frame shows for four seconds, and the progress in the bar runs for exactly that long — the two cannot drift apart, because the frame changes when the bar animation ends.
• It pauses when it should. Autoplay stops while a finger rests on the photo, while the tab is hidden or the gallery has scrolled off screen, and it is switched off entirely if the person has asked their phone for less motion.

Pinching enlarges the photo, not the whole page

Fabric, seams, hardware — people want to see them up close. The shopper does what they always do: spreads two fingers. On a typical site the whole page zooms in response — the header, the price and the “Add to cart” button slide off screen, and then everything has to be pinched back. Here, two fingers enlarge only the photo, right inside its frame, up to four times. The page stays where it was. While the photo is enlarged, one finger pans it around the frame and it never drifts past its edges — there is nothing beyond them. A tap restores the original size, and changing the frame resets everything too. The largest version of the file is fetched for the enlarged frame, so the details are actually visible.