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.

Doing this usually is as simple as adding an autofocus attribute. In some more complex cases you might need a little bit of JavaScript (hello, angular).

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.

 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.

 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.

 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.

 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 :)

 
6
Kudos
 
6
Kudos

Now read this

Running Gulp tasks synchronously

Gulp tasks run asynchronously. For example when you describe your build task like this: gulp.task('build', ['clean', 'html', 'sass', 'coffee']); you can’t be sure in which exact order the tasks will be finished. Sometimes this is the... Continue →