{"id":358,"date":"2018-01-27T16:21:41","date_gmt":"2018-01-28T00:21:41","guid":{"rendered":"http:\/\/wp.evanyamoto.com\/?p=358"},"modified":"2018-01-27T16:21:41","modified_gmt":"2018-01-28T00:21:41","slug":"358","status":"publish","type":"post","link":"https:\/\/evanyamoto.com\/blog\/2018\/01\/27\/358\/","title":{"rendered":"Hawaiian Missile Scare &#8211; Why Design Matters"},"content":{"rendered":"<p>Earlier this year, there was a lot of tension with North Korea and a huge accidental scare in Hawaii when an employee mistakenly sent out an emergency alert warning of a ballistic missile attack.\u00a0 What made matters worse is that there was no way for the state to cancel the message and it took 38 minutes for them to retract it.<\/p>\n<p>I can&#8217;t image the state of panic, then relief and then anger when they learned it was all a mistake.\u00a0 I have to believe more than a few people said some terrible things to some, confessed love for others or did\u00a0 a whole lot of regrettable things.\u00a0 But the worst part of it all, is that it was easily preventable with just the slightest bit of effort of UX\/UI design.<\/p>\n<p>This is the the screen the employee had to use:<a href=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-alerts-explained-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-360\" src=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-alerts-explained-1-1024x764.jpg\" alt=\"\" width=\"840\" height=\"627\" \/><\/a><\/p>\n<p>How is that even possible for something so important?\u00a0 My only comment is that I know (and love) Hawaii and I feel like I know how government contracts work and this is the result of the two.<\/p>\n<p>But I also know it&#8217;s easy to criticize and even ever to criticize without providing any solutions.\u00a0 The internet is an amazing place and many people quickly mocked up some quick fixes, none more popular than <a href=\"https:\/\/twitter.com\/iamlucamilan\/status\/953201804237524992\/photo\/1?ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fwww.core77.com%2Fposts%2F71766%2FWhat-the-UI-Design-of-the-Hawaii-Missile-Alert-Actually-Looks-Like-and-a-Suggested-Design-Improvement\">this one<\/a>\u00a0by a UX Designer, Luca Milan.\u00a0 He separated the different types of alerts and it&#8217;s so much more clear.<\/p>\n<p>When I thought about this, my first question was, why are the test and live alerts on the same system, let alone the same page?\u00a0 And then, if they <em>have<\/em> to be on the same page, why aren&#8217;t they in different sections and why are they labeled so poorly?\u00a0 But I&#8217;ve worked with plenty of engineers to know the reason why and I&#8217;ve without a doubt made some bad design decisions myself.<\/p>\n<p>So, I did something I don&#8217;t normally do and put together a page in a few minutes with all off the shelf stuff and I think it shows that just a few minutes of effort could really improve this site.<\/p>\n<p>I know it looks like it&#8217;s straight from Bootstrap and that&#8217;s kind of the point.\u00a0 I used the starter template and copied examples in the documentation, added font awesome and quickly made a tabbed interface that groups and lists each type of alert clearly.<\/p>\n<p>I would never want to mix the test\/live actions together, but if I had to, I think it should default to the one with less ramifications if it was sent in error.<a href=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-test.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-354 alignright\" src=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-test.png\" alt=\"\" width=\"959\" height=\"424\" \/><\/a><\/p>\n<p>And the live links should have some visual indicators to show they are for actual emergencies.\u00a0 Looking at the screenshot, I now think all of the links should be color coded as well, but there are a million other refinements that I would go add with time.<a href=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-emergency.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-355\" src=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-emergency.png\" alt=\"\" width=\"948\" height=\"710\" \/><\/a><\/p>\n<p>Luca added an error management section to issue a false alarm.\u00a0 I think it&#8217;s good to have a section for other links, but I&#8217;d also display a banner or some type of message to cancel the alert immediately after it&#8217;s sent.<a href=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-error.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-356\" src=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-error.png\" alt=\"\" width=\"954\" height=\"288\" \/><\/a><\/p>\n<p>And there has to be some sort of confirmation to issue an emergency alert.\u00a0 Realistically, it would be on the next page where they type in the alert message.\u00a0 And as a side note, I&#8217;m not sure why the Bootstrap danger button color doesn&#8217;t match the danger alert and text.<a href=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-modal.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-357\" src=\"https:\/\/evanyamoto.com\/blog\/wp-content\/uploads\/2018\/02\/hawaii-modal.png\" alt=\"\" width=\"946\" height=\"702\" \/><\/a><\/p>\n<p>This is all out-of-the-box, basic Bootstrap stuff but I think some simple changes would make a big difference.<\/p>\n<p>And knowing Hawaii, I still have so many questions on this interface.\u00a0 Like why the Amber alert is only for Kauai County or statewide?\u00a0 What about the other counties?\u00a0 And should this then be a different input to select multiple counties?\u00a0 Maybe the North shore high surf warnings are supposed to be state wide, but I think of Oahu when I think of the North shore (and one of my favorite old, bad movies.).\u00a0 But then, why is the landslide alert only for Hana, which is in Maui?\u00a0 Would people on the big island need to get that alert?\u00a0 Again, so many questions&#8230;<\/p>\n<p>If nothing else comes out of this, this is something that should be in every book about the importance of design.<\/p>\n<p>Here&#8217;s a link to my <a href=\"https:\/\/codepen.io\/SCEvan\/pen\/vYKKxyK\" target=\"_blank\" rel=\"noopener noreferrer\">test page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Earlier this year, there was a lot of tension with North Korea and a huge accidental scare in Hawaii when an employee mistakenly sent out an emergency alert warning of a ballistic missile attack.\u00a0 What made matters worse is that there was no way for the state to cancel the message and it took 38 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":353,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,9],"tags":[18,25,27],"class_list":["post-358","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-technology","tag-hawaii","tag-ui-design","tag-ux-design"],"_links":{"self":[{"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/wp\/v2\/posts\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":0,"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/wp\/v2\/posts\/358\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/wp\/v2\/media?parent=358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/wp\/v2\/categories?post=358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evanyamoto.com\/blog\/wp-json\/wp\/v2\/tags?post=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}