Avoid Your Own Missile Crisis with These Common Sense UX Design Tips

A political blame game, some ‘interesting’ conspiracy theories and multiple resignations to name a few. Once the initial crisis was proven to be a false alarm, people began to look for the culprit and found a surprising answer. It all came down to bad user interface (UI) design.

This is the screen that set off the ballistic missile alert on Saturday. The operator clicked the PACOM (CDW) State Only link. The drill link is the one that was supposed to be clicked. #Hawaiipic.twitter.com/lDVnqUmyHa

This is the screen Emergency Management Agency (EMA) staff members use for sending missile alerts - both real and test

A confusing layout and lack of any kind of logical design thinking made it far too easy for the EMA staff member to select the wrong option. Instead of sending out a test alert, they managed to send a real missile alert to Hawaii’s 1.4m residents.

While most of us don’t deal with anything as serious as nuclear missiles in our day-to-day work, there is still plenty of lessons that can be learnt from this incident and applied to your own design and UI/UX projects.

Have a clear and consistent information hierarchy

One of the clearest issues with the alert system is that all of the available options aren’t grouped together in a logical way. Test alerts, real alerts, missile and tsunami warnings all have the exact same style, making it far too easy to select the wrong one without realising it. It’s understated to say that’s not ideal in potentially life-threatening situations where time is of the essence.

Grouping your content together into logical sections with clear headings makes it far easier to skim read large amounts of text. This in turn makes it easy to find the correct and most relevant information without having to read every single option.

Former Huge Inc. UX designer Luca Milan shows an example of how applying this to the Hawaii missile test interface would have immediately improved things:

A more structured list divided by topics with redundancy of words like ALERT and TEST can help. Also emojis can help differentiate topics without deep reading pic.twitter.com/xPTEUgnZTV

Use iconography to improve readability at a glance

Icons such as the ⚠️ warning triangle, 🛑 red stop sign and ✅ check mark are immediately recognisable to many people and work across language and skill barriers. Adding icons or emoji allows users to quickly understand what will happen when they click or interact with specific elements.

The updated sign used commonly recognised icons to make it far easier to understand the restrictions at a glance. She combined it with simple colour coding and a visual timetable layout to help drivers easily grasp the parking rules.

The updated design was trialled by cities as far and wide as Los Angeles and Brisbane.

Anticipate mistakes and let users quickly fix them

Mistakes within interfaces can lead to lost data, wasted time and unclear consequences for users. Making it ever-so-slightly harder to commit to a destructive action like deleting a product or contact can help avoid this. Combining with clear ways for a user to reverse their action can make it even easier to avoid calamity.

It may sound flippant but a simple prompt like ‘you are about to send a live alert. Cancel or continue?’ before the EMA was able to send the message could have halted this massive mistake. Nick Babich has some great insights in his article that really drive this point home.

In addition, including ‘undo’ functionality can provide users with the reassurance that any mistakes they make will not be the end of the world. Literally or metaphorically.

Gmail’s ‘Undo send’ feature is one of the most prominent and popular examples of this. It gives you a few seconds after hitting send to bring your message back from the digital ether and rectify your mistake. You might not have the budget of Google behind you, but if you make it easy to reconsider destructive or important actions, your users will thank you.

Even if you don’t speak Spanish you can tell straight away that Matt’s meter manages to miss the mark in several areas. There’s two different screens, some buttons are colour-coded, some use text labels, there are multiple typefaces that are almost unreadable and the instructions are halfway down the machine instead of at the top.

At the start of any design project there should be a clear purpose: “What do we want the user to achieve here and how do we make it easy as possible for them to do that?” This should provide the driving force behind any decisions in order to ensure that you don’t lose sight of your goal. The parking meter is there to make money but almost completely fails at this because it makes it difficult to carry out its purpose.

These are just a few common sense UX tips that you can implement in your next project. Let us know any others you use regularly, or a particularly good UX fail you’ve seen recently, in the comments below.