5

I am curious about a specific confirmation pattern. The best way I could describe it is the "missile launch" pattern, where the user has to "arm" the button by removing some sort of cover before pressing it to perform the action.

Reddit implemented it a few years ago for one of their April fools.

gif of the "missile launch" button in action

I am aware of this question but it is a few years old and doesn't mention it.

  • Is there a common name for this pattern?
  • Is there a library that implements it for the web?

Edit 1: here is an example of the "disarm, fire" usage

Edit 2: In most use-cases, it is recommended to use classic, proven patterns. This is not a proven pattern

Edit 3: Here is a minimal jsfiddle implementing this pattern.

  • Could you provide a larger area screen-recording to show more of the context of the interaction? – harshikerfuffle May 3 at 23:18
  • 1
    Added a link to a video with an example. – Pierre May 4 at 3:35
  • 1
    @jazZRo I am planning to use this for a classic delete/confirmation button without undo – Pierre May 4 at 14:59
  • 1
    @Pierre If it is just a classic delete/confirm use case, why not stick to classic (read: proven) methods instead of risking frustrated users. If you need something less prone to user errors take a look at the method GitHub uses as explained in the question and answers here: ux.stackexchange.com/questions/130147/… – jazZRo May 4 at 15:17
  • 1
    @jazZRo I agree with you that generally it's best to follow classic proven patterns. There are some cases (such as a personal tool with no broader audience) where it's okay to explore sub-optimal patterns. I'll update my question to reflect that this is not the recommended solution – Pierre May 4 at 17:05
3
+100

Short answer is that I don't think it exists because it is a redundant design pattern due to the history of skeuomorphism in interface deisgn.

Long answer:

I am curious as to whether this type of design pattern is still used these days, as it is probably a type of skeuomorphism that tries to mimic the behaviour of something like this in real life called a button switch guard

button switch guard shield.

People probably more commonly associated it with a Nuclear Button, although I guess it is a bit disappointing that it probably doesn't exist in real life...

nuclear launch button

Now in a digital environment, there is no need to apply this level of skeuomorphism because there are already existing patterns as you mentioned like the confirm to delete popup that serves exactly the same function (i.e. getting an additional confirmation before performing an action in case it was an accident).

It doesn't serve any additional purpose or benefit, and in fact there are better strategies to achieve the same outcome without an additional trigger/action such as using biometrics that require a specific contact point for a set period of time or something like a phone unlock pattern that requires a specific series of actions that is very difficult to trigger randomly.

So I think you would called it a skeuomorphic call-to-action confirmation design pattern that is implemented as a button switch guard.

You might find examples on Dribbble, Code My UI or CodePen and other Javascript/CSS code demo sites.

| improve this answer | |
2

This is essentially an animated overlay that protects an interactive element from accidental use. While it is rare to see it on a button, it used to be fairly common on video player elements. Somewhat like the "play button" icon that lays on top of a video and only when a user clicks are they displayed with the actual video controls to interact with; like in this example.

While there is no library for producing the exact example or just a general overlay library, it's not that complex to recreate this using CSS and jquery. Someone actually recreated the entire r/thebutton experiment in this jsfiddle. In this case, they put a background image overlay on the button's ::before selector that is switched to an unlock background image on hover and removed on click using JS.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.