Designing for inconvenience — now why on earth would I want to do that?
A brief look at warning design and confirmation dialogues in product design.
If there was a bible of digital product design, one of the commandments would definitely be: ‘Thou shall not get in the way of what thy users want to achieve’.
But sometimes, we need to stop our users from hurting themselves — especially in ‘utility’ parts of our applications. If we make it too easy to commit a fatal error, then we’ve failed our users, and we’ve failed at our business goals too.
What I’m talking about here is the antithesis of conversion rate optimisation, and can almost fall into ‘dark pattern’ territory. But sometimes we need to build features that can be bad for our users and organisation if used incorrectly. One way to look at this is part of risk reduction in the design of any product or system.
Usually when something is hard to do online, there’s a business reason for it. For example, it’s quite laborious to unsubscribe from the New York Times. While signup is made really easy, if you want to cancel, you’re given 3 options: Chat (busy at all times, apparently), Text, or Call. Now because this feature expressly benefits the organisation to the detriment of the user, I’d call this a dark pattern.
So how do you design against our human nature to take shortcuts? Here are three methods I’ve used in the past:
Using large warning labels, high contrast, exclamation marks, and the like
This is probably the most common type of warning design or confirmation dialog we see around the web. It works, and it’s certainly justifiable: ‘I clicked ‘yes’ on ‘are you sure’, so of course I meant it!’
We’ve all used these in the past, and generally speaking, they are a fine solution. The biggest risk here is overuse. If your users have to hit the ‘Are You Sure’ modal or dialog box too often, their eyes will glaze over and before too long, they’ll agree to something unrecoverable and then nobody wins!
So how might we try to break that pattern of sleepwalking off cliff edges?
Asking users to enter a long text string to confirm
Both Wordpress and Webflow do this when you’re deleting a site from your profile. It slows you down and makes you really consider if you want to delete it! Because these are unrecoverable actions, this works quite well for users who are already deeply focused on the task at hand and perhaps have the luxury of time to spare.
However, this is unsuitable for mobile users, and for those undertaking repetitive actions. We often need our users to understand the consequence of taking this action, but not needlessly hinder their progress.
So, how can we a) cater for mobile users, b) help the interface feel joined-up and c) reduce context-switching … ?
Using long-press & release
Above is an interesting solution I’ve used before which significantly reduces error rates. Considering the signal-to-noise ratio in an average mobile app, asking a user to hold their thumb in one place for three or more seconds feels unusual.
It doesn’t require extra effort, like typing something in (especially on mobile keyboard), it’s hard to accidentally do, but it really slows people down, subconsciously forcing them to mentally prepare for the outcome.
We’re so used to instant response from tapping controls, that a long press feels just different enough to make you pause. In the example above, I also used a subtle animation to display the time remaining for the user to hold.
Side note — after the fact, I realised this often shows up in games in their ‘shop’ interfaces. This makes sense, as a player generally has limited wallet and so can’t recover from mis-spent resources.
I subscribe to the idea that we’re all cyborgs these days (more or less). We carry our phones around ,we look at them for hours each day, they notify us, they have bright distracting colours and really make us slaves to the dopamine hits we get. Designers, developers, and product managers have to work extra hard to make users pay attention!
If you’d like to learn more about this, i’d encourage you to study up on ‘Warning Design’ . My first job out of university was a draftsman at a manufacturing facility. Being ‘the guy who’s good with computers and design’, I also got tasked with designing warning labels for the factory and machines within. I was definitely learning as I went, but it provided a good real-life understanding of human instinct and how to work with it to stay safe!
Seen any interesting dialogs like this or examples of similar? Post in the comments! I’d love to see how others have solved this challenge.
