Web Form Design

Luke Wroblewski

Mentioned 2

The book is about the usability, interaction design, and visual design of Web forms; Web form design for e-commerce, social software, intranets, Web applications, and Web sites.

More on Amazon.com

Mentioned in questions and answers.

I have seen numerous ads/sites poking fun of a cluttered user interface by setting it up side by side with, say, Google and having a caption like: this is your site / this is theirs.

That’s all very funny, but actually, Google only needs a textbox and a submit button.

What about when your page is a data entry form, say an order entry form, or a new employee entry form?

I can’t think of a way to build a form that requires a lot of data entry without a clutter of textboxes, dropdownlists, checkboxes, etc.

Of course I could use put just one textbox per page, and have a 50 page data entry form or wizard, but I don’t think that would go over well with the end users.

Anyone found a way to create a data entry form that collects a lot of data but doesn’t look ugly?

Form design is becoming more of a science now. You can embed JavaScript to watch mouse motions and time keypresses and mouse clicks. There have also been eye-tracking studies to see which layouts are easiest for people to figure out. I recently read Luke Wroblewski's Web Form Design and it walks through examples of form redesigns that were done based on evidence. It even shows eyetracking on sample forms so you can se the elements that slow people down.

It's a great book. Shows layouts that work. Tells when you should give help and when you shouldn't. How to phrase instructions. How to deal with form errors. And so on.

There are about a half-dozen 4 1/2 star design and usability books on Amazon. If you make web sites with forms, you should keep up with the state-of-the-art, just as you'd keep up with innovation in coding, deployment, and testing best practices.

Improving usability on a page can make a huge difference in revenue, as conversion rates go up. Knowing the problems that case people to bail out of a form is crucial.

I think most of us have seen the following: Form

I'm currently tasked with converting an existing winform app into a web application. The current system is like the "Your company's app" and it would be nice if I can trim it down and make it more use friendly, sleek and usable.

Can anyone recommend any good books, blogs, tutorials etc and UI design, specifically for web forms.

Thanks

I recommend Don't Make Me Think and anything else by Steve Krug.

I recommend Web Form Design: Filling in the blanks. Great form analysis and best practices for web form design.