Archived Content
The good old native confirmation dialog — have you ever been writing a web app and found yourself using one of these?
The tried-and-true confirm("are you sure?") is easy to code yet horrible for your user experience. 90%[citation needed] of users will ignore the carefully crafted message in your dialog and just press OK. If you are going to do a confirmation dialog, you should do it like Github does it:
This dialog forces the user to type out exactly what they are about to do. For an irreversible action, a dialog like this is ideal since the user has to think about what they are doing in order to continue.
However, for actions that are not as severe as permanently deleting a git repository, a dialog like this is probably overkill - not to mention a pain to implement (compared to slapping a confirm in your code).
Inline Confirmation to the Rescue
A pattern we have been using at CivicSource is the inline-confirm.
We wrapped up the code to do this in a reusable knockout binding handler. To use it, it is just as easy as slapping a confirm in your code.
Before, a button just calls the remove function on the view model when it is clicked with no confirmation:
<button data-bind="click: remove"></button>After, the button avoids accidental clicks:
<button data-bind="inlineConfirm: ['Delete', 'Are you really sure?', 'Deleting…'], submitFunction: remove"></button>For a time-strapped developer, something like this is as easy to implement as a native confirmation dialog yet yields a much better user experience.
Check out the repository on Github and let us know what you think.