Search

Form

A form is a group of input components that allows users to submit information.

When to Use

  • Use forms when you need to collect structured data from users.
    • Examples:
      • Contact information: Name, email, phone number
      • Account details: Username, password, preferences
      • Feedback: Surveys, ratings, or open-text feedback
  • Forms are essential for transactional interactions, facilitating processes involving multiple steps or inputs.
    • Examples:
      • E-commerce: Checkout, payment, shipping details
      • Registrations: Event signups, service subscriptions
      • Applications: Job applications, government forms, or financial aid
  • They facilitate user authentication, providing login, registration, password recovery, and other identity-verification tasks.
    • Examples:
      • Login/Sign-up: Capturing username and password
      • Two-factor authentication (2FA): Collecting secondary verification codes
  • Forms support custom requests or configurations, allowing users to tailor their experiences or make specific requests.
    • Examples:
      • Custom orders: Food delivery, product personalization
      • Service requests: Scheduling appointments, submitting support tickets
  • Forms with dropdowns, checkboxes, or text fields provide users with options to filter content or perform targeted searches.
    • Examples:
      • Search forms: Keyword search with filters like location or price
      • Advanced filters: Product category selection, sorting by rating or popularity
  • Use forms to gather user feedback or assess user satisfaction.
    • Examples:
      • Post-interaction surveys: Customer satisfaction or usability ratings
      • Incident reporting: Reporting bugs, errors, or issues

When to Use Something Else

  • For inline edits, edit fields directly on a page.
  • For hands-free interactions, consider voice input with virtual assistants.
  • To replace static forms, consider conversational interactions with chatbots.
  • To break down complex tasks into manageable chunks, consider step-by-step guides in interactive wizards.
  • For more visual controls and dynamic input, consider drag-and-drop elements, sliders, or toggles.
  • To automatically fetch data—such as autofill payment info via digital wallets—consider system integrations.
  • For binary or simple decisions, consider buttons, checkboxes, or other interactive elements to enable quick actions.

Usability Guidance

  • Prioritize clarity and simplicity.
    • Use clear labels for every input field. Avoid relying on placeholders as labels, as they disappear once typing begins.
    • Group related fields logically
      • Example: Billing address vs. shipping address
  • Focus on accessibility.
    • Ensure compatibility with screen readers by associating labels explicitly with inputs (<label> tags).
    • Use proper contrast ratios for text, buttons, and error messages.
  • Provide real-time feedback.
    • Validate inputs as users type to catch errors early.
      • Example: “Password must include a number”
    • Display error messages near the relevant fields, not as a generic message at the top or bottom of the form.
  • Minimize user effort.
    • Pre-fill known fields.
      • Examples: User’s name or address
    • Offer auto-complete suggestions for repetitive data.
      • Examples: Email, zip codes
    • Use dropdowns, checkboxes, or toggles where possible to reduce typing.
  • Design for mobile first.
    • Use responsive layouts to ensure readability and usability on small screens.
    • Optimize for touch with large, easily tappable input fields and buttons.
    • Avoid requiring horizontal scrolling.
  • Secondary considerations:
    • Progressive disclosure: Break long forms into manageable steps with a visible progress indicator. This reduces cognitive load and keeps users motivated.
    • Inline hints and guidance: Include tooltips or helper text for complex fields.
      • Example: “CVV is the 3-digit code on the back of your card”
    • Flexibility: Allow users to go back and edit previous sections without losing data.
    • Confirmation: After submission, show a confirmation page or send an email that summarizes the data provided.
  • Avoid these common mistakes:
    • Overcomplicating forms.
      • Don’t ask for unnecessary information or make optional fields mandatory.
      • Try not to include too many fields in a single step, which can overwhelm the user.
    • Poor error handling.
      • Always specify what caused an error.
        • Do: “Your password must include a special character”
        • Don’t: “Invalid entry”
      • Don’t use colors alone to indicate errors—for example, red outlines—without text for accessibility.
    • Ignoring accessibility.
      • Include focus indicators for keyboard users.
      • Be aware that using CAPTCHA methods can be difficult for users with disabilities.
    • Lack of mobile optimization.
      • Small input fields or buttons are hard to tap.
      • Don’t forget to optimize for native keyboards.
        • Example: Numeric for phone numbers.

UX Writing

  • Capitalization: Use sentence case for labels and instructions. Only capitalize the first word and any proper nouns.
    • Apply to all form labels, field instructions, and messages. This includes input fields, headings, and descriptions, such as “First name” or “Enter your email address”.
      • Do: “Email address”, “Date of birth”
      • Don’t: “Email Address”, “Date Of Birth”
  • Punctuation:
    • Avoid periods at the end of field labels. Field labels shouldn’t end with a period unless they’re complete sentences.
      • Example: “Full name” not “Full name.”
    • Use periods for complete sentences. Also use periods when providing full instructions or detailed messages.
      • Example: “Enter your password. Make sure it’s at least 8 characters long.”
    • Use commas for list items. Separate items in lists with commas, unless using bullet points or separate lines.
  • Asterisk placement for required fields:
    • Place an asterisk (*) after a field label to signify to the user that it’s required or mandatory. Including the asterisk also streamlines the user experience—you don’t have to include additional words such as “Mandatory field” or “Required field”, which may clutter the form. Separate the label and the asterisk with a space, as shown in these examples:
      • Password *
      • Email *
      • Quantity *
  • Grammar and language:
    • Use clear and simple language. Write in a straightforward, conversational tone. Avoid jargon or complex terminology. Aim for an eighth-grade reading level to ensure readability.
    • Use active voice, which makes sentences more direct and easier to understand.
      • Do: “Enter your email”
      • Don’t: “Your email should be entered”
    • Avoid ambiguous words and phrases. Be specific about what you want users to do.
      • Do: “Submit your payment”
      • Don’t: “Submit here”
    • Use singular for single inputs and plural for multiple inputs.
      • Example: “Phone number” for one field and “Addresses” for a section where multiple addresses can be entered.
  • More UX writing considerations:
    • Use consistent terminology: Ensure that the wording used across all forms matches the language used throughout your app or website. This consistency helps users feel familiar and confident.
      • Example: If your platform uses “email address” in other sections, don’t switch to “email” in the form.
    • Direct, user-centric language: Use the second-person voice (“you”) to engage users directly. This makes the instructions feel personal and clear.
      • Do: “Enter your address”
      • Don’t: “The address needs to be entered”
  • Avoid these common mistakes:
    • Overly technical terms or words like “reCAPTCHA” or “SSL/TLS” should be replaced with simpler alternatives like “security check”.
    • While sometimes necessary, passive voice can be confusing and indirect.
      • Do: “Change your password”
      • Don’t: “Your password must be changed”
    • Don’t overuse exclamation points. Use them to emphasize important information like “Your password is too weak!”
  • Examples of effective UX writing in forms:
    • Form field labels:
      • Do: “First name”, “Last name”, “Phone number”
      • Don’t: “First Name Here”, “Enter your Phone”
    • Form instructions:
      • Do: “Create a password that’s at least 8 characters long”
      • Don’t: “Please create a password that’s at least 8 characters long!!!”
    • Error messages:
      • Do: “Your password must include at least one number”
      • Don’t: “Password error: include numbers!”

Accessibility

Keyboard Interactions

  • Tab and Shift + Tab cycle through the focusable elements in the form.
  • Enter submits the form.

Related Pages