This blog is best viewed on Mozilla Firefox web browser - www.mozilla.com

Friday, October 17, 2008

effective registration: part 3

Usability tips for effective registration forms

Always differentiate mandatory fields from optional fields with an asterisk (*) as users may assume they have to enter all fields or fill in only the fields they feel like only to get an error message to fill the required fields, which can be frustrating both ways.

Make the user's email address the user name for logging in to the site as it is easier to remember. You must send login details to their personal email address as soon as the registration is submitted.

If a password needs to be validated by the use of characters or length mention it clearly. Ask the user to repeat their password to ensure they have remembered, ask for a security check for forgotten passwords.

When uploading external files such as images, videos or documents, state the format required and size limit.

For information fields that are not necessarily as straightforward as the user's name, date of birth, country, etc. but mandatory nonetheless, or considered miscellaneous optional items, state briefly what it is for.

Do not pre-select opt-ins for email updates and promotions as it can be easily overlooked by the user and would be an annoyance if they receive emails from the site which they would consider spam.

Finally, always say ‘thank you for your registration’…

Thursday, October 9, 2008

effective registration: part 2

How long or short should a registration form be?

The business objective is to generate user registrations, not to throw them off. However, if a form is confusing, complex or too long, the lower the chances are of completion. Do not ask for too much information on the initial landing screen as it will de-motivate users to fill the form. Making the form fast and simple ensures a higher conversion rate.

Unnecessary fields that are not directly related to the product or service the site or business is trying to offer should not be included. For instance, you need not require the P.O. Box or physical address from a user for merely participating in a social networking site, or ask for credit card details if a user only wishes to open a gift registry on an e-commerce site.

On another note, if additional information will eventually be required at a later stage, as part of the user profile on a social networking site, or at the check-out process on an e-commerce site, you may divide the form into steps or stages.

This means, you keep the most important information on the first screen so as not to overwhelm the user with too many fields, and then guide them through the next steps with a 'skip' button for optional pages. Then, allow users to enter additional information later after their account has been created.

Section headings, consistency and white space

When a form runs continuously, users may consider it a tedious task rather than a process that will benefit them in the end. Adding section headings for fields with a logical grouping creates a visual break in the form preventing information overload.

It is also important to distinguish section headings from field labels, from the page title and from instructional text by use of different text styles or font sizes.

All fields should follow a strict alignment in the entire form, if field labels are right aligned with the input field to the left, it should follow the same trend throughout so that it follows a consistent flow. Also, all input fields, where applicable, should relatively have a uniformed width creating a visual symmetry reducing clutter.

The provision of white space ensures that the layout clean and comprehensible, making it more efficient and user-friendly as it becomes easier to read with less eye strain.

Drop-downs, radio buttons and checkboxes

Drop-downs are not usually recommended for a very long list of choices that can reach hundreds in value as the user would need to scroll several times to view them all. An alternative would be to have a text field which auto-suggests a selection when a user types, or to keep the list in alphabetical order for easier browsing, or replace the drop-down completely with an open text field if the information required is straightforward like a date or year, but be careful to validate the form so the user enters in the correct format.

Radio buttons are essential for 'yes or no', or 'this or that' options, which can replace a drop-down if the selections are limited to a maximum of 3. This aids usability as it saves the user an extra click through a drop-down as the radio button options are available upfront.

Checkboxes are often used to present multiple-selection choices, whereby the user can check '1, 2, and 5', and may replace a radio button at the end of the page where you find 'I agree to the terms & conditions' or 'I would like to receive email updates' so that users need only to read the instruction once without 'yes or no' variations especially when the text is a full sentence.

Finally, it is best not to pre-select a choice in the drop-downs, radio buttons and checkboxes as it would annoy the user to have to un-select or choose another, amounting to more clicks if the pre-selected choice does not apply to them. It is only acceptable in case of language or country, whereby the site can pre-define the selection by detecting the user's computer IP address.

Thursday, October 2, 2008

effective registration: part 1

Brief but concise form introduction

When a user decides to fill out a registration form it is important that an introduction to the form should appear directly below the page title that will give an explanation and global instructions to the user in a conversational or friendly manner. The introduction should be brief and unify the purpose of the form without losing the interest of the users with lengthy statements.

If there is other instructional text related to individual form fields, it should appear beside the respective fields and not the introduction.

Keep most important fields above the fold

Users click on the 'register' button with a goal in mind, which is to 'register', so a long explanation above the form serves as an obstacle to reach that goal. The user will either skip the text and possibly miss out on important instructions, or just leave.

Visibility is key. The introduction and most of the important form fields should appear above the fold in the web browser so users immediately find where they can register. Other necessary information such as disclaimers, terms & conditions, and post-registration confirmation or instruction should be placed at the end of the form.

User benefits, incentives and nice-to-know information

A list of benefits and incentives that may be granted to users once they have created an account is a good way of encouraging users to register. This can be communicated not only by a text summary but also coupled with a graphic or image or a testimonial from a satisfied user, which is visually appealing so as to instill more interest.