SlideShare a Scribd company logo
Form Design: Best Practices to Reduce Errors and Improve ConversionsLauren Martin				www.sitemotif.com
Design Principles	Keep it Simple Avoid unnecessary text and inputs.Focused GoalIt should be easy to see what needs to be done to complete the form.Be ClearYou never know the context of the user, make sure things are very clear and unambiguous.Constantly CommunicateInform users about what’s going on when it happens.
The basics of labels, errors and layout.Login Forms
Clear, Obvious, ConciseSet proper expectations by letting the user know exactly what you are looking for.

Recommended for you

Building A Business Website
Building A  Business  WebsiteBuilding A  Business  Website
Building A Business Website

The document provides guidance on building an effective business website from scratch. It recommends researching keywords, identifying the business focus and unique selling proposition. It also discusses choosing a domain name, hosting provider, site structure, and elements to include like content pages, a site map, contact page, newsletter, forum/blog, and links pages. The document emphasizes that search engines prioritize text over graphics, so the site needs focused keyword-rich content and fast load times to rank well.

Website Planning 101 with Jen McKibben
Website Planning 101 with Jen McKibbenWebsite Planning 101 with Jen McKibben
Website Planning 101 with Jen McKibben

The document discusses the importance of website planning based on Jesse James Garrett's Five Planes of User Experience framework. It emphasizes asking questions in the Strategy and Scope planes before designing graphics or content. In the Strategy plane, questions determine goals, users, and desired experiences. Scope plane questions define necessary features, tools, timeline and personnel. The document stresses sticking to a planning process to create successful, on-budget websites that meet user needs.

websitejoomlabasicplanningsitemapdenvercmsexpocmsclient
7 landing page tips to get more conversions
7 landing page tips to get more conversions7 landing page tips to get more conversions
7 landing page tips to get more conversions

If you do not want to waste the money you have invested in paid advertising, create an efficient and working landing page. Produce content that has been carefully thought-out and has high marketing quality. Do not forget that every detail in a landing page plays a big role in turning a lead into a client. 7 important elements for a proper landing page: Heading, Subheading, Main image or video, Description area, Bullet list, Client testimonials, CTA

landing pageconversionconversion design
Locate, Inform, AssistError messages should inform the user Where the error happened, What the error was, and How to correct it.
Clean, Focused, ApparentFocus on the point. Provide users with a clear call to action and next steps.
Interface Surgery
Meetup.com

Recommended for you

Portfolio/Test
Portfolio/TestPortfolio/Test
Portfolio/Test

The document summarizes and rates three different marketing company websites. For the first site, WEBFX, the reviewer gave it a 9/10 and praised its visual contrast and organization of content without feeling overwhelming. The second site, Disruptive Advertising, received a 7/10. While it effectively used repetition and alignment, the reviewer had issues focusing on one area and felt the company name had negative connotations. The third site, 3 Media Web, was given a 6/10 as its color scheme and feel jumped around, though it organized elements well and had a strong headline.

Blogging Out Loud - STC-PMC 2014 presentation by Danielle M. Villegas
Blogging Out Loud - STC-PMC 2014 presentation by Danielle M. VillegasBlogging Out Loud - STC-PMC 2014 presentation by Danielle M. Villegas
Blogging Out Loud - STC-PMC 2014 presentation by Danielle M. Villegas

What is blogging? Does the idea of blogging seem daunting? Danielle M. Villegas writes the technical communication blog, TechCommGeekMom, and is a regular guest blogger for the STC Notebook with her "Villegas Views" by-line. Danielle shares her personal experiences in creating her blog, talks about how a blog can work for both personal and corporate gain, and will provide pointers on best practices.

stc-pmcblogging best practicesstc
Persona & User Journey in Practice
Persona & User Journey in PracticePersona & User Journey in Practice
Persona & User Journey in Practice

How to make a user persona and user journey map before building an application. Break down all the steps in simple way.

personauserjourney
WordPressBlog Dashboard
Alignment and Orientation Examples From:		Web Form Design 		by Luke WroblewskiLayout Best Practices
Path to CompletionMinimize distractions by removing unnecessary elementsThe scan line should have good visual spacing.Provide a single path throughout the form
Form Design: Best Practices to Improve Conversions

Recommended for you

3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty

If you have trouble filling your workshops and seminars, chances are that it isn't your promotional efforts. More likely that it's your registration page. Here are the top 3 registration page mistakes that keep your workshop and seminar rooms empty.

registration pageseminar marketingworkshops and seminars
Masters of Marketing -- Common Landing Page Design Mistakes
Masters of Marketing -- Common Landing Page Design MistakesMasters of Marketing -- Common Landing Page Design Mistakes
Masters of Marketing -- Common Landing Page Design Mistakes

This document discusses common mistakes made in landing page design and provides solutions to avoid them. It covers three key areas: focus and function, content, and design. For focus and function, common mistakes include having multiple goals or emphasizing features over benefits. Content mistakes include having no value or being too long. Design mistakes include using the same template as the main website, lacking images, burying important content below the page fold, and having vague calls to action. The document provides tips for each area, such as keeping the goal and form simple, using bullet points and short paragraphs for content, and making one prominent call to action.

masters of marketinginsurance websitesinsurance technologies corporation
Internet marketing a guidebook to small business success 30 things you can do...
Internet marketing a guidebook to small business success 30 things you can do...Internet marketing a guidebook to small business success 30 things you can do...
Internet marketing a guidebook to small business success 30 things you can do...

This document provides tips for small businesses to generate internet marketing through their website, traffic, and paid advertising. It recommends evaluating your website's effectiveness, setting up analytics to track traffic, optimizing for search engine results through keywords, links and listings, and using paid platforms like Google Adwords and Facebook ads. The goal is to educate yourself on simple marketing strategies to attract customers and see continuous business growth.

Top AlignedPositivesCleaner scan line, means more rapid processing and less effortLabel and input field are adjacentAllows long labelsHorizontal space for grouping related fieldsStudies show highest completion ratesGood for familiar dataNegatives2x Increased vertical space.
Top Aligned Labels
Right AlignedPositivesClose proximity between label and input fieldGood for varied label widths2x faster to complete as left aligned labelsReduced vertical spaceNegativesLeft rag of labels makes scanning less efficient
Right Aligned Labels

Recommended for you

Custom Facebook
Custom FacebookCustom Facebook
Custom Facebook

This document provides 60 tips for Facebook app development and marketing. It discusses setting up profiles and pages properly, using engaging content like photos and videos, monitoring metrics, responding to fans, creating exclusive content for fans, and using ads to promote apps. The tips are intended to help improve apps' presence on Facebook and provide quick, easy strategies for effective Facebook marketing.

custom facebookfacebook app developmentfacebook application
5 Common Marketing Mistakes
5 Common Marketing Mistakes5 Common Marketing Mistakes
5 Common Marketing Mistakes

I cover five common marketing mistakes I see businesses making and tell you how to fix them. This was actually a presentation I gave at my BNI chapter so below are the slides I used. If you woudl like to hear me talk to the slides then head along to the podcast at http://www.contentgrasshopper.com.au/_blog/Content_Grasshopper_Podcast/post/episode-13/

websitemarketingcontent marketing
Designing online forms (Jessica Kerr, Formulate)
Designing online forms (Jessica Kerr, Formulate)Designing online forms (Jessica Kerr, Formulate)
Designing online forms (Jessica Kerr, Formulate)

The document discusses guidelines for designing online forms. It outlines the "4 Cs" of good form design: forms should be clear, concise, clever, and cooperative. Clear forms ensure the user understands what to do with minimal effort. Concise forms gather only required information efficiently. Clever forms reduce errors through features like pre-filled data and validation. Cooperative forms provide guidance to users with explanations, confirmations, and a bug-free experience. The document also notes there are four layers to a form: questions and answers, flow, layout, and the overall process.

Left AlignedPositivesEasy to scan labels is good for unfamiliar dataReduced vertical spaceGood for forms with sensitive data where you want users to slow down.NegativesLabel and corresponding field are not adjacentLong labels extend gaps between labels and controls causing visual “jumps”
Left Aligned Labels
Buttons56% 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/
Examples1.  Primary Button, Secondary Link2.  Primary Button, Secondary Button3.  Primary Action on Right

Recommended for you

Ultimate Guide to Online Forms
Ultimate Guide to Online FormsUltimate Guide to Online Forms
Ultimate Guide to Online Forms

By https://www.customd.com. In this guide we’ll give you our pro tips on how to design the perfect online form that is simple and easy to fill out, which will ultimately lead to more submissions and a lot less frustration from your applicants.

automationweb designux
Common Mistakes on Insurance Agency Websites
Common Mistakes on Insurance Agency WebsitesCommon Mistakes on Insurance Agency Websites
Common Mistakes on Insurance Agency Websites

This document outlines 13 common mistakes made on insurance agency websites and provides recommendations on how to fix each mistake. The mistakes include having a narrow website, messy color schemes, lack of contact information, an empty website without interactive features, a complicated or cluttered layout, not promoting key lines of business, lacking quote forms, overly long quote forms, no online payment options, lack of claims information, overuse of Flash content, intro/splash pages, and automatically playing videos or music. The recommendations generally emphasize having a well-designed, easy to use website that promotes the agency's services and allows customers to get quotes and manage their policies online.

Naked capitalismyoastresponse
Naked capitalismyoastresponseNaked capitalismyoastresponse
Naked capitalismyoastresponse

The client received an SEO review from Yoast that contained numerous inaccuracies and irrelevant recommendations that did not address the client's needs or website model. The client, who has decades of experience in consulting, deemed the report one of the worst he had ever seen. He requests a full refund or a completely new report from Yoast that is based on an accurate examination of the site and focuses solely on relevant SEO issues. The client provides multiple examples to support his criticism that the original report demonstrated a lack of understanding of the site and failed to properly investigate it.

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.

Recommended for you

The ultimate ux checklist for your website app
The ultimate ux checklist for your website appThe ultimate ux checklist for your website app
The ultimate ux checklist for your website app

Today’s sophisticated internet users have high expectations when it comes to their experience using a website or an app. They are quick and impatient and also have shorter attention span – thanks to new mobile technologies that contributed significantly to this shift in Internet user behavior. You only get a few seconds to grab the user’s attention to check out your website or app and once he is on-board, you get only a few seconds to impress the user by providing great user experience which in turn increases the session duration or the time user spends on your website or app. As you know great user experience also results in repeat visits and better conversion rate.

#webdesign#ux#websiteux
Writing for web class2
Writing for web class2Writing for web class2
Writing for web class2

The document provides tips for writing effective web content. It discusses how users typically scan web pages in an F-shaped pattern. Key points include using visual hierarchies with formatting like size, color and white space; writing concise headlines and paragraphs; and structuring information in logical segments to aid scanning. Content should fulfill user needs and expectations with minimal effort. Headlines need keywords for searches and should work out of context. Visuals, functionality and satisfaction are important for user experience.

Microinteractions
MicrointeractionsMicrointeractions
Microinteractions

Microinteractions: How to Design Product Details. An introduction to microinteractions, based on the book.

uiuxweb design
How is it organized?	Every form should have a name and a clear purposeAlways chunk information into logical groupsEach chunk should have a clear title summarizing the questions in that sectionTry 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 contentBold form labels for easier scanning.
How are you helping them?Provide hints and tool tips with additional informationUse examples of expected and allowed inputUse 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.htmlCaroline Jarrett:http://www.formsthatwork.com/

Recommended for you

Automated testing
Automated testingAutomated testing
Automated testing

Slides about automated testing that accompanied a live demo at the April '10 South Florida User Experience Meetup.

user experienceusability testing
Usability and Form Design - University of Calgary
Usability and Form Design - University of CalgaryUsability and Form Design - University of Calgary
Usability and Form Design - University of Calgary

This document provides an overview of a course on Internet Marketing and Social Media that covers various topics related to user experience design. The course covers 10 steps to user experience including understanding the user, planning before designing, understanding goals, avoiding premature solutions, form following function, the importance of content, persuasive design, accessibility, and learning from failures. It also discusses specific topics like usability and form design in more depth providing guidance on best practices. Resources for further reading like books, websites, and Twitter accounts are recommended at the end.

uxform designusabilty
Usability Evaluation Considered Harmful (Some of the Time)
Usability Evaluation Considered Harmful (Some of the Time)Usability Evaluation Considered Harmful (Some of the Time)
Usability Evaluation Considered Harmful (Some of the Time)

- The document discusses issues with over-reliance on usability evaluation in early design, CHI research, and cultural appropriation contexts. Usability evaluation is best suited for later stages and can stifle innovation if used too early. - A variety of qualitative and iterative methods are more appropriate than usability testing alone in early design and for understanding how designs may be used across cultures. The choice of evaluation method should fit the problem or research question. - CHI trends have over-emphasized usability evaluation but the field would benefit from considering a wider range of methods to balance innovation and validation. Early designs are best explored through idea generation and critique rather than usability testing.

Off Line Reading…Forms that Work: Designing Web Forms for UsabilityBy: Caroline Jarrett$44.95 on AmazonWeb Form Design: Filling in the Blanks By: Luke Wroblewski$36 on Rosenfeld Media

More Related Content

What's hot

2x Your Biz for Chamber Members
2x Your Biz for Chamber Members2x Your Biz for Chamber Members
2x Your Biz for Chamber Members
Tameka Bryant
 
Why Microcopy Matters
Why Microcopy MattersWhy Microcopy Matters
Why Microcopy Matters
Maria Mora
 
Audit of site usability, SEO
Audit of site usability, SEOAudit of site usability, SEO
Audit of site usability, SEO
Alex Dmitriev
 
Building A Business Website
Building A  Business  WebsiteBuilding A  Business  Website
Building A Business Website
CMT Creative Marketing
 
Website Planning 101 with Jen McKibben
Website Planning 101 with Jen McKibbenWebsite Planning 101 with Jen McKibben
Website Planning 101 with Jen McKibben
John Coonen
 
7 landing page tips to get more conversions
7 landing page tips to get more conversions7 landing page tips to get more conversions
7 landing page tips to get more conversions
YourDigitalStory -YDS
 
Portfolio/Test
Portfolio/TestPortfolio/Test
Portfolio/Test
John Major Davis
 
Blogging Out Loud - STC-PMC 2014 presentation by Danielle M. Villegas
Blogging Out Loud - STC-PMC 2014 presentation by Danielle M. VillegasBlogging Out Loud - STC-PMC 2014 presentation by Danielle M. Villegas
Blogging Out Loud - STC-PMC 2014 presentation by Danielle M. Villegas
Danielle M. Villegas, MSPTC
 
Persona & User Journey in Practice
Persona & User Journey in PracticePersona & User Journey in Practice
Persona & User Journey in Practice
Afif Bimantara
 
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
Daphne Bousquet
 
Masters of Marketing -- Common Landing Page Design Mistakes
Masters of Marketing -- Common Landing Page Design MistakesMasters of Marketing -- Common Landing Page Design Mistakes
Masters of Marketing -- Common Landing Page Design Mistakes
Darmini Kara
 
Internet marketing a guidebook to small business success 30 things you can do...
Internet marketing a guidebook to small business success 30 things you can do...Internet marketing a guidebook to small business success 30 things you can do...
Internet marketing a guidebook to small business success 30 things you can do...
BullsEye Internet Marketing
 
Custom Facebook
Custom FacebookCustom Facebook
Custom Facebook
emmaroberts477
 
5 Common Marketing Mistakes
5 Common Marketing Mistakes5 Common Marketing Mistakes
5 Common Marketing Mistakes
Daniel Oyston
 
Designing online forms (Jessica Kerr, Formulate)
Designing online forms (Jessica Kerr, Formulate)Designing online forms (Jessica Kerr, Formulate)
Designing online forms (Jessica Kerr, Formulate)
makinglinks
 
Ultimate Guide to Online Forms
Ultimate Guide to Online FormsUltimate Guide to Online Forms
Ultimate Guide to Online Forms
Matthew Rhodes
 
Common Mistakes on Insurance Agency Websites
Common Mistakes on Insurance Agency WebsitesCommon Mistakes on Insurance Agency Websites
Common Mistakes on Insurance Agency Websites
Darmini Kara
 
Naked capitalismyoastresponse
Naked capitalismyoastresponseNaked capitalismyoastresponse
Naked capitalismyoastresponse
webber0
 
The ultimate ux checklist for your website app
The ultimate ux checklist for your website appThe ultimate ux checklist for your website app
The ultimate ux checklist for your website app
Technousa Consulting Services Pvt Ltd
 
Writing for web class2
Writing for web class2Writing for web class2
Writing for web class2
Anna Polud
 

What's hot (20)

2x Your Biz for Chamber Members
2x Your Biz for Chamber Members2x Your Biz for Chamber Members
2x Your Biz for Chamber Members
 
Why Microcopy Matters
Why Microcopy MattersWhy Microcopy Matters
Why Microcopy Matters
 
Audit of site usability, SEO
Audit of site usability, SEOAudit of site usability, SEO
Audit of site usability, SEO
 
Building A Business Website
Building A  Business  WebsiteBuilding A  Business  Website
Building A Business Website
 
Website Planning 101 with Jen McKibben
Website Planning 101 with Jen McKibbenWebsite Planning 101 with Jen McKibben
Website Planning 101 with Jen McKibben
 
7 landing page tips to get more conversions
7 landing page tips to get more conversions7 landing page tips to get more conversions
7 landing page tips to get more conversions
 
Portfolio/Test
Portfolio/TestPortfolio/Test
Portfolio/Test
 
Blogging Out Loud - STC-PMC 2014 presentation by Danielle M. Villegas
Blogging Out Loud - STC-PMC 2014 presentation by Danielle M. VillegasBlogging Out Loud - STC-PMC 2014 presentation by Danielle M. Villegas
Blogging Out Loud - STC-PMC 2014 presentation by Danielle M. Villegas
 
Persona & User Journey in Practice
Persona & User Journey in PracticePersona & User Journey in Practice
Persona & User Journey in Practice
 
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
3 Registration Page Mistakes That Leave Your Workshop and Seminar Rooms Empty
 
Masters of Marketing -- Common Landing Page Design Mistakes
Masters of Marketing -- Common Landing Page Design MistakesMasters of Marketing -- Common Landing Page Design Mistakes
Masters of Marketing -- Common Landing Page Design Mistakes
 
Internet marketing a guidebook to small business success 30 things you can do...
Internet marketing a guidebook to small business success 30 things you can do...Internet marketing a guidebook to small business success 30 things you can do...
Internet marketing a guidebook to small business success 30 things you can do...
 
Custom Facebook
Custom FacebookCustom Facebook
Custom Facebook
 
5 Common Marketing Mistakes
5 Common Marketing Mistakes5 Common Marketing Mistakes
5 Common Marketing Mistakes
 
Designing online forms (Jessica Kerr, Formulate)
Designing online forms (Jessica Kerr, Formulate)Designing online forms (Jessica Kerr, Formulate)
Designing online forms (Jessica Kerr, Formulate)
 
Ultimate Guide to Online Forms
Ultimate Guide to Online FormsUltimate Guide to Online Forms
Ultimate Guide to Online Forms
 
Common Mistakes on Insurance Agency Websites
Common Mistakes on Insurance Agency WebsitesCommon Mistakes on Insurance Agency Websites
Common Mistakes on Insurance Agency Websites
 
Naked capitalismyoastresponse
Naked capitalismyoastresponseNaked capitalismyoastresponse
Naked capitalismyoastresponse
 
The ultimate ux checklist for your website app
The ultimate ux checklist for your website appThe ultimate ux checklist for your website app
The ultimate ux checklist for your website app
 
Writing for web class2
Writing for web class2Writing for web class2
Writing for web class2
 

Viewers also liked

Microinteractions
MicrointeractionsMicrointeractions
Microinteractions
Dan Saffer
 
Automated testing
Automated testingAutomated testing
Automated testing
Lauren Martin
 
Usability and Form Design - University of Calgary
Usability and Form Design - University of CalgaryUsability and Form Design - University of Calgary
Usability and Form Design - University of Calgary
John Hutchings
 
Usability Evaluation Considered Harmful (Some of the Time)
Usability Evaluation Considered Harmful (Some of the Time)Usability Evaluation Considered Harmful (Some of the Time)
Usability Evaluation Considered Harmful (Some of the Time)
Saul Greenberg
 
Manure Granulation: A Widespread Solution
Manure Granulation:  A Widespread SolutionManure Granulation:  A Widespread Solution
Manure Granulation: A Widespread Solution
FEECO International, Inc.
 
Options in Pre-conditioning Manure for Granulation
Options in Pre-conditioning Manure for GranulationOptions in Pre-conditioning Manure for Granulation
Options in Pre-conditioning Manure for Granulation
FEECO International, Inc.
 
Thermal Testing With Rotary Kilns
Thermal Testing With Rotary KilnsThermal Testing With Rotary Kilns
Thermal Testing With Rotary Kilns
FEECO International, Inc.
 
An Introduction to Bedding Recovery from Manure
An Introduction to Bedding Recovery from ManureAn Introduction to Bedding Recovery from Manure
An Introduction to Bedding Recovery from Manure
FEECO International, Inc.
 
Considerations in Manure Granulation
Considerations in Manure GranulationConsiderations in Manure Granulation
Considerations in Manure Granulation
FEECO International, Inc.
 
How it Works: Bedding Recovery from Manure
How it Works: Bedding Recovery from ManureHow it Works: Bedding Recovery from Manure
How it Works: Bedding Recovery from Manure
FEECO International, Inc.
 
Manure Granulation Testing
Manure Granulation TestingManure Granulation Testing
Manure Granulation Testing
FEECO International, Inc.
 
The Future of Farming: An Integrated Approach to Manure Management
The Future of Farming: An Integrated Approach to Manure ManagementThe Future of Farming: An Integrated Approach to Manure Management
The Future of Farming: An Integrated Approach to Manure Management
FEECO International, Inc.
 
Twg's guide to onboarding
Twg's guide to onboardingTwg's guide to onboarding
Twg's guide to onboarding
Shiera Aryev
 
Killer form design
Killer form designKiller form design
Killer form design
Lauren Martin
 
8 activities of human centered design (HCD)
8 activities of human centered design (HCD)8 activities of human centered design (HCD)
8 activities of human centered design (HCD)
di8it
 
Types of Manure Granulation Systems
Types of Manure Granulation SystemsTypes of Manure Granulation Systems
Types of Manure Granulation Systems
FEECO International, Inc.
 
Behavior and engagement
Behavior and engagementBehavior and engagement
Behavior and engagement
Lauren Martin
 
Motivating action
Motivating actionMotivating action
Motivating action
Lauren Martin
 
Forms usability design best practices experience dynamics web seminar
Forms usability design best practices  experience dynamics web seminarForms usability design best practices  experience dynamics web seminar
Forms usability design best practices experience dynamics web seminar
Experience Dynamics
 
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Josh Levine
 

Viewers also liked (20)

Microinteractions
MicrointeractionsMicrointeractions
Microinteractions
 
Automated testing
Automated testingAutomated testing
Automated testing
 
Usability and Form Design - University of Calgary
Usability and Form Design - University of CalgaryUsability and Form Design - University of Calgary
Usability and Form Design - University of Calgary
 
Usability Evaluation Considered Harmful (Some of the Time)
Usability Evaluation Considered Harmful (Some of the Time)Usability Evaluation Considered Harmful (Some of the Time)
Usability Evaluation Considered Harmful (Some of the Time)
 
Manure Granulation: A Widespread Solution
Manure Granulation:  A Widespread SolutionManure Granulation:  A Widespread Solution
Manure Granulation: A Widespread Solution
 
Options in Pre-conditioning Manure for Granulation
Options in Pre-conditioning Manure for GranulationOptions in Pre-conditioning Manure for Granulation
Options in Pre-conditioning Manure for Granulation
 
Thermal Testing With Rotary Kilns
Thermal Testing With Rotary KilnsThermal Testing With Rotary Kilns
Thermal Testing With Rotary Kilns
 
An Introduction to Bedding Recovery from Manure
An Introduction to Bedding Recovery from ManureAn Introduction to Bedding Recovery from Manure
An Introduction to Bedding Recovery from Manure
 
Considerations in Manure Granulation
Considerations in Manure GranulationConsiderations in Manure Granulation
Considerations in Manure Granulation
 
How it Works: Bedding Recovery from Manure
How it Works: Bedding Recovery from ManureHow it Works: Bedding Recovery from Manure
How it Works: Bedding Recovery from Manure
 
Manure Granulation Testing
Manure Granulation TestingManure Granulation Testing
Manure Granulation Testing
 
The Future of Farming: An Integrated Approach to Manure Management
The Future of Farming: An Integrated Approach to Manure ManagementThe Future of Farming: An Integrated Approach to Manure Management
The Future of Farming: An Integrated Approach to Manure Management
 
Twg's guide to onboarding
Twg's guide to onboardingTwg's guide to onboarding
Twg's guide to onboarding
 
Killer form design
Killer form designKiller form design
Killer form design
 
8 activities of human centered design (HCD)
8 activities of human centered design (HCD)8 activities of human centered design (HCD)
8 activities of human centered design (HCD)
 
Types of Manure Granulation Systems
Types of Manure Granulation SystemsTypes of Manure Granulation Systems
Types of Manure Granulation Systems
 
Behavior and engagement
Behavior and engagementBehavior and engagement
Behavior and engagement
 
Motivating action
Motivating actionMotivating action
Motivating action
 
Forms usability design best practices experience dynamics web seminar
Forms usability design best practices  experience dynamics web seminarForms usability design best practices  experience dynamics web seminar
Forms usability design best practices experience dynamics web seminar
 
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
 

Similar to Form Design: Best Practices to Improve Conversions

Ux tips to design better online forms
Ux tips to design better online formsUx tips to design better online forms
Ux tips to design better online forms
Fibonalabs
 
Shopify website design – UX best practices that boost sales
Shopify website design – UX best practices that boost salesShopify website design – UX best practices that boost sales
Shopify website design – UX best practices that boost sales
SoftwareSupp
 
Creating Effective Forms with Constant Contact.pdf
Creating Effective Forms with Constant Contact.pdfCreating Effective Forms with Constant Contact.pdf
Creating Effective Forms with Constant Contact.pdf
T.E. Digital
 
Test
TestTest
48 ways-to-build-your-email-list (1)
48 ways-to-build-your-email-list (1)48 ways-to-build-your-email-list (1)
48 ways-to-build-your-email-list (1)
varatharajanrajeswar
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
Natasha Alderdice
 
6 effective e commerce conversion strategies
6 effective e commerce conversion strategies6 effective e commerce conversion strategies
6 effective e commerce conversion strategies
Nguyen Thi Anh Thu
 
6 Effective e-Commerce Conversion Strategies
6 Effective e-Commerce Conversion Strategies6 Effective e-Commerce Conversion Strategies
6 Effective e-Commerce Conversion Strategies
Getfly CRM
 
6 effective e commerce conversion strategies
6 effective e commerce conversion strategies6 effective e commerce conversion strategies
6 effective e commerce conversion strategies
Trần Hương Giang
 
Customer portal design 4 best practices to implement in 2022
Customer portal design 4 best practices to implement in 2022Customer portal design 4 best practices to implement in 2022
Customer portal design 4 best practices to implement in 2022
CRMJetty
 
Conversion Rate Optimization Tips for Web Forms
Conversion Rate Optimization Tips for Web FormsConversion Rate Optimization Tips for Web Forms
Conversion Rate Optimization Tips for Web Forms
123FormBuilder
 
Landing Page Design & Optimization
Landing Page Design & OptimizationLanding Page Design & Optimization
Landing Page Design & Optimization
Alex Harris
 
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO
Jordan Kasteler
 
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO
Jordan Kasteler
 
Scopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman
 
SMX West 2010 - Conversion Optimization Tips
SMX West 2010 - Conversion Optimization TipsSMX West 2010 - Conversion Optimization Tips
SMX West 2010 - Conversion Optimization Tips
Kayden Kelly
 
Where Did You Go? Why You’re Website’s Not Converting and How to Fix It
Where Did You Go? Why You’re Website’s Not Converting and How to Fix ItWhere Did You Go? Why You’re Website’s Not Converting and How to Fix It
Where Did You Go? Why You’re Website’s Not Converting and How to Fix It
Nirvana Canada
 
Growth Hacking
Growth HackingGrowth Hacking
Growth Hacking
Bruno Rabelo
 
Beginners guide to_growth_hacking
Beginners guide to_growth_hackingBeginners guide to_growth_hacking
Beginners guide to_growth_hacking
José Manuel Voces García
 
9+ amazing strategies to reduce your bounce rates now!
9+ amazing strategies to reduce your bounce rates now!9+ amazing strategies to reduce your bounce rates now!
9+ amazing strategies to reduce your bounce rates now!
Larry338625
 

Similar to Form Design: Best Practices to Improve Conversions (20)

Ux tips to design better online forms
Ux tips to design better online formsUx tips to design better online forms
Ux tips to design better online forms
 
Shopify website design – UX best practices that boost sales
Shopify website design – UX best practices that boost salesShopify website design – UX best practices that boost sales
Shopify website design – UX best practices that boost sales
 
Creating Effective Forms with Constant Contact.pdf
Creating Effective Forms with Constant Contact.pdfCreating Effective Forms with Constant Contact.pdf
Creating Effective Forms with Constant Contact.pdf
 
Test
TestTest
Test
 
48 ways-to-build-your-email-list (1)
48 ways-to-build-your-email-list (1)48 ways-to-build-your-email-list (1)
48 ways-to-build-your-email-list (1)
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
6 effective e commerce conversion strategies
6 effective e commerce conversion strategies6 effective e commerce conversion strategies
6 effective e commerce conversion strategies
 
6 Effective e-Commerce Conversion Strategies
6 Effective e-Commerce Conversion Strategies6 Effective e-Commerce Conversion Strategies
6 Effective e-Commerce Conversion Strategies
 
6 effective e commerce conversion strategies
6 effective e commerce conversion strategies6 effective e commerce conversion strategies
6 effective e commerce conversion strategies
 
Customer portal design 4 best practices to implement in 2022
Customer portal design 4 best practices to implement in 2022Customer portal design 4 best practices to implement in 2022
Customer portal design 4 best practices to implement in 2022
 
Conversion Rate Optimization Tips for Web Forms
Conversion Rate Optimization Tips for Web FormsConversion Rate Optimization Tips for Web Forms
Conversion Rate Optimization Tips for Web Forms
 
Landing Page Design & Optimization
Landing Page Design & OptimizationLanding Page Design & Optimization
Landing Page Design & Optimization
 
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO
 
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO
 
Scopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
 
SMX West 2010 - Conversion Optimization Tips
SMX West 2010 - Conversion Optimization TipsSMX West 2010 - Conversion Optimization Tips
SMX West 2010 - Conversion Optimization Tips
 
Where Did You Go? Why You’re Website’s Not Converting and How to Fix It
Where Did You Go? Why You’re Website’s Not Converting and How to Fix ItWhere Did You Go? Why You’re Website’s Not Converting and How to Fix It
Where Did You Go? Why You’re Website’s Not Converting and How to Fix It
 
Growth Hacking
Growth HackingGrowth Hacking
Growth Hacking
 
Beginners guide to_growth_hacking
Beginners guide to_growth_hackingBeginners guide to_growth_hacking
Beginners guide to_growth_hacking
 
9+ amazing strategies to reduce your bounce rates now!
9+ amazing strategies to reduce your bounce rates now!9+ amazing strategies to reduce your bounce rates now!
9+ amazing strategies to reduce your bounce rates now!
 

Recently uploaded

Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 

Recently uploaded (20)

Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 

Form Design: Best Practices to Improve Conversions

  • 1. Form Design: Best Practices to Reduce Errors and Improve ConversionsLauren Martin www.sitemotif.com
  • 2. Design Principles Keep it Simple Avoid unnecessary text and inputs.Focused GoalIt should be easy to see what needs to be done to complete the form.Be ClearYou never know the context of the user, make sure things are very clear and unambiguous.Constantly CommunicateInform users about what’s going on when it happens.
  • 3. The basics of labels, errors and layout.Login Forms
  • 4. Clear, Obvious, ConciseSet proper expectations by letting the user know exactly what you are looking for.
  • 5. Locate, Inform, AssistError messages should inform the user Where the error happened, What the error was, and How to correct it.
  • 6. Clean, Focused, ApparentFocus on the point. Provide users with a clear call to action and next steps.
  • 10. Alignment and Orientation Examples From: Web Form Design by Luke WroblewskiLayout Best Practices
  • 11. Path to CompletionMinimize distractions by removing unnecessary elementsThe scan line should have good visual spacing.Provide a single path throughout the form
  • 13. Top AlignedPositivesCleaner scan line, means more rapid processing and less effortLabel and input field are adjacentAllows long labelsHorizontal space for grouping related fieldsStudies show highest completion ratesGood for familiar dataNegatives2x Increased vertical space.
  • 15. Right AlignedPositivesClose proximity between label and input fieldGood for varied label widths2x faster to complete as left aligned labelsReduced vertical spaceNegativesLeft rag of labels makes scanning less efficient
  • 17. Left AlignedPositivesEasy to scan labels is good for unfamiliar dataReduced vertical spaceGood for forms with sensitive data where you want users to slow down.NegativesLabel and corresponding field are not adjacentLong labels extend gaps between labels and controls causing visual “jumps”
  • 19. Buttons56% 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/
  • 20. Examples1. Primary Button, Secondary Link2. Primary Button, Secondary Button3. Primary Action on Right
  • 22. Forms are crucial to businesses and stand between the user and the companies product or service.Improve Conversions
  • 23. 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.
  • 24. 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.
  • 25. How is it organized? Every form should have a name and a clear purposeAlways chunk information into logical groupsEach chunk should have a clear title summarizing the questions in that sectionTry 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 contentBold form labels for easier scanning.
  • 26. How are you helping them?Provide hints and tool tips with additional informationUse examples of expected and allowed inputUse 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.
  • 27. 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.
  • 29. Off Line Reading…Forms that Work: Designing Web Forms for UsabilityBy: Caroline Jarrett$44.95 on AmazonWeb Form Design: Filling in the Blanks By: Luke Wroblewski$36 on Rosenfeld Media

Editor's Notes

  1. 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”.
  2. 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.
  3. 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.
  4. 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.
  5. 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.