A few weeks ago at the CaseV conference I was trying to get wifi in the Chicago Sheraton and unfortunately it was not free, they charge by the day. I fired up my laptop fully prepared to pay the $13.63 for a day’s worth of internet when I was presented with the form above.
A few things struck me as odd.
The first of course was the inability to read the labels for each field. This made it very difficult to use unless you highlight the entire page.
The second was the URL, it was a local address and the page was not protected by an SSL. No way was I going to put my credit card into a form without an SSL. Even a self signed certificate would have worked but CC information going over the air with potentially dozens of people able to intercept it does not sit well with me.
Last but not least the lack of instructions, terms or even description of what I was about to pay for really turned me off. Every customer asks “what is in it for me” before taking any action online. If the benefit doesn’t outweigh the cost the user will not continue. In this case it’s so unclear what the user is getting I would be surprised if anyone has filled out and submitted this form.
I’m sure they didn’t design the form to be blank like this but whether it was the browser I was using or some change got moved to production that broke the form brings to light a very important lesson. Make sure you test all primary user paths every time a change goes in to production. It might sounds like a daunting task but something like this can easily happen if no one is watching. Just image how many people they are loosing because they didn’t take 10 minutes to test their form.
Even if you can use a mouse most of the time its easier to use a keyboard to fill out web forms. HTML has a nifty attribute called “tabindex” which allows the site creator to dictate how the user will navigate through the forms or links on the page.
The default tab order is usually enough, most forms are filled out linearly and browsers account for that. Sometimes developers get overzealous and add unnecessary tab orders, making the forms a nightmare to fill out.
I encountered one of these nightmare forms the other day. I went to write a letter to my representatives, and going through all the forms I eventually landed on this form. Long story short I started at the top and tabbed my way through it. But the fields led me in a crazy order.
Try to follow this maze
So what happened?
Half the fields had tabindex’s on them, while the other half did not, it made for a pretty unique experience. On Firefox atleast it loops through all the non-tabindexed fields first then hits the tabindexed fields. I used the Web Developer Toolbar to display the tabindex’s in yellow so you can see what I mean. Because these tab index’s were forced there was no way to move from the Prefix field to the First Name field without using a mouse.
The lesson here kids is to use only what you need. Don’t try to be user advanced technology when its not needed, you might just be frustrating more users than you help.
Using the right tabindex
For 99% of all web forms created it is a good idea just to ignore the tabindex attribute and let the order of the fields on the page handle how the user flows through the form. Especially if the form will have new fields or or change frequently, its just another thing to remember to do.
For those one in a million forms that you have to use tabindex my suggestion is to test, test and retest every time you change the form. It would be very easy to forget once and have a large group of frustrated users on your hands.
This week I had the privileged of speaking at the Michigan Usability Professionals Association (MIUPA) meeting. I can’t explain what a great group of people they are, I feel humbled being around so many people with much more formal experience and training than myself.
Although I come from a computer science background I love usability, user interaction and user interfaces. My approach has always been ad-hoc and unscientific. I like to just sit back and watch or ask random people in their natural settings and see how they react. Which ultimately leads to an ever evolving UI based on these observations and actions.
This method comes from my belief in the release early, release often agile development methodology. Small incremental steps that lead to the full result while making improvement along the way.
The audience was primarily usability professionals who pretty much do this for a living. So although I created the presentation above it really did not get used. I made the presentation more of a discussion about everyone’s experiences and how mine synced or collided with theirs.
The best part was a group from MSU’s Usability & Accessibility Center came all the way from Lansing. It was great to hear and talk with them about similar struggles higher education web professionals have.
Overall it was a great meeting with most people staying after to talk further. I wanted to thank the MIUPA again for hosting me and the Southfield Public Library for providing a rocking facility.