search

Chicago / design-cds-bootstrap

The Chicago Design System as a Bootstrap 4 theme
https://chicago.github.io/design-cds-bootstrap/
MIT License
8 stars 2 forks source link

write up blog post on what we're doing around help text and help forms #52

Open jdkunesh opened 4 years ago

jdkunesh commented 4 years ago

See https://github.com/Chicago/design-cds-bootstrap/issues/46

We should publish details of this work & the research we have done to share with vendors and departments the reasons behind the work we are doing.

alaeder16 commented 4 years ago

Form Design Best Practices: Tips to improve UX Web forms — where your site visitors can input and submit their information. Great form design enhances UX and helps boost conversions.

  1. Use one column. Single-column layouts are easier to follow, understand, complete, and submit for your visitors. A study by CXL Institute found participants were able to complete a single-column form an average of 15.4 seconds faster than a multi-column form.

  2. Arrange your form fields from easiest to hardest. Start your form with the easiest field questions (like name and email) before asking your visitors the more time-consuming questions

  3. Align text to the left. University of Basel researchers found aligning your text on the left side, above the form field box, lowers the amount of time needed to complete the form. This natural alignment decreases the amount a user’s eyes need to jump across the page and makes the form more readable.

  4. Use Input Constraints for Form Fields. Input constraints place a limit on the number of words or characters a person can type into your form field.

  5. Address possible user concerns with summary boxes or help tips. You can address concerns with summary boxes explaining your need for certain information or with statements that clarify whether or not the form field is optional.

  6. Use UI Patterns for common information blocks. UI patterns are repetitive solutions to common, recurring design-related problems your visitors face while completing your forms. These solutions work over and over again to improve your form’s UI and ease of use.

jdkunesh commented 4 years ago

@alaeder16

I added this to https://github.com/Chicago/design.chicago.gov/tree/master/_posts

However, I had some questions about the content.

alaeder16 commented 4 years ago

Forms is the one of the most important type of interaction for users on the web and in the apps. They are used everywhere — for registration, subscription services, customer feedback, checkout, to initiate transactions between users and companies, or as data input to search or share information. Using best practices guidelines CDS helps improving their forms and making them as usable as possible, because careful form design has a huge impact on the speed with which users can accurately complete a form. Below is an outline of some important practical recommendations that should be used as a starting point for form design.

At the end we can add references to: hubspot.com - Form Designs Best Practices UX Planet - 10 rules for Efficient form design U.S. Web Design Standards - Forms