Design Pet Peeves (and Suggested Solutions), Part 0

"Wall warts" are devices that integrate an AC plug and a sizable amount of electronics into one housing. They are exceedingly common in North America; most low-power external DC power supplies found there are wall warts, and I can count seven such devices in my bedroom. They are so named because they are very large relative to the typical plug, and so take up a significant amount of space and, if plugged in to a vertically-aligned outlet, require the outlet to bear more weight. Their size results in all but the smallest wall warts blocking other outlets, typically two but possibly more. Their weight means that some old, poor-quality, and/or poorly-maintained¹ cannot easily retain them. It is also possible for wall warts lying on a floor to be oriented with their pins up, posing a major hazard to people walking barefoot.

The definitive solution to the wall wart problem is simple: simply add a detachable mains cord (with the nationally-standardized mains connector on one end and something like an IEC C7 or IEC C13 plug on the other), then add a corresponding socket on the device. The cord needn't be long; if the user wants a longer cord, they could substitute their own. A cursory search reveals that such a combination costs, in quantity, $1.87 without grounding and $2.08 with. Based on how much time I have spent writing about wall warts, it's clear that I value reasonable power plug design at more than $2.08 per unit.

But if eliminating wall warts is not an option, there are still ways to improve them. The discussion to follow will assume that the wall warts in question are designed to use North American plugs (the NEMA 1-15P and 5-15P plugs, to be precise) and that the outlet and plug are oriented such that the blade-shaped terminals are on top, the ground pin is on the bottom, and outlets are stacked on top of each other. This is typical in North American residential construction².

First, orient the wall wart in such a way that the bulk of the wall wart extends to the side (in other words, orient the major axis of the wall wart to be perpendicular with the blades of the plug). This allows the bulk of the wall wart to occupy space not likely to be occupied by another outlet. If possible, make the wall wart tall and skinny, so that as little space as possible is occupied above and below the plug.

For an ungrounded wall wart (using a NEMA 1-15P plug), do not put the pins in the center of the device. For typical sizes of small DC power supplies, doing so will result in the device blocking two outlets. If the pins were offset vertically to one side, then the power supply could occupy more space below the pins (where the ground pin would be located for a grounded plug) and less above, reducing encroachment into the outlet above the one in use for the device and making use of space that would be otherwise unusable. These simple suggestions can make wall wart power supplies much less cumbersome to use.

The foreground and background colors of text and graphics must be sufficiently different to allow for easy reading even under suboptimal conditions of ambient light, screen brightness, text size, or visual ability. This is a rule violated by many graphic designers: I have seen so many posters with hard-to-read text because of improper color contrast, and many popular color themes for text editors and terminals make the vast majority of text hard to read at typical sizes without eyestrain—and I am a young person with good (albeit corrected) vision whose computer has a bright and nonreflective display. If so many things are hard for me to read under conditions that tend to be closer to ideal than poor, there must be many other people who simply cannot read text set like that. I have had to modify the theme of this blog (which is otherwise a fairly good theme) to ensure that it complies with web accessibility guidelines.

Ensuring that text has proper contrast is easier than one might think. In addition to the practical tests—stepping away from one's computer, zooming out, taking off one's glasses, turning down the brightness of one's monitor, and the like—there are tools like the WebAIM Contrast Checker that test whether the foreground and background colors of text comply with accessibility guidelines. Other tools, like the WebAIM Link Contrast Checker check whether the colors of the background, one color of text, and another color of text (particularly the color used for nonunderlined links) have sufficient contrast between each other.

A related accessibility tip is to avoid situations in which color alone is used to convey something salient. Particularly, don't use red and green to convey information not conveyed by position, shape, text, or text style; red-green colorblindness is the most common form of colorblindness and affects around 2-10% of people with a Y chromosome³.

Contrast-checking tools intended for the web are not perfect for use in print, as print media use subtractive colors (with cyan, magenta, yellow, and black primaries) rather than the additive colors (with red, green, and blue primaries) used on screens (and in lighting). Further, color matching between print media and screens is not perfect unless one is willing to invest significant amounts of time, money, and effort into making it so—and that only covers color matching between one's own screens and the printed page, not those of everyone else. Web contrast checkers are nonetheless useful tools for print media. On many occasions, I have been about to publish or print material with insufficiently contrasting colors only to notice my mistake through use of these contrast-checking tools. Common and rigorous use of them will make the visual world a better place for everyone.

Many fonts insufficiently distinguish between i, 1, and I; and between 0 and o. This can make text harder to read, while yielding no stylistic benefit. The solution is often simple: use a similar font with better legibility, or see if your current font has a more legible variant. In particular, most serif fonts have good disambiguation between i, 1, and I. Unfortunately, some serif fonts do not disambiguate well between 0, O, and o. This is particularly acute with fonts that use text figures—that is, they render digits in the same way as lowercase letters are, with a roughly square or circular shape punctured by ascenders and descenders that give each digit a form different from most of the other digits. The font in which this blog is set, Sorts Mill Goudy, is a good example; its digits, from zero to nine, are 0123456789, and its zero, lowercase o, and uppercase O are 0oO.

Most monospace fonts disambiguate well between easily-confused characters but suffer from other readability problems. The Inter font with its disambiguation feature flag (ss02) switched on disambiguates well between most ambiguous characters, as does the Atkinson Hyperlegible font. The latter was designed particularly to make reading body text easier for those with visual impairments.

Several stairs have integrated bicycle ramps: these are channels on one side of the staircase that present a smooth slope to a bicycle wheel to, hopefully, allow a bicycle to be rolled up a staircase. Most unfortunately, these ramps do nothing to allow wheelchair traversal of stairs, and many are rendered entirely useless by being placed too close to the edge or other obstructions for parts of the bicycle to clear them.

A typical bicycle frame is 6-19 cm wide, with tires that are 3-6 cm wide. One can expect the pedals and any cargo-carrying components to extend 19-23 cm from the centerline of the wheel. However, I've seen far too many bicycle stair ramps placed right next to the edge of a staircase, in such a way that every bicycle could not roll through in a vertical position, and in order to clear the obstructions the bicycle must be angled so steeply that any convenience provided by the ramp is nullified.

To remedy this problem, provide further offset bicycle stair ramps and test them with a representative sample of bicycles. Better yet, though more difficult, would be to provide an alternate means of step-free access like an elevator or ramp; this allows for wheelchair, stroller, and hand truck accessibility.