Clearly, they’ll have to come up with a sexier title than that if they ever adapt the book into a major motion picture, but at least it makes no bones as to what it’s about: designing highly intuitive and efficient forms for capturing user inputs on the Web. You can get a kind of preview of the content over at his blog, where this one essay on optimizing sign-up forms for wireless networks will teach you more about the art of interaction design than most courses will teach you in a year.
Listen Up, It’s Forms
And no wonder. I consider Wroblewski one of the smartest practitioners in the business, so I’ll pretty much read anything he has to say on any kind of interaction design subject. Even if the topic is forms, which is something that will likely put most people to sleep, but that I happen to really adore. (By coincidence, Afshan Kirmani also published an article on the subject at Boxes and Arrows last week.)
In fact, I think it was really the ‘dry’ stuff like forms, tables and charts that first got me interested in the less-subjective aspects of this craft, and made it much more interesting for me. Beyond the aesthetic, emotional dimension that rightly defines so much of what we call design, I realized that it was very often these deceptively boring aspects that deliver the most meaning to an audience. Web forms, in particular, are the principal gateway through which the majority of a user’s information gets into a system — a kind of interface lifeline, if you will, that deepens interaction and that, as it happens, often delivers the actual revenue to an online business.
The Beauty of Boring
Still, I apply a kind of aesthete’s eye to these ostensibly objective elements. I have a soft spot in my heart for exceptionally beautiful forms, which is part of the reason I made my now-stalled effort to create a library of reliable forms-rendering markup and CSS called The Subtraction Good Form. (I haven’t touched it in a while.) Additionally, I take some pride in the simple but, I think, aesthetically pleasing nature of the comment form on Subtraction.com (at the bottom of this page), as well as this membership application that I designed for the writers’ workspace Paragraph.
Probably the best Web-based forms I’ve ever seen, though, are the ones designed for Mint by Shaun Inman. They’re as aesthetically airtight as a bathysphere, with their delicate strokes and pixel-perfect alignment. Gorgeous.
I haven’t yet read Wroblewski’s book, so I don’t know if he addresses these more superficial aspects of form design. In fact, you could argue that emphasizing beautiful forms can often run counter to accepted best practices for efficiency and usability. That tends to go back to the age-old argument that beauty and functionality are mutually exclusive, but personally I don’t buy that. Forms can be eminently usable and visually pleasing at once.
New Breakthrough in Forms
As an aside, here’s a form that I came across today that isn’t particularly beautiful, admittedly, but still quite ingenious. It’s a credit card payment form, the likes of which any casual Internet consumer has come across dozens and dozens of times. It’s not the kind of common Web element that you would assume could offer even a little bit of delightful innovation, but somehow PayPal, who are responsible for this one, managed to pull off something unexpectedly good.
The first stage of the form is very standard. But you’ll notice there’s no apparent way for the user to actually specify whether the card they’ll be using is a Visa, MasterCard or American Express, etc. Usually a pull-down menu or a set of radio buttons is provided for the user to indicate the card they’re using, but here only the logos of those cards are displayed, with no indication that a user should interact with them.
In fact, I’ve always wondered why a pull-down menu or radio buttons was necessary to identify card types at all. The very first digit of any credit card already indicates what kind of card it is. If you’ve got a card that starts with a 3 then it’s an American Express; with a 4 then it’s a Visa; with a 5 then it’s a MasterCard. By simply entering the number, the system should be able to discern that information automagically. To my knowledge, there’s no value in asking the user to identify the kind of card they’re using if they’re already entering the card number anyway.
In fact, the way PayPal has done it, users only need to start entering the card number in order for the form to recognize the card type. Only the first digit is required before the form immediately acknowledges that it understands that information by cleverly dimming the logos for the other card types — no user submission is required. The form just knows. It’s simple and, technologically speaking, not particularly complex or even impressive. But it’s also really, really smart, the kind of subtle but powerful feedback that makes all the difference in form — and interaction — design.
+