Design Basics: Proximity (Or, Why Skype’s “End Call” Button Is All Wrong)
Because it’s too #$*&ing close to everything else.
Design literacy: it's not just for designers. In fact, us "normals" are sometimes more design-literate than the pros, because we can instantly tell when something is annoying as hell to use. David Cole inspired me to try an occasional series on "design basics" with his technical explanation of a design-101 principle called "proximity." Basically it just means grouping things in a way that actually makes a whit of mothertrucking sense.
Cole uses his car's crappy air-conditioning controls as an example, but I'll cite one that annoys me literally every day: Skype's recently redesigned calling interface.
The old version of Skype wasn't necessarily pretty to look at, but it did one thing exactly right: it put the big red "hang up" button nowhere near any of the other in-call functions (for adjusting volume, starting a text chat, turning on the video camera, etc.).
And here's the new version. As you can see from this screenshot of my call with science writer Christie Nicholson, all the functionality is grouped together in a row in the top right corner. "Hang up" is the rightmost button:
At first glance, the newer version looks like an improvement: those buttons are all lined up in a nice neat row, not spread all over the place like in the old version. It's true -- it does make more sense for all those in-call functions to be grouped closely (and by extension, conveniently) together. Except for one, which is not like the others: ending the call.
This is proximity gone wrong. Here's why: that "hang up" button has a critical function that is in a class by itself. As designer Luke Dorny memorably tweeted, "A button that could result in lost data should be at least 24 pixels away from 'safe' buttons." In Skype's case, grouping a button that could accidentally kill the call with a bunch of others that can't is just asking for trouble.
Unsurprisingly, I've come close to making this mistake several times, and so have many of the people I Skype with -- especially over video calls, since the "turn on camera" button is right next to "hang up." Here's how it usually goes:
Me: I can explain this better by showing you what I mean. Turn on the camera.
Them: [hangs up]
And that's why proximity matters. As David Cole artfully explains, we're psychologically wired to expect that "things close together" are actually related. In a purely visual interface like Skype's, with no physical affordances to take advantage of, that goes double -- and so do the screwups for users if proximity isn't carefully considered. Skype's previous "end call" button may have looked kind of dopey -- a big red circle hanging out like a Bozo nose in the corner of the call window -- but it was clear, easy to use, and idiot-proof. That's often the difference between a piece of software that's a joy to use and one that's a pain in the ass. With its subtle bungling of proximity, Skype may have tipped into the latter category.
[Top image via Biblioteca de la Facultad de Derecho y Ciencias del Trabajo Universidad de Sevilla]
