Guidelines
optional vs. required
It's best to always mark all required fields, regardless of the required/optional ratio (even on an "all required" form).
Best Practice
Designing for longer forms
Progressive disclosure
Implement progressive disclosure to unveil supplementary content triggered by the user's preceding choice. This show/hide method enables users to concentrate on pertinent data while maintaining succinct workflows.
Multistep forms
A multi-step form distributes input fields across multiple screens and integrates a progress indicator to systematically track the user's advancement. Each screen should display a coherent grouping of fields, while maintaining a linear connection between sections.
This strategy proves advantageous for preserving form progress throughout the process and granting users the ability to revisit prior steps for reviewing their submissions.
Good to know
Form Organization and User Workflow
Principle: Forms should align with the user's cognitive framework and ongoing tasks to enhance usability.
Rationale: Users engage with forms based on their existing mental models and the context of their activities. Organizing forms to reflect this mental framework streamlines user interaction and fosters a seamless workflow.
Recommendations:
- Contextual Alignment: Structure forms to mirror the way users naturally think about and approach the task at hand. This fosters familiarity and reduces cognitive load.
- Workflow Integration: Adapt form layout and organization to harmonize with the user's current workflow, ensuring smooth progression from one task to another.
- Logical Sequencing: Arrange form fields and sections in a sequence that aligns with the user's expected order of information entry, optimizing efficiency.
- Grouping and Chunking: Group related fields together logically, aiding users in comprehending the purpose and connections of each section.
- Progressive Disclosure: Present only relevant fields based on user inputs or choices, preventing overwhelming users with unnecessary options.
- Feedback Loop: Continuously gather user feedback and observe interactions to refine form organization, keeping it aligned with evolving user needs and behaviors.
By adhering to these form organization guidelines, our design system enhances user experience by harmonizing form structures with mental models and workflows, ultimately leading to more intuitive and efficient interactions.
Establishing a Clear Information Hierarchy in Forms
Principle: To enhance the user experience and streamline form completion, maintain a well-defined information hierarchy and implement appropriate sectioning as required.
Rationale: Clarity in form presentation significantly contributes to user efficiency and comprehension. By employing consistent visual cues and structuring, users can swiftly navigate and complete forms, ensuring a seamless interaction.
Recommendations:
- Section Clarity: Employ clear and descriptive section headers that guide users through different segments of the form. These headers should concisely communicate the purpose of each section.
- Logical Grouping: Group related form fields and elements together under appropriate sections. This fosters a coherent and structured presentation, helping users to easily distinguish and process different sets of information.
- Visual Distinction: Utilize consistent spacing and visual styling between form elements, controls, and sections. This visual coherence helps users discern the relationships and importance of various form components.
- Prioritized Sequencing: Arrange form sections and fields in a sequence that mirrors users' natural progression through the task. This ensures that users encounter information in a logical order, minimizing confusion.
- Responsive Presentation: Ensure that the information hierarchy adapts effectively to various screen sizes and orientations, maintaining its clarity and readability across different devices.
- Feedback Integration: Continuously gather and analyze user feedback to refine the form's information hierarchy. Regular assessments help ensure that the hierarchy remains intuitive and aligned with user expectations.
By adhering to this guideline, our design system promotes user-friendly forms with a structured information hierarchy. This enhances user understanding, reduces cognitive load, and ultimately leads to higher completion rates and improved user satisfaction.
Layout
Optimal Form Layout for User Clarity
Principle: Design form layouts that facilitate user comprehension by organizing related sections logically and optimizing field presentation.
Rationale: A well-structured form layout enhances user understanding, accelerates information entry, and promotes an efficient interaction.
Organize Related Sections Logically
Recommendations:
- Section Grouping: Group coherent sections of the form together, aligning with users' natural thought processes. This ensures users can readily identify and comprehend the context of the information they are entering.
- Descriptive Labeling: Use clear and concise labels for each section, aiding users in quickly grasping the purpose and content of the section.
Employ a Single Form Column
Recommendations:
- Fast Comprehension: Implement a single column layout for the majority of the form, allowing users to swiftly grasp and process each field without visual distractions.
- Related Fields Alignment: Place related fields on the same line within the column, minimizing eye movement and cognitive effort required to associate interrelated information.
Opt for Short Input Size
Recommendations:
- Enhanced Readability: Opt for shorter input sizes for fields, ensuring that text remains easily readable without causing strain or visual clutter.
- Focused Input: Encourage focused user attention by presenting concise input areas, which allows users to concentrate on individual data entry tasks.
Note: While optimizing input size, maintain usability by ensuring that text remains legible and user-friendly, especially on different devices and screen sizes.
By adhering to this guideline, our design system cultivates an efficient and comprehensible form layout, empowering users to navigate, understand, and complete forms with ease and confidence.