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 .
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.
Jan 19, 2016
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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.”
Have a conversation
People really DO care about what questions they are asked and the reasons why they are asked them.
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-People
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
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)
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.
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/
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.
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/
Source: http://www.alistapart.com/articles/signupforms
FORM COMPLETION
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
Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf
Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf
Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf
Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf
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)
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)
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)
Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf
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
Best Practices
Align everything, even 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=1271
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/
Form Practices |Sign-Up FormsReviewed 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/
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/
Sites
http://www.lukew.com/presos/ http://www.15seconds.com/Issue/
000706.htm http://www.lukew.com/ff/entry.asp?968 http://www.lukew.com/resources/
articles.asp http://uipatternfactory.com/p=tag/form/
Related Documents
