Tri-state buttons in Gowalla 3

When Gowalla released version 3 of their iPhone client, they completely revamped the user interface. Although they switched from a rich olive green to a stony gray and downgraded the app’s icon:

Old Icon

New Icon

in general they improved the interface.

For those unfamiliar with Gowalla, it’s a social location app that allows you to publish where you are to your friends. When you arrive at a recognizable location, you “check in” and choose whether to publish this information to just Gowalla or to other services (Facebook, Twitter, Foursquare, and Tumblr). For each of these services, you can be in three states:

1. I want to publish my check-in to this service.
2. I don’t want to publish my check-in to this service, but I’m configured to do so if I want.
3. I can’t check in to this service because I haven’t configured it in Gowalla.

The folks at Gowalla figured out how to represent these three states beautifully, compactly, and intuitively, while ALSO including the ability to configure any service that falls into state #3. When you go to check in, you see a screen like this:

See the row of buttons beside the label “Share:”? They represent, in order, the services for Twitter, Facebook, Foursquare, and Tumblr. The button for Twitter is both in color and shaded to look 3D. It looks both enabled and “on.” The button for Facebook is shaded to look 3D, but is not in color. It looks enabled, but “off.” The buttons for Foursquare and Tumblr aren’t in color OR appear 3D, but rather appear flat. They look disabled. When I first saw this, I instantly knew that my check-in would be shared with Twitter only, that I was configured for Facebook, and that I wasn’t configured for Foursquare or that “t” thing. I guessed that I could tap a “disabled” button to configure that service, and to experiment I tapped the “t” button and a screen appeared for configuring Tumblr. Exactly what I expected.

So here you have a way to represent three states that is beautiful, compact, and intuitive. It also offers the added benefit of being discoverable. Pure genius.

Not sure if someone else came up with this first, but I think this is the first time I’ve seen this.