Posted by Gul Khan in Measurement on September 13th, 2008
In the past, as a general rule, I have always suggested that the form labels be right aligned. There were 2 main reasons for this recommendation:
- We noticed that, with the left-aligned labels, some of the users ended up entering the data in the wrong input field (e.g. the input field one line below) due to the long distance between the label and the input field.
- From what we observed, forms with right-align labels were perceived to be visually less cluttered (this was great for forms that would only be used once or very infrequently).
However, recently I have come across some excellent work done by Luke Wroblewski and Matteo Penzo that took my understanding of label alignment to another level. Here’s a summary of what they have reported:
LEFT-ALIGNED LABELS
- Easy to scan through the labels. This is especially useful if the form is long and it is likely to be filled by users unfamiliar with the form (they are more likely to scan through the form to determine what information is required of them).
- Long forms, with many optional input fields, can possibly benefit from left-aligned labels, because users can easily scan what is required to be filled.
- Requires less vertical space.
- Slowest completion rates (this may or may not be a bad thing…it really depends on your objectives).
- Poor association (i.e. long distance) between the label and its corresponding field. This can result in data entry errors. The effect is worsened when some labels are very long.
- Not flexible enough to deal with large changes in label lengths.
RIGHT-ALIGNED LABELS
- Good association between the label and the corresponding field. Among other things, the short distance tends to result in reduced number of data entry errors.
- Requires less vertical space.
- Fast completion times (but still slower than top aligned forms).
- Reduced readability of labels, especially with long forms. This becomes an issue for new users who are unfamiliar with the form. The left rag of the text makes it difficult to scan though the labels to find out what is required of them to complete the form. However, short forms like the one on Facebook, are unlikely to suffer from this problem. Yahoo also shows how to overcome this problem by breaking up the form into clear sections.
- Not flexible enough to deal with large changes in label lengths.
TOP ALIGNED LABELS
- Fastest completion times (because users could capture both the label and the input field with a single eye movement).
- Works well when people are familiar with the data being collected.
- Good for localization. Works well if the form is being translated simply because of the space it allows for variations in label lengths (e.g. German and French words can be twice as long as English).
- Requires the most vertical space.
- Requires sufficient spacing in-between lines.
Which is the best format? Well, that depends on the context.
- How familiar are your users with the form or the individual labels?
- Is the form going to be used frequently? If ‘yes’ then efficiency becomes an important factor. In that case, a top-aligned form could be the way to go. If it is a registration form, which your users will probably only fill in once, then you could consider left-aligned labels (if it is a long form) but personally, I feel a better option would be to use right-aligned labels and break it up into very visually clear sections.
- If localization is an issue and you need to translate the form into many different languages, then top aligned labels gives you the most flexibility.
- Have you got vertical space limitations? Then you may want to avoid top aligned forms.
The best advice I can give is to understand your context and weigh your options. The points above will give a sense of what will work. Use the information to try out different designs. The next step would be to test out different design version by conducting AB Split Testing, Multivariate Testing or Taguchi Testing methods. Of course there are many other testing methods out there. In my opinion, however, these tests are simplest to execute. It is always a good idea to get actual usage data to back up your design ideas. Many times, the results can surprise and give you new insights about what design works best for your users.
Gul Khan |
Measurement |
Posted by Gul Khan in Measurement on August 28th, 2008
Another month and another workshop! The great thing about these workshops is that every month I get to meet new people from different walks of life. It really helps me to see things from many different perspectives.
I have been doing these workshops for the government for about 6 years now and one trend that I have noticed is that the participants are becoming less and less…”gahmen”…if you know what I mean. Of course, I meant that in the nicest possible way 
This last workshop was a real blast. You guys really made it an enjoyable session. Thanks to all the participants, starting with Xinying, Say Fern, Adelyn, Allan, Cheng Kok, Rosita , Mei Hui, Rohaizan, Margaret, Soo Chin, Amirrudin and Jian Ping. Thanks again and do keep in touch!
Gul Khan |
Measurement |
Posted by Gul Khan in Measurement, News on July 23rd, 2008
Finally, I’m getting around to posting the pictures from my Creating Usable Website training workshops which I conduct at PR Academy.
Starting first with my workshop on the 15th of July:
Ranjini, Raihidaya, Amanda, Melanie, that’s me, Chiew Leng, Margaret, Ion, June, Ismiati and Joann.
Here’s the picture for the June 25th Workshop:
Teow Gay, Christina, Anna, Wendy, Vanesa, Shumin, Seck Leng, Wee Chyn, Shamsiah, Kelvin, Kian Pin, Peggy.
Thank you all for your participation in the workshop. I enjoyed both sessions thoroughly and I hope I get a chance to catch up with each and every one of you in the near future
Gul Khan |
Measurement, News |
Posted by Gul Khan in Measurement on June 26th, 2008
“PetrolWatch gives drivers an easy access on the updates of fuel prices for all the 4 fuel stations. It also provides a clear guide for available discount to help drivers made better decision to save money on fuel.”
- Comment from PetrolWatch Visitor
PetrolWatch.com.sg was launched in 2005 and the last design revamp was way back in 2006. It’s due a design facelift and so, we ran an online survey from late May to early June 2008. In that short time we managed to collect over 405 responses. Overall, PW scored 6/10 in the customer satisfaction score and successful task completion rates were around 72%. Not bad for a pro-bono project by Comwerks Interactive. To everyone who participated, the team would like to say a big “thank you”! Your comments were really a big help. It gave the team a huge lift. They are currently working on the new design right now and for all the PetrolWatchers out there…
Here’s a Sneak Preview of the New Design
Your Comments Have Helped Shape The Design
Here are some of the more interesting comments from the survey, good and bad. I’ve given the Editor of Petrolwatch the chance to reply 
PetrolWatch: Unlike before, it is getting increasingly harder to receive tip-offs for impending petrol price spikes/dips. Previously, we also used to be on the fuel companies’ media distribution list. However, with prices moving only northwards, things have suddenly been less chummy. Go figure!
PetrolWatch: Actually, we do indicate the time of price changes accordingly for each brand in our NEWS section. Most of the time, all 4 brands move between 2 - 12 hrs of each other. If you look hard enough, you’ll be able to suss out the usual suspects.
PetrolWatch: Yea, its not easy calling 3000 over carparks everyday y’know? Haha! But seriously, it became quite a logistical challenge to update the prices accurately. I know we disappointed a lot of folks out there but we’re working on getting the system smarter, and more efficient. This is one of the main reasons why we’re gonna be adopting a more “wiki” styled approach for the next version. Watch out for it!
 PetrolWatch: Now we’re talking..*smug smile*
PetrolWatch: Your wish is granted! The new design will have this!
 PetrolWatch: Sounds like a good idea. We’ll definitely consider putting that in as an enhancement once the new site is up and running.
And lastly…
 PetrolWatch: No need la. The new site will be FREE to all. So no more subscriptions fees whatsoever!
Top Ten Things That People Wanted to See in PetrolWatch
- Petrol price comparison in one glance (including trends and credit card discounts)
- Location of petrol stations
- COE prices and price change over time
- Car park information (cheapest car park)
- Tips & tricks for drivers
- Car reviews & car accessory info
- Car wash info (places offering cheap car wash & vacuum services)
- More lively forums and blog (I want to interact with other drivers)
- Traffic info
- No more subscription plans! Make it free for all!
Customer Satisfaction Score (60%)
Overall, Comwerks scored 60 out of 100 in the customer satisfaction scores. We asked people to rate the website on a scale of 1 to 10. This very useful for us because it tells us where we stand right now. We’ll be measuring again after we launch the new design so that we can capture the “BEFORE” & “AFTER” results.
The Major Problem Areas
The next thing we needed to figure out was to identify the major problem areas. The biggest gripes were hard-to-find information, incomplete content and the lack of a search feature.
- The main reason why information was hard to find was because of the fact that you had to sign up to use most of the services in PetrolWatch.
- The second reason was that it was not easy to view the information at a glance. And some really information were practically hidden (e.g. Price Guru). The new designs solves all this.
- Another problem was the fact that the information was out-of-date. The guys at PetrolWatch know this and they have sorted things out to keep things ticking along nicely.
72% of Participants Could Complete the Their Tasks On the Website
Overall, the top 3 tasks that people wanted to perform on on PetrolWatch are:
- Check current petrol prices and price trends
- Check for credit card discounts
- Look for car & petrol related information (e.g. tips on fuel efficiency, car accessories, news)
We asked the visitors if they were able to complete the task that they set out to do and 72% said “YES†while 28% said “NOâ€. This showed the PetrolWatch team that they really needed to focus on getting this basic information out as easily as possible, so that people can quickly compare and get a grip on prices and discounts. It also pointed to a navigation re-design.
Look out for the new PetrolWatch in end July!
Once again, to everyone who participated in the survey, your comments really helped us a lot. The PetrolWatch team are working hard to get the new design launched. We hope you like it
Gul Khan |
Measurement |
