Theses days I read a very good article about “How to design better forms
I really think helping users to interact easily with forms is a key point of a good UX in every app.

The main form we have in tepee.pro application is the Profile edition. So, as part of our continuous UX improvements I decide to apply the great advices given in the article to make our user profile edition event easier to use.

OLD PROFILE EDITION VS NEW PROFILE EDITION

New vs old profile form

THE CHANGES WE DID

Top align labels

We switch from 2 columns model : Label + field to a single column model with Label at the top of the fields

Benefits: more space for infos, easier to read, options are side by side on desktop offering a better comparison.

Don’t hide basic helper text

We have a password policy that requires at least 8 chars, 1 capital letter and 1 digit but in the password update form, this policy was not visible. User frustration for sure. This was maybe the most valuable improvement.

We add the requirements for password under the field. Using the same display we have for privacy informations on other fields.

Benefits: user knows exactly how the password should look like. More efficiency.

Ditch the * and denote optional fields

This one is my favorite!

I have almost always used * to indicate the field is required. This is a very common pattern but you still need to add some words “* = required” somewhere to be sure every user will understand the meaning of the *.
And to be honest no one knows know where to put this explanation.

The magic with this pattern is that you consider fields required by default and just add an “Optional” in the label.

Benefits: much more clear for the user. Less intellectual effort.