Blogged thoughts, is our web blog. Expect views, opinion, rants and tirades about everything and anything 

Receiving user input via forms is a fundamental part of many web applications (and indeed desktop based systems too) so it is vitally important that they are as user friendly as possible. In this post I’ll present some short paragraphs for improving form usability.

Use HTML tables to layout your forms
Don’t mind what the standards web guru says about using CSS instead of HTML tables. The reality of the situation is that HTML tables are the most suitable method to layout your forms in a user friendly manner (without a serious amount of work anyhow). The most common layout is the standard two column approach. This approach sees the labels for the various input elements in the left column and then the input elements themselves in the right column.

Display error messages on the form itself
Unless space absolutely prohibits it you should display any error messages associated with user input on the actual form page itself as opposed to using a popup Javascript alert box. The problem with alert boxes is that a user must click them away to continue filling in the form. When the error alert box is gone from view so too is the useful error messages which it contained, this means that the user must now work from memory when trying to fix input errors. The ideal situation is not only to have error messages on the form itself but to have the individual errors appear next to the associated input elements.

Use a progress indicator for forms spanning multiple pages
Including some kind of progress indicator on your form improves the user experience as users like to know where they are in any form filling process, this is particularly true if an activity requires multiple forms to get all the data it needs. An example of this could be booking an airline ticket or making a hotel reservation which typically require three or four screens to complete. Implementing a progress indicator for your form could be easy as altering your form navigation button text from something like ‘Next’ or ‘Proceed’ to ‘Go to Step 2 (of 4)’ or ‘Proceed to Step 2 (of 4)’. Alternatively you could create a dedicated header or sidebar table to illustrate progress in a more defined manner.

Micellanous
Micellanous items include using the tabindex property to define the correct logical ordering of textboxes, dropdowns etc. so the user can quickly pass the focus to the next input element, setting the default focus of a form to the element a user would normally expect to fill in first, defining access keys for keyboard access to fields. Additionally remember to go easy on CAPTCHA elements designed to stop spam bots as you will find they often stop legitimate users too.

Obviously the above information is not an in depth look at form usability, however the web has a tonne of information about this very important topic. One favourite article of mine which covers the topic of form layout (dealt with briefly above) is called Web Application Form Design and is written by Luke Wroblewski. Incidentally Luke is expected to release his web form design dedicated book in early 2008. As far as I’m aware this will be the only publication on the market dealing specifically with web form design and usability. Based on the quality of the information on his site I have to admit I’m really looking forward to it.

Perhaps old news in the blogosphere at this stage, but I wanted to give Perlico a mention for their recent viral marketing campaign involving a duck quacking on their IVR (Interactive Voice Response) telephone system. Yes a duck quacking, you read it correctly. Ring 1890 88 66 07 and wait to hear option three. Before any of the options are read out you do of course have to listen to their marketing lines about how much cheaper than Eircom they are.

The marketing team at Perlico obviously knew that people would talk (and write) about this because it’s a bit off the wall however I’m not sure they were expecting over 70,000 calls to their sales number in just over three days. The 70,000 figure comes from Mark Cleary, Perlicos COO. Cleary says “Since this launch, based on the volumes of calls, the campaign has been a phenomenal success. In just over 3 days we have received over 70,000 calls and added a significant number of new customers as a result which make this one of the most successful viral campaigns in Ireland.”

Cleary also says “This campaign started off entirely by word of mouth which helps to demonstrate the power of the Internet and Email as a viral marketing approach. The duck quacking IVR has now been featured on several radio stations across the country and the call volumes continue to increase by the hour”

Of course we all knew the power of the Internet and Email as viral marketing approaches, right? right? Fair play to Perlico, their marketing team deserve a raise for this.

You may have noticed that I’ve recently been making use of this blogs XML feed to a) display links/descriptions to my three most recent posts on the akamarketing.com homepage and b) display links to my ten most recent posts in the left navigation bar of most of my sites pages. This was done to try and funnel more site visitors to the blog because that’s where I’m doing most of my updates and although it’s early days it seems to be working.

It’s actually quite easy to do, I basically just parsed the standard Wordpress XML feed with DOMXML and then outputted the specific information I needed. The code for generating links to my last ten posts I used on the left nav bar is available at: http://www.akamarketing.com/wordpress-links.php.txt with the running version at http://www.akamarketing.com/wordpress-links.php

By examining the structure of a Wordpress feed (mine is located at http://www.akamarketing.com/blog/feed) you’ll see that the details of each post is stored in the item element. By getting and looping through all the item elements it is possible to access specific information such as post link, title and description. In this case I’ve used the description information for the title attribute of the link meaning that when someone mouses over a certain link a snippet from the corresponding post will appear on screen.  

Feel free to use my code, check if you have DOMXML support first of course.