Learn UX/UI Design – Designing good form UX
Form UI design on Dribbble
A lot of times designers enjoy creating landing pages, dashboards, social media feeds and similar stuff for practice which mostly just requires pretty pictures and gradients. I do it too, but I also think it’s highly beneficial to practice on creating components that aren’t that fun but super common. For example forms, email templates, check-out processes, invoices and etc. On one hand, I don’t have a choice in doing it because those are things I need to design at my job. But on the other hand, I’m grateful that I get to design those things because they impact users constantly and need just as much attention.
Forms are one of the things that are everywhere on the web and usually very boring to fill out. So with this design, I tried to make a form with great usability and tried to make it fun while still keeping all the essential form fields.
UX form guidelines
To make the usability of the form as good as possible I implemented multiple UX guidelines for form design which I found in the following articles
- Design better Forms by Andrew Coyle
- 7 Best UX Practices for Designing Long Online Forms by Ashlyn Baum
- 16 Tips that Will Improve Any Online Form by DKO
- Keeping form fields on one column as much as possible (except for forms that are highly relevant like password and repeat password).
- Top aligning labels
- Making the Call-to-action button descriptive
- Using field lengths as affordance
- Grouping relevant information
Accessibility & Light mode version
The visual design of the dark mode UI was made to make it appear more cool and modern, and therefor I loosened some aspects of accessibility. But if this were to be implemented in a “real” life setting, the accessibility would be much more important. This is why I also created the design in a light mode and with more focus on accessibility.
To improve the accessibility further
To make the accessibility even better I could do the following changes:
- Make the font size larger
- Make the typography colors all higher contrast
- Make the form border colors higher contrast
- Design how tabbing would look for someone who uses tabs to navigate
- Skip the last drop-down and write out all the alternatives as buttons
Checking color contrasts can be done with sites like Contrastchecker or by downloading browser extensions.
More UX & UI design articles
If you’re interested in reading more articles about UX & UI design you can check out my related posts: