Zoom Demo · grocerymock UX lab

Salad Mate Dressing Caesar Lite, 12 Oz

Dressing

$6.99 / each

Quantity of each:

Featured Products

Kemach Corn Flakes Cereal, 18 Oz

$4.29 / each

Lieber's Hot Sauce Flavored Potato Chips, 0.75 Oz

$0.69 / each

Taanug Crisp Rice, 12 Oz

$3.79 / each

Lieber's Cut Hearts Of Palm, Premium Quality, 14 Oz

$1.79

$2.29

01Try it

The mouse is your finger: click = tap, hold the button down = press and hold, move while holding = slide. For the real feel, open it on a phone (section 06).

Use the product photo on the page behind this sheet. Close the sheet first.

Tap the photo	The zoom button fades up from 25% to 90% for 2 s. Nothing else happens.
Press & hold the photo	After 350 ms the photo fills the screen at 3× card size, with a haptic tick on Android.
Press the zoom button	Zoom opens instantly with no wait. Same rule: it lasts while the finger is down.
Slide the finger	Finger position picks the spot on the photo: top-left of the screen shows the top-left of the pack.
Lift the finger	Zoom disappears instantly and the page is exactly where it was.
Swipe over the photo	The page scrolls. A press that moves more than 8 px is treated as a scroll, not a zoom.
Keyboard	Tab to the button, hold `Space`, pan with the arrow keys, release to close.

02State model

Also closes on pointercancel, window blur, tab hidden or Esc. A second finger during the press cancels it, because the user is pinching.

03Why this design

Reading the label is the job.Grocery shoppers zoom to check net weight, ingredients and kosher or allergen marks. This listing is a real example: the title says 12 Oz, the bottle says NET WT. 11 OZ.

One gesture, no viewer chrome.There is no viewer to open and no ✕ to find. Lifting the finger is the close button, so zooming costs nothing and works as a quick peek you can repeat.

Proportional map instead of drag.Lifting closes zoom, so the finger can never let go to grab the image again. Mapping screen position to image position puts every corner within one thumb movement. The 12% edge dead-zone reaches the image edge before the finger reaches the bezel.

A quiet button that speaks up when asked.At 25% the button keeps the product photo clean. Any tap on the photo turns it up, which teaches the shortcut the moment the user shows interest. It lights up again after every zoom.

Press, not tap, even on the button.That keeps one mental model. A tap that is too short shows a "Press and hold to zoom" toast instead of flashing the image.

Scrolling stays safe.The photo takes about a third of the first screen. A press that moves is handed back to the page as a scroll, so zoom never hijacks browsing.

04Risks & open questions

Discoverability. Long-press cannot be seen. Is a 25% button plus a tap hint enough? Test whether first-time users succeed without instructions.

Accessibility. WCAG 2.5.7 (dragging) and 2.5.1 (pointer gestures) require a single-pointer alternative. Screen-reader users can press and hold with a double-tap-and-hold but cannot pan. Production needs a tap-to-open viewer with pan buttons as a fallback.

Accidental zoom when a thumb rests on the photo while reading. Tune the long-press delay and move tolerance.

Platform conflicts. iOS Haptic Touch and Live Text, and Android's long-press menu. These are suppressed here; keep the delay under about 500 ms.

Image sharpness. The source is 1000 px. On a 3× DPR phone, zooming to 3× card size gives about 2.7 device px per image px, which is slightly soft. Production should serve a 2000 px zoom asset preloaded on the first hint.

What to measure. Time to read a label detail, zooms per product view, accidental-zoom rate, and whether shoppers still open a separate gallery.

06Try it on your phone