Jordan Kasteler Usability SEO

Usability & SEO Two 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-headers Should 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.

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 Campbell 5 Ways To Make Sure That Users Abandon Your Forms - Eric G. Myers 8 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 Robinson Better 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 Dimon Check User ID Button - Jared Spool Checkboxes, Radio Buttons, and Drop Downs - Garrett Dimon Checkboxes vs. Radio Buttons - Jakob Nielsen Closed Question Response Categories - Jessica Enders Colons at the End of Labels? - Ann Light Colons at the End of Labels - Caroline Jarrett Defeated By a Dialog Box - Jakob Nielsen Design Stories: Character Counters - Robert Hoekman Designing Intersection Flows - Henrik Olsen Developing an Online Form Dialog Boxes - Making Simple Things Simple... - Leisa Reichelt Does User Annoyance Matter? - Jakob Nielsen Enhancing Form Usability With Instructions And Validation - Michael Meadhra Error Message Design Showcase - Christian Watson Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach - Matteo Penzo Eyetracking of Forms: should we accept the Conclusions? - Caroline Jarrett Forms Accesibility Form Follows Function and Achieving Thereof - Govert Adriaan Kolbach Forms: The importance of getting it right - Lift Forms, usability, and the W3C DOM - Peter-Paul Koch

Form Usability Resources – 2/3 Forms vs. Applications - Jakob Nielsen Four Ideas For Better Forms - Caroline Jarrett International Address Fields in Web Forms - Luke Wroblewski Long Pages Rule, Except When They Don't - Heidi Adkisson How to Indicate Required or Optional Form Fields - Thomas Watson Steen Implementing Online Forms - James Robertson Initial Focus to a Text Field - Good or Bad? - Robert Nyman It's Not About Size, It's About Context - Radio Buttons Or Drop-Downs - Donna Maurer Judging Forms - Jessica Enders Labeling Buttons - Garrett Dimon Label Placement in Forms - Matteo Penzo Long Forms: Scroll or Tab? - Caroline Jarrett Marking Required vs. Optional Form Fields - Erin Walsh Multi-Select Lists vs. Checkboxes - Garrett Dimon Previous 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 Meadhra Registration Forms - What To Do If You Can't Avoid Them - Caroline Jarrett Reset and Cancel Buttons - Jakob Nielsen Rules for Labeling Buttons - Caroline Jarrett Selection-Dependent Inputs - Luke Wroblewski Sentence or Title Case for Labels? - Caroline Jarrett Sensible Forms: A Form Usability Checklist - Brian Crescimanno Simple Tricks for More Usable Forms - Simon Willison Simplified Form Errors - Adam Kalsey Sign 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 Jarrett The Information Architecture Behind Good Web Forms - Luke Wroblewski The Piece of HTML created just for Me: Reset - Caroline Jarrett Usability Tip: Use Verbs as Labels on Buttons - Dmitry Fadeyev Web Application Form Layout - Luke Wroblewski Web 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 Atwood What 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 Jarrett Zebra 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/

Jordan Kasteler Usability SEO

More Related Content

What's hot

Similar to Jordan Kasteler Usability SEO

More from Jordan Kasteler

Recently uploaded

Jordan Kasteler Usability SEO