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

Examples

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

Light mode UI form design

Dark mode UI form design

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

Contrast checker

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: