First, I’d like our designers to be inspired and challenged to do great form designs, and

Second, I’d like our product managers to know the stuff out there, and challenge our designers to produce these beauties.

1. Alexandru Cohaniuc

2. Tea Round App

3. Grooveshark

4. Substrakt

5. Matt

6. Pixelight Creative

7. Ballpark

8. MAQUINA studio

9. nclud

10. MonAssoc

11. Komodo Media

12. AllDevJobs.com

13. Connect

14. TVI

15. Webgrapes

16. Headscape

17. Digg

18. Graphik.fi

19. CollabFinder

20. Digitalmash

21. Kontain

22. SocialSnack

23. Mint

24. BBC

25. Media Temple

(via: SixRevisions)

If anything, these are our benchmarks that any web form design must meet.

Extracted and condensed are the survey results below.  Actual links (with nice graphical charts) to both parts of the survey follows right after.

Here it goes. Web Form Design Pattern Best Practices Part 1…

- “Sign Up” is most popular link title to form (40%)
- The header is the most popular place to put the link (59%)
- Placed at top right hand corner (76%)
- Simplified design when compared to page layouts (61%)
- Benefits of registration are presented next to form (41%)
- One-page forms (91%)
- Using bold to highlight title of input fields (62%)
- Right aligned labels closer to input fields (41%)
- Only 3 to 5 mandatory fields (50%)
- 6 to 8 mandatory fields (30%)
- Zero optional fields, only collected after sign-up is complete (62%)
- Less than 5 optional fields (98%)
- Vertically arranged forms (86%)
- Do not have asterisks* to indicate mandatory fields (78%)
- Progress indicator (9%)
- Simple web form with as little fields as possible (86%)
- Grouped and divided by white space (69%)
- Divided by borders (22%)

Web Form Design Pattern Best Practices Part 2…

- No hover, active, focus effects in use (84%)
- Static help support placed obviously next to input field (57%)
- No hints (33%)
- Error messages at the top – no fields highlighted (30%)
- Error messages highlighted at form fields – no top message (29%)
- Both top error message and error fields highlighted (25%)
- Real-time AJAX validation warning or error (22%)
- Colour Green used to indicate success, and Red to show failure (97%)
- Not necessary to ‘confirm email address’ by second input field (82%)
- Necessary to confirm password (72%)
- Captcha not in use (59%)
- Cancel button not used (92%)
- Left-aligned submit button (56%)
- After successful sign-up, load non-mandatory fields or tell friends (45%)
- After successful sign-up, recommend places to go or link to click (33%)
- After successful sign-up, basic thank you page with no extra links (4%)
- After successful sign-up, redirect to homepage (2%)
- Using tab indexes (99%)
- ‘System Talk’ tone and manner – Login, Password, Location (38%)
- ‘Business Talk’ tone and manner – Your name, Confirm Password (38%)
- ‘Conversational talk’ tone and manner – Tell us who you are, etc (22%)

Too much text! IToo much to read. Don’t understand. I know.

So here’s the link to both parts – Part 1, Part 2.