• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Form Design: Best Practices to Improve Conversions
 

Form Design: Best Practices to Improve Conversions

on

  • 8,577 views

Slide presentation for the South Florida User Experience Meetup on Forms. Looks as login forms, form alignment, and best practices.

Slide presentation for the South Florida User Experience Meetup on Forms. Looks as login forms, form alignment, and best practices.

Statistics

Views

Total Views
8,577
Views on SlideShare
8,104
Embed Views
473

Actions

Likes
16
Downloads
171
Comments
5

11 Embeds 473

http://www.sitemotif.com 364
http://www.4dms.nl 60
http://www.slideshare.net 15
http://www.linkedin.com 13
http://paper.li 13
http://us-w1.rockmelt.com 2
https://twitter.com 2
http://twitter.com 1
http://a0.twimg.com 1
https://www.facebook.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Always great to see people focusing on improving forms.

    Thanks for mentioning our book 'Forms that work: Designing web forms for usability' and web site www.formsthatwork.com
    Are you sure you want to
    Your message goes here
    Processing…
  • Chris, As far as proximity, yes the closer the mouse the 'eaiser' it is to get to it. There are definitely many schools of thought on this. However moving the mouse to the submit button is a pretty easy action in and of itself. I think more importantly the button should be designed to take enough visual priority in location, size, contrast, and affordance that the user doesn't have to search for it, that the primary action is apparent and separated from the secondary action, and it is easy to get to regardless of the alignment chosen.

    I think the left to right conversation is kind of like coke and pepsi, mac and pc, it's a matter of context and opinion.
    Are you sure you want to
    Your message goes here
    Processing…
  • I disagree with this. Generally a user has the mouse on the right side of the form, so the 'easier' choice is to place the button on the right to make it easier to get to. I can see the argument for reading left to right though.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thank you, unfortunately these presentations never come across on slide share quite as good as in action when i'm showing transitions etc. But hopefully the combined notes will help. I'm definitely going to keep the slide share format in mind when creating my presentation for next month.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice presentation. Forms statistics very interesting.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Set proper expectationsusing clear, obvious, concise language.Login is not clear. What is the login, a user name, account number, email address?What is a “passcode”, According to dictionary.com, it’s a password. So why not write “password”.
  • Error messages should inform the user Where the error happened, What the error was, and How to correct it.This error informs me that my “Login” information is incorrect. In the form they use “Login” as the title of a field. Therefore it indicates that you entered the incorrect login username.It’s not clear where the error happened, or what the user needs to do to fix it. Let’s assume you are guessing at your login with a common username you use, so you click the “What is my Login” link.After reading carefully, we see that our Login is our “Email address” or “member ID”. Why wasn’t this simply stated on the login form? So you decide to try your email address. And you get the same exact error.So you try Forgot Passcode, thinking maybe you can simply reset everything here. Now you are again asked for your Login, as well as your email. Considering your Login may be your email, they are essentially asking for the same thing twice in different ways. So, even though you are unsure of your credentials, you give it a shot. And when you click continue you get this helpful error…And you are no closer to logging in then you were in the beginning.
  • Focus on the point. Provide users with a clear call to action and next steps.Here we have the Comcast login. This form has many of the same issues as the Citibank form such as a generic error message an unclear login instructions.However, this form is also very cluttered. This makes it harder to scan, and easier to click the wrong thing.“If you’ve already registered with comcast.com simply sign in” This is completely unnecessary, redundant and only adds clutter to the form. The main title “Sign In To Comcast.com” has already done this job.The not registered are is squished right up below the main login form. This should be visually separated to help distinguish the two possible actions. There is also way to much text here, that is unnecessary and only gets in the way.The error message isn’t given a high enough priority and within the context of the full webpage can be missed.
  • Here is one possible way this form could be redesigned. We have reduced the text which has greatly simplified the form, and saved space.We have used clear concise labelsWe focused on the primary action, but provided a clear link to secondary actionWe helped the user locate the error using the field label where the error occurred in the message. We also inform the user of the problem, and set a focus on the field where the error occurred.
  • This is an example of a right aligned form. However this form could still be improved. According to Smashing Magazine 82% of the time it is not necessary to confirm the email and 72% of the time it’s not necessary to confirm the password.

Form Design: Best Practices to Improve Conversions Form Design: Best Practices to Improve Conversions Presentation Transcript

  • Form Design: Best Practices to Reduce Errors and Improve Conversions
    Lauren Martin www.sitemotif.com
  • Design Principles
    Keep it Simple
    Avoid unnecessary text and inputs.
    Focused Goal
    It should be easy to see what needs to be done to complete the form.
    Be Clear
    You never know the context of the user, make sure things are very clear and unambiguous.
    Constantly Communicate
    Inform users about what’s going on when it happens.
  • The basics of labels, errors and layout.
    Login Forms
  • Clear, Obvious, Concise
    Set proper expectations by letting the user know exactly what you are looking for.
  • Locate, Inform, Assist
    Error messages should inform the user Where the error happened, What the error was, and How to correct it.
  • Clean, Focused, Apparent
    Focus on the point. Provide users with a clear call to action and next steps.
  • Interface Surgery
  • Meetup.com
  • WordPressBlog Dashboard
  • Alignment and Orientation
    Examples From:
    Web Form Design
    by Luke Wroblewski
    Layout Best Practices
  • Path to Completion
    Minimize distractions by removing unnecessary elements
    The scan line should have good visual spacing.
    Provide a single path throughout the form
  • Top Aligned
    Positives
    Cleaner scan line, means more rapid processing and less effort
    Label and input field are adjacent
    Allows long labels
    Horizontal space for grouping related fields
    Studies show highest completion rates
    Good for familiar data
    Negatives
    2x Increased vertical space.
  • Top Aligned Labels
  • Right Aligned
    Positives
    Close proximity between label and input field
    Good for varied label widths
    2x faster to complete as left aligned labels
    Reduced vertical space
    Negatives
    Left rag of labels makes scanning less efficient
  • Right Aligned Labels
  • Left Aligned
    Positives
    Easy to scan labels is good for unfamiliar data
    Reduced vertical space
    Good for forms with sensitive data where you want users to slow down.
    Negatives
    Label and corresponding field are not adjacent
    Long labels extend gaps between labels and controls causing visual “jumps”
  • Left Aligned Labels
  • Buttons
    56% of Submit buttons are left aligned with the form. While only 26% are right aligned and 17% centered.*
    You do not need a cancel button. The user can navigate else where if they are not longer interested.
    Secondary actions should be separated from the primary action. This can be done visually by making the secondary action a less prominent link.
    The primary action should be to the left of the secondary action.
    * Smashing Magazine: http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
  • Examples
    1. Primary Button, Secondary Link
    2. Primary Button, Secondary Button
    3. Primary Action on Right
  • Redesign
  • Forms are crucial to businesses and stand between the user and the companies product or service.
    Improve Conversions
  • How do you get to the form?
    You should have a clear call to action on your homepage.
    Use very clear links and leads. “Sign Up” is 2x more likely to catch your users eye over “Register”, “Join” and “Create Account”.
    A signup link should be located in the top third of your page, preferably next to the login form.
  • What’s on the form?
    Users really do care about what your asking them.
    For Example: Asking someone for their address is like saying, I’m going to send you stuff. If they are not ordering a product, this may immediately turn them away.
    Context also matters. If I am just signing up for a clothing site, you should not be asking for my credit card number. If I am trying to purchase an order, then the context would be correct for purchasing information.
    Try to keep it between 3-8 mandatory fields. Less is better.
  • How is it organized?
    Every form should have a name and a clear purpose
    Always chunk information into logical groups
    Each chunk should have a clear title summarizing the questions in that section
    Try to avoid multi-page forms. However, if used always make it clear how many steps are involved and how far the user has gotten.
    Use subtle visual cues like dividers to help group related content
    Bold form labels for easier scanning.
  • How are you helping them?
    Provide hints and tool tips with additional information
    Use examples of expected and allowed input
    Use tip icons with rollovers and panels for explanations to the right of the input fields.
    Use one line liner examples and info directly below input fields.
    Highlight fields with errors, and display error messages in line or at the top of the screen.
    Allow tabbing through the form and all controls.
  • Improve your conversions.
    Metrics should be used to measure completion rates, times, and issues.
    Create multiple versions and do A to B testing to see which forms result in the highest conversion rates.
  • Online Reading…
    Smashing Magazine:
    http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
    http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
    http://www.smashingmagazine.com/tag/forms/
    http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
    http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/
    Luke Wroblewski:
    http://www.lukew.com/resources/articles/web_forms.html
    Caroline Jarrett:
    http://www.formsthatwork.com/
  • Off Line Reading…
    Forms that Work: Designing Web Forms for Usability
    By: Caroline Jarrett
    $44.95 on Amazon
    Web Form Design: Filling in the Blanks 
    By: Luke Wroblewski
    $36 on Rosenfeld Media