5 Quick Tips for a User-Friendly Form

I promised myself when I got home tonight, I was going to work on some coding and a presentation I have due tomorrow… and then I saw this sign. Yes, I pulled over and took a picture of it, just so you'd believe me.

This sign was erected under the premise that I wouldn’t obey signs until a sign told me to.

I was hoping for another sign that would say “OBEY PREVIOUS SIGN” just in case I got confused or maybe forgot what I was supposed to be doing while driving.

Photo credit: me.

 

What can this sign teach us about web design and user experience?

The short answer is this (so you can read it and click off my blog if I’m already boring you) – sometimes, in trying to be helpful, you are actually just providing useless sign fodder. 

I’ve been doing web design for a long time, and no matter how much you fool-proof a page, someone just won’t get it and will call your help desk claiming something is broken.  These are the same people who try to login to your site using the Google search bar in their browser.

Also, 95% of people (made up statistic, but it sounds about right) aren’t going to read any instruction you put on the page anyway.  I know this for a fact because people have called me about issues when the instructions are right on the page, sitting on their face.  They just start typing in the first box they see, and then they click on the closest button.

So what?

Actually, these guys have a point.  Think about it.  You can provide a cleaner, more understandable user experience by making a simplified form with less direction.  How do you do this? Here are a few tips:

1. If you really feel the need to have detailed information to help explain your form, do so in a simple “Help” link that, when clicked or hovered on, will display an unobtrusive, fast loading, help “tool tip” (no popups, no postbacks) .  Now you are providing that helpful information, but it isn’t in everyone’s face. It is also more easily identified by the “Help” link than it would be in a big, ugly, scary paragraph.  Those people who won’t read said paragraph will click on a little, cute, “Help” link if they need help.
2. If you have a field that can only accept a certain type of character (like a credit card box that only can be number), then put a filter on the text box that only allows them to enter the appropriate characters.  If they type "b", nothing should happen.
3. If you have a field that needs to be in a certain format, like a phone number that you want them to enter like this: (555) 867-5309, instead of this: 5558675309, then put a mask on the text box that will show the appropriate format, and will in fact input the parenthesis and dashes for them.  I don't mean showing them what the appropriate format is with some text beside the text box.  I mean a mask that is actually in the text box and upon which they can easily type.  One is fodder.  One isn't.
4. Ensure you do validation on the client-side. This will provide faster feedback if something is wrong and saves a trip to the server.  When providing an error to the user, do it in a helpful way that tells them everything that is wrong.  I hate forms where the flow is like this:

      me: Submit Form!
      website: You forgot to enter your first name! Fail!
      me: Oh yeah. Ok, I entered the first name. Submit Form!
      website: You forgot to enter your last name! Fail again!
      me: Damn you!

5. Ensure you do validation on the server-side.  If someone disables javascript, they can bypass the client-side validation and could potentially break your site or input invalid data into your database.  To save time, have your server-side validation activate your client-side alerts if something is invalid, instead of making a custom message for your server-side code.  Similar to item 4, don't let them submit the form if you know it is going to break.  Example: Don't let them sign up for a username if that username is taken.  Let them know that while they are typing, not after they submit the form.

Sound simple? It is. So why aren’t you doing it?

I usually like to end with a reference to a similar blog or topic.

I think Mark Schaefer's recent blog post Can your website pass the 20 second test? reinforces the point of, well, getting to the point.

If you are looking for something more design-oriented, check out this from dzineblog -  30 Impressive Ways to Design Sign-Up Page/Form.

Have you seen a terrible form? Have you hosted a terrible form? Let me know!