Usability & SEOTwo Wins for the Price of One

By Jordan Kasteler

Jordan Kasteler

www.JordanKasteler.com www.SearchandSocial.com

Submission Forms

Forms collect:

• Data

• Surveys

• Login/Registration

• Search

• Email/Newsletter Subscriptions

• Contact/Feedback

CAN BE FRUSTRATING!

Label Positioning / Alignment

http://www.uxmatters.com/MT/archives/000107.php

Left Aligned Right Aligned

Left Aligned Above Fields

Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.

Header Information• Headers

Should clearly state what the form is for.

• Sub-headersShould be used for grouping information

• Labels Should be used for asking for information.

Group Information

People understand and perceive information more easily when it is grouped together.

Split Up Long Forms

• Divide long forms it into several pages, each fulfilling a different task.

(i.e.: separate pages for one for product details, personal data, payment and delivery).

• Use a form progress indicator to show them how many steps or what % of the form they have currently filled out.

• Conservation of filled data is very important. When going back to fix a problem, the user should find his form as filled in before.

• Ask questions in a logical order.

Required Fields

Have a consistent format for required fields. If you use an asterisk on one form field, us that on every required field on all forms on your site.

Error Messages

DON’T• Show error messages on a different screen from the

form.

• List the errors at the top of the form. Let the user match the error with the field.

• Highlight erroneous fields. Users with vision disabilities or screen readers will have trouble figuring out which fields are wrong.

Error Messages

DO• Make error messages clear.

“Please enter an email address” rather than something vague like “you must fill out all fields.”

• Place error messages in a visible area to the user in close proximity to the actual field that’s causing the error.

• Talk to the user like a human.“Invalid Email Address” is much better than “Error 3442”.

• Use AJAX/jQuery to provide real-time error messages.http://writehype.com/articles/7/better-form-usability-with-jquery

Rules of Thumb to Avoid Abandonment

• Ask for information the user has accessible.

• Explain why you need the information and how you’ll use it to ease anxieties about giving private or secure information.

• Allow users to format the data anyway they’d like.

• Don’t let users feel inadequate, nervous, or stupid.

• Only ask for information that you absolutely need.

• Don’t provide “Clear” or “Reset” buttons.

• Give the user room to type.

Rules of Thumb to Avoid Abandonment

• Set a logical tab sequence.

• Include a “Remember Me” feature to store their information in a cookie if desired.

• Set the focus – send the cursor to the first required field along page load so they can begin typing quickly.

• Avoid obnoxious password requirements.

• Minimize scrolling.

• Prioritize size and location of multiple button forms. (e.g.: “Checkout” should probably be larger and more prominent than “Edit Order”)

• Single Column &Vertical field layout is best.

Lose the CAPTCHA

Point of Action References

Don’t Waste the Thank You Page

• Provide option to refer a friend.

• Show how to track their order.

• Show products related to the order.

• Ask user to fill out a feedback survey.

• Provide a coupon for next purchase.

• State when they’ll hear back if needed.

Newsletter / RSS Form Placement

Testing

5 Ways to Get Cheap Usability Testing

14 free tools that reveal why people abandon your website

A/B Split & Multivariate Test Form Placement

How does this tie into SEO?

The Future of SEO

Microsoft recently filed a patent about BrowseRank, a PageRank competitor, to determine content relevance and adequacy by measuring a users behavior and engagement with the content. Some of the things they desire to measure are:• Bounce Rate• Time Spent• Click behavior• Etc

With this data they can determine if content is actually valuable to a user by seeing how they interact with it rather than just basing it’s authority off links.

How this will change SEO and Internet marketing:Internet marketers will have to start creating more compelling and engaging content that causes users to bookmark, share, read, interact, or anything that makes the content sticky. This won’t eradicate heavy link building and on-page optimization but will dampen the importance of it.

Form Usability Resources – 1/3 10 Tips To A Better Form - Chris Campbell5 Ways To Make Sure That Users Abandon Your Forms - Eric G. Myers8 Design Mistakes to Avoid with Account Sign-in - Jared M. Spool 8 More Design Mistakes with Account Sign-in - Jared Spool Better Web Forms By D. Keith RobinsonBetter Web Forms: Redesigning eBay's Registration - Garrett Dimon. Button Placement on Forms and Popup Windows - Meryl Evans Calling in the Big Guns - Will Evans Clearly label those buttons - Garrett DimonCheck User ID Button - Jared SpoolCheckboxes, Radio Buttons, and Drop Downs - Garrett DimonCheckboxes vs. Radio Buttons - Jakob NielsenClosed Question Response Categories - Jessica Enders Colons at the End of Labels? - Ann Light Colons at the End of Labels - Caroline JarrettDefeated By a Dialog Box - Jakob Nielsen Design Stories: Character Counters - Robert HoekmanDesigning Intersection Flows - Henrik OlsenDeveloping an Online FormDialog Boxes - Making Simple Things Simple... - Leisa Reichelt Does User Annoyance Matter? - Jakob NielsenEnhancing Form Usability With Instructions And Validation - Michael MeadhraError Message Design Showcase - Christian WatsonEvaluating the Usability of Search Forms Using Eyetracking: A Practical Approach - Matteo PenzoEyetracking of Forms: should we accept the Conclusions? - Caroline JarrettForms AccesibilityForm Follows Function and Achieving Thereof - Govert Adriaan Kolbach Forms: The importance of getting it right - LiftForms, usability, and the W3C DOM - Peter-Paul Koch

Form Usability Resources – 2/3 Forms vs. Applications - Jakob NielsenFour Ideas For Better Forms - Caroline JarrettInternational Address Fields in Web Forms - Luke Wroblewski Long Pages Rule, Except When They Don't - Heidi AdkissonHow to Indicate Required or Optional Form Fields - Thomas Watson SteenImplementing Online Forms - James RobertsonInitial Focus to a Text Field - Good or Bad? - Robert NymanIt's Not About Size, It's About Context - Radio Buttons Or Drop-Downs - Donna MaurerJudging Forms - Jessica Enders Labeling Buttons - Garrett DimonLabel Placement in Forms - Matteo PenzoLong Forms: Scroll or Tab? - Caroline JarrettMarking Required vs. Optional Form Fields - Erin Walsh Multi-Select Lists vs. Checkboxes - Garrett DimonPrevious and Next Actions in Web Forms - Luke Wroblewski. Never Use a Warning When you Mean Undo - Aza Raskin OK-Cancel or Cancel-OK? - Jakob Nielsen Primary and Secondary Actions in Web Forms - Luke Wroblewski Proper Usage of Check Boxes and Radio Buttons - Michael MeadhraRegistration Forms - What To Do If You Can't Avoid Them - Caroline JarrettReset and Cancel Buttons - Jakob NielsenRules for Labeling Buttons - Caroline JarrettSelection-Dependent Inputs - Luke WroblewskiSentence or Title Case for Labels? - Caroline JarrettSensible Forms: A Form Usability Checklist - Brian CrescimannoSimple Tricks for More Usable Forms - Simon WillisonSimplified Form Errors - Adam KalseySign Up Forms Must Die - Luke Wroblewski Smart Defaults in Registration Forms - Luke Wroblewski The 4 Layers of a Form - Jessica Enders

Form Usability Resources – 3/3 Two-Column Forms are Best Avoided - Caroline JarrettThe Information Architecture Behind Good Web Forms - Luke WroblewskiThe Piece of HTML created just for Me: Reset - Caroline JarrettUsability Tip: Use Verbs as Labels on Buttons - Dmitry FadeyevWeb Application Form Layout - Luke WroblewskiWeb Form Design in the Wild, Part I - Luke Wroblewski Web Form Design in the Wild, Part II - Luke Wroblewski Web Form Design: Labels Within Inputs - Luke Wroblewski Web Form Design Patterns: Sign-Up Forms - Vitaly Friedman and Sven Lennartz Web Form Design: ZIP Codes and Locations - Luke Wroblewski Web Forms: Death By a Thousand Textboxes - Jeff AtwoodWhat Makes a Good Form? - Formulate What Makes a Good Form? - Jessica Enders What's the Right Order? - Tom Tullis Where the Heck is My Focus? - Jeff Atwood Why Does the OK Button Say OK? - Gerry McGovern Why People Persist with Using Paper Forms - Caroline JarrettZebra Striping: Does it Really Help? - Jessica Enders

General Usability Resources

http://www.usability.gov

http://web.mit.edu/ist/usability/usability-guidelines.html

http://www.usabilityprofessionals.org/usability_resources/

http://www.stcsig.org/usability/resources/bookshelf/index.html

http://www.stcsig.org/usability/resources/toolkit/toolkit.html

http://www.d.umn.edu/itss/support/Training/Online/webdesign/usability.html

http://www.gsa.gov/Portal/gsa/ep/channelView.do?pageTypeId=8203&channelId=-16202

http://www.useit.com/

Thank You

JORDAN@SEARCHANDSOCIAL.COM