large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/dangerous-drop-downs-%EF%B8%8Fbad-ui-design-caused-%EF%B8%8Fhawaiis-false-missile-alert-5209cbc17f8c?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> prototypr.io 
<h4>And how it could have been avoided</h4>
We’re all aware of the false alarm people in Hawaii saw on Saturday the 13th of January:
<img alt="" src="https://cdn-images-1.medium.com/max/620/1*XxQGBI5G31k_oqnU7HQXTQ.png">
But how could such an alarming message be triggered in the first place? Bad design was the main reason — a drop-down menu to be more precise. Here’s our roundup of design reactions to the Hawaii false alarm. We include some suggestions of how this could have been avoided, and end with some notable stories on the subject.
<h4>One Click Terrorizes the Entire State?</h4>
Just after reports of this being a false alarm, we saw famous designer and author, Don Norman, tweet how it was down to incompetent design:
<blockquote>
Fake missile attack warning? Human error? Nonsense. It&#8217;s incompetent design. One wrong click terrorizes the entire state? Why is it possible? I have a book they need to read.
 — <a href="https://twitter.com/jnd1er/status/952566954522427393">@jnd1er</a>
</blockquote>
Norman suggested it was down to just one click. And according to many sources, that one click itself was down to the inappropriate use of a dropdown menu in the UI. Here it is in the Washington Post:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vxloOSGI-riwaONr7L3yrw.png"><a href="https://www.washingtonpost.com/news/post-nation/wp/2018/01/14/hawaii-missile-alert-how-one-employee-pushed-the-wrong-button-and-caused-a-wave-of-panic/?utm_term=.e1d13d3966de">Source</a> (via <a href="https://twitter.com/ow">Owen</a>)
<h4>Update [17/01/2018]:</h4>
Today we saw that the interface may not have been a drop-down menu after all — there haven’t been any confirmations that this was the true UI, as Per Axbom explains:
<blockquote>
<a href="http://twitter.com/Ingyplingy" title="Twitter profile for @Ingyplingy">@Ingyplingy</a> My interpretation was that the dropdown reference was anectodal and the person first using the word &#8220;dropdown&#8221; may not have known what this word traditionally means in the space of interaction design.
 — <a href="https://twitter.com/axbom/status/953294853516951552">@axbom</a>
</blockquote>
In his <a href="https://medium.com/misusability/the-usability-of-buttons-that-harm-or-save-lives-d0dcb22e325d">write up</a>, he shows how quick we’ve all been to speculate what the user interface includes, and everyone has an opinion. For instance, it could have looked like this:
<blockquote>
In case you&#8217;re curious what Hawaii&#8217;s EAS/WEA interface looks like, I believe it&#8217;s similar to this. Hypothesis: they test their EAS authorization codes at the beginning of each shift and selected the wrong option.
 — <a href="https://twitter.com/supersat/status/952612571122630659">@supersat</a>
</blockquote>
The rest of this article can be looked at as a timeline of speculation, starting with the drop-down menu. We’ll keep updating with more:
<h3>Dangerous Drop-downs</h3>
Whilst we don’t have an screenshot of the exact software the employee was using, a few representations have emerged. A notable one was from Owen Williams, who suggests this incident will be in UX design textbooks for years to come:
<blockquote>
🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔🤔
 — <a href="https://twitter.com/ow/status/952837560857976832">@ow</a>
</blockquote>
<a href="https://thenextweb.com/dd/2018/01/15/hawaiis-missile-alert-fiasco-highlights-the-importance-of-good-interface-design/">Quartz</a> gave us their version, highlighting how very easy it is to choose the wrong option:
<img alt="" src="https://cdn-images-1.medium.com/max/716/1*d7KIrQvfrknHQ7RQXFE7EA.gif">Image source: <a href="https://qz.com/1179937/hawaii-missile-alert-blame-terrible-interface-design-for-the-hawaii-debacle/">Quartz</a>
We get the idea, but here’s another:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WYDPtrMxCPSrWygNpEJSOQ.png">
<h4>The Problem Is in the Software</h4>
With this being probably one of the most dangerous dropdown you’ll ever see, Brian Schatz, US Senator from Hawaii confirmed Hawaii are looking into some best practices for notifications and warnings to prevent similar mishaps:
<blockquote>
Spoke w <a href="http://twitter.com/JRosenworcel" title="Twitter profile for @JRosenworcel">@JRosenworcel</a> from FCC; we are working together on developing best practices for notification and warning. Starting the process of drafting legislation (if necessary.) Considering oversight hearings, and planning briefings with state govt during next recess. More later.
 — <a href="https://twitter.com/brianschatz/status/952629218831028224">@brianschatz</a>
</blockquote>
A drop-down clearly isn’t suitable as the two choices aren’t in any way equal. It’s too easy to do something drastic. The NextWeb stated that buttons for testing and actual deployment should never be put next to each other.
Quartz go on to highlight that use of ‘interface friction’ could prevent users choosing options that can have great impact. This design concept would be a great place to start, so let’s look at how it works:
<h3>When Friction in Design is Good for UX</h3>
Think about the steps it takes to delete a Facebook account, or unsubscribe from monthly subscriptions — you sometimes have to work a little harder to activate/deactivate an option, and you might be prompted to confirm what you’re about to do:
<img alt="" src="https://cdn-images-1.medium.com/max/465/1*8A-xdbsXk8fWZQxBlzxL7w.png">
It can even take 12 steps to delete your Amazon account, and still requires authorization from an Amazon staff member:
<a href="https://www.wikihow.com/Delete-an-Amazon-Account">How to Delete an Amazon Account</a>
Let’s look at some more resources for designing for friction that show why it’s good, and how it could have effectively prevented the Hawaii blunder:
<h3>Designing for Friction Resources</h3>
<a href="https://www.smashingmagazine.com/2018/01/friction-ux-design-tool/">Designing Friction For A Better User Experience</a> By <a href="https://medium.com/u/f65d13a73151">Zoltan Kollin</a>.
In this article, Zoltan tells us how ‘error prevention’ is a basic usability principle, and friction helps implement it. Essentially, it makes it hard for people to do something by mistake. An example used to demonstrate error prevention is the macOS delete confirmation:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YOnYsPrHxXEfI9udH7WUfQ.png">
He goes on to show examples beyond confirmations, such as giving the user chance to backtrack on actions:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bwMUHqA1UGK2Ib-UJRYkMA.png">
Imagine if the UI of the software used by the Hawaii emergency employee gave them the chance to undo what was about to happen:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nF3kxlCY3RVziJq3y_LlQw.png">
Well we’d probably have a different outcome. Read the rest of Zoltan’s post on Smashing Magazine for more tips:
<a href="https://www.smashingmagazine.com/2018/01/friction-ux-design-tool/">Designing Friction For A Better User Experience</a>
<a href="http://babich.biz/friction-in-design/">When Friction In Design Is Good For UX</a> by <a href="https://medium.com/u/bcab753a4d4e">Nick Babich</a>
Nick provides another explanation of why friction can prevent users from making bad decisions in his shorter article on the subject. He states that whilst friction can have a bad reputation, it’s not always negative:
<a href="http://babich.biz/friction-in-design/">When Friction In Design Is Good For UX</a>
Here’s a few more resources (by <a href="https://medium.com/u/b26feb6c0219">Dina Chaiffetz</a>, <a href="https://medium.com/u/f6b7b72aebd6">Steve Selzer</a>, <a href="https://medium.com/u/fa32d1ba1a83">Sadhana Balaji</a>, and <a href="https://medium.com/u/4ad91860dfe9">Robyn Collinge</a>):
<ul>
<li><a href="https://www.invisionapp.com/blog/3-ways-friction-can-improve-your-ux/">3 ways friction can improve your UX &#8211; InVision Blog</a></li>
<li><a href="https://airbnb.design/the-fiction-of-no-friction-2/">The Fiction of No Friction</a></li>
<li><a href="https://www.chargebee.com/blog/friction-improve-user-experience/">Friction Isn&#8217;t Always the Bad Guy in User Experience &#8211; Chargebee&#8217;s SaaS Dispatch</a></li>
<li><a href="http://blog.usabilla.com/using-friction-improve-ux/">Using Friction to Improve the User Experience &#8211; Usabilla Blog</a></li>
</ul>
<h3>Notable Stories</h3>
<h4>Here on Medium:</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*3ZCzwxKKo0lE3pfu_TUl_A.png">
<ul>
<li><a href="https://medium.com/u/67e9df025a44">Sean Dexter</a> gives us a similar overview, sharing why he thinks design was the major cause of this situation, not human error:</li>
</ul>
<a href="https://medium.com/@seandexter1/hawaiis-false-ballistic-missile-alert-was-a-failure-in-user-experience-design-22ebee86fcb">Hawaii’s false ballistic missile alert was a failure in user experience design</a>
<ul>
<li><a href="https://medium.com/u/ddab298c5897">Ron Goldin</a>, Product Designer at Google, mocks up what he thinks the UI of the current system may have looked like. He then examines the pitfalls, followed by putting together an alternative UI flow:</li>
</ul>
<a href="https://medium.com/interactive-mind/how-to-avoid-an-accidental-missile-crisis-using-ux-principles-ac3d471089f3">How To Avoid an Accidental Missile Crisis Using UX Principles</a>
<ul>
<li><a href="https://medium.com/u/b740649e9e02">saribrooke</a> gives us her view, with a mockup of a dialogue to cause the employee to confirm the choice made:</li>
</ul>
<a href="https://medium.com/@saribrooke/ux-the-hawaii-missile-alert-anatomy-of-bad-form-design-c3c7f38e43b9">UX &amp; the Hawaii Missile Alert: The Anatomy of Bad Form Design</a>
<ul>
<li>[17/01/18 update] <a href="https://medium.com/u/77d3f63ebe80">Per Axbom</a> suggests there’s been a lot of speculation about what the real UI the Hawaii employee was faced with:</li>
</ul>
<a href="https://medium.com/misusability/the-usability-of-buttons-that-harm-or-save-lives-d0dcb22e325d">The Usability of Buttons that Harm or Save Lives</a>
<h4>From the News:</h4>
Finally, here’s some news coverage of the topic:
<ul>
<li><a href="https://qz.com/1179937/hawaii-missile-alert-blame-terrible-interface-design-for-the-hawaii-debacle/">Blame terrible interface design for the Hawaii missile alert debacle</a></li>
<li><a href="https://thenextweb.com/dd/2018/01/15/hawaiis-missile-alert-fiasco-highlights-the-importance-of-good-interface-design/">Hawaii&#8217;s missile alert fiasco highlights the importance of good design</a></li>
<li><a href="https://www.theguardian.com/technology/2018/jan/15/hawaii-missile-false-alarm-design-user-interface">Hawaii missile false alarm due to badly designed user interface, reports say</a></li>
<li><a href="https://www.inverse.com/article/40208-hawaii-missile-alert-user-interface-design">How an &#8216;Epic Design Fail&#8217; Was at the Heart of the Hawaii Missile Alert</a></li>
</ul>
Feel free to drop your thoughts in the comments, and join us for more in the future. If you’ve got any prototypes of your solution, send them through!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/ed6399974de6e1c6fa5f3851dd966fad/href">https://medium.com/media/ed6399974de6e1c6fa5f3851dd966fad/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5209cbc17f8c" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/dangerous-drop-downs-%EF%B8%8Fbad-ui-design-caused-%EF%B8%8Fhawaiis-false-missile-alert-5209cbc17f8c">Dangerous Drop-Downs? ️Bad UI Design Caused ⚠️Hawaii’s False Missile Alert</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dangerous Drop-Downs? ️Bad UI Design Caused ⚠️Hawaii’s False Missile Alert

Dangerous Drop-Downs? ️Bad UI Design Caused ⚠️Hawaii’s False Missile Alert

And how it could have been avoided

Top Stories