1 / 27

Csci 215

Discover essential best practices for web form design that avoid ambiguity and enhance usability. Learn the importance of label alignment, grouping related fields, and clear indication of required and optional fields. Understand the significance of inline validation, default values, and clear calls to action. Explore tools and resources like Wufoo and FormAssembly for creating seamless forms. Emphasize usability testing with diverse user groups and make informed design adjustments. For additional insights, check out our privacy policy and linked resources.

keenan
Télécharger la présentation

Csci 215

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Csci 215 Form Design – Best Practices

  2. AvoidAmbiguity

  3. Include a link to your Privacy Policy

  4. Use Appropriate Label Alignment • Top aligned for familiar data input and short forms

  5. Right aligned when vertical screen space is a constraint

  6. Left aligned for unfamiliar or advanced data entry

  7. Group Related Fields

  8. Use tabs to group related fields

  9. Emphasize Error Location

  10. Use the Appropriate Input Control

  11. Make Required/Optional Fields Clear

  12. All Fields Required

  13. Most Fields Required

  14. Provide Default Values

  15. Flexible Input

  16. Inline Validation

  17. Clear Call-to-Action

  18. Is there a clear call to action?

  19. Test, Test, Test! • Usability testing is critical • Observe users from different groups • Take notes • Make changes based on feedback

  20. Use CSS Layout for Forms • http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html • http://designshack.net/articles/10-css-form-examples/

  21. Web Form Creation Tools • Wufoo • Form Assembly • icebrrg

  22. How Would You Improve This Form?

  23. How Would You Improve This Form?

  24. How Would You Improve This Form?

  25. How Would You Improve This Form?

  26. Learn More • 11 Best Practices for Web Form Design • Web Form Designvideo by Luke Wrobleski • Web Form Design: Modern Solutions and Creative Ideas

More Related