MinneWebCon: It's the Little Things

Full title: It's the Little Things Part 2: You're Still Doing It Wrong

  • Forms should flow like a conversation
  • Ask for optional info after collecting required info
  • group into logical chunks
  • If you need multiple page forms, tell them how long it will take and relay their progress
  • Keep the user focused on the task with a single call to action. Don't give them other stuff to do, places to go.
  • Your user is right, you are wrong.
  • Scrub data on the server side, not in front of the user. For example, don't reformat phone numbers while the user is typing or force them to enter data a specific way.
  • Don't auto-tab into fields
  • Use date picker or date.js
  • Check out Huffduffer for their MAD LIBS style form
  • There's a fourth label position: overlay where the label is inside the label and dissolves as the user begins typing. But use sparingly because people forget.
  • $('input').labelover();
  • Use a tab index to prevent user from jumping around
  • Color hinting on its own is bad. Add shapes for speedy recognition.
  • Position error messages proximate to input and where focus is
  • try google.com/websiteoptimizer

Rules

  1. There's always a better way
  2. Be minimal
  3. Be flexible