Essential Form Interactions
There are several important features every form should have, be it a simple login form, or a complicated multi page questionnaire. Most of them are really easy to implement but are often neglected. On the other side as from user perspective we absolutely anticipate them and lack of those small interaction makes us frustrated.
Disclaimer: I’m not a UX-expert myself, just an ordinary developer :) But I do believe that world could be a bit better place if we stick to following simple rules. I also should mention that most of time UX- and UI- guys just don’t think on that kind of details. So in the end it’s us, developers who should take care about it.
Autofocus in first input #
Reaching out for a mouse is annoying and unnecessary (that’s a main line of this article by the way). Simply, put the cursor into the first input of the form, so that user could start typing right away. This is especially true for sign in forms, because one’s going to submit them quite often.
Note: If you don’t use real labels, but placeholders only, you’d also want to make sure that the placeholder doesn’t disappear when user focus into an empty field. He should be always aware of the context. Take a look at how Buffer does it.
- Constant Contact Sign Up: When you click on “Sign Up Free” sidebar slides in from the right, but the single email field has no focus, so you have to click into it
Make sure your labels are clickable #
When a user clicks on a label it should focus into the corresponding input. Clicking on checkbox label should check/uncheck the checkbox.
You don’t even have to do anything in order to make it work. This is a default behaviour. Just make sure to use real
label elements with proper
for attribute assignment.
Also, as any clickable element when hovering over it
input[for] should have
pointer cursor and thus indicate that it’s clickable. It’s not always a default behaviour but you can achieve this with this small css snippet.
- SumoMe: labels are there, but if you click on one nothing happens
Enter should submit form #
I know this sounds too obvious but still it’s so common across the internet, especially with AJAX form. Again this is how forms work by default. All you have to do is to use a real
form tag, not just a bunch of inputs. Very often developers have a set o fields and a non-submit button to send data via AJAX. In this case nothing’s happens when you press enter inside a field. In order to make it work you need to put inputs inside a submittable form and make your AJAX interactions on form submitted, not on button clicked.
- Salesforce Sign Up form: overall a quite pleasant form, but enter’s not working.
Make sure tab moves focus into next input field. #
In a perfect scenario you don’t need a mouse to submit a form. You start from the first field (focus is already there), then you enter values and press
Tab to move from one field to another. Pressing tab will navigate you to the next element on the page. Depending on how does your markup look like it can be one that user needs to fill in, or something meaningless like a logo or a link.
If that’s the case you should use
tabindex to explicitly set what elements (and in what particular order) should be focusable.
Also while we are here. It’s easy to see that input has focus because you have a cursor blinking inside it. Not so easy with dropdowns or submit buttons. Very often submit button does receive a focus, but since visually it doesn’t change anyhow (
:focus selector), it’s not obvious whether it’s any use in pressing enter.
- Facebook sign up form: note how you just can’t select Male gender using only keyboard
Any AJAX processing should be communicated to user #
If your form send data to the server via AJAX, you should explicitly tell user, we took your data, now we’re processing it, please wait. Make sure that it changes its state during the the AJAX communication. A simple spinner would do.
Also it’s a good practice to disable submit button (enter submitting with enter), so that user won’t click it again in frustration.
Note, that in case of a non-AJAX form, browser will do this for you with its loading indicator.
So, there you go, 5 easy principles to follow to make sure users have the best experience with your forms. If you can think of other important rules please share.
P.S.: Here’s a discussion on HackerNews.
P.P.S.: I will happily remove the not-good examples from this articles, when the mentioned forms got fixed :)