Posted on by & filed under design, general, responsive design.

At the Ampersand conference, Nick Sherman talked about responsive typography — where typographic displays change to respond to the viewing conditions — and how we can use face detection in the browser to serve up the right size type for a reader. He showed us a nifty responsive-typography-via-face-detection demo, and he demoed his size calculator, which allows us to serve up an appropriate type size based on viewing distance.

While practical applications for these techniques might seem scant (like say, if you ever ‘wanted to make a ten thousand foot letter display at 12pt when viewed from a helicopter’), I can think of at least one quite practical application: public first aid signs.


Beware the fishbone? Does Angelo Moore know about this?

Here in New York, restaurants, bars, cafés, and other public establishments are required to display signage showing, among other things, the location of first aid kits and/or defibrillator equipment, as well as general guidelines for basic first aid, such as how to perform the Heimlich maneuver on a choking victim. While the intention behind the requirement is great, the implementation often leaves much to be desired. The posters are generally ugly and hard to read from a distance, and restaurant managers don’t always place them in such a way that the contents are easily legible by patrons. By using electronic displays and responsive typography, plus a little bit of face-detection-fu, we could make this theoretically useful piece of information design actually, practically useful.

Responsive Signs 1Imagine you’re at a restaurant with your family. All is well, until it’s not: suddenly your uncle starts choking on a chicken bone. You stay calm, and cast your eye about for help. A safety sign that displays a big First-Aid cross hangs in a far corner of the room. There’s no mistaking the universal sign for First Aid, and it’s front-and center, easily discernible from across the bustling restaurant. There are no additional graphical elements cluttering up the sign — you just see a clean and easy-to-parse First Aid Cross. You rush over to the sign (perhaps you threw an elbow or two to get there. You love your uncle; I ain’t gonna judge). As you get closer to the display, the information on the sign changes: now that your face is within six feet of the sign, it displays the location of the first aid kit, emergency numbers, and a menu of large, labelled icons for accessing individual emergency situations. You punch the “Choking” icon, which is nice and large and easy to hit, and you’re presented with the instructions for performing the Heimlich maneuver. The instructions are laid out in an accessible, easy-to-read way: they take up the entire surface of the display instead of crammed in with a bunch of other info. You follow the steps, perform the Hemlich correctly, and out comes the chicken bone. Your uncle is gonna be ok.

Now repeat the above scenario, except that this time, your uncle is having a heart attack, and instead of figuring out how to perform the heimlich maneuver, you need to learn how to use the defibrillator paddles in the first aid kit behind the bar (because do you know how to use defib paddles? I’ve seen then used on TV, but I’ve never seen them up close). Our responsive sign has got you covered (ditto for a zombie attack; because you never know when the undead apocalypse will hit).

Now, this is an incipient, malformed idea, so there are some caveats to put out there — and certainly some problems to address:

First, we need to sort out how to prevent false positives: this sign is going to be in a public place, it’s reasonable that people would trigger it without wanting to. At best, a constantly moving layout becomes a visual nuisance. At worst, it’s an impediment to getting at the info you need quickly in an emergency. Perhaps a voice activated trigger (“Help!”, “First Aid!” or something similarly universal) could help in this respect.

Additionally, having nested information might not be the best approach in terms of giving people fast info in an emergency. While I contend that the advantage of having clear, detailed information for performing complex actions like a Heimlich maneuver or correctly operating a defribillator occupy the entire surface of the sign (instead of being relegated to 8-point type in a layout that includes all sorts of other info) outweighs the annoyance of having to drill a level down into the info you want, this approach requires testing, to see if people actually do use the interface correctly in the heat of the moment, under duress.

Finally, this needs to work with the power out, since it’s an essential bit of emergency information. in many ways, this is the simples problem to solve — extended battery power can be achieved by using eink displays similar to the ones in use on kindles (or more specifically, the type of eink displays that are specifically made for signage).

It's an oxygen deprivation warning. Totally obvious, right?

Guess what this sign means.

This responsive signage approach can also be used for all sorts of situations where the initial iconography isn’t enough (or, in the case of the warning sign pictured here, from CERN, completely obtuse and opaque and hard to decipher). We can also use it for more mundane, quotidian uses, too, like displaying the price of an item on a shelf at a store, and upon closer inspection, revealing nutritional information or additional product descriptions.

Tags: choking, first aid, information design, public works, restaurants, safety, signage,

Comments are closed.