A Touch-Target Check for Adjacent Product Swatches
On a phone, a row of small colour or finish swatches can make a visitor choose Oak when they meant Walnut. The mistake may go unnoticed until the order summary. This article proposes a short observation routine to check whether neighbouring swatches are far enough apart, and what to do when they are not.
What you are actually testing
You are not testing whether a swatch looks nice. You are testing whether a fingertip aimed at one swatch can land on another, and whether the page tells the visitor which one was chosen. Two separate failures, so two separate columns on your sheet.
The swatch-spacing observation sheet
Create a table with these columns: Device and orientation, Swatch pair (for example Oak next to Walnut), Visible swatch size, Gap between swatches, Intended target, Selected result, Selection confirmed in text (yes or no), Notes. Use whatever units your design tool gives you, and record the same unit throughout.
Choose pairs, not single swatches. Prioritise pairs that look similar, since a wrong tap between near identical finishes is the costly one. Include edge swatches, where a row wraps to a second line and vertical neighbours sit close.
Running the observation
Use the smallest screen your visitors might plausibly use, plus one larger. For each pair, ask a tester to tap the first swatch ten times without looking carefully, then the second. Record every tap that selects the wrong one. Keep it informal; this is a personal check, not a study, and the numbers only inform your own decision.
Branching choices
If no wrong taps occur and the selection is confirmed in text, record and move on. If wrong taps occur on a few pairs, consider enlarging the tappable area without enlarging the visible swatch, or increasing the gap. If wrong taps occur across most pairs, consider replacing the row with a list or a two column grid with finish names. If swatches are too numerous for any spacing to work, consider grouping by family first and revealing finishes second.
Worked example (hypothetical)
Imagine eight swatches in one row on a narrow phone, with Oak and Walnut adjacent and a small gap between them. A tester taps Oak ten times and twice gets Walnut, both times near the shared edge. The page only changes a thin border, so the tester does not notice. Two changes could follow: add a gap, and print the chosen name under the row. After the change, repeat the same ten taps and record the result in a new row, keeping the old row for comparison.
Stop conditions
Stop adjusting spacing when swatches begin to wrap in ways that hide some finishes, or when larger gaps push the add to basket control out of reach. At that point the layout, not the spacing, is the problem. Also stop and escalate if a wrong selection could flow into an order without any visible confirmation.
Acceptance checks
Every adjacent pair has a recorded row; every wrong tap has a note and a follow up; the selected finish name appears in text near the swatches and again in the summary; the check was repeated after each layout change; and a keyboard or assistive technology user can reach each swatch separately with its name announced. These are suggested criteria for your own review, and they do not promise that no visitor will ever tap the wrong swatch.