DEV Community

Cover image for Form Design Cheatsheet: A UI/UX case study

Form Design Cheatsheet: A UI/UX case study

maureento8888 profile image Maureen To ・3 min read

Lately, I'm delving a LOT more into frontend development (Vue.js, HTML/CSS, graphic design, etc.). 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 (i.e. near the footer), 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 (By the way, this reminds me of this awesome project on running your UI/UX fundamentals through literal speed-testing 🚀).

Pay attention! This 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. 👍🏼

1. Contrast

Alt Text
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).

2. Labels, please!

Alt Text
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.

3. Placeholders

Alt Text
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

4. Alignment

Alt Text
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

5. Form Validation

Alt Text
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


Alt Text
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! Sculptures carved by Michelangelo didn't take a day. Rome wasn't built in a day. Social change and human rights didn't take a day... you get my point!

Tips & 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. The rest is in your hands to discover!


Form Design Related:

As always, thanks for visiting my post! 👩🏻‍💻

Discussion (0)

Editor guide