Making Your Forms Even More User-Friendly
Restrict input to numbers
Don’t Expect Too Much
Something that people generally despise is being forced to do work where they shouldn’t have to. People shouldn’t have to know the product id of the item they want to buy, so don’t expect them to. If you require some obscure and unique ID as an important variable in your application – whether it’s a product, an employee, or anything else – don’t expect them to manually input it. Give them a select menu of all possible items to choose from. When they choose the item they want, the ID can be determined behind the scenes, preferably in the ‘value’ attribute of the selected option.
Though this may sound simple, it is VERY important! We as the developer may know that each item has an ID assigned to it, and we might even know a few IDs offhand. But if you have an ‘edit’ screen that asks the user for the ID of the product they wish to modify, you will find that users simply do not care enough to know that information. And they will be annoyed by you asking them to. So just let them choose!
Now if you start getting into large lists, people will start to get annoyed yet again. After all, who wants to scroll for eternity for one item. So you have a few options to make their choosing experience much nicer. And conveniently, I’ve written articles on how to do both!
The first method is a fun, ’suggest as you type’ style of functionality you can add to your form. This will prevent the user from having to scroll at all. They just type in a few letters of what they’re looking for, and our friend JavaScript helps them locate their desired item. You can find the tutorial for this here: http://www.devarticles.com/c/a/JavaScript/Suggest-As-You-Type/
The other user-friendly method is to break the list out into groups. Break products into categories (Electronics, Clothing, etc) or employees into divisions. You can then use JavaScript to automatically populate a second, more refined menu, with only the choices that belong to the option they’re chosen from the first menu. A tutorial for this can be found here: [insert link]
There are a few circumstances where this wouldn’t apply, where the users need to be able to ender in unique IDs. One example is in an inventory application, where you should be able to type in a precise serial # to find a product. However for the most part, don’t expect people to think too much, just give them choice.
Prevent Annoying Error Messages
You and I spend a good deal of time ensuring that people have entered the proper data types into the fields of a form. In fact, we even think of pleasant error messages, such as: “Excuse me Sir/Madam, you seem to have entered an incorrect date. Please be so kind as to enter the date in this format…†You see, we know that we need the date to be entered as DD/MM/YYYY, and we’ve prevented any programming errors by telling them so politely. But it will still be bothersome for the user to now go back, and change the field from ‘tomorrow’ to the proper format.
So how do we ensure that they’re typing in data as we need it, before they even try to submit the form? Well, if you want, you could always just stand behind them and watch over their shoulder, even slap their hands if they mistype. You can call me crazy, but I’d much prefer a programmatic solution.
In the case of date fields, it’s very simple to ensure proper input. You just don’t let them type anything in! It’s that simple, you just add the ‘readonly’ attribute to the input field. Of course they need some method to enter the date, which we provide ever so graciously with a JavaScript calendar. The reason for this is that you can configure in your code exactly how you want the date to be entered, and the calendar will consistently comply. Instead of wasting time creating your own calendar, you can download this slick tool: http://www.softcomplex.com/products/tigra_calendar/
Another area you would want to monitor input is with number fields. Whether currency, phone numbers, whatever, all you want in that field are the integers between 0-9, and maybe a period. You can find a quick tool to limit the input to integers here: http://www.devarticles.com/c/a/JavaScript/Universal-Form-Validation/3/
Conclusion
The techniques I explained in this article are not hard and fast rules. They are the results of years of feedback, both positive and negative. No doubt as you receive criticism from people you will find creative ways to make your forms more user-friendly. Feel free to fire me an email, or post your suggestion to the forum!