I recently wanted to contact Northface regarding a jacket of mine which zipper has broke. I went to www.northface.com and searched their web site for an email address or something. After some searching I found a button labeled “Email us” and clicked on it expecting my email client to launch, but instead I was transferred to a page with a contact
Very well I started filling it out the form and wrote a long explanation what was wrong with my jacket. When I was finished I and wanted to post the form I accedentely clicked the Reset button. Everything I’d written was instantly deleted. Why did I click the “Reset-button” one may ask. The reason is very simple, it was the only button available in the bottom of the form. When I looked closer at the form I noticed a small text saying “Send” to the left of the reset-button. Apparently the link to the image mimicking a button was broken and instead of the image the alt-text was shown.
Often users doesn’t read labels but rather just click on the thing that looks most appropriate, in this case the button. Send is the primary action and reset the secondary action therefore the send-button should be the most prominent one. But in this case it’s the other way around.
The use of a reset-button is also very questionable. In this case it provides very little value because in a form this small it’s really no effort to change or delete the the values I’ve already entered in the fields if I want to. But very annoying to accidentally reset the whole form. The risk by far outweighs the benefits of the reset-button.
One thing they did right though is to place the primary action before the secondary. That way the user, if using the tab key to navigate the form, will reach the primary action before the secondary.
One other good thing about this solution is that they provided the send-button with an alt-text so even though it’s not rendered it can still be understood and clicked. To provide these kind of fall backs is crucial when developing web interfaces. A person with images turned off can for example still use the functionality of the form. And in cases like this when an image is missing, the usability of the form decreases but the user can still complete the task at hand.
- Consider using native form elements for buttons etc, thereby avoiding this problem altogether.
- If you still decides to use images, make sure the link to the image is not broken and also provide an alt-text.
- Don’t provide a reset button in simple forms, the cost of error is simply too high.
- Make the primary action stand out more than the secondary action thus hinting the user of the correct action to take.
- Place the primary action before the secondary action to make it a little more convenient for the user.
Do you have any other ideas how to further improve this form. Please leave a comment and share your ideas.