Most web sites or desktop applications that we use, generally make us fill in a set of data entry forms. These forms show up,either in the registration page of websites or in task oriented dialogs,wizards or message boxes of desktop applications. Depending upon the size of task at hand, these forms can have anything between 3 to 30 fields, and require you to diligently answer every question being asked. Some even span multiple pages.
No wonder an entire industry has emerged, selling just auto form fill products.The thing that has always bothered me, is that only a few companies, realize that form fill-up is still an annoying exercise. The onus is therefore on them to make this task easier, and less time consuming. One of the several ways to do that is to right align form labels.Consider the pictures shown below.
| Figure1 – A Left Aligned Data Entry Form. | Figure2 – A Right Aligned Data Entry Form. |
If you compare the two data entry forms shown above, both look perfectly all-right. The hawks among you would say that, the fields are not grouped, there is no contextual help etc etc. But I intentd to discuss those flaws in a later post. Let’s just concentrate on the pictures shown above.
Even though, both look almost identical, there is a major difference between the two. The one on the right is a right aligned form where as the one on the left is not. It is my argument that “It will take less time and effort to fill up the right aligned form in comparison with the left aligned one”. Here’s why.
| Figure3 – Eye Movement in a Left Aligned Form. Straight Line Pattern | Figure4 – Eye Movement in a Right Aligned Form. Straight Line Pattern |
The pictures above show the eye movement of an user while filling up both the left and right aligned forms. I have taken an ideal case where the user reads each and every form label, before filling up the corresponding textboxes. It is my observation that an user goes through the following eye movement,while filling up the above forms.
- Looks at the left-center of the first text-box. If he knows or can guess the input, he fills it up.This is position “1″ as in the pictures. If not, he studies the form label along side.
- The user shifts his eye towards the left end of the form label. In this case his eye is now on the “F” letter of the “First Name” field. This is position “2″ as in the pictures.
- He reads the label of the “First Name” field, comprehends it, and then goes and shifts his eye back to the “First Name” textbox. This is position “3″.
- He types in ‘George’.
- He then shifts his eye to the center of the next textbox. This is position “4″.
“George Bush’ repeats the same eye movements for rest of the data fields.I call this the Straight Line Pattern.Now guessing eye movement is an extremely complicated task, and what I guess here, is according to me the most common eye movements undertaken by most users.
There is also the Triangular Pattern,which a lot of users tend to use. They begin by reading the label first, and then move on to the textbox alongside. They, then move their eyes diagonally to the next label. Path “2″ to “3″ is this diagonal path. Form navigation in this pattern tends to create small triangles with eye movement, and hence I have given it the name Triangular Pattern.
| Figure5 – Eye Movement in a Left Aligned Form. Triangular Pattern. | Figure6 – Eye Movement in a Right Aligned Form.Triangular Pattern. |
It also quite natural for people to use a combination of both the Straight Line and the Triangular Pattern at the same time, while filling up a single form. In fact, I generally find myself doing the same.Whichever pattern of eye movement you use, my assertion is that, the total amount of eye movement measured in pixels, would always be less while filling up the right aligned form.Let us see why.
In case of the Straight Line Pattern total eye movement is the summation of Paths 1 to 2 + 2 to 3 + 3 to 4.So if you observe Figure3, the paths 1 to 2 and 2 to 3 are always same regardless of the length of the form label. In fact the length of both these paths depend squarely upon the length of the widest label(Day Phone Number:) in the entire form . However for the right aligned form the length of paths 1 to 2 and 2 to 3 depends upon the length of that label only and not the length of the widest label in the entire form.Paths 3 to 4 are same in both the left and right aligned cases. Let’s call the paths 1 to 2 and 2 to 3 as “X”. Let’s call path 3 to 4 as “Y”. Let the number of label,textbox pairs be “n”.
So for the Left Aligned Form the total eye movement amounts to ((X + X) * N) + Y*N or (2X*N) + (Y*N) or N(2X+Y). After removing the Y path for last field the formula comes to
N*2X + (N-1)Y.
For the right aligned form X itself varies as it depends only upon length of each form label and not the widest form label. My guess is that X tends to be between X *1 to X * 0.1.Choosing X *0.5 the above formula comes toN*(2 * X/2) + (N-1)Y or
N*X + (N-1)Y.
Y is same in both cases.
Hence total amount of eye movement in case of the “Right Aligned Form” is roughly half than that of the “Left Aligned Form”.Now for the Triangular Pattern.
Here the total traveled is the summation of the straight lines 1 to 2, 3 to 4 and the diagonal 2 to 3. Let’s the straight lines as “X” and diagonal as “Z”.Now X^2 + Y^2 = Z^2 as the triangle is a right angled one.Hence the formula for the Left Aligned Form comes to
X*N + ((N-1)*(SQRT of( X^2 + Y^2))
For the right aligned form X varies between X*1 to X*0.1. Taking X * 0.5 as the median value.Hence the formula for the Right Aligned Form comes to
(X/2)*N + ((N-1)*(SQRT of( (X/2)^2 + Y^2))
By my rough calculations total amount of eye movement in this case, for the “Right Aligned Form” is roughly 3/4th than that of the “Left Aligned Form”.Of course, my assumptions regarding eye movements could be wrong.
I make no guarantees and hence you should not take any prisoners.Therefore,since there is less eye movement in filling up right aligned forms, it will always take less time and effort.
[...] to the problem. On 1st January 2006, I had written a document in my writely account named “ Why you should right align form labels?” I had used Writely’s insert image feature to first upload and then insert about 10 [...]
[...] to the problem. On 1st January 2006, I had written a document in my writely account named “ Why you should right align form labels?” I had used Writely’s insert image feature to first upload and then insert about 10 [...]