Forms are an integral piece to many websites, which makes their usability just as important as any other task (and maybe more so because their presence is so common). Forms are one of those pieces of a web site or web application’s functionality that users typically don’t want to complete, but have to complete. When users are completing tasks based on necessity it’s really in our best interest as the work flow provider to allow our users to move though it as quickly and easily as possible. Any interruption, confusion or rework will only add to their frustrations.
A few weeks back I was filling out an online application for a User Experience Designer, when I came across a fairly painful registration form. To be fair to the company I was applying with, they were utilizing a third party web app for accepting job applications so I suppose they are off the hook. The tool, “Powered by Kenexa”, starts off as many online recruiting sites do by asking you to setup an account. You are asked to enter your e-mail address, a password, confirm that your password is correct and then provide the answer to predetermined security questions. All pretty boiler plate as new account creation goes.
The first problem you might see is that there is a link called “Password Security tips” next to the password textbox. Or maybe you didn’t recognize it, because it doesn’t look like a link. Links are typically blue and usually underlined. Even on this site they are blue, which you can see towards the bottom of the form where the system let’s the user know where they can get a free e-mail account. If you didn’t see that was a link, and you were to continue to type in a password you’d encounter an error when trying to create your account.
The reason is, there are specific rules your password must follow before can create an account. What’s worse is, these rules are actually on the page for you to follow. Except they are displayed after the security question section of the form. By that time it’s too late, as the user has mentally moved on from the process of creating a password and will more than likely skim over those rules while looking for the submit button. It’s vital to provide relevant information to users at the point in time when it’s relevant. The time password rules are relevant is when the user is creating their password, not when they are ready to submit the form.
The next oddity is the security question section. The directions at the start of the form instruct the user to “select security question(s) and enter your answer(s)” Written in this way one might assume they only need to answer one question, and as the questions are presented to the user this assumption is reinforced. Instead of asking the user to “Please Select” in each of the dropdowns, they default to the first option in the list… the same option. Sounds great, except the moment you try to either leave 2 of the questions blank or try to provide same question/answer for each option the user is presented with an error message telling them their questions AND answers must be unique.
Since this was the case, the better approach would be to place this in the directions at the top of the page and then either make the default option of each of the dropdown boxes unique so the user doesn’t have to select a unique question, or make the default selection text like “Please Select” so they have to select a unique question.
The final usability hit, and this is a big one is that when the user hits “ok” on the dialog the page reloads and any previously entered information is gone. E-mail address, gone. Password, purged. Even the first security answer is tossed out. You have to start all over again. (This actually happens when the password fails to follow the password rules as well.) Never, ever, ever make your user redo work. There is no reason why they should be punished for making an error when completing a form, even if the directions were clear and it were the users fault. Human mistakes will happen even in the most well planned user interface. Allow them the chance to identify it, and gracefully recover so they can move on with their task.
The final usability issue with this form is the lack of consistency in displaying errors to the user. If nothing else, the number one thing you can do for the usability of your website or web application is to be consistent across your project. When this form was submitted with an invalid password, the error message was displayed at the bottom of the form in red. Aside from that being the worst place for a form to show an error (because users begin to read a page at the top left, not the bottom center) it shows an error in a completely different way than submitting with the form with the same security question selection, which appeared in a dialog box. This is not a great approach either, since if there are multiple errors on the form the user would have to remember each of those after closing the dialog (because their reference point has been taken away from them.) The more complex the form, the more potential for errors, the higher the odds the users will be presented with a second error message.
So why is this important? In this case, a company is hoping to attract top talent to work for their organization. If the potential candidate gets frustrated with the form, decides it’s not worth it or worse yet is reflective of the quality of the company he or she is applying for the company potentially loses that talent to another company or a competitor. And if you are trying to allow user experience professionals to apply, well, even more the reason to make sure it is user friendly.