Title: Forms (Guidelines)  
Owner: Jesilyn Barnes
Creator: Jesilyn Barnes Dec 19, 2018
Last Changed by: Jesilyn Barnes Jun 02, 2019
Tiny Link: (useful for email) https://fergusonprod.atlassian.net/wiki/x/mAbDC
Export As: Word · PDF  
DXT (1)
    Page: Guidelines
Hierarchy
Children (7)
    Page: Structure
    Page: Input Fields
    Page: Field Labels
    Page: Actions Buttons
    Page: Feedback
    Page: Assistance
    Page: Validation
Labels
There are no labels assigned to this page.
Time Editor  
Jun 02, 2019 11:43 Jesilyn Barnes View Changes
Apr 02, 2019 22:44 Anonymous  
Outgoing Links
External Links (24)
    https://blog.prototypr.io/designing-accessible-forms-82f2ea…
    https://uxdesign.cc/the-ux-behind-designing-better-forms-d6…
    https://www.uxbooth.com/articles/styling-forms-accessibly/
    https://uxmovement.com/mobile/input-types-give-users-the-ri…
    https://uxdesign.cc/design-better-forms-96fadca0f49c
    https://medium.theuxblog.com/10-best-practices-for-designin…
    https://www.nngroup.com/articles/date-input/
    https://www.nngroup.com/articles/web-form-design/
    https://baymard.com/blog/required-optional-form-fields
    https://uxplanet.org/the-18-must-do-principles-in-the-form-…
    https://blog.optimalworkshop.com/designing-form-fields-opti…
    https://www.nngroup.com/articles/password-creation/
    govuk-elements.herokuapp.com/form-elements
    https://blog.prototypr.io/ux-best-practices-of-form-validat…
    https://baymard.com/premium/topics/95
    https://www.uxbooth.com/articles/the-new-rules-of-form-desi…
    https://medium.com/@andrew.burton/form-validation-best-prac…
    https://uxplanet.org/designing-more-efficient-forms-structu…
    https://axesslab.com/disabled-buttons-suck/
    https://uxdesign.cc/the-anatomy-of-a-credit-card-payment-fo…
    https://baymard.com/premium/topics/427
    uxmovement.com/forms/bad-practices-on-phone-number-form-fie…
    https://baymard.com/premium/topics/424
    https://uxplanet.org/designing-more-efficient-forms-assista…
DXT (35)     Page: Enable 'Next' Only When Form Is Filled
    Page: Group Labels With Their Inputs
    Page: Specify Errors In Proximity
    Page: Be Smart With Help Text
    Page: Ensure Actions Look Like Buttons
    Page: Differentiate Primary From Secondary Actions
    Page: Highlight Erroneous Fields
    Page: Stick to Single-Column
    Page: Mobile: Match Keyboard With Input Type
    Page: Use Default Values Cautiously
    Page: Use Short, Descriptive Labels
    Page: Desktop: Make Forms Keyboard Friendly
    Page: Order the Form Logically
    Page: Submit Should Provide Feedback
    Page: Support Color-blindness
    Page: Use Color, Text and Symbols to Validate
    Page: Don't Use 'Reset'
    Page: Mark Optional Fields
    Page: Use Input Constraints
    Page: Display Messages in Proximity
    Page: Explain Input Requirements
    Page: Don't Disable Submit... Entirely * (Tentative)
    Page: Use Clear Language
    Page: Combine Related Fields
    Page: Group Related Information
    Page: Keep the Form Short
    Page: Avoid Placeholders
    Page: Desktop: Autofocus First Field
    Page: Utilize Field Length As An Affordance
    Page: Mask Where Possible *
    Page: Sentence Case Over Title Case
    Page: Validate Instantly For Difficult Questions
    Page: Make CTA Descriptive
    Page: Align Labels Properly
    Page: Show All Options If Under 6