Buttons and usability
The other day I was talking to a friend about destructive actions in web forms, web apps, or any kind of apps for that matter. With any destructive action such as cancel, exit or delete comes great responsibility for the developer.
Delete links and buttons
You're responsible for each user who's frustrated because they accidentally clicked your delete button, and there's no way to restore their deleted work. This problem usually resides around web apps because only a few web apps offer undo / redo behaviors.
Mailchimp asks for delete confirmation, as you can see in the above screenshot. To make things worse, the popup takes ages to load, so the interface doesn't go as smooth as you'd want. Moreover, the confirm and cancel buttons are in close proximity. What if I accidentally click delete, than accidentally click confirm?
Cancel buttons in forms
The same goes with forms and their cancel buttons. Many forms have cancel buttons although I don't see their point. If you wish to cancel what you've done in a form, you simply go to another page or hit the X button.
However, some insist and put a cancel button in the form. Moreover, they don't just put it in a remote area of the form, they put it right next to the submit button. This inevitably leads to users accidentally clicking it instead of the submit button, which means even more frustrated users.
As you can see in the screen above, Five Cent Stand exaggerated with their creativity. Of course, their form is lovely, but can you see how close and similar are the send and clear buttons? You can barely see there's two distinct buttons. Really, really bad solution.
X or close buttons
Then there's the X (close) button which a few years ago was used only in desktop apps. Since the new rich user interfaces available on the web, a large number of web apps have lots of windows, and you guessed it, X buttons. The problem is nobody asks or tests if the clicks on these buttons are accidental or not. Making such check ups would be hard. And if you can't, you should check with the user if they meant it, which leads to our next problem.
What if we asked users if they really like to perform that destructive action (X, delete, cancel) or not? This sounds so Windows right? Moreover, this would frustrate and irritate even more users than before.
The percentage of users actually wanting to click those buttons is way higher than those who do it by accident. This means they'll get pissed of with you for asking them for confirmation all the time.
Is there a solution ?
It has to be, and here are some suggestions I thought might work. Let's start with the X button. One click may be unintended. How about a double click? I don't think that one could double click by accident. Even if that happened it would be just one user not plenty of them! The overall experience of almost everybody would definitely improve.
One solution for the forms canceling button would be placing it somewhere remote, far from the submit button, and styling it differently. What about delete buttons? A solution I think could work great is inspired from the Apple iPhone/iPod collection.
What if we developed delete and cancel buttons in a "slide to delete" fashion? Clicking them won't do any harm, but clicking and sliding for 30 pixels or so would trigger the event? Now wouldn't that please anyone?
- 1. The change is here. Hover events come to mobile devices
- 2. Should I use on hover behavior?
- 4. Consistency. Key element in extraordinary UX
Published on Tuesday, February 9th, 2010 at 3:00 pm in usability.
February 10th, 2010 at 3:27 am
I would like to see that idea in action. I have never tried a button like that with a mouse and feel it might be such a jarring experience to long time computer users but that doesn’t mean it would not work good.
I have used in my designs icons for detrimental or important actions on buttons to highlight their usages visually. I think the visual cue prevents miss clicks.
I think it would be interesting to see web apps / sites implement more sophisticated or unusual interface techniques but i think it’s just one of those desires that doesn’t pan out on a global user scale.
Change is good / innovate or die… The whiners will always be there.
Bogdan Pop says:
February 10th, 2010 at 10:17 am
Hi Rob and thanks for your comment.
I agree with you. Visually aiding the buttons and links are a good improvement, placing contrary actions apart from each other further enhances the interface.
But people who use computers can get tired, and they will accidentally click something they don’t want to, and it is our job to allow them to easily fix their unfortunate actions.
I assume you refer to the sliding button when you say about users having a jarring experience. Indeed, such a button would feel at least awkward in the beginning, but I feel it could be useful in some interfaces that deal with serious matters – banking for example; I wouldn’t want to send money by mistake, lose commissions and possibly never have them back.
Make your own jQuery slider using XML says:
March 2nd, 2010 at 7:16 pm
[…] 5. Buttons and usability […]
Awesome Slider demo and source codes says:
March 4th, 2010 at 5:05 pm
[…] 5. Buttons and usability […]
Impressive web forms. From coding to validation! says:
March 23rd, 2010 at 7:39 pm
[…] 7. Buttons and usability […]
July 27th, 2012 at 1:40 am
I hate the fact that have to confirm for these actions; even notifications are annoying (eg. adding music to playlist in cell phone…says “song blablablabla has been added to your playlist”…. U_u(really?))
This information/technique is great! i’ll use it from now on…