Getting the most out of your forms: Writing compelling forms

November 19th, 2009 by Hillary Elmore

 

What is good form writing?

In previous posts in this series, we’ve covered a little bit about how to make your forms work well for your respondent, but there’s more to a good web form than just making sure the form is easy to use. The form is about communicating with your respondent, not just about getting the information you want. The words and language you use on your form set the tone for your interactions with your site’s visitors, so they should reflect your intention of that interaction.

Clear, concise, just-in-time information

In an ideal world, you would be able to provide ample information to your respondents using only descriptive field labels. In reality, sometimes you really do need to explain options or meanings. In these cases, the best strategy is to display the necessary information as close to the question as possible. For example, provide clarification in a short description above or below the question. If you need to display a lot of help information (more than a few words), consider dynamic hints. Dynamic hints disrupt the flow of the form less than large chunks of help text. In FormAssembly, dynamic hints are available by entering the hint text in the “Contextual Help” section on the Properties panel.

Have a conversation with your respondent

Think of your forms as an important mode of communication with your online visitor. You’re not just extracting information, but building a relationship. How can you use this in your forms? Instead of making short, terse labels, consider how you can turn the question into a full sentence using common language.

For example, this feels fairly impersonal.
country

This, however, feels much friendlier and more personal.
ILiveIn

If you find it difficult or think it feels unprofessional to make changes like these to you forms, one author suggests reading your form aloud. By doing this, you’ll get a better understanding of the way your visitor will experience the form when seeing it for the first time.

We’d love to hear your comments about these ideas, ideas you have for improving your forms, or other feedback on FormAssembly. Feel free to leave comments below, or check out the UserVoice forum.

What’s New at FormAssembly: Nov. 12

November 12th, 2009 by Hillary Elmore

 

Welcome to this week’s update on what’s been going on here at FormAssembly.

Thanks for your input

Thank you to those of you who participated in the survey we posted after updating the Forms page. We’re pleased to report that the vast majority of those who completed the survey reported that you found the new interface “Really easy” or “Pretty easy” to use.

interfaceResults
legend

We appreciate the comments and thoughts you shared with us, and we’ll continue tweaking the application so that it better serves your needs.

Updates to Pay-As-You-Go Notifications

We’ve made a small tweak to notifications for our Pay-As-You-Go subscribers. If you’re on the Pay-As-You-Go plan, you’ll now receive automatic notification when your account gets down to 10 credits. If your account gets down to 5 credits, you’ll receive another automatic email each time a credit is used. Thus, if you let your account run all the way down to 0, you will receive 6 emails total.

Don’t forget to check out our recent blog posts on ways you can make your forms more usable for your visitors. We’d love to hear your thoughts and strategies for improving web forms.

Getting the most out of your forms: Usability Part 2

November 11th, 2009 by Hillary Elmore

 

What else makes a good form?

As a continuation of last week’s post, today I’m writing about a few more usability issues you might want to consider as you build your forms.

Choose the correct input format

When you use the Form Builder, you can choose from many different types of answers. Before you choose your answer type, think about what would make it easiest for your visitors to answer the question. If there are only a couple valid answers, don’t use free text inputs. Utilize dropdown menus, radio buttons, and select boxes to help your respondents get through your form faster. For quick reference, here’s a look at the advantages and disadvantages of each type.

  Advantages Disadvantages
Checkboxes Easy to select multiple options; See all options at once Longer lists take up lots of screen space; Can be overwhelming
Radio buttons See all options at once Longer lists take up lots of screen space; Can be overwhelming
Dropdowns Familiar; User cannot enter unacceptable answer Can only see one option at first; Scrolling lists can be difficult to navigate
Multi Select Lists See multiple options at once; Conserve screen space; Select multiple options Many people don’t know how to select multiple options; lists often difficult to read
Free text inputs Versatile; user can enter (almost) any answer Subject to typos; May increase time spent and confusion

Use default values when possible

Once you’ve chosen the answer type for your questions, consider reducing the number of clicks for your visitors by marking default values. In the Form Builder, you can mark any answer of a multiple choice question as a default answer. If you need to use free text inputs, you can prefill the input box with sample text to guide your respondents toward the correct format for their answers.

default-choice

There is, however, one special case where you should never use default values. If you are asking your respondent to opt-in to anything (e.g. signing up for a newsletter, agreeing to terms of service), you should allow the user to explicitly choose an answer.

Create meaningful partitions

As I mentioned in the previous post, it’s best to keep your forms short. Whenever possible, keep your form to one page and make sure that everything (including the submit button) are visible without scrolling. Use the Form Builder’s sections to visually define meaningful groups of questions. If your form is longer than one screen, use multiple pages instead of requiring the user to scroll. Include “Page 1 of x” on the page so your visitors know where they are in the process. You may want to make this the title of the page. To modify a page’s title in Form Builder, click the Page in the Outline panel.

page_title

It’s also good practice to make sure your form is spread out evenly across the pages. Avoid displaying 10 questions on one page and 3 on another, as doing this makes it difficult for visitors to gauge their progress, even if “Page x of x” is at the top of each page.

Focus on your respondent’s experience

These first two posts in the series on getting the most out of your forms have focused on ways to build your form to create a better experience for your respondent. In the next few posts, I’ll cover strategies for writing compelling forms and round up a few ways you can further improve your respondents’ experience with your forms. Stay tuned!

Getting the most out of your forms: Usability Part 1

November 5th, 2009 by Hillary Elmore

 

What makes a good web form?

The concept of a form is simple and timeless: your respondents have information, and you want to collect that information. However, everyone has had experience with a poorly designed form at some point. We want to help you and your visitors avoid the same mistakes. In this four-part blog series, I’m going to address some of the most basic aspects of form design that can help you get more out of your forms.

Create a clear path

Make sure your web form leads respondents logically from the beginning to the “submit” button.

Visually, line up all your questions on the left side of the screen (for left-to-right languages). This enables your respondents to scan your form quickly. Avoid distracting images or colors in the background of your form, since these will lead your user’s eye away from the questions. Though you have many layout options in FormAssembly–including inline and grid layouts–it’s best to stick with one-column left-aligned forms unless absolutely necessary.

Conceptually, make sure that your questions flow in a logical order. In general, move from easy questions to difficult questions. Easy questions are name, address, etc.—information respondents don’t really have to think about. Difficult questions are those that ask the respondent to answer in her own words. Think of the easy questions as warm-ups for the big questions that will contain the most important information.

Only display necessary information

Think critically about what information your web form asks for and provides. Instructions should be clear and concise. It’s best to provide instructions immediately before questions (or use the Form Builder’s hints feature), instead of bunched together at the beginning of the form. Only tell your visitors what they truly need to know.

In the same spirit, only ask the questions you really need your respondents to answer. In one study, reducing the number of questions by 64% led to an increase in conversions of 120% for a web form. The message is clear: stay focused on the information you really need. Each form has a purpose, and every question on your form should support that purpose.

Use conditionals to your advantage

One way you can make sure to only display relevant information is to make use of FormAssembly’s conditional settings. Conditional questions allow you to hide information that isn’t relevant to a particular respondent based on his or her previous answers. Using conditionals to hide questions that don’t pertain to the respondent makes your web form less intimidating and more likely to be submitted.

Think about the respondent’s experience

Above all, think about how your respondent interacts with your form. The pleasantness or lack thereof in the experience can make a difference for your form’s performance and the quality of the information you receive.

New web addresses for public forms

November 3rd, 2009 by Hillary Elmore

 

Since yesterday, the new URL structure mentioned in last Thursday’s post has been operational for new users. As we mentioned previously, the change only applies to forms hosted on FormAssembly.com, not those hosted elsewhere. For forms hosted on FormAssembly.com, the published address used to be

http://app.formassembly.com/forms/view/1234

and is now

http://www.tfaforms.com/1234

FormAssembly will continue to function as it always had, and any forms you published, linked to, or gave out with the original address will continue to work. Again, we made this change to make form URLs easier to type and share, as well as to comply with the recommendations of our annual Salesforce security audit.

We’ll continue rolling out this change gradually over the next few days, but again, you do not need to do anything. Your forms will continue to be accessible at either address.

Incident Report – Oct. 30th 2009

October 30th, 2009 by Cedric Savarese

 

Our DNS service provider is experiencing technical difficulties (DDOS). This may render FormAssembly intermittently inaccessible for some people. The issue was first detected around 7:30am and operation should be returning to normal at this point. If you experienced difficulties in accessing our site this morning, please get in touch with us. We’ll update this post if new information becomes available.

Thank you for your patience and understanding.

The FormAssembly Team

What’s New at FormAssembly: Oct. 29

October 29th, 2009 by Hillary Elmore

 

Welcome to this week’s updates post!

Full-page vs. snippet HTML

First of all, we’d like to point out a feature of the new “My Forms” layout that you may not have noticed yet. On the “Publish” tab, if you decide to export your form’s HTML to use on your own site, you can now choose whether you want the HTML as a full page or as an HTML snippet.

Previously, only the snippet was available.  You may find the new full page HTML option useful  if you are not using a template or content management system and need a ready-to-use web page.

snippet

New address for forms hosted on FormAssembly

Early next week we’ll be changing the address for forms hosted on FormAssembly. Previously, if you chose to let FormAssembly host your forms, you had an address like this:

http://app.formassembly.com/forms/view/1234

Now your form will be available at:

http://www.tfaforms.com/1234

Note that FormAssembly will continue to function for you as it always has. You do not need to do or change anything.  If you previously published, gave out, or linked to a form using the old address, that link will continue to work. Next week, we will simply start showing the shorter address by default.

We are making this change for two reasons. First, www.tfaforms.com/1234 is much shorter, easier to type, and easier to remember. We hope this helps you as you distribute links to your forms.

Secondly, by moving user-generated content to a different domain, we are following the recommendation of our annual security audit .  This increases the security of your account and keeps our partners happy (hint:  Salesforce’s certification team). If you’re interested in the technical details, we’d be happy to discuss this in the comments.

We hope you’re enjoying the changes we’ve made recently. If you’d like to comment on the new “My Forms” layout, please fill out our brief survey. As always, comments are welcome here, and at the UserVoice forum.

Be sure to clear your browser cache

October 27th, 2009 by Hillary Elmore

 

After last week’s update to the “My Forms” tab, some of you may be noticing that your page does not look anything like the screenshots posted here. If that is the case, you probably need to clear your browser’s cache. For example, you may be seeing something like this:
bad_display

This is not how the new page should look. If you don’t know how to clear your cache, learn how here.

If you have comments you’d like to share about the new layout, please fill out our brief survey. We look forward to hearing your thoughts!

New Look for “My Forms” Tab

October 22nd, 2009 by Hillary Elmore

 

This week’s major update should be pretty apparent to everyone, but we’ll go over it here to help you get acquainted. As you’ll see when you sign in to your FormAssembly account, we’ve completely redesigned the “My Forms” tab (if you’ve explored it a little and would like to comment on it, check out the survey here) .

You’ll see a new toolbar at the top of the application when you’re in the “My Forms” tab. This green bar now contains buttons for quickly and easily creating new forms, new forms from Salesforce, and new Workflows. When you select a form, the form’s title also appears here.

toolbar

Although the Modify, Copy, and Delete buttons haven’t moved far, we hope you’ll find them easier to see and utilize. With the new layout, these buttons are located in the same top toolbar as the “New Form” button.

Configuration

We also made some changes to the way your list of forms appears. You’ll find that the font size has increased, making titles easier to read. Instead of the three icons that used to be at the end of each row, you’ll now see a blue button. Clicking on this button reveals a menu of the most commonly used options for your forms. Options for viewing, publishing, and editing your form are available, as well as configuring, copying, archiving and deleting. In addition, we’ve created a “Recently Edited Form” space, so the form you worked on most recently is available quickly and without searching.

newfomsmenu

We hope you’ll like these changes, but as always we would appreciate your comments. Since this change affects everyone, we’ve created a survey so you can more easily share your reactions with us. Feel free to explore the new interface for awhile, and when you feel ready, check out the survey here. We’ll also post a site-wide announcement about the survey in a few days, once more people have experienced the new look.

FormAssembly Updates-Oct. 15

October 15th, 2009 by Hillary Elmore

 

Welcome to this week’s summary of FormAssembly updates. We’ve been doing a lot of behind-the-scenes work, but here are a few of the more visible updates we’ve made in the past week that we think you might be interested in.

Updates to PayPal Connector documentation

This week we posted documentation that should help you use PayPal with FormAssembly.com a little more easily. Here you can read about setting up the PayPal connector to work with your form, get an overview of the PayPal Purchasing Process, and find answers to the most common PayPal questions we encounter.

Coming Soon: Theme Editor

Providing you with a way to visually design your forms has been in the works for quite awhile, but we’ve made a significant progress lately on building a Theme Editor so you can modify your forms’ design without having to write CSS. The Theme Editor will allow you to modify almost all aspects of your forms’ visual design on the fly, and will also enable you to save themes for use on other forms.

For those of you who don’t want to mess with CSS styling, we think you’ll find this a useful and versatile tool. Below are a few preliminary screenshots. Some things may change, but the basic functionality should be set.

Theme Editor - Basic View

Theme Editor - Advanced View

We love hearing your comments, so please leave them below or at the UserVoice forum.