858.736.5821

Bookmark and Share

4 Problems to Avoid with Web-Based Forms

I recently moved and as everyone knows, moving is a terrible experience.  I was hoping one of the easier tasks would be updating my address on the websites of banks, magazines, etc.  I sat down planning to spend about 30 minutes and be finished, but an hour later I should have known better.  Here’s a few highlights of form usability problems that in my opinion are unacceptable in 2009:

- Never break standard browser functions:
My friends at AT&T thought it would be a good idea to move the cursor from one field to the next after I entered the proper number of characters for the field I was editing.  For example, on phone number, once you type 3 digits in the area code field, the site automatically moves you to the number prefix box.  I’m sure someone at AT&T thought it was a good idea that would make things easier, but after using the internet for 14 years and expecting to use the tab key or mouse, it was more frustrating than helpful.  I find it hard to believe that this was user tested before deployment and there’s no excuse for that when you have the website budget of AT&T.

- Make your website work with all common browsers:
http://www.mykplan.com: These guys aren’t kidding about the compatible browser list in the left column.  This website has a lot of issues, but the biggest offender is that the site only works with Internet Explorer.  I use a Mac, so none of my browsers worked.  I could access the necessary forms, but was unable to enter any information.  Having a website that only worked with certain browsers stopped being OK at least five years ago.

- Avoid drop-down menus:

This will be the most controversial issue on this post, but after suffering through multiple drop-downs, mostly to enter my state, I agree with Jakob Nielsen on this one: http://www.useit.com/alertbox/annoyances.html

- Don’t ignore your error messages.

Following web standards and properly testing functionality before launching any website or addition is cheap and easy.  If you need help, contact me.

What other common problems do you encounter with online forms?

9 Comments

  1. Shannon Maas
    Posted August 10, 2009 at 10:26 pm | Permalink

    DropDowns: Unfortunately these are a necessary evil. Users are unpredictable and unfortunately it is often necessary to design against bad data. Data is often transferred between many integrated systems and must be in the expected format. The most efficient way to guarantee this is drop down menus. Example: When you enter your billing address into an ecommerce site that address is likely stored at the site itself, it is also passed onto the credit card processing company and usually also passed onto third party tax software. Each of these locations expect your state to be VALID and in the appropriate format. It is much more efficient to offer a drop down of valid choices rather than allow an end user to enter their state as “AA” or some other bogus abbreviate. Yes, it is possible to take the invalid value of “AA” and validate it against the internal database of valid state codes but this scenario will incur a round trip to the server and a call to the database which is resource intensive. Therefore it is cleaner and more resource efficient to hit the database and server once on page load, populate a dropdown and skip a later validation step. Additionally have you seen the devastation that can be caused by user entered data on sites that do not have the budget to manage security but still have excellent services to offer? Can you say “Drop Table”? SQL injection is quite nasty.

  2. Posted August 10, 2009 at 11:21 pm | Permalink

    Great technical points. I will say that I have implemented type-in state fields on websites that have not had significant accuracy problems. I would argue that a user is more likely to make an error entering their street address than a two letter state code, so it is always wise to run USPS address verification if your website can support it.

  3. Posted August 11, 2009 at 11:49 am | Permalink

    Unnecessary data validation rules. For instance why do some websites not let you put spaces in credit card numbers or telephone numbers? They can strip them out server-side if they want, but the ability to enter spaces helps me ensure the data has been entered correctly.

    Likewise with date fields. Why enforce the use of particular delimiters when you could allow pretty much any symbol – forward slash, backslash, hyphen, space etc. and strip it out or convert it server-side.

    And why throw an error when the user enters ddmmyy instead of ddmmyyyy or whatever format you want. I’ve seen a site that allowed UK and US date formats, mm and mmm, yy and yyyy and it just worked out what the date was in the format it needed. It only threw an error if the date was ambiguous. That’s a design pattern that everyone should use.

  4. Reggie Mastic
    Posted August 12, 2009 at 12:30 am | Permalink

    This reminds me of a story from a previous job.

    The state drop down was actually missing ‘Nebraska’ and had been missing it since launch (at least a year) before an end user from Nebraska finally notified us… Oops!

  5. Jacob Valley
    Posted August 12, 2009 at 1:18 am | Permalink

    I enjoy the auto-populating forms such as ATT’s phone fields. I like it when fields auto populate and advance to the next field. We all need to adapt to change. I was a little nervous when the toilet flushed before I hit the handle, but overall I’ve grown to get used to it even after 35 years of flushing (bad example but still tech advances) I think technology advances in small bits and if we can’t embrace the little changes like auto-populating fields, then we are not embracing technology as a whole.

    http://www.vb123.com/Toolshed/02_access/lookups.htm

  6. Kevin Jacobs
    Posted August 12, 2009 at 1:33 am | Permalink

    Just stumbled upon your site. How do I get high search ratings on google? Love the insight on usability. thx.

  7. Posted August 12, 2009 at 9:45 am | Permalink

    I can’t agree with the toilet example. This is more along the lines of one intersection in an entire city where the lights go from green to red, with no yellow. I do agree that forms should be easier and in theory, should automatically advance from one field to the next, but it goes against a very entrenched behavior. It’s a difficult problem to fix!

  8. socialamigo
    Posted August 14, 2009 at 6:34 am | Permalink

    I’ve done quite a bit of form creation and form redesign in the past two years. Biggest mistake to make is to decide that the development team/ programmers will know what to do. My experience is they simply scrape up a form in their library and drop it into place. As a consequence, I’ve seen forms returned that include Chad and the Marshall Islands for a company that doesn’t ship outside the US under any circumstance. A side issue with these lists is that most websites, not the hyper-global types, reach predominantly local markets – set-up the forms so that things like state-name and country name are already in the box and the user can change it if they need to.

    Also, most forms suffer remarkably for what they do upon submitting the form – nothing or barely anything – meaning: who among us hasn’t submitted a form and waited for the next step only to find a small red line of text appearing within the form somewhere thanking us for submitting the form. Pushing the user to a formalized thank you page is good for SEO/ Analytics, gives the user a sense of execution and success, and, if designed properly, gives the user a chance to continue on by giving them new paths to explore the website.

    As for the DROP-DOWN MENU question, I’m with all of you: necessary evil, but to be avoided at all cost for SEO-friendly design. But jminder needs to update his archives on Jakob Neilsen’s viewpoint on drop-down menus – see this Alertbox article from March 23, 2009 – http://bit.ly/Jakob-does-menus

  9. Posted August 27, 2009 at 10:07 am | Permalink

    It’s important to note that Nielsen’s March post is not a blanket endorsement of all drop-downs, only jumbo navigation menus. In this case, that may not apply.

Post a Comment

Your email is never shared. Required fields are marked *

*
*

Spam Protection by WP-SpamFree

Let Us Help You

Name:

Your Company:

Your Email:

Your Phone:

Company Website (optional):


Comments (optional):