This chapter is from the book
This chapter is from the book
This chapter is from the book
Guideline 14
Button up: Eliminate the Reset button and disable the Submit button after it's clicked
When it comes to buttons, one wrong click can ruin an otherwise successful form experience. Inadvertently clicking Reset can delete an entire form's data. Accidentally double-click Submit and you may wind up submitting information twice (resulting in multiple accounts, purchases, or some other unintended consequence).
People rushing through forms don't carefully read explanatory text or buttons before submitting a form and often make one of these mistakes. Make sure this sort of misclick isn't a deal breaker.
Eliminate reset buttons
Reset buttons (a.k.a. Clear or Cancel) are an invitation to frustration. These buttons are rarely useful and pose a dangerous threat to visitors who are trying to complete forms: One wrong click and all that labor-intensive data entry is lost. Reset buttons also increase confusion because they force people to process the impact of different buttons to determine the proper next step.
There isn't much benefit to Reset buttons. Visitors can easily use the browser's Refresh button to clear form information or just type over the existing data. So when it comes to Reset buttons, just say no.
Bank One
Reset Only http://www.bankone.com
Bank One's student loan application features one button at the bottom of the screen. Clicking that button will submit my information and take me to the next step of the process, right? Actually, no. The one button displayed is Reset—one click and all the data on this page is erased.
It turns out the Continue to Step 3 button appears only after the final pull-down option is selected. Bank One would be doing its customers a service by eliminating the Reset button altogether and showing the Continue to Step 3 button as disabled until all necessary conditions are met.
-->)
Figure
4.27FedEx
Asking for Button Trouble http://www.fedex.com
Here, FedEx makes a mistake by placing a Clear Fields button adjacent to the Send Request button. The Clear Fields button adds confusion and will cause problems when visitors in a hurry click it by mistake. How often is someone going to want to delete everything he just typed anyway? Just because the site can include a Clear button doesn't mean it should.
-->)
Figure
4.28Confirm deletions
In the rare instance that a form does require a Clear or Reset button, try to confirm the action to minimize the chance that a visitor deletes data accidentally.
University of Washington
Are You Sure? http://www.washington.edu
I clicked the Erase Form button on this page at the University of Washington's site. The site uses a JavaScript alert to confirm my intentions. It's always a good idea to confirm data deletion to prevent the dreaded "Where'd all my info go!?"
-->){kind=small}
Figure
4.29Disable submit button once pressed
Too many sites scare customers with this sort of tough button talk:
"Click the Order button one time only and then wait for your order to process. If you click the button more than once, you will be charged for multiple orders!"
Ominous language and false charges? Not the way to make friends online.
Whether on purpose or by accident, customers will sometimes wind up double-clicking form buttons. There is a way to prevent duplicate submissions, however. Use JavaScript to disable buttons once they are clicked. Then, the script can change the button (for instance, fade it out to show it's been pressed and/or present new text that explains the situation, such as "Please wait while we process your order").
E*Trade
Click Only Once http://www.etrade.com
Creating a new account at E*Trade? Hopefully you're not trigger-happy. After you click Continue, you'll have to wait up to a minute for your entry to process. And if you mistakenly click the button twice (or click Stop and then click Continue), you'll end up with multiple accounts. E*Trade could prevent this messy scenario by disabling the button after it's clicked and changing the text to "Processing, please wait. This may take up to a minute." Alternatively, the site could provide an intermediate status page between the submission of the form and the results page.
-->){kind=small}
Figure
4.30Applied Biosystems
Disabling a Button http://www.appliedbiosystems.com
Applied Biosystems realizes customers may click a button more than once. To prevent duplicate submissions, the site uses JavaScript to disable the button after it's pressed. The code also changes the button's value from Continue (the button's original state) to Wait (the disabled state) so that visitors know what's happening. It's a nifty solution to a common problem.
)
Figure
4.31