1

I've worked with a number of UX experts over the last several months and while I have resisted going down the "long form" path, they have circled me back around to this time after time without fail. There is a 100% consensus that long form is the right approach for my little understood and potentially steeper learning curve product.

Given this position, I am seeking to learn proper "long form" technique. I have most of the textual copywriting finished, but now I'm looking for:

A) methods to improve or tweak it for maximum story telling and sales appeal (psychology tactics) and

B) a clear demonstration or strong examples of how to properly craft the content visually.

Could you please provide me with some information in these regards?

Long form page examples are a dime a dozen, so to speak, (you can see a million WSO hits without really finding golden examples) so I'm looking for some "cream of the crop" examples or techniques. Even better would be specifics to follow or a tutorial that explains proven patterns that work.

|improve this question
  • 1
    Your question is too vague and I'm even leaning to off-topic. Please rephrase it and make an effort to show how it relates specifically to UX design and related fields as required by our FAQ. If you just want help writing a good sales page, this is not the right site to ask for help. – Rahul Oct 22 '12 at 1:09
  • @Rahul I don't need any help in writing the page, no. The main idea is that I'm attempting to design around the content properly such that it follows practices that work in landing pages. In other words, what makes users scroll down? What techniques engage users (some people say highlights, checkmarks, "certificates", and other various widgets / decorators) visually? And then, what engages users psychologically (are there specific mental patterns that tend to engage users more effectively)? Etc. – ylluminate Oct 22 '12 at 20:03
  • 1
    I suggest you update your question with that information. Try to be as specific as possible - not to me, but to the community you're asking. – Rahul Oct 22 '12 at 20:44
2

There is this book, by Caroline Jarrett: "Forms that Work: Designing Web Forms for Usability (Interactive Technologies)".
She communicates her experience of years working for the UK Gov. in the make of really long forms.

Besides that, I can shred some ideas:

  1. Break the form in pages. Don't think long form=lots of scroll. Make each page sort of a section of the data, containing somehow related fields. At the bottom of the screen set an artifact with [prev] and [next] buttons, and the page number thus: [page 3 of 8].
  2. When the form is long it's important to make the help available close to the related field. Ideally I'd show instructions just below the related field.
  3. Use the so-called "two column" layout, with labels to the left of the input fields. For small forms setting the labels on top of the forms is not an issue, In long forms the 2-column arrangements has advantages, like bigger and thus more readable label texts, reduced height forms less discouraging at first sight and with less scroll. Also, make the 2-column actually 3-column with 1-label, 2-field and 3-the local help button.
  4. When the user clicks for help on a field display it just below the field, sliding down the remaining fields with a jQuery-like animation. The animation helps the user see where the other fields have gone in case they slipped below the fold.
  5. Use different sizes for the input fields, according to the expected length of text expected. This is a nice hint for the user, and also it helps to refocus quickly (as opposed to a column of equal-sized inputs that forces the user to rescan the labels).
  6. Show the user where is the focus, for example by a slight change in the background color of the field.
  7. Of course, regarding the prev/next artifact, don't lose the user input when she reviews previous pages.
  8. Many forms highlight the labels and the borders, I prefer to dim them in order to make the input text more noticeable, easier and fast to review. But this is my reference.
  9. Speaking of borders, the more things in the form, the higher the cognitive work needed to grok it. I like to make them as minimalist as possible. For example, show a very light help button only when the focus reaches the associated field, and highlight it only on hover.
  10. Don't ever display an input field at the right of a previous one, unless they are fully related, like name first[_____] second[_____]. In doing so you risk confusing the user into a one-or-the-other choice, or simply overlook the second one.
|improve this answer
  • I think you misunderstood the question. He's asking for tips for "long form" sales pages, not for "long forms". "Long form" just means long, lots of text, scrolling, etc. – Rahul Oct 22 '12 at 21:43
  • @Rahul, notwithstanding, Juan has pulled out some very important points simply because forms can be and are sometimes elements of long form sales. In this case, for example, I am integrating some forms and so I value this particular input for that reason. – ylluminate Oct 24 '12 at 4:32
  • Thanks ylluminate, @Rahul. Yes, I ignore it all about "long form". – Juan Lanus Oct 24 '12 at 16:57
-2

Read this page: http://www.conversion-rate-experts.com/scrolling-tips/ then join the newsletter to download four great examples of what works and why it works.

|improve this answer
  • 3
    Can you explain why this article is useful? Don't make us click through to the other site, summarise the information here. – Rahul Oct 22 '12 at 20:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.