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.
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.).This lady really appreciates good UI design!
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:What are we grinning about? This interface blows.
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.