Forming a form part four – Usability

No Comments

form usabilityWe’re nearing the end of our series of blog posts discussing various aspects of designing and building web forms. This penultimate post briefly deals with accessibility and validation because a good form is an accesible one and validation because, well, validation comes last!

So without further ado, lets get number four read and onto number five!

Accessibility

People with vision and motions disabilities tend to use their keyboard to navigate a website more than the mouse so your form must be able to handle this. For example, have you ever used the tab key while filling out a form and rather than going smoothly through it you jump from one field to one maybe three fields from where you want to be? This is caused by badly written code (missing or out of sync tabindex). Imagine if you couldn’t use the mouse and had to rely on the keyboard. Wouldn’t it be frustrating to be unable to get to the correct form field? How many times would you try before exiting the page/sale?

There are HTML tags that can aid the accessibility of a form by ensuring that it is written in as linear and legibleĀ  a way as possible (see below).

<fieldset>
<label accesskey="L" for="loginname">Login</label>
<input id="loginname" type="text" maxlength="255" value="Enter login" />
<label for="loginpassword">Password</label>
<input id="loginpassword" type="password" maxlength="8" value="" />
<input id="submitbutton" class="button" type="submit" value="Submit" />
</fieldset>

While we have only touched on the issue of accessibility we wanted to highlight that it is a consideration during your form creation process. Ignoring accessibility could be eliminating huge customer base. A great accessible form resource including code examples can be found on this web usability website.

Validation

Form validation can appear irritating to users at times but it’s there for everyone’s good! Imagine signing up to a newsletter and putting in a mis-formed email address such as me@hotmail.co. It would result in no newsletter appearing, an annoyed user and potentially a bad impression of the company.

Form validation really is a necessary evil (going so far as hindering spam form submits). I do think form validation should be kept to a minimum though. For example, let the user choose how they want to be contacted, don’t force them into leaving a phone number when you can initiate contact with an e-mail. Also, don’t insist on users leaving too much identifying personal information such as date of birth, name address etc all in the same form. It makes users very nervous when they have to leave enough personal information for you to apply for a mortgage in their name when all they want is a call back!

Clean validation is a must, highlighting the offending textarea lets the user quickly identify what they need to fix rather than scrolling through the form searching (see below)

Form validation

Finally, make sure the validation works! I was trying to sign up to a site the other day and it just would not accept my postcode, no matter how I formed it, with and without spaces…nope, it just wasn’t accepting it, needless to say, I am not signed up to the website!

This is author biographical info, that can be used to tell more about you, your iterests, background and experience. You can change it on Admin > Users > Your Profile > Biographical Info page."

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

Fields marked with an * are required

More from our blog

See all posts