Forms behaving badly

I recently completed a usability study on a bespoke software application. All participants involved in the study preferred to navigate the form input screen using the tab key. Users quickly discovered that the navigation was restricted due to the form “behaving unexpectedly”. When tabbing from one input field to another and attempting to select an item from a drop down menu list, the page reloaded and posted back to the server as the focus moved on to each menu list option. As a result, the system performance was reduced dramatically and users were unable to navigate efficiently to the next input field until the previous “postback” actions were complete.

It would appear that on further inspection that JavaScript “postback” events had been attached to drop down list boxes which produced the unexpected behaviour e.g. when the user tabbed through a menu listbox and used the up–down arrow keys to navigate through the list, a JavaScript “onchange” event fired every time the focus moved onto another item in the list, causing the form to “postback” to the server unintentionally and unnecessarily. As a result the system speed and performance was reduced as was the task efficiency.

If a drop down list selection is required, position a button next to the drop down list so that the ‘”postback” event is only carried out once the item has been selected from the menu list. This will prevent many “postback” actions being sent back to the server every time the focus changes from one list menu item to the next. This will also reduce the response times endured by the user each time the focus moves onto the next list item and as a result increase the task completion and satisfaction rates.