6 ms·

Redesigning Hawaii’s Emergency Alert System UI

29 points by python__ 9y ago

abalos 9y ago
This is pretty awesome. Kudos to the author. It's cool to see the thought process around designing for clarity instead of purely simplicity on high-impact systems like this.
CameronBanga 9y ago
We're going to see a multitude of design hot takes here over the next 10 days, but I think most of these designers are missing the problem. The interface that caused this failure isn't because the system lacked designers. This design was created by being handcuffed by bureaucracy, with no strong leadership in place to solve the problems that were caused.
- always_good 9y ago
  No, the UI is just a limited problem and people enjoy taking their whack at it just like how developers like to test out their own abstractions. Neither a line of code nor a stroke of paint is going to solve bureaucratic issues. To suggest that everyone is unknowingly glancing past these issues except for you is a bit tacky, as if one is trying to score some me-too points.
  - majewsky 9y ago
    It's not that. People are talking about the UI design because that's their area of self-efficacy. They are able to design a better UI, but they're not able to come up with a better bureaucracy.
olliewagner 9y ago
Imagining using this 3-page design makes me feel uncomfortable at step 2 and 3. What if I didn't know what the "test" notification was supposed to look like and wanted to make sure the system took my input correctly? What if it's such a dire emergency that the operator forgets (perhaps from experiencing intense anxiety) which one was selected? I think a stronger approach would be to flatten the design to one page. You could then visually confirm that you've chosen a test/real alert, which alert was chosen, and then see what those options actually produce. In addition, because of the seriousness of sending an alert, I think it would be better to make the "Yes, Send Now" button harder to engage — maybe a slide to send, press and hold to send, or simply give a confirmation dialog after clicking it would help.
- softwareqrafter 9y ago
  You should probably also keep in mind that this isn't a consumer app. Who ever uses this will have seen the entire process before and tested it in a training environment. The redesign seems mostly to focus on making sure stuff isn't done by accident.
  - olliewagner 9y ago
    I would imagine that the operators of the current UI were trained on it as well. What the OP posted is certainly an improvement, but could be made bulletproof by showing each choice in context alongside a button that you can't accidentally trigger.
  - ceejayoz 9y ago
    I've seen video of police shootouts where the cops - presumably trained on such a thing, plus daily exposure to tense situations - miss repeatedly from just a couple feet away, trip and fall, and otherwise screw up. Training is not a replacement for good design. It helps, but I'd expect someone genuinely thinking they're about to be nuked to act differently than someone participating in a drill about it.
jmisavage 9y ago
It looks like it would help prevent the recent incident, but the confirmation screen at the end doesn't make it clear whether it's a test or a real thing. I know there was that big screen at the front, but if you're confirming something you need all the options presented again to double check.
- mc32 9y ago
  There was a story of a nurse who was looking after a mother and her child in ICU. Child had many probes and alarms for alerting of change in condition. The alarms were going off constantly, but often times, the condition was not severe. Mother was not getting sleep. Nurse took pity on mother. She tried silencing alarms. The system had, i believe, seven warning screens warning against deactivation, all needed to be acked to proceed. She proceeded. Mother got rest. Alarms were silently blaring. Nurses did not get the critical alarms. Toddler did not make it. Nurse obviously fired hospital sued, monitoring system mfg sued. Monitoring mfg stated they didn't put in further failsafes because they never imagined someone would possibly go past seven ack Windows with all the warnings . Someone did.
  - ghostbrainalpha 9y ago
    Did you know its actually a crime to sit in traffic and constantly honk your horn for no reason at all? That's because alerts are supposed to actually alert someone of something. By constantly sounding alerts for basically no reason, you are creating an unsafe environment, because REAL alerts will be ignored. I've sat by those beds, and had alarms not stop for 12 hours straight. They don't get nurses to come by and check, they aren't alerting to anything important and they are completely ignored. I believe the company should be sued, not for the GROSS negligence of the nurse unplugging every system, but for the minor negligence of designing a system where constant alerts that don't really mean anything or require any action can't be silenced.
    - mc32 9y ago
      The problem is she not only turned off the alarms and beeps in the patient room, but also all the notifications going to nurses' station and pagers, so when the real bad thing happened, no one got alerted.
TrueGeek 9y ago
Going the other way, on /r/ProgrammerHumor/ they're showing designs that are even worse than the original. https://gfycat.com/DevotedUnfortunateBongo https://gfycat.com/DevotedUnfortunateBongo https://gfycat.com/KindlyEverlastingGibbon https://gfycat.com/KindlyEverlastingGibbon https://gfycat.com/PepperyGoldenAfricanpiedkingfisher https://gfycat.com/PepperyGoldenAfricanpiedkingfisher https://i.redd.it/ubnpsrzljla01.gif https://i.redd.it/ubnpsrzljla01.gif https://v.redd.it/8pcx6ymh0ha01 https://v.redd.it/8pcx6ymh0ha01 https://gfycat.com/QueasyGrandIriomotecat https://gfycat.com/QueasyGrandIriomotecat https://i.redd.it/y0a33r0ohja01.png https://i.redd.it/y0a33r0ohja01.png https://gfycat.com/BadOrganicCanary https://gfycat.com/BadOrganicCanary https://gfycat.com/BabyishBonyHorseshoebat https://gfycat.com/BabyishBonyHorseshoebat https://gfycat.com/RegalHighAlaskanhusky https://gfycat.com/RegalHighAlaskanhusky
- jakozaur 9y ago
  https://i.redd.it/ubnpsrzljla01.gif https://i.redd.it/ubnpsrzljla01.gif is the best.
casperb 9y ago
I think step 2 and 3 are not very clear that you are sending an important message to millions of people, that should only be send in a rare occasion. It could just be that the designer likes red. What blows my mind is that something like this can be send by a single person. A better approach would be that you need 2 or 3 people to send such an alert to millions of people. How can a single person, that misplaced it's cursor by 20 pixels have such an effect? That is not only changed by fancier fonts and more colors IMO.
- koolba 9y ago
  Is it possible to have two separate cursors? Having two mice plugged in controls the same cursor so it doesn’t work for dual entry. With two separate cursors you can have a “double double click” on two sides of the screen. It’s be like the dual key, “1-2-3-Engage!” in the movies.
dstjean 9y ago
What I find astonishing is that there was not a Two-man rule security control in place.
- hvidgaard 9y ago
  UI is not even remotely relevant compared to this. It can be as ugly 80'ies inspired as it wants to with poor UX. It should require 2 people signing off with their credentials for it to be send.
alkonaut 9y ago
Don’t redesign the UI redesign the legal and bureaucratic frameworks that leads to the current UI. But I get that that’s not much fun.
jlebrech 9y ago
this could be written as a terminal app too, and without the need for the idiot interface called the mouse.
niftich 9y ago
As others are pointing out, steps 2 and 3 are flawed in this design. In an effort to break out the decision steps into a wizard, the author chooses to treat the distinction of 'test alert' vs 'real alert' as a simple configuration option whose decision was already chosen, so it doesn't need to be shown on step 2. This is the sort of designer-bias mistake that, ironically, leads to terrible interfaces like the original that precipitated this whole sequence. Test alerts and real alerts are entirely different in every imaginable way: one's normal procedure, the other is hopefully a rare event; one causes people to scoff at their phones while the other creates urgency and concern. Playing up the distinction on 'step 1' is good, but eliminating all visual indications of the choice on further steps is bad in ways a confirmation screen can't rectify. UI is only a portion of the UX and the overall operator process, but there should be as few commonalities between the process (and UX) surrounding test alerts and the process surrounding real alerts as the trained operators of the system can bear. It's even odd to have them originate in the same entry point, but as the author has done, I'll also keep my criticism focused on a UI that can do both. Concretely, I propose a simple way of rectifying the loss of context on 'step 2' is to get rid of the spurious 1-2-3 breadcrumb that doesn't communicate anything that isn't abundantly clear otherwise, and use the space for several conditional indicators that trigger in case a real alert was selected. Warning icons, clear wording, exclamation marks, attention-pulling colors or patterns should be used to distinguish the context of real alerts from text alerts in so many visual ways that accidentally confusing them, even through a momentary loss of situational awareness, is practically impossible.
jaunkst 9y ago
make them confirm by typing test or alert
scrumper 9y ago
Why couldn't you just have the color scheme on the web page invert if you click one of the unusual, dangerous live alerts, so you're immediately very clear that you've selected a non-normal action? So: -- Business as usual -- 1. Click test alert 2. Confirmation appears. -- Nuclear attack or accidental click -- 1a. Click live alert 2a. Invert colors 3a. Confirmation appears. Doable entirely client-side, no need for extensive server-side changes which all these redesign ideas require. And the fact that the webpage background just turned black is clue that you've done something out of the ordinary, especially at shift change (so you don't just blindly hit the confirmation).
eagleal 9y ago
While we all love pretty and overdesigned UIs, for it to be more 2018 friendly make sure to add 5MB of JavaScript and CSS dependencies and new features that only works on Chrome! As others have noted though step-based flow is not really recommended on a mission-critical UI as you can't rely on user memory. Why not just show the choices sequentially without hiding anything through various generic message screens? Alert type: [ test ] - live Message: other1 - [ Kauai county only ] - other2 Confirm: Send test > Kauai county only?

29 points by python__ 9y ago

This is pretty awesome. Kudos to the author. It's cool to see the thought process around designing for clarity instead of purely simplicity on high-impact systems like this.

CameronBanga 9y ago

We're going to see a multitude of design hot takes here over the next 10 days, but I think most of these designers are missing the problem. The interface that caused this failure isn't because the system lacked designers. This design was created by being handcuffed by bureaucracy, with no strong leadership in place to solve the problems that were caused.

always_good 9y ago
No, the UI is just a limited problem and people enjoy taking their whack at it just like how developers like to test out their own abstractions. Neither a line of code nor a stroke of paint is going to solve bureaucratic issues. To suggest that everyone is unknowingly glancing past these issues except for you is a bit tacky, as if one is trying to score some me-too points.
- majewsky 9y ago
  It's not that. People are talking about the UI design because that's their area of self-efficacy. They are able to design a better UI, but they're not able to come up with a better bureaucracy.

olliewagner 9y ago

Imagining using this 3-page design makes me feel uncomfortable at step 2 and 3. What if I didn't know what the "test" notification was supposed to look like and wanted to make sure the system took my input correctly? What if it's such a dire emergency that the operator forgets (perhaps from experiencing intense anxiety) which one was selected? I think a stronger approach would be to flatten the design to one page. You could then visually confirm that you've chosen a test/real alert, which alert was chosen, and then see what those options actually produce. In addition, because of the seriousness of sending an alert, I think it would be better to make the "Yes, Send Now" button harder to engage — maybe a slide to send, press and hold to send, or simply give a confirmation dialog after clicking it would help.

softwareqrafter 9y ago
You should probably also keep in mind that this isn't a consumer app. Who ever uses this will have seen the entire process before and tested it in a training environment. The redesign seems mostly to focus on making sure stuff isn't done by accident.
- olliewagner 9y ago
  I would imagine that the operators of the current UI were trained on it as well. What the OP posted is certainly an improvement, but could be made bulletproof by showing each choice in context alongside a button that you can't accidentally trigger.
- ceejayoz 9y ago
  I've seen video of police shootouts where the cops - presumably trained on such a thing, plus daily exposure to tense situations - miss repeatedly from just a couple feet away, trip and fall, and otherwise screw up. Training is not a replacement for good design. It helps, but I'd expect someone genuinely thinking they're about to be nuked to act differently than someone participating in a drill about it.

jmisavage 9y ago

It looks like it would help prevent the recent incident, but the confirmation screen at the end doesn't make it clear whether it's a test or a real thing. I know there was that big screen at the front, but if you're confirming something you need all the options presented again to double check.

mc32 9y ago
There was a story of a nurse who was looking after a mother and her child in ICU. Child had many probes and alarms for alerting of change in condition. The alarms were going off constantly, but often times, the condition was not severe. Mother was not getting sleep. Nurse took pity on mother. She tried silencing alarms. The system had, i believe, seven warning screens warning against deactivation, all needed to be acked to proceed. She proceeded. Mother got rest. Alarms were silently blaring. Nurses did not get the critical alarms. Toddler did not make it. Nurse obviously fired hospital sued, monitoring system mfg sued. Monitoring mfg stated they didn't put in further failsafes because they never imagined someone would possibly go past seven ack Windows with all the warnings . Someone did.
- ghostbrainalpha 9y ago
  Did you know its actually a crime to sit in traffic and constantly honk your horn for no reason at all? That's because alerts are supposed to actually alert someone of something. By constantly sounding alerts for basically no reason, you are creating an unsafe environment, because REAL alerts will be ignored. I've sat by those beds, and had alarms not stop for 12 hours straight. They don't get nurses to come by and check, they aren't alerting to anything important and they are completely ignored. I believe the company should be sued, not for the GROSS negligence of the nurse unplugging every system, but for the minor negligence of designing a system where constant alerts that don't really mean anything or require any action can't be silenced.
  - mc32 9y ago
    The problem is she not only turned off the alarms and beeps in the patient room, but also all the notifications going to nurses' station and pagers, so when the real bad thing happened, no one got alerted.

TrueGeek 9y ago

Going the other way, on /r/ProgrammerHumor/ they're showing designs that are even worse than the original. https://gfycat.com/DevotedUnfortunateBongo https://gfycat.com/DevotedUnfortunateBongo https://gfycat.com/KindlyEverlastingGibbon https://gfycat.com/KindlyEverlastingGibbon https://gfycat.com/PepperyGoldenAfricanpiedkingfisher https://gfycat.com/PepperyGoldenAfricanpiedkingfisher https://i.redd.it/ubnpsrzljla01.gif https://i.redd.it/ubnpsrzljla01.gif https://v.redd.it/8pcx6ymh0ha01 https://v.redd.it/8pcx6ymh0ha01 https://gfycat.com/QueasyGrandIriomotecat https://gfycat.com/QueasyGrandIriomotecat https://i.redd.it/y0a33r0ohja01.png https://i.redd.it/y0a33r0ohja01.png https://gfycat.com/BadOrganicCanary https://gfycat.com/BadOrganicCanary https://gfycat.com/BabyishBonyHorseshoebat https://gfycat.com/BabyishBonyHorseshoebat https://gfycat.com/RegalHighAlaskanhusky https://gfycat.com/RegalHighAlaskanhusky

jakozaur 9y ago
https://i.redd.it/ubnpsrzljla01.gif https://i.redd.it/ubnpsrzljla01.gif is the best.

casperb 9y ago

I think step 2 and 3 are not very clear that you are sending an important message to millions of people, that should only be send in a rare occasion. It could just be that the designer likes red. What blows my mind is that something like this can be send by a single person. A better approach would be that you need 2 or 3 people to send such an alert to millions of people. How can a single person, that misplaced it's cursor by 20 pixels have such an effect? That is not only changed by fancier fonts and more colors IMO.

koolba 9y ago
Is it possible to have two separate cursors? Having two mice plugged in controls the same cursor so it doesn’t work for dual entry. With two separate cursors you can have a “double double click” on two sides of the screen. It’s be like the dual key, “1-2-3-Engage!” in the movies.

dstjean 9y ago

What I find astonishing is that there was not a Two-man rule security control in place.

hvidgaard 9y ago
UI is not even remotely relevant compared to this. It can be as ugly 80'ies inspired as it wants to with poor UX. It should require 2 people signing off with their credentials for it to be send.

alkonaut 9y ago

Don’t redesign the UI redesign the legal and bureaucratic frameworks that leads to the current UI. But I get that that’s not much fun.

jlebrech 9y ago

this could be written as a terminal app too, and without the need for the idiot interface called the mouse.

niftich 9y ago

As others are pointing out, steps 2 and 3 are flawed in this design. In an effort to break out the decision steps into a wizard, the author chooses to treat the distinction of 'test alert' vs 'real alert' as a simple configuration option whose decision was already chosen, so it doesn't need to be shown on step 2. This is the sort of designer-bias mistake that, ironically, leads to terrible interfaces like the original that precipitated this whole sequence. Test alerts and real alerts are entirely different in every imaginable way: one's normal procedure, the other is hopefully a rare event; one causes people to scoff at their phones while the other creates urgency and concern. Playing up the distinction on 'step 1' is good, but eliminating all visual indications of the choice on further steps is bad in ways a confirmation screen can't rectify. UI is only a portion of the UX and the overall operator process, but there should be as few commonalities between the process (and UX) surrounding test alerts and the process surrounding real alerts as the trained operators of the system can bear. It's even odd to have them originate in the same entry point, but as the author has done, I'll also keep my criticism focused on a UI that can do both. Concretely, I propose a simple way of rectifying the loss of context on 'step 2' is to get rid of the spurious 1-2-3 breadcrumb that doesn't communicate anything that isn't abundantly clear otherwise, and use the space for several conditional indicators that trigger in case a real alert was selected. Warning icons, clear wording, exclamation marks, attention-pulling colors or patterns should be used to distinguish the context of real alerts from text alerts in so many visual ways that accidentally confusing them, even through a momentary loss of situational awareness, is practically impossible.

jaunkst 9y ago

make them confirm by typing test or alert

scrumper 9y ago

Why couldn't you just have the color scheme on the web page invert if you click one of the unusual, dangerous live alerts, so you're immediately very clear that you've selected a non-normal action? So: -- Business as usual -- 1. Click test alert 2. Confirmation appears. -- Nuclear attack or accidental click -- 1a. Click live alert 2a. Invert colors 3a. Confirmation appears. Doable entirely client-side, no need for extensive server-side changes which all these redesign ideas require. And the fact that the webpage background just turned black is clue that you've done something out of the ordinary, especially at shift change (so you don't just blindly hit the confirmation).

eagleal 9y ago

While we all love pretty and overdesigned UIs, for it to be more 2018 friendly make sure to add 5MB of JavaScript and CSS dependencies and new features that only works on Chrome! As others have noted though step-based flow is not really recommended on a mission-critical UI as you can't rely on user memory. Why not just show the choices sequentially without hiding anything through various generic message screens? Alert type: [ test ] - live Message: other1 - [ Kauai county only ] - other2 Confirm: Send test > Kauai county only?