As an active Web user, you most likely fill out several forms online every day, at a minimum. Forms are how we interact online, and they’re very much a part of our personal and professional lives, like it or not.

So why, as ubiquitous as they are, do so many Web forms leave us feeling frustrated? Why do so many users abandon  a form before they’re finished filling it out? Why does Luke Wroblewski, the man who literally wrote the book on Web form design and usability, feel like he has the right to stand up in front of several hundred Web designers (as he did at An Event Apart in San Francisco last December) and tell us that our forms “look like a poo storm?”

Forms are everywhere, and most of them are ineffective at best, downright unusable at worst. Even veteran Web users struggle to fill them out sometimes. Wroblewski explains the convoluted process that often turns the horse into a hobbled camel: regardless of who initially designs the form, marketing, sales, and IT all have a stake in what it inevitably becomes, each adding their own touches and requirements to it. And often nobody is minding the store to make sure the final form achieves its primary goal: getting users to complete it.

Here are some tips – from Wroblewski’s AEA presentation as well as a couple of my own — for the next time you have to manage the design of a Web form:

1. Resist the urge to ask for every last detail. It’s understandable why it happens. The rare opportunity to get prospects to turn over information about themselves gets your salespeople and marketing teams salivating. But do you really need to ask for a person’s fax number? How about street address? What’s the least amount of information you can collect at this moment? People are more likely to fill out the form if they don’t have to labor over it. Consider each field and requested piece of information carefully before including it. And don’t forget to tell users how you’re planning to use the data, Wroblewski says — people won’t give you an email address or phone number if you’re planning to sell it to someone else or spam them repeatedly.
2. Think linearly. How does the user’s eyes move through the form? Chances are, they do not naturally jump back and forth between side-by-side fields. Users tend to scan down the left side of the page, so your form should be designed accordingly, Wroblewski says. If you do need to jump around, use strong visual cues to draw users’ eyes to where you want them to go next. And by all means, avoid placing the “Clear All” button where users expect the “Submit” button to be — the biggest faux pas of Web form design is to stick a button in a user’s natural flow that will wipe out all of their hard work instead of rewarding them. It’s quite possible they’ll be so disgusted that they won’t bother filling the form out again after that.
3. Don’t break with convention. Because we fill out so many of these things, we’ve all become very accustomed to the design standards of Web forms. Occasionally a talented interaction designer finds a way to tighten up space and give a form a truly unique look that also functions well. But often those who set out to build a better mousetrap fail in their attempts. Certain conventions work, so stick with them. For example, a trend is to place the field labels inside the fields. Designers also try placing them to the right or left, or underneath the field. But Wroblewski says studies show that users complete a form 10 times faster when the labels are placed above the field. Smart, thoughtful design is always welcome, but it’s not always necessary to innovate when a convention works perfectly.
4. Treat the form as a holistic experience. Users get to the form from someplace, and when they finish the form they expect to be taken someplace else. People who create forms sometimes forget this, and focus more on the form itself than on the entire user flow. When sending the user to the form, be careful to only make promises based on reality — let users know what to expect and exactly what they will get from filling out the form. If using a multiple-part form, consider using a progress indicator, and make sure it’s accurate. (Wroblewski uses Fidelity.com as an example of a four-step progress indicator bar that misleads users by failing to mention the requirement to create an account in the middle of filling out the form, a major disruption in the flow.) And by all means spend as much time considering the confirmation page and process as you do the actual form. Users want to know they were successful, and want to be able to do something next as an immediate reward for their efforts.
5. Use a writer. I’ve known some IT people who were great with words. Designers too. But much of the time, forms need content help. Instructions, labels and buttons often don’t communicate clearly what exactly users should do. Calls to action are unclear or nonexistent. And the opportunity to provide context-based help (such as pop-ups explaining what the information is for or why the company is requesting it) is often overlooked. An experienced Web writer can help you see the form from the user’s point of view and craft language that will make your form successful.

As with many books and classes that begin with the words “The Right Way to …”, the moral of this pre-conference workshop put on by four well-known UX thought leaders was that — you guessed it — there is no “right way” to wireframe.

But during this four-hour workshop, we as participants did witness how lots and lots of sketching, pitching and critiquing, and collaborative problem-solving can turn out several different approaches that all solved the same problem in different and creative ways.

Churning out ideas — lots of ideas
I took the workshop because I increasingly am playing the role of an IA and UX designer, and see it as an important part of the content strategy work I’m doing. But I’m first and foremost a word person, and naturally freeze up when called upon to visually organize and prioritize ideas — terrified I’m going to do it wrong and not quite confident in the process I use.

I learn by doing and seeing others do, so hands-on workshops are ideal for me, and this one was no different. The first thing we did was break into four different groups (some of which were large enough that they broke into subgroups) based on wireframing tool of preference. I use Omnigraffle for site maps and (I was embarrassed to admit, until I learned later in the session that many others were in the same boat) often turn to Adobe InDesign for wireframing simply because it’s comfortable. But I’ve been very interested in Axure for some time, and now that the software has a Mac beta version I wanted to learn more about how to use it — so I aligned myself with the Axure group. (Other participants grouped into groups using Omnigraffle, FireWorks, and Balsmiq. The point of all that was that there are many different ways to skin a cat, and they all work fine.)

We received basic requirements — personas for two different types of users, as well as basic background about the organization we were designing for, and some rough and somewhat vague must-haves, leaving things mostly open to interpretation. Then it was time to sketch.

Six to eight thumbnail sketches. Five minutes. No rules. GO. Of course I froze. I’m a verbal thinker, and would much rather have listed requirements and ideas first, before starting to draw. But the sketching was a fantastic exercise for two reasons:

• It got us thinking in terms of blocking out areas, shapes, relationships, rather than thinking detail — because there was no time for detail. In retrospect, I think about the Graphic Design Cookbook and its basic building blocks inspiring designers to explore thousands of possibilities.
• It got us used to the idea that sketching is the first thing UX designers do, and that they do it for a long time. They start with thumbnails and move on to more detailed sketches, but they may go through dozens, even hundreds, of pieces of paper before they are happy enough with a solution to put it into wireframing software. Thinking on paper helps designers stay loose and open to ideas, and makes evolution much more possible than it would be in the software.

When our workshop leaders showed their wireframing processes in videos at the end of the workshop, I was actually relived to see that one of them is a verbal thinker like me — he starts with writing out all his ideas and requirements in long, messy lists. But all four of them sketched and sketched for days before moving on. Sketching is essential.

Design becomes collective
Next, we engaged in a process similar to what burgeoning architects go through in architecture school: “design studio,” where everyone gets a chance to put his or her sketches up on the wall and pitch concepts. As a team we agreed on which pieces we like, and then we started sketching layouts based on the elements and concepts that worked for us.

At that point, we took our sketches to another group and presented to them, collecting their positive and critical feedback that we took back to our table to further iterate the design. Before our eyes we watched our wireframes become further refine. As somebody who tends to work alone, I always enjoy being reminded of how collaboration and feedback can continue to make a solution better and better.

We regrouped, drafted our final sketches, and then it was time to design the wireframes in Axure. While our group’s noble volunteer worked the software, the workshoppers passed out beers, which we all continued to sip as each group presented our electronic wireframes and talked through our solutions.

Having walked and talked through the process, I feel more comfortable wearing a wireframer’s shoes now. Especially inspiring were the videos documenting the unique process of each of the UXers running the workshop … confirming that there is, indeed, no single “right way” to wireframe, but that it all involves a lot of iteration, noodling, paper, sticky notes and time.

Russ Unger (@russu):

Will Evans (@semanticwill):

Todd Zaki Warfel (@zakiwarfel):

I am secretly a wannabe information architect. I’m fascinated with the science behind user experience and design and love the thinking that goes into IA, even if my mind isn’t quite cut out for the rigorous organizational aspect to the job. But I still really enjoy reading IA blogs and articles, because I feel that the learnings of IAs can easily translate to all communications, especially interactive media but print as well.

So I always enjoy listening to the podcasts from IDEA, the big annual information architecture conference. Some of it is a little over my head, but I always feel like I learn a lot from them.

At IDEA 08 in Chicago last week, Aradhana Goel from the famous design firm IDEO spoke about an interesting shift in how her company has to think about design problems today. After more than a decade of touting user-centric design, based on the concept of empathy with users and their needs, Goel says, it’s now necessary to think about not only individual users but also consider the collective — to think about what these individuals are doing together with thousands of other people, and the technological and social trends that enable design innovation.

Trendwatching isn’t anything new, but Goel says this is a shift in how user-centric design is considered. Anyone who’s ever gone through a Web design or redesign project knows the importance of user testing. And that user testing typically focuses on individuals: we set up profiles of typical (often fictional) users to get inside their heads, study their demographics and psychographics, and learn what drives them. Then we test those assumptions with a handful of individual users, interviewing them about their reactions and responses.

When we talk about the “users” of our Web sites (or the “audience” for our communications in general), what we really mean are the individual people we serve. When I write for an audience, I try to get inside of the head of one physician, or home buyer, or patient, or designer. What are their pain points? What is their environment? What emotions factor in to their decision-making?

But Goel suggests that these days it’s necessary to go above and beyond the individual to address and find solutions for design problems. In this era where social networks, community and collaboration are spreading fast and furiously, connecting and reconnecting people in so many different new ways and people are more and more open to it. At the same time, technology trends are changing so quickly that it’s impossible to solve a design problem without looking at how technology can and should “enable” the solution.

Today, Goel says, her company encounters more open-ended and “intangible” challenges than ever. “In our past work, whether it was a health device or a library design, there was a problem at hand,” she told the audience at IDEA. “People weren’t coming to the library. Our challenge was how do you improve the experience. And we knew the constraints.

“Now the problems are more open-ended. Clients ask, ‘We’re second. How do we become first?’ When we have no design constraints, where do we look?”

Goel says it’s important to consider individual needs in context with how people are moving collectively, and how larger trends are impacting them, in order to find a starting place for tackling these open-ended challenges. As an example of what she means by that, she provided a number of examples of societal, technology and business trends that have influence over a user’s experience. A few of these include:

• The “culture of networks” – the ability to leverage your personal or professional network for support, to contribute to a community dedicated to social change, or to collaborate on innovation through open source communities
• Nomadism — being able to communicate and work from anywhere in the world
• Sustainable living — the combination of changing behaviors while making personal statements
• A “platform approach” to technology, offering flexibility and choice, a la the iPhone
• Loyalty-building services, a la Amazon.com or Netflix
• Anytime, anywhere conversations using endless numbers of channels

The “user” is still at the center, but the world spinning around him or her has to factor in considerably for the ultimate experience to be relevant and to truly solve the challenge.

Download Goel’s podcast and her PDF presentation, or visit the IDEA 08 site.