1. Have a conversation  You encounter a stranger who asks:  What is your name?  What is your address?  What is your phone number, email…?  What is your birth date?  You’d become uneasy  Think about forms and how they are organized as a conversation instead of an interrogation.  Giving people confidence to complete forms starts with how we ask them the questions.

2. Forms  “There are things known and things unknown and in between are the doors.” Jim Morrison  “There are things people want and things you want to give them and in between are the FORMS.”

3. Have a conversation  People really DO care about what questions they are asked and the reasons why they are asked them.

4. Best Practices  Is information necessary to give people what they want? If not, people will question why they are being asked.  Is there better time to collect information?  Ask people for information once they are using an application- more successful than asking them before they start.  Explain why certain information is required?  Explain how collected information aligns with users’ goals.  Are there better ways of collecting the information? Source: http://visitmix.com/Articles/Web-Forms-for-Peoplehttp://visitmix.com/Articles/Web-Forms-for-People

5. Best Practices  Less is more. Contact form conversions increased 120% when the number of fields was reduced from 11 to 4 (a 64% decrease).  Furthermore, the fields removed had no impact on the quality of the conversions. Source: http://www.imagescape.com/library/whitepapers/contact_form_study.html http://www.imagescape.com/library/whitepapers/contact_form_study.html

6. Best Practices  Best way to speed up process is to not ask the question. To make forms efficient, ask the following question for each form item:  Do you really need to ask this question?  Is it information that you can get automatically?  Is there a better time and place to get an answer from people. (Wroblewski, L. 2008, Web Form Design, p.22)

7. Form Practices  Take time to evaluate each question. Remove everything that isn’t necessary.  Strive for succinctness in all the question labels.  Make sure form speaks from one voice, even though questions are from multiple people and departments.  Organize questions into meaningful groups.  Structure forms as a conversation, with natural breaks between topics.

8. Forms as a conversation: Sign-Up Forms  24% of forms used conversational talk, to address users needs by speaking with them through labels.  Informal phrases such as “What’s your name?”, “Your e-mail, please?” or “I’d like to…” are common in this context.  38% of sites prefer to remain formal and use business talk, asking users the required information user-friendly (e.g. “Your name”, “Confirm password” etc.)  38% of sites use system talk; visitors are asked for their “Login”, “User password”, “Location” etc. Source: http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/

9. Have a conversation  Input fields – gather the answers  Labels – form elements for asking the questions  When these two elements afford meaningful conversation people are likely to respond.

10. Best Practices | gradual engagement.  Think about how you can avoid sign-up forms in favor of gradual engagement.  Give potential customers an understanding of how they can use your service and why they should care.  Example : http://www.tripit.com/http://www.tripit.com/  Source: http://www.alistapart.com/articles/signupforms http://www.alistapart.com/articles/signupforms

11. FORM COMPLETION

12. Form completion  Primary goal for every form is completion  Provide a clear scan line  Show Progress  Scope, progress, status Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf

18. Top aligned Use with Familiar Data Minimize time to completion Need more vertical space Spacing is vital to enable efficient scanning (Source: Wroblewski, L. 2008, Web Form Design)

19. Right aligned Good association between label and field Needs less vertical space Difficult to scan labels -- left rag Fast completion times (Source: Wroblewski, L. 2008, Web Form Design)

20. Left aligned Data required are unfamiliar Enables label scanning Less association between label and field Needs less vertical space (Source: Wroblewski, L. 2008, Web Form Design)

21. Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf

22. Label Alignment  Top aligned:  Reduced completion times & familiar data input  Right aligned:  When vertical screen space is a constraint  Left aligned  For unfamiliar, or advanced data entry Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf

23. Best Practices  Align everything, even the submit button.the submit button  Give an indication on all of the steps involved.  Use progress indicators to communicate the scope, status, and position.  People see input fields and jump right in.  Put the label of the form field above or before the actual input field.  When you put labels inside of the form element, make sure there is a way for you to keep the label active when the user is typing.  The most important thing is consistency.  Source: http://blogs.zdnet.com/weblife/?p=1271http://blogs.zdnet.com/weblife/?p=1271

24. Form Practices |Page length  Few short topics, a single web page is good way to organize.  Large number of questions related only by a few topics, multiple web pages are generally preferred.  Large number of questions about a single topic, one long form is generally preferred.  Ask optional questions only after the form is completed.  Use initial capital letters to make title of content groups easier to scan.  Use web pattern conventions http://uipatternfactory.com/p=tag/form/ http://uipatternfactory.com/p=tag/form/

25. Form Practices |Sign-Up Forms Reviewed 100 large sites where web-forms (should) matter.  registration link is titled “Sign up” (40%) and placed in the right upper corner  sign-up forms have simplified layout to avoid distractions for users (61%)  sign-up forms are one-page (93%)  sign up forms attract visitors by explaining benefits of registration (41%),  titles of the input fields are highlighted bold (62%)  no trend in label alignment can be identified  designers tend to use few mandatory fields  designers tend to use few optional fields  vertically arranged fields are preferred to horizontally arranged fields (86%). Source: http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/

26. Form Practices |Sign-Up Forms  sign-up forms don’t have hover, active or focus-effects (84%),  hints and help are either static (57%) or dynamic (33%) and appear below the input field (57%) or on the right side of the field (26%),  static validation is as popular as dynamic validation  e-mail confirmation not used (82%),  password confirmation used (72%),  Captcha can be used or not used (48% vs. 52%),  Cancel button not used (92%),  Submit-button is left-aligned (56%) or centered (26%),  Thank-you message motivates users to exploring services of site (45%).  Source: http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/

27. Sites  http://www.lukew.com/presos/ http://www.lukew.com/presos/  http://www.15seconds.com/Issue/000706.htm http://www.15seconds.com/Issue/000706.htm  http://www.lukew.com/ff/entry.asp?968 http://www.lukew.com/ff/entry.asp?968  http://www.lukew.com/resources/articles.asp http://www.lukew.com/resources/articles.asp  http://uipatternfactory.com/p=tag/form/ http://uipatternfactory.com/p=tag/form/