How to prevent another Hawaii missile mess with better design

The entire disaster could have been avoided by making the system interface more user-friendly.
This screenshot of a cell phone shows news alerts on January 13, 2018 after the Hawaii missile warning was declared false. (EUGENE TANNER/AFP/Getty Images)

Much of the time, bad design decisions are just annoying. But sometimes, they can be downright scary.

On January 13th, a false alert went out to cell phones across Hawaii, warning recipients that a ballistic missile was headed their way. The message threw residents and tourists into a state of a horror. Many were calling loved ones to say their last goodbyes as they waited for the end. 

Turns out, a government employee clicked the wrong button on the computer screen while performing an internal drill. But the cause of the wrong click seems to have been the design of the missile warning system itself.

Left, the "phony" mockup of the menu that caused the false alarm. Right, the revised facsimile provided the following day. (HEMA)

The Hawaii Emergency Management Agency (HEMA) issued two screenshots which turned out to be mockups of the actual warning system. The first screenshot, which according to the governor's office was inaccurate and sent by mistake, showed an archaic-looking webpage with 10 rows of hyperlinks to different alerts.

The second, 'corrected' version, showed a simple menu with fewer options, none of which are easy to decipher at first glance.

At this point, nobody knows what the real system looks like since both screenshots are facsimiles. But facsimiles or not, everybody who's seen the images can agree that bad interface design is partly to blame. 

CBC Radio's Ben Shannon created this animation to illustrate how emergency alert systems can be more user friendly.

"The list of options in the second screenshot just doesn't make sense to me." says Genco Cebecioglu, director of user experience at Junction Design, based in Toronto. "I think that's what contributed the most to the problem."

He points out that the labels are too long, and contain a mixture of uppercase and lowercase letters. They're neither clear or descriptive, which make it hard to distinguish one option from another.

"As a basic principle, your option names should be very distinct from each other so you know very clearly what you're clicking."

PACOM, the option to launch the ballistic missile warning, was listed twice in the screenshots, one as the real warning and the other as a drill. This should never have been allowed in the same menu, Genco says.

Genco Cebecioglu, director of user experience at Junction Design, a design studio based in Toronto. (Junction Design)

The incident could have been avoided by employing good design principles, according to Genco, and there are certain assumptions one can make when designing for usability.

For example, when people look at a page, they see colours and shapes first instead of text. To improve upon the current design, the options could be grouped more appropriately, with important and severe options color-coded or given an icon. There should also be multi-tier confirmation in place to make it hard for someone to make a critical error, Genco says.

Once the interface design is complete, designers should run different types of tests from eye tracking to collecting website analytics to see how users are actually interacting with the page. He calls this step "critical" in the design process.

Scenario-based testing is particularly beneficial in the case of Hawaii. End users set out to accomplish a task given by the designers, while designers observe them and take notes. This way, they can see what the users are struggling with and can modify the design to make the experience as frictionless as possible. "You're designing for users," Genco says, "so you must understand [how they're using your product]."