#forms usability

HTML Form is a conversation among user and website, to build relationship with the help of appearance that ultimately increases the form submission rate without confusing users. While we see some websites that are aesthetically good but fail to build that relationship, specifically the Flat design websites, for instance have a look at CSSWinner.com, every second website lack usability in forms.

Flat design is not bad itself (nor does any other trend), rather it looks more effective as focus is over content with the help of color scheme, space, typefaces, rich user experience etc, but sometime creativity dominates the usability in Forms. There are 6 basic ways to make your Flat Forms friendly for your users.

Avoid confusions:

A common issue with flat designs is to place labels inside element, that disappears when user starts typing, have a look at following form and guess which field is causing the validation error; 

Figure 1: Missing labels with generic validation message, adds confusion

Were you able to identify which input has caused the validation error?

Avoid vertical length:

Another common issue is displaying all the validation messages at once on top of the form, it will also increase the vertical length. EyeTracking tests recommend displaying validation message close to input field.

Figure 2: Form displaying all validation errors on top of the form

Simplicity with usability:

User experience is a journey not a moment. Designing & developing software takes lot of effort & time, we try our level best to provide pleasant experience to our users at every step, but it seems quite unjustifiable to prompt user with a popup (that requires action too) for a simple task of providing information as to what happened when he/she clicked that form submit button;

Figure 3: Validation message as javascript alert

These and other common issues can be fixed by applying proven usability practices with a little or no tweak.

Usability in Flat Forms:

The five components of a form (label, element, validation message, action, help/hint) if use with all the usability recommendations and creative design, could drastically enhance user experience.

1) Label Placement

There is a debate among usability experts regarding the placement of label inline or top of element. To me inline labels saves space and form do not grow vertically, animating label's move to top or bottom (or anywhere you like) will keep the label there even if user provided some wrong input.

Figure 4: Interactive Inline Labels are usable

2) Element Styling

HTML Form's default element styling will not work here. We need intelligent & creative ways to render input. Search form at LiveLovely.com has no labels for "Pets Allowed" and "Listing having images" elements, yet they are conveying the purpose.

Figure 5: Smart & Usable Form Elements

3) Validation Messages:

Whether you do inline validations or upon submit, they must be styled with usability & user experience in mind. The placement should be near the element, so that user would not need to scroll away from focused field to know the reason of failure. There seems one of two approaches better, either display validation message near the element to show some tooltip.

Figure 6: Validation message at the bottom of element

4) Actions

The form's call to action is the submit button. Instead of displaying primary action as link, its good practice to make it button instead. Also element size long submit buttons are less usable than, comparatively shorter buttons. Have a look of two versions of a same form and decide for yourself, which seems better.

Figure 7: Comparison of Primary Actions

5) Help

Usually no hint or help is required for common (and small) forms like login, signup, contact, newsletter subscription etc, but if it is complex and long, some elements might need little more explanation. On demand help text (hovering over help icon or when element gets focus) as a tooltip, is good as it wont require fixed place for visibility. Alternatively, element label could be a sentence (if not hiding upon key down event) as help or hint. Third possible way is to have it as lighter text near element.

6) Interactions