Check image detail, variant selection and recovery
Ask the phone user to inspect cable detail, change finish, check clamp dimensions and resume selection. Record whether the images still describe the selected variant and whether the enlarged view can be closed. The task tests usable product information through normal, slow-loading and missing-image states rather than swipe animation alone.
Worked example — illustrative data.
| Task prompt | Expected state | Observe |
|---|---|---|
| Show how the cable exits the base | Relevant detail image can be found | Navigation and image usefulness |
| Switch brass to black | Images match selected finish | Old-image persistence or misleading transition |
| Inspect clamp dimensions | Detail is readable without hiding controls | Zoom, orientation and caption |
| Return to selection | Chosen variant remains clear | Focus and scroll position |
Use a real phone and record device, orientation and the test product. Start from a fresh page state, then repeat after a variant change. Check visible controls and keyboard access where supported rather than requiring gestures alone. Write useful image descriptions based on what the image conveys, and avoid duplicating promotional copy. Include slow loading and a missing image so the design does not depend on every asset arriving instantly.
Test gallery recovery after changing the selected finish
Open a detail image for the brass lamp, enlarge it, then return and choose the black finish. Check whether the image, caption and selected state agree, and whether keyboard focus returns to a useful control. Repeat in a narrow orientation. Log a missing product detail separately from a broken gallery interaction because the fixes differ.
An enlarged image can interrupt focus and selection
An enlarged image can trap the buyer if its close control is hard to find or focus does not return. Include opening, closing and resuming the purchase task in the same script.
Accept the gallery when the buyer can identify the relevant detail and selected variant through normal and failure states. Preference for an animation is secondary to completing those tasks.
Is a technically sharp image always useful on a phone?
No. The shopper still needs the right angle, scale or dimension detail for the decision. Check whether they can find and read that information without losing the selected variant or the route back to purchase.
Continue with Guides for stores, software teams and local businesses, eCommerce website design and development and Choose a Squarespace product layout.
For keyboard operation and returning focus, see the W3C WCAG quick reference.