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

Leave login forms unscripted

Password managers have become an integral part of today's web browsers. They are able to determine whether the form is a login form and fill it out accordingly. However, some ugly JavaScript can confuse them and interfere with their functionality, thus breaking it.


In fact, I found two sites where I was unable to use password manager built in my Opera web browser because it was not recognizing login or password field properly due to underlying JS hocus-pocus. Firefox and Google Chrome did not even propose password saving at all. What is more, such complication may also make it impossible to submit the form using the enter key and hence require user to explicitly click on the submit button.


Advice: Do not try to be smarter than the already existing solutions by reinventing functionality of the login forms. Or at least if you have a very good reason to do this make sure that you don't break those solutions (including password managers).


Observed at: Parallels Plesk Control Panel at netarteria.pl and website of my company's business partner.