Flex Component: Confirmation Window with Count-down to Enabled OK

Oct 29, 2009

After years of abuse of pop-ups and confirmation boxes users have become so honed at the skill of simply clicking the OK button on any kind of confirmation box that pops up that it has become almost nothing more than a reflex. This can cause some serious issues when it really matters.

In my flex application I needed to increase the chances of a user actually reading the notice in the pop-up box as much as reasonably possible within the user experience. The solution I decided to use is I believe fairly common to anyone with windows experience; it's also one I would use sparingly!

When the confirmation dialogue is presented the OK button is disabled at first. Instead a countdown timer is displayed on the button. After that timeout the user can then click "OK"; The cancel button is available at all times.


The code isn't rocket science and making use of the pop-up is so simple I won't even bore you with an example, but it is a nice quick fix if you need it.

Source view is enabled on the Flex demo

Comments

Banned in Boston

Banned in Boston wrote on 10/29/09 3:19 PM

I noticed that the Cancel button moves its location when the OK button switches to its final state. Likewise, the OK button changes both its location and size. The location and size changes are not good, from a usability perspective. I would recommend that anyone using this technique modify it so that the buttons stay fixed. I haven't tested the following myself, but: possibly just padding out the "OK" string with enough spaces to equal the length of the button's default text would do the trick.

Or, you could do what some installers do: to enable the OK button, make users type in a word which is found in the text of the pop-up. (Yes, that is pretty obnoxious--I wouldn't use that technique lightly). A slightly less onerous variation is to put a radio button or check box at the end of the text and enable the OK button when the radio button or check box is selected. This one is more commonly seen when the text is long (and therefore a scroll bar is likely).

Of course, the best design (at least from a usability perspective) is to avoid the necessity for a modal pop-up in the first place!
Russell Brown

Russell Brown wrote on 10/29/09 3:26 PM

Like I said, use sparingly. In my case this method was used off of an action that should almost never be performed by the user but had permanent repercussions if it was done as a mistake.

Your correct about the size change of the button and I've updated the code; thanks!

Write your comment



(it will not be displayed)



Subscribe to this comment thread