Improving login form UX by adding one line of code

Just to warm up there is a quick question. Why this form fails with validation error?

The issue here is that the email has trailing spaces which are not visible (obviously).

Actually this is not an artificial example I've just made up, this is a real example from the mid-tier web application, and probably you've encountered something similar in the past.

As for a technical guy the error completely makes sense for me. Indeed, hello@there.com␣␣␣ is strictly speaking not correct email, but for a common user this error is irritating and useless to say at least. Taking into consideration that login page is the most crucial part of your application, the user experience there should be as smooth as possible.

So simplest fix for this case will be trim trimming any non visible characters (not just spaces and tabs, there are plenty of them) outside of the email.

email.trim();

The cost of this change is negligible, but potential benefits are remarkable.

Every time you are working with UX (any kind of it) always challenge your work from the perspective of a regular user and trust your gut filling, because in general we are already got used to "good" UX and know how it should be, even without noticing it.

Get the latest posts delivered right to your inbox.