Design to save people from themselves

This post is a complement to episode 372 of Design Details, Saving People from Themselves.

Last week Divya Tak asked on Twitter "but what are things that you do to 'save the users from themselves...'" Marshall Bock and I spent an hour thinking about this question, recorded a podcast with our answers, and now we're publishing the conversation here for longevity.

This list is not exhaustive: there are a million more examples of software saving people from their own mistakes, insecurities, and ignorance – let us know what we missed by filling out the contact form at the bottom of this post!

Persist draft content

Great products work to ensure that people never lose unsaved changes or draft content. There are a few common patterns to do this:

Warning people when they are about to lose draft state – this usually happens when people are closing a dialog, or trying to navigate back, where that action would cause any unsaved changes to be lost.

Automatically preserving drafts in the background – in the Mail app on iOS, if you swipe the new message composer down, it becomes "docked" at the bottom of the screen. On GitHub, if you type content into a comment box and then refresh the page, the comment box will preserve the content.

Making drafts a product feature – Twitter and email are great examples of products where drafts are treated as first-class objects in the overall product ecosystem. You can read, write, update, and delete them at any time. When you close a tweet composer, you are prompted to save or dismiss the draft.

Warn before destruction

This one is straightforward enough, but software should always warn people before taking destructive actions. Deleting or permanently modifying a document by mistake is a horrible feeling. Software, like iOS, guides developers to make destructive actions red, require confirmation (through an action sheet or an alert), and places the destructive confirmation button far away from your thumb (destructive actions always appear at the top of action sheets).

Some apps take this even further by requiring users to type specific strings, like the name of the thing they are deleting, as an even more strict confirmation flow. Here's GitHub's repository deletion prompt:

Undo

In interfaces where a user might accidentally trigger some kind of modification, but one that's not necessarily destructive, it's a good idea to provide a control to undo that action. Think: swiping an email to be Archived. Archiving an email is not destructive, but the undo button saves someone a lot of headache of having to dig back through menus to find an email that was accidentally swiped away.

Magic Undo

Sometimes you can provide an undo prompt for anything hasn't actually changed. It's like a fake undo, or a pre-undo. The best example is Gmail's "email recall" feature – if you send an email, Gmail doesn't actually send it right away. Instead, it prompts you to undo the send, and only after that prompt disappears does that email get sent.

Content scanning

Have you ever sent an email where you meant to attach a file, but just the act of typing "see attached" made you forget to actually attach the thing? Apparently this happened to enough people so that Gmail now looks for key phrases in a draft like "see attached" – if the email itself doesn't have an attachment, they will prompt for a confirmation before sending.

Code scanning

Similar to content scanning above, code scanning is a magical feature that prevents people from accidentally publishing passwords or secrets on GitHub. Secret scanning helps developers catch their mistakes before it brings down an entire organization.

Sensible defaults

Also known as convention over configuration: a software design paradigm used by software frameworks that attempts to decrease the number of decisions that a developer using the framework is required to make without necessarily losing flexibility.

Software should be built with sensible defaults to prevent people from having to make unconventional decisions. This is more beginner-friendly, but many experienced users also appreciate it when their tools clearly communicate best practices.

Tap targets

Apple and Google say that tap targets should be a minimum of 44pt and 48pt. That minimum part is important - it's totally fine to go bigger! If you can make a safe assumption about what a user is trying to tap or click, and there are no competing elements around that target, go ahead and make the target as big as possible. See an example of how this should work in Twitter for macOS.

Digital addiction

As of 2018, Americans spend more than 10 hours per day looking at a screen. Social media, algorithmic feeds, push notifications...these are all raw fuel for addictive tendencies, constantly pulling people back to the screen. Good software helps people to manage their time to ensure that it's time well spent. Do Not Disturb, Bedtime reminders, and Instagram's "all caught up" module all help nudge people towards better consumption habits.

With iOS 11, Apple also introduced a dynamic Do Not Disturb setting that can turn the feature on automatically when a person is driving or connected to a car. This can be paired with auto-replies, so that if someone messages you while driving, they receive a text back explaining why you won't be responding immediately. I'm not sure if there's data about how many people use this setting, but one might imagine it has saved a life by this point.

Duplicate entry points

Software developers like to say "don't repeat yourself" as a mantra for simplifying and abstracting code. But in interface design, well-considered repetition can enhance the user experience. For example, imagine an application has settings to manage notification preferences. In a DRY world, the entry point to manage your notification preferences would only appear by navigating to some Settings view, first. But in a user-friendly world, there would be a duplicate entry point in context on the Notifications view itself.

Volume warnings

Companies like Apple have been actively investing in raising awareness about hearing damage and safe volume ranges. Software can help nudge people to turn down their headphones and save their eardrums. My younger self would have appreciated this.

Age-gating, NSFW warnings

On algorithmic feeds, like Twitter, Instagram, Facebook, or Reddit, it's inevitable that at some point something...unsavory...might appear. If you're browsing at work, blurring that content can be a professional life saver. In other cases, providing interstitial warning screens – like this one from Reddit – might prevent people from accidentally opening a link with content they wouldn't want any lurking eyes to see.

Spoiler obfuscation

While it's not part of the official Markdown spec, apps like Reddit and Discord have extended the syntax to allow for a special way to hide spoilers. Please, Twitter...

Rage shake

It's hard to say exactly how good this is, because it's basically impossible to discover. But on iOS, and in many individual applications, there is a "rage shake" function that prompts a system activity. On iOS, a shake gesture is the universal trigger for undo. On other apps (I remember encountering this on Facebook's internal beta apps), a quick "rage shake" will prompt a bug reporting mechanism, allowing users to vent any frustrations directly to developers.

This bit from Daring Fireball is hilarious, too:

Lastly, here’s an anecdote I heard years ago about how Shake to Undo came to be. Scott Forstall charged the iOS team with devising an interface for Undo — everyone knew the iPhone should have it,¹but no one had a good idea how to do it. One engineer joked that they could just make you shake the iPhone to invoke it. Forstall said he loved the idea, and what was proposed as a joke has been with us as the Undo interface ever since.

Preventing the spread of misinformation

Facebook, Twitter, WhatsApp, Instagram, and every other major social platform are building new systems to prevent people from inadvertently spreading misinformation.

A few patterns are emerging:

Prevent content from spreading at the retweet/share level.
Add inline context to content as users encounter it in a timeline.

Twitter does both – not only does a flagged tweet have a contextual link to learn more, but if you click on the retweet button, they show a popover warning that the underlying claim is disputed.

Facebook, Twitter, WhatsApp, and many other apps are now introducing warnings that appear when people share articles without reading them first.

Encouraging civility, reducing toxicity

Instagram has a feature that warns users when they are about to leave toxic comments on a post. This prompt might help people to calm down if they were leaving a comment in the heat of a moment. More generally, prompts like this remind people that there is another human on the other side of that screen, and that our words matter.

In iOS 14, Apple added a new 1st party toast that appears whenever the contents of the clipboard are accessed by an application. Many apps use clipboard scanning in a positive way: detecting certain URLs and handling them with custom prompts, for example. But of course, bad actors might abuse this and silently track a user's clipboard contents at regular intervals. This toast informs users when this is happening without their knowledge.