Wednesday, February 22, 2012

Avoid using modal windows on websites

An inevitable part of each sign up form is its username or e-mail address field. The rest is optional (even the password field). Hence, it is necessary to inform the user somehow that they are required to provide the username or e-mail address. What's more, you should notify them when they leave the required field empty. How to do it? As always, there is a good and bad way.

I just encountered the ugly one.

EduBrite signup form displays a JavaScript alert which is a modal window that prevents user to interact with the rest of a website. It shows up when the username field lacks focus. As a result user has to click OK button and is forced to fill in the missing value before submitting the form. Sounds innocent?

The problem is that the modal message pops up also when the user tries to click a menu button (e.g. Features, Pricing), select some text or start filling in the form from the other field. Not annoying enough? Let's imagine it shows up even when trying to click the browser's address field! A total disaster...

The problem is that forms on websites are not the only part of the user interface inside the browser window. In desktop applications a form is usually a part of some workflow which, since started, has to be finished or canceled. In this context leaving required value empty means an error indeed. The user can either fill in the missing field or cancel the workflow (i.e. form filling). On a website, however, there are much more possible interactions and filling in the form is only one of them. The user may want e.g. just to browse the site and may be not interested in the form at all. The form shouldn't interfere with the navigation, especially out of the website context (i.e. prevent the user from typing in web browser's address bar or clicking web browser's buttons).

So, how to do it better?

Advice: Well, just avoid showing up modal windows on websites. Instead, show the information next to (i.e. to the right of or below) the problematic field in form of noticeable text, optionally put inside the box. You can use colors and formatting to draw the user's attention.

Observed at: EduBrite signup form