Lately, I've been delving more into frontend development. However, the more I learn, the more I start to notice websites/apps out there that do not implement proper forms and validations. Yes, just because they sit near the back seat of your website, doesn't mean they can't contribute to your overall user experience 🤓

It's a paradigm shift. Once you learn proper form UX, you can't unsee it. Pun intended, this reminds me of cantunsee.space, really fun web app that runs your UI/UX fundamentals through literal speed-testing 🚀

But why talk about form UX? Form UX is important for user onboarding. In business, this can be a key insight into how well your online reach is in terms of the number of followers, subscribers, or users you get. Therefore, making the process streamlined and easy-to-use is essential to user experience.

Note: These tips can be utilized in your portfolio and/or next project! A completed version will be given at the end of this article, as well as resources for further UX learning 👍🏼

Table of Contents:

• Contrast
• Labels
• Placeholders
• Alignment
• Form Validation
• Conclusion
• Tips & Resources

Contrast

First and foremost, always refer back to UI fundamentals with design, even in forms!. Contrast aids those who are visually impaired, and even for those who are not, provide a better visual experience and reduces pain points.

An article by the Nielson Norman Group found that having a darker background behind a lighter input box aids accessibility and eye tracking (easier to find).

Labels

DO NOT substitute your label as a placeholder. Labels tell the user how to approach your input and what to expect if they fill it out. It also fulfills the hierarchy rule in UI design, and scannability.

Placeholders

Placeholders should be used with caution.

• Options:
• Placeholders should be used along with labels to guide the user and prevent from straining their short-term memory. Why would it strain their short-term memory? Well, you've likely had the experience of approaching an input with a placeholder and as soon as you started typing, it goes away!
• Opt for plain input boxes (despite what we think sometimes) when placeholder text just isn't necessary unless it's supplementary information

Alignment

Another fundamental UI design principle.

• Options:
• Align vertical and horizontal axes of your input boxes
• Labels can stay left-aligned
• TIP: Add padding for text if you're using CSS

Form Validation

Form validation can be a pain for designers, but even more a pain for users if they submit a form and THEN you tell them they inputted the information wrong.

• Options:
• Add example input in the label so the users know how to correctly input information
• Smart Forms: section out parts of the form as users finish each section (i.e credit card number inputs). Can be a very good UX solution
• Add tooltip (info icon) so users can optionally hover over to see the requirements of the input

Conclusion:

As designers, there are many ways to entertain forms and be creative with it, but we must also practice constraint - design is not necessarily practical! You don't have to get good form design correct the first time; remember, good design takes practice and many iterations.

Tips and Resources:

I cannot list all the possible golden nuggets our there on qualitative research regarding form design, or UX research, but here are the relevant ones to this article.

Organizations:

• Nielson Norman Group
• Interaction Design Foundation

Form Design Related:

• Placeholder article https://www.nngroup.com/articles/form-design-placeholders/
• 10 Heuristics for User Interface Design https://www.nngroup.com/articles/ten-usability-heuristics/
• https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92
• https://www.nngroup.com/articles/web-form-design/
• https://www.nngroup.com/videos/required-fields-forms/