UX Patterns Guide
UI + UX Input And Data Entry standard

Single-question page

Give one conceptual question its own page with the question as the heading, concise context, the appropriate answer control, predictable Back and Continue actions, focused validation, and preserved answer state.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • One answer or decision should be read and completed without competing form questions.
  • A sequential service flow needs reliable answers before deciding the next page.
  • Users are likely to complete the task on mobile or with assistive technology.
  • Errors and recovery should stay scoped to the current question.

Avoid when

  • Users need to compare or edit several fields together before submitting.
  • The page contains unrelated questions that should be split or grouped differently.
  • The question is so trivial that separating it adds unnecessary navigation cost.
  • The flow cannot preserve answers reliably across Back, Continue, or validation.

Problem it prevents

Users can struggle with dense forms when unrelated questions, unclear headings, hidden progress, early validation, or lost answers make each decision harder than it needs to be.

Pattern anatomy

What a strong implementation has to make clear

User need

The service is collecting sequential answers, eligibility decisions, or task data where one answer may shape the next screen.

Pattern promise

Give one conceptual question its own page with the question as the heading, concise context, the appropriate answer control, predictable Back and Continue actions, focused validation, and preserved answer state.

Required state

Initial unanswered state with question heading, optional explanation, answer control, Back link, and Continue action.

Recovery path

The page heading is generic and the actual question is hidden as a small field label.

Access contract

Use a single visible h1 that states the question users are answering.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A page heading asks Do you have evidence to upload?, explanatory text sits above a yes/no radio group, Continue follows the answer, and Back returns to the previous service step.
  • A date question uses three related fields on the same page because day, month, and year answer one question.
  • A user chooses Yes, sees a follow-up detail field on the same question page, goes Back, returns, and the answer is still selected.
  • A user submits without choosing an answer, sees a specific error, selects an option, and Continue advances without losing prior answers.
Weak implementation

Vague, hidden, hard to recover from

  • One page asks for name, address, evidence status, and payment method under a vague Details heading.
  • A focused question page has only a field label inside the input, no page heading, no Back path, and an unlabeled next button.
  • A user answers three unrelated questions on one screen and submits, but the error only says fix details without naming the question.
  • A user goes Back to check the previous step and the question page clears the answer they already gave.
UI guidance
  • Render one clear question as the page heading, optional explanatory text before the answer, one answer area, a primary Continue action, and a Back link or equivalent return path.
  • Keep only controls that answer the same question on the page, such as a radio group with a conditional detail field, and place errors directly in the question area with a page-level summary when needed.
UX guidance
  • Use a single-question page when users need to focus on one decision, understand one piece of information, or answer one conceptual question before moving on.
  • Preserve the selected or typed answer through Back, Continue, validation, and route changes, and validate only the current question before advancing to the next page.
Implementation contract

What the implementation must handle

States

  • Initial unanswered state with question heading, optional explanation, answer control, Back link, and Continue action.
  • Answered state showing the selected or typed answer before submission.
  • Conditional detail state when an answer reveals another field that still belongs to the same question.
  • Missing-answer error state after Continue with the answer control still available.

Interaction

  • Back returns to the previous page or step without clearing the current answer.
  • Continue validates only the current question and moves forward only when the answer is complete enough for the next page.
  • Changing an answer updates any related conditional content without navigating unexpectedly.
  • Errors identify the question and affected controls, preserve the answer, and keep focus or reading order in a recoverable place.

Accessibility

  • Use a single visible h1 that states the question users are answering.
  • Associate the answer control with a label or legend that matches the visible question structure.
  • Put explanatory text before the control so it is encountered before answering.
  • Expose field errors in text and connect them to the affected controls.

Review

  • Is there exactly one conceptual question on this page?
  • Does the page heading clearly state the question users are answering?
  • Do all controls on the page answer the same question?
  • Would users benefit more from scanning these fields together on one page?
Interactive lab

Inspect the states before you copy the pattern

Answer one focused page

Choose an answer, continue, use Back, trigger validation, and verify the current question preserves its answer.

Single-question page
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Initial unanswered state with question heading, optional explanation, answer control, Back link, and Continue action.

Keyboard / Access

Tab moves from Back or page context through the answer controls and then to Continue in a predictable order.

Avoid Generating

Putting several unrelated questions on one page and still calling it one thing per page.
Evidence trail

Source-backed claims behind this guidance

Full agent/debug reference

Problem Context

  • The service is collecting sequential answers, eligibility decisions, or task data where one answer may shape the next screen.
  • Users may be on small screens, under stress, using assistive technology, or completing a high-stakes government, finance, health, or support flow.
  • The answer may use one field or several related controls, but those controls all answer the same question.

Selection Rules

  • Choose a single-question page when one conceptual question deserves focused reading and answering before the next task step.
  • Use the question text as the page heading when it is the main task on the page.
  • Keep related fields together when they answer one question, such as a date split into day, month, and year.
  • Prefer a single-page form for short low-risk data sets that users need to scan, compare, or edit together.
  • Use single-question pages inside a multi-step form when the broader journey has several ordered pages or sections.
  • Avoid wizard framing unless users need a guided sequential tool with strict branching, step locking, or complex progress management.
  • Use the appropriate answer control inside the page, such as radio group, checkbox group, text input, textarea, date input, or file upload.
  • Validate on Continue or after interaction, preserve the answer, and keep the user on the same question until it is fixable.

Required States

  • Initial unanswered state with question heading, optional explanation, answer control, Back link, and Continue action.
  • Answered state showing the selected or typed answer before submission.
  • Conditional detail state when an answer reveals another field that still belongs to the same question.
  • Missing-answer error state after Continue with the answer control still available.
  • Recovered state after correcting the current question.
  • Back-return state with the previous answer restored.
  • Loading or saving state when Continue persists the answer before moving to the next page.

Interaction Contract

  • Back returns to the previous page or step without clearing the current answer.
  • Continue validates only the current question and moves forward only when the answer is complete enough for the next page.
  • Changing an answer updates any related conditional content without navigating unexpectedly.
  • Errors identify the question and affected controls, preserve the answer, and keep focus or reading order in a recoverable place.
  • The browser Back button and service Back link do not create conflicting histories or duplicate submissions.
  • Progress indicators, if present, describe the broader flow without turning the page into a dense wizard dashboard.

Implementation Checklist

  • Write the page heading as the exact question users need to answer.
  • Place any explanation, eligibility context, or privacy note before the answer control.
  • Choose the answer control by the data being collected rather than by the page pattern name.
  • Group related controls on the same page when they answer one conceptual question.
  • Provide Back and Continue actions with consistent placement and labels across the flow.
  • Persist the current answer before navigation and restore it after Back, validation, reload, or server errors.
  • Add field-level errors and an error summary when the page is submitted with invalid or missing answers.
  • Test the page with keyboard, screen reader, zoom, mobile viewport, browser Back, service Back, validation, and conditional answer changes.

Common Generated-UI Mistakes

  • Putting several unrelated questions on one page and still calling it one thing per page.
  • Splitting one answer across several pages when the fields need to be understood together.
  • Using the pattern as a substitute for choosing the right field control.
  • Adding wizard chrome, progress locking, or branching UI to a simple isolated question.
  • Clearing the answer after Back, Continue, validation, or reload.
  • Using vague headings such as Details or Step 2 instead of the actual question.
  • Showing a generic error that does not name the unanswered question.
  • Making users continue through many trivial pages when a short single-page form would be faster and lower risk.

Critique Questions

  • Is there exactly one conceptual question on this page?
  • Does the page heading clearly state the question users are answering?
  • Do all controls on the page answer the same question?
  • Would users benefit more from scanning these fields together on one page?
  • Does Back, browser Back, validation, and Continue preserve the current answer?
  • Is the next page determined by this answer, and is that transition understandable?
Accessibility
  • Use a single visible h1 that states the question users are answering.
  • Associate the answer control with a label or legend that matches the visible question structure.
  • Put explanatory text before the control so it is encountered before answering.
  • Expose field errors in text and connect them to the affected controls.
  • Use an error summary after failed submit when focus starts near the top of the page.
  • Keep Back, Continue, and conditional content reachable in logical keyboard and reading order.
Keyboard Behavior
  • Tab moves from Back or page context through the answer controls and then to Continue in a predictable order.
  • Radio, checkbox, text, textarea, date, upload, and other controls keep their native keyboard behavior.
  • Enter or Space follows the selected control behavior and does not unexpectedly skip the page.
  • Continue is an explicit submit action for the current question.
  • After validation, focus moves to the error summary or invalid control without losing the answer.
  • Browser Back and service Back both return to the expected previous step without duplicating the current answer.
Variants
  • Radio-question page
  • Checkbox-question page
  • Short-answer question page
  • Long-answer question page
  • Date-question page
  • File-upload question page
  • Conditional question page
  • Eligibility question page
  • Question page with error summary

Verification

Last verified: