InVision's error prevention modal

‍

Best-in-class digital design platform InVision is used for prototyping web pages and applications. What makes InVision so popular is its low barrier to entry—no coding experience is required to transform a static design into a dynamic one that's suitable for user testing or stakeholder feedback.

InVision is simple to use, but building prototypes still takes time and a lot of effort. This means each project in InVision is precious, and any mistake in the management of the prototype files can result in very frustrated and unhappy users. To avoid this happening, InVision intentionally adds friction to the deletion process.

The modal below requires users to manually check off 3 boxes in order to delete a prototype. By making users take deliberate action, InVision reduces the risk of accidental deletion.

Why this is really good UX:

• The primary goal of most products is to help users complete tasks as efficiently as possible, but when users move too fast and rely on automatic thinking, they are much more likely to make a mistake. Confirmation dialog boxes are used to disrupt the user's flow and get their full attention before making a significant action.
  
  The problem is: Users have come accustomed to dialog boxes, which means they tend to click before they think. That's why InVision adds additional friction by requiring complex user action in order to confirm asset deletion. It is an effective and straightforward way to give the user a final chance to stop and double-check their decision.
  ‍
• The checklist in the modal is practical because it makes the consequences explicit and prompts users to the appropriate action.
  ‍
• The copy is explicit and makes the gravity of the decision abundantly clear. From the warning icon, to the header text, to the confirmation button—there's no mistaking that this is a significant action.
  ‍
• Visually, the modal commands attention through high contrast, a greyed-out underlying interface, and stark, no-nonsense text.

For another great example of friction that actually improves UX, check out Tumblr's fullscreen delete account confirmation modal. And if you're looking for a way to quickly create native-looking, code-free modal windows of your own, give Appcues a try!