Jan 14 2009

Free Applications For Web Developers

Every time I sit down at a new computer I find myself installing and using the same applications over and over again. Due to the fact that I use a lot of open source software many of these applications are free.  I have seen lots of other lists regarding free software out there, so I thought I would add in my thoughts on the subject and produce a list of free software that web developers would use. Read the rest of this entry »

Philip Norton
Lead Developer, Research and Development

Nov 12 2008

Web Forms good coding practices

You’ve applied the SIDO principles and got down to a few input fields. Now is time to implement them in a page. There are a few html tags that are not only useful but required to make a decent form.

<fieldset> and <legend>

The fieldset tag is used to group elements of a form logically. Legend display a caption at the top of the fieldset. For example you will group name, tel, address in one fieldset with a legend “Contact details”.

<label>

Label shows information about the field it is linked to. Clicking on a label should put the focus on the relevant field input. To link you label to a specific field use the “for” attribute. At the other end the field should have an attribute “id” with the same value you specified in the “for”.

About the markup

Apart from the tags mentioned above the markup to design a form is up to you. Lists, like ol, ul or dl define well our content plus provide everything you need to do the styling. I would recommend them instead of tables, paragraphs or divs.

Here are some examples of contact forms using lists:

Frexy use a standard unordered list.

Flingmedia use a definition list where labels are in titles and field definitions.

Improve user experience

First keep the styling simple. Forms are about getting the details of the user, not selling your company. If they are thinking about filling the form it means you’ve done the sell bit already.

Specify which are the required fields. Having “required” or a star * is good but big and bold as well is even better. Use <span>, <strong> or <em> and give a different styling so they stand out.

Clearly show where the focus is. Adding a border with a flashy colour on the field you’re on is one of the solutions. You can also change the background colour or even do both. The pseudo-class :focus is rendered on <input> by any good browser but you can use javascript to do it for you as well.

Scrollleiste use the :focus pseudo class on all fields to add a blue border.

Empty fields of their default values. Empty fields of their default values. Seriously. If you put a default value “Name” in the name field, add a little javascript function that will empty the field on focus. Don’t expect the user to clean each field. Something like that should do:

Submition and error handling

Expect your user to make mistakes. Always Check what comes from the form. You can do the checking server side and client side. I would recommend to do  both, the client side so you don’t wait for your server to send your the reply and the server side for the users that don’t use javascript.

You should also display all errors, not just the first one. Highlighting the fields that needs correction is also a good idea.

Envero add a red paragraph under each wrong field.

Bottom line

Forms deserve time and preparation. Too long or not usable could result in loosing potential customers. And you know what that means. I have just summarized what I have seen or used but there much more to experiment and discover about forms and user interactions. If you know of any other method to improve web forms, why not sharing in the comment section?

Benoit Gilloz
Programmer, Research and Development

Nov 11 2008

Using Simple Input Detailed Ouput Principles With Web Forms

If you have a web site then the chances are that there will be a form of some kind on there somewhere. This might be a search box, or a contact form or even a tool. There is one thing that should be followed no matter what sort of form you create and this is the rule of Simple Input Detailed Output, or SIDO for short.

The idea behind SIDO is that you get the user to enter the absolute minimum amount of information when filling out a form, but once complete give them as much information as you can in return. The perfect form should have a single input box, and return at least a page of information from this single starting point.

This is one of the most important things to remember when designing your website, so here are some basic ideas that you should keep in mind when creating a web form using SIDO.

SIDO - Simple Input Detailed Output

SIDO - Simple Input Detailed Output

Ask what is absolutely nessesary

You should only askthe user to fill in what you absolutely need in order for you to do what it is they are trying to do. If you are creating a contact form then you should only need the users name, their email address (so that you can get back to them) and a textbox where they can type a message.

Many websites make the mistake of asking far too much information for the user to enter, most of which is never used or can be gained by other means. The longer the form is the more chance there is that the user will get bored go elsewhere. Many users will simply balk and say something like "do I really have to fill all this in?"

Manditory Vs Non-mantidory

If you want to ask the user more information than absolutely needed then make the fields non-manditory. For example, you might also want to know what country they live in, or how they found your site. Although most users will fill this in anyway you should make it non-manditory unless it is absolutely essential.

Any manditory fields should be labelled clearly, and not just with a different colour as colour blind people will not be able to tell the difference. A little star next to the field label is usually a good way to go, but bold text is also acceptable.

Infer information

To keep your form short you can use information about the user that they don’t have to enter. For example, you can guess at the users location by looking at their IP address, so you don’t have to ask what country they live in.

The biggest mistake I see sites doing here is putting a "Where did you hear about us?" question in their forms that contains 27 choices, 5 of which are a list of different search engines. If the user has found the site through a search engine then any decent analytics package can let you know about what search engine was used, and what keyword they used.

To answer this question, you only really need a list of no more than a few items. These would be Advertising, Press coverage, Another Website and Search Engine. The option of Search Engine should be included for those users who have come to the site via a search engine and want to select something from this list.

Ask later

The goal of your site, especially if it is a shopping cart, is to get that user to convert into a sale, enquiry, comment or whatever you want. Once the user has done this you can follow up by sending emails and asking them any other information you would like to know.

Remember that most information is important to you, not the user.

Avoid multi-page forms

Some websites will hide the fact that the form is long by splitting it across several pages. It can be argued that this keeps the form "above the fold", but the form should be small enough to do this anyway. Splitting up the form into multiple pages will probably annoy your users as they enter a cycle of filling out a page and hoping that this one will be the last page. The more pages you have on your form, the most chance you have of your users bouncing.

Make it interesting

Both the form and the ouput should be interesting to the user. If you have to ask a question that is completely dull or difficult to answer then provide a way of making it interesting. For example, if you have a site that asks the user how many miles they would drive a rental car then try adding in a slider control that they can use to fill in this information. Of course, this has usability issues of its own, but you can put Land's End at one end and John o'Groats at the other and make the slider control into a car to make it seem more obvious.

The output

The output of the users query should be equal to, but preferably more than they entered. For example, search engines only every ask the user for a single search term, but they can return hundreds of pages of information.

Of course, the one exception to this rule is that if you create a contact form, the user will expect the success page to let them know that they have sent the email. Nothing more than a polite message about getting back to them as soon as possible is needed.

There is an exception

The one exception that I can think of with regards SIDO is when creating a form that gives quotes for car insurance or something similar. Here, the user will expect to enter detailed information about their needs in order to get a good result. It is usually a good idea not to mess around with forms that deal with financial information.

There is a lot more to form design and implementation than just SIDO, but it should be a part of any form design that you do. Just ask yourself "do I *really* need that input box?"

Philip Norton
Lead Developer, Research and Development