Product quiz field guide # Product quiz mobile UX: a 12-check phone QA checklist Test product quiz reflow, touch targets, keyboard behavior, saved state, responsiveness and result actions on real small-screen tasks. 21 October 2026·Product Quiz Guide Answer: test the quiz as a complete phone task, not only in a resized desktop browser. A mobile-ready product quiz keeps the current question, choices, progress, validation and primary action usable through orientation changes, software-keyboard appearance, zoom, slow interactions and the transition to a result. ## What is mobile UX for a product quiz? Mobile product-quiz UX is the quality of completing the recommendation task on a small touch screen. It includes layout, input, target size, keyboard behavior, focus, progress, latency and the handoff from the result to a cart, booking or lead route. This page owns phone-specific acceptance. The [accessibility checklist](https://bestproductquiz.com/blog/product-quiz-accessibility) owns the broader standards path, the [microcopy guide](https://bestproductquiz.com/blog/product-quiz-microcopy) owns wording and the [question-count guide](https://bestproductquiz.com/blog/product-quiz-question-count) owns branch length. W3C's current WCAG2Mobile document is informative draft guidance rather than a standard or a complete mobile-accessibility specification. Use it to structure tests, not to claim conformance. ## Build a phone-task budget Before testing, write the smallest complete task: open the quiz, answer the longest possible branch, revise one answer, submit, read the explanation and use the primary result action. Record the viewport, orientation, browser, text size, input method, network profile and branch. Do not declare mobile readiness from the shortest happy path. Budget itemAcceptance questionFailure evidenceFirst useful controlCan the visitor identify and reach the start action?Occluded or ambiguous entryQuestion viewportAre prompt, context and controls visible without horizontal pan?Cropped option or nested horizontal scrollAnswer actionCan every option be activated without an adjacent hit?Mis-tap or tiny targetCorrectionCan the current or prior answer be changed without losing valid state?Hidden back path or resetKeyboardDoes the active input stay visible above the software keyboard?Focused field or continue action obscuredResultCan the reason, trade-off and next action be scanned in order?Result starts below an unexpected jump ## The 12-check phone QA checklist - Test narrow reflow and zoom. Verify one-direction reflow at a representative narrow viewport, at 200% text zoom and at the WCAG reflow equivalent of 320 CSS pixels. - Rotate the device. Move between portrait and landscape without losing answers, focus or the current step. - Measure pointer targets and spacing. Include radio-card edges, close controls, help icons and back buttons; evaluate the 24 by 24 CSS pixel requirement together with its exceptions. - Use touch only. Remove hover as a prerequisite for help, selection or explanations. - Increase platform text size. Confirm labels, choices and progress do not clip or overlap. - Open every software keyboard. Test text, email and numeric fields while keeping focus and validation visible. - Force long content. Trigger translated options, product names, prices and error messages before sign-off. - Challenge sticky regions. Test headers, footers and primary actions against browser chrome and safe-area insets. - Throttle and tap once. Show a pending state and prevent duplicate submission. - Traverse back, edit and forward. Preserve unaffected answers and rule state. - Inspect the result transition. Prevent unexpected layout movement and preserve the reading start. - Complete the post-result action. Test the cart, booking, CRM handoff or email continuation—not only its link. ## Keep a thumb-path ledger Store one record per tested branch rather than a single “mobile passed” checkbox. RecordMinimum contextPass conditionDevice pathviewport, browser, orientation, text sizeEntire task completedThumb pathtargets, spacing, sticky regionsNo adjacent activation or obstructionInput pathfield type, keyboard, validationActive field and recovery stay visibleState pathbranch, back/edit action, orientationAnswers and rule state preservedResult pathresult ID, explanation, next actionStable result and completed continuation ## Worked skincare quiz Northstar tests a 390-pixel portrait viewport with enlarged text. A six-line sensitivity option pushes the continue action below the fold, which is acceptable because the control remains in document order and no sticky overlay hides it. Opening the email keyboard reveals a defect: a fixed result teaser covers the inline error. The repair reserves bottom space, moves focus to the invalid field and keeps the message associated with that field. The team retests the longest translated option, not only English. ## Worked B2B plan matcher Atlas has a numeric seat-count field, optional integration checklist and scheduling action. On a throttled connection, a second tap creates two submissions. The accepted build disables the action while the same operation is pending, preserves the answers after a timeout and exposes a visible retry. The recommendation remains traceable because presentation fixes never weaken plan-eligibility rules. ## Measure responsiveness without inventing outcomes Interaction to Next Paint observes click, tap and keyboard interaction latency across a page visit; it does not describe layout stability or recommendation quality. Record question-render time, input response, validation response and result transition as diagnostics. Keep the existing analytics event map so mobile QA does not create incompatible events or denominators. ## Limitations This checklist is not a WCAG conformance statement, device-lab certification or universal conversion prescription. Representative devices cannot cover every browser, assistive technology, keyboard or embedded host. A passing synthetic audit does not replace real interaction testing, and the 24 by 24 CSS pixel minimum has exceptions that must be evaluated from the standard rather than applied mechanically. ## Sources - [W3C, Guidance on Applying WCAG 2.2 to Mobile Applications](https://www.w3.org/TR/wcag2mobile-22/) - [W3C, Understanding Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) - [W3C, Understanding Reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) - [W3C, Understanding Resize Text](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) - [web.dev, Interaction to Next Paint](https://web.dev/articles/inp) Method: the original Phone-task budget, 12-check phone QA checklist and Thumb-path ledger were applied to Northstar skincare and Atlas B2B paths. All five sources were checked on 21 October 2026. No device share, conversion lift, accessibility-conformance or customer-performance result is claimed. Corrections can be submitted through the site's [corrections process](https://bestproductquiz.com/corrections). Corrections: send the page URL, the exact statement and a current source through the [contact form](https://bestproductquiz.com/contact). [Compare the eight product recommendation quiz builders](https://bestproductquiz.com/#comparison) or read the [full testing protocol](https://bestproductquiz.com/how-we-test). --- Canonical: https://bestproductquiz.com/blog/product-quiz-mobile-ux