Posts Tagged ‘usability’

Good Form To Increase Conversions

Monday, February 22nd, 2010


Entrance Barriers

If you had to guess at the largest entrance barrier for a website what would guess? Maybe there is a cost involved and its too high? The website design is bad? Its a complicated website and not enough instructions?

Sure the cost might be more than the market will bear. More than likely your just trying to get that initial contact, an email, newsletter sign-up, anything to get more information to a potential customer. Cost to the user, $0.00 and your still only getting a small percentage of visitors to take the next step, whatever that may be.

Is your site ugly? Maybe, an ugly site to one person is artwork to another. Do ugly sites get less use? Unless your making the visitors eyes bleed and not distracting them with flashing or scrolling text this is more than likely not the cause. Some would say Amazon is ugly or Gmail, certainly Craiglist isn’t the pinnacle of design. As long as the user can get around easily without getting a migraine this probably isn’t what is holding you back.

Maybe you just need more instructions because they get confused? Here is the truth, nobody is going to read your directions if its more than a couple sentences. You can use all caps bold flashing text to tell a user what to do and they will not read it if its too long. If you already have instructions and you think you need more detail your only making it worse.


Its all in the forms.

Well designed forms aren’t the end all metric of usability however I would argue its a majority. Its all in the little details. Here are some of the basics.

  • Are required fields clearly marked?
  • Are those fields really required? The longer the form the less likely it will get submitted
  • If a user puts in the wrong input is it immediately obvious what went wrong?
  • Did you erase the whole form on failure causing the user to start over?
  • Can a user easily fill out the form by just typing and tabbing to the next field?


An example of bad form.

The federal government uses a site called My Pay. This is by far the craziest process I have ever seen to fill out a form. Recently they asked all their user’s to change log in credentials and what a nightmare.

My Pay Log In

The first thing that happens when you try to login is it opens up a new window in full screen. So if you have a large monitor your now staring at 23″ of login form. Annoying, but not the end of the world.

The complete insanity is you can’t use the keyboard. You have to actually click on each character with a Virtual Keyboard. But lets take it one step further down the crazy path. The letters an numbers are generated in random locations with each attempt.

This is for “security” purposes. I wonder why banks don’t use this practice? There is a notice message up now. They’ve disabled right click function as well … nice.

To all myPay Customers

Although most users have established their new login credentials with no trouble, some users are calling the Central Customer Support Unit for assistance. As a result, customer support is experiencing high call volume, and many customers are waiting on hold longer than usual.

We apologize for any inconvenience this may cause. We are doing everything possible to remedy this situation.


Good Form

Mint has an example of a great sign-up form. As soon as the page loads the the cursor is focused on the first field so you can start typing right away. You can tab to the next field and you’ll notice the current field is clearly highlighted. Furthermore by clicking on the label it brings the field in focus. You can click anywhere after the check-box field and it will toggle the check-box. You can actually fill out the whole form without even touching your mouse.

Usability is increased by validating on the fly. Each time you go to the next field the form will check if you have a valid entry and display the error if there is one or simply OK if there isn’t.

Tags: ,
Posted in For The Client | No Comments »

Suckage To Usage Ratio – The Ultimate Formula

Wednesday, December 30th, 2009

I have tried to explain the idea behind this many times with varying levels of success. Well, the guys at 37 Signals hit the nail on the head with a formula in their post, “What’s the suckage to usage ratio?”

Suckage to usage ratio 101

The 37 signals post uses the Amazon Kindle as an example of how a single feature can have massive suckage but still produce a great product. It sucks to type on a kindle but how often do you actually type on your Kindle? Not often, the kindle is for reading not typing. I only type to search for a book which is probably less than 5% of my use.

Suckage to usage ratio and you

As your building your website there will always be features and pages that need love. Maybe its a bad layout, maybe its bad programming or maybe its a bad idea. If its rarely used how much time should you spend making it perfect? Websites have finite resources (time, budget and manpower), choose their allocation carefully.

Consequences of Suckage

At best failure to understand this principal will lead to late milestones and blow your budget. Worst case scenario it will blow your whole project. Developers can only do so much to keep you on track but in the end we will usually write it the way you want it.

Applying the suckage to usage ratio

Come to think of it you can apply this formula to everything. People, places, things, anything that takes up time and money.

  • Purchase of a home or car
  • A book or movie
  • Where to go for vacation
  • Who your going to vote for
  • Your Relatives
  • Your dog

The key to a full life may very well be in the suckage to usage ratio. Certainly worth applying to your website.

Tags:
Posted in For The Client, Random Thoughts | No Comments »

Form Usability: Returning Users Invalid Input

Thursday, November 19th, 2009

I spend allot of time creating forms. Lots and lots of forms. Most of the development time is spent to validating and cleaning the data of these forms. Normally I do light validation client side with jQuery and then strong validation on the server side with php. Only after the data passes do I actually do something with it, which usually includes cleaning or filtering first.

The Problem

If the submitted form doesn’t pass validation I want to return the data so the user doesn’t have to re-enter all the information. I don’t want to rely on javascript, although I will add it for user convenience as a final step. I also don’t want the form re-submitted if the user refreshes.

The Solution

There are quite a few ways to solve these problems. My standard approach is to post the form to a processing page and store the POST variables in a session. If the data fails the validation I redirect to the original form, pull the submitted data out of the session variables and re-populate the form with an error message.

Pretty straight forward for small contact forms. Once you get to a gigantic form that makes your eyes bleed this becomes cumbersome. On a side not I try to push my clients to the smallest possible forms they can get away with..

I use a postToSession class to make this go a little quicker.

Example Usage

I’ll use three files for my example. Comments are in the source files.

You can see a working demo of these files in action here.

Basically by using this class I can automatically serialize the form value and stuff it into a session variable. Once I unpack it, it cleans itself up.

Lets start with process.php. The form has been submitted. We instantiate the postToSession class and pass a parameter of _formValues to the constructor. This is the name of the session variable we’ll use. 

$session = new postToSession( '_formValues' );

Next we’ll serialize the post values and store them in the session variable. 

$session->serializePost();

Now that you’ve saved the posted values you can work validation to your hearts content and set any error messages according. If no error messages are sent the data is ready to go. In this example I simply set a status message and pass them back to the original page. If an error message is set I’ll send them back with failed in the query string.

Either way they are going back to the index page. On index.php I’ll look for the failed variable in the query string. If its set I can pull all the values back out and re-populate the form. I’ll put the values in a local array called $formValues.

$formValues = $session->unserializePost();

Now I’ll assign the form values to print out to the user. If it $_GET['failed'] isn’t set I know we either passed form validation or its a fresh start. I’ll also check to see if there is a status message set in the $_SESSION variables. If it is I’ll assign it to a local variable for display and clear it.

The End

This is just one of those little tricks I wish someone had shown me when I started. By using a separate page to process and redirecting after processing we can keep the user from submitting multiple times by pressing the refresh button. You could just as easily use the query string to repopulate the form but it looks horrible. I also use this method because many times the form is pre-populated with information like the users profile or other account information. I can use the same template for adding new records as well as editing existing records.

Tags: ,
Posted in php | No Comments »