Field Grouping & Visual appeal - Sign up forms usability

Sign up forms are great way to get started with a service or product or anything. The easier they are, more happier the users are, the quicker the sign ups are.. Today, signup forms are so simple that they require just an email ID and Password to get started. While this works for most, some of the niche cases require additional information. One primary case is - signing up for Trial / Evaluation. For such cases, additional information like Name, Phone etc which are stored as Leads.

Zoho CRM uses a simple sign up form for Enterprise Edition Trial.  It works well for quick sign ups. However, there are few weak points.

1. The user who signs up, does not know what will be his login id here. Is that the NAME field? or EMAIL field?

2. Lack of real-time feedback. Users love a few hints or help or a chance to correct their errors.

3. Too plain is boring too. Some visual appeal could help.

 

 The above image shows the current state of the form. So if you look at that, you will notice #1, #2 and #3. So let's tweak it.

Tweak 1 : Field Grouping with heading. Why? because,  it helps in separating the Login information, from the rest of the content.

Tweak 2 : Natural Language. It helps to speak in natural human language, rather than neutral language.  Makes the user experience lively.

Tweak 3 : Captcha Visual. The existing captcha is shown in a white background, and dark border. Sometimes it resembles like a large TEXTBOX. So making the captcha background a little darker will help the user to identify where he should type the captcha.

Tweak 4 : Right alignment of text in the Field labels. This reduces the white space between the label and form fields. Helps in readability.

Tweak 5: Visually separate the sign up form and  the top header. Lets pull the heading "Enterprise Edition - Sign up ..." to top, and push the visually enhanced separator below.

So  after applying the 4 tweaks along with some minor enhancements we get this:

 

Further enhancements

One major enhancement this form can have is - FEEDBACK. Unless the user fills the entire form to create his account, he will not know if the Email ID login  is available or not. Or, if the NAME is already registered. So as soon as the user fills each field the form should show feedback / result next to the fields. An example shown below.

- UX Assasin

UPDATE:

Just got an email from a friend. He felt that the new form looked bit heavy now. Yes I agree. The form is bit heavy with additional headers and one line text phrases. After a brief discussion over the phone, he asked me if there is any other way to enhance the form, keeping it simple. So here is my experiment.