How to avoid confusing the ‘Cancel’ button with the ‘Next’ button

We have seen a number of sites where the “Positive” action buttons such as “Submit”, “Next”, “I Agree”, etc. are placed directly next to the “Start Over/Abort” action. Yes, it is true that having functions such as “Cancel” or “Clear” are important, but equally important is where and how they are positioned. I can not tell you the number of instances we have seen in the lab when the participant finally finishes entering the 20 fields of information, and mistakenly clicks the “Clear” button instead of the “Continue” button. One of the best approaches to resolving this issue is with the use of color and location. Consider the following screenshot taken from Travelocity. Their traditional colors involve quite a bit of blue, so they used a dark blue for the positive action, and a light blue for the negative action.

One additional modification we’ve seen (shown below) was taken from Avis.com. Their designers included the small arrow pointing to the right to subtly convey the “positive” action. (Now why the “Continue” button is colored red, is another story.)