Getting the best out of Forms' designer

 

This article is a quick guide to aid in the thinking of best practices for form design. It covers the following topics:

• Getting the best out of forms' designer
• General best practice tips

Consistent Styling

Having a set of forms using consistent styling can add a feeling of quality.

Spend time on the first form of a batch and even have a draft form to act as the template. Use the clipboard facility to copy form sections over to new forms to save time whilst providing that consistent
look.

Make Use of Sections

Sections are useful not only to group fields but also to hold headings.

Sections allow the form to be split into logical areas allowing users to more easily read and complete.

Sections are also useful for visibility rules, with one rule targeting a section, controlling the visibility of
all child fields. Remember to give them sensible field codes to help with identification when reviewing rules and role privileges.

Better Looking Images

Images look much better on a colored background when transparent. GIF's and PNG's support
transparency whereas JPG's do not.

If the image on the form needs to be resized, ensure the aspect ratio is retained: the image properties popup (from the HTML toolbar) allows linking of width & height when resizing.

Center Heading Images

Centering headings cannot be done with the built-in HTML control toolbar, however a bit of HTML
editing can give the desired effect:

Gradient Filled Heading with Overlay Text

With a thin repeating gradient image, the whole header can look like it merges into the form; avoid rounded corners with this technique. Use it as a background color within a table to allow overlaid text:

Field Width Control

The control width is the width of the space to the right of the label and within the confines of the containing section. The smaller the label the greater the control width available. These control widths are absolute pixels, although they will never exceed the section or section cell, they sit in:

• Small = 100px
• Medium = 200px
• Large = 300px
• In Pixels

These are always variable, dependent on the width available; as the screen is resized the fields resize:

• Fill = always 100%
• Percentage

Be aware of the typical screen resolution of a user viewing the form as this could affect how the form looks and could dictate the maximum number of columns that can be used in sections.

'Floating' Sections

Having the sections not hug the edges of the page but still size according to available space is a pleasing effect, especially when using a drop shadow. Give sections a percentage width; for example, 90% and center justify.

Use Headings as Labels

Headings can be used throughout the form as additional labels or prompts to augment field help.
Having them as a separate field allows conditional showing via rules and hooks; ensure they are given a sensible field code.

Color Matching

Getting the colors exactly right can add a touch of class. On the field Background Color, use the color picker RGB Slider to select the correct color exactly. If trying to match a color from another site or image, take a screenshot and load it into an image editor, then use a color picker control to determine the color in use. Enter the same RGB values in Front Office.

Label Positioning and Size

Top aligned labels can be useful, especially where additional entry space is desired:

Right / Left-aligned labels to take space away from the entry area of the field but can have their width and alignment adjusted.

General ‘best practice’ tips

The following tips are from the book Forms that work: Designing Web Forms for Usability by Caroline Jarrett and Gerry Gaffney.

Include a Title That States the Form’s Purpose

It is reassuring for users to see a title that reflects the purpose of the form, although try to avoid titles with the word ‘Form’ in them. Consider the following examples:

Use Typographic Variations with Restraint

You MAY be tempted to use bold, italic, CAPITALS, and underlining to emphasize IMPORTANT INFORMATION. Problem: you can END UP with a sort of VISUAL SOUP where none of the emphasis
works.

Use Short, Affirmative, Active sentences

“Short” sentences are up to 20 words long.

“Affirmative” sentences are positive rather than not negative.

“Active” sentences are phrased in the active voice: it’s clear who is doing what.

Consider the following examples:

Sentence or Title Case for Labels?

Sentence case is more legible than title case:

Choosing Controls (i.e., text box versus list-box / radio button)

Think about the end user’s expectations of how the controls work:

• If typing the answer is more natural, then go for a type-in text box.
• If users are likely to make mistakes when typing, only then opt for a list-box or radio buttons.
• If there are a lot of options, using a list-box may be best, but could you redesign the question instead?
• If there are a few set options, a radio button field presents well.
• If the users are able to select more than one option, check boxes are likely to be the best control.
• If the options all look alike, it may be better to let the requester type into a text box instead.

Serif or Sans Serif Font?

Serif fonts are designed for print; they are normally more decorative and struggle to be clear on a ‘low pixel’ environment. Verdana was specifically designed to present well in a ‘low pixel’ environment, with more even features that are legible on a computer screen. Verdana is the default font used throughout Front Office.