OK, I hate long intros, so: this is a checklist of some of the most important UX tips for creating usable signup and login forms. It’s based on my experience looking at hundreds of beginning designer login flows, thanks to my courses Learn UI Design and Learn UX Design.
Let’s get started.
Ironically, the fundamental rule of interaction design is: remove interaction. Remove clicks, remove reading, remove waiting, remove thinking.
An easy example: if you know that literally 95% of people opening a signup form will immediately click into the first field, save them the trouble and auto-focus on it.
The only things certain in life are (a) death and (b) email addresses have an “@” and a “.” in them. Fortunately, mobile phones have specialized email entry keyboards showing those characters – but you must label your textbox type=email in HTML. This is such a simple change to make mobile users’ lives easier.
Note: also applies to telephone numbers (type=tel), URLs (type=url), and numbers (type=num) in your signup flow.
Rather than waiting for the user to fill out the entire form before you point out any errors, let them know as soon as your system can tell there’s an error. For something like email, it makes sense to validate on blur (that is, when they focus on another field).
Typically I’d try to catch both blank as well as invalid email addresses.
Every single labelled text input you ever create should have clickable labels. It’s a wonder this isn’t done by HTML by default, but simply add the input element inside its respective label element and you’re good to go. Not only does this (a) allow me to absentmindedly click the label to start typing, but (b) it also helps me if my clumsy finger accidentally misses the textbox by a bit.
No user should have to guess at what the password requirements are. Show them when they’re relevant (P.S. And remove them when they’re not).
