GroupServer Form User Interface Guidelines

This document details how form page titles, elements, buttons, help text, and error messages are formatted and presented in the GroupServer system.

Page Title

The title of the page, and the primary heading on the page, should be written in the form verb noun (action object).

Example

  • Reset Password
  • Add Friend
  • Play Thermonuclear War

Elements

All form elements must have an associated label. The label should be a noun.

Example

  • Email Address
  • Message
  • Biography

The label for a required element should start with an asterisk *, and the form-widget division element should use the required class. If there is only one form element on the page, then the asterisk and required class are optional.

Buttons

All buttons must be placed at the bottom of the form. The primary button for a form must be labelled with a verb, which should be taken from the title of the page.

Example

  • Reset
  • Add
  • Play

If there are secondary buttons, they must be labelled with a verb, with the accompanying help text giving further information on the buttons' function. There must not be any buttons to reset the form. See Jakob Nielsen's Alertbox article for more information.

Help Text

Help text should be provided for the entire form, and each form element. The help text for the form should state

  • Why it is necessary to fill out the form,
  • How to fill out the form, and
  • What will happen when the form is submitted. If private information is disclosed after the form is submitted, the page must state what will be disclosed and to whom.

Individual form elements should have some associated help text. This text should describe what information is expected, and how the data is used in the wider the system. The help text may be presented as the element title, if it is short, or with JavaScript popups, if the text is longer.

When a button is referred to in the help text, it must be referred to as the <samp class="button">verb</samp> button. A link is referred to by just the link-text.

Error Messages

Error messages must state what happened, and what the user should do about the error. See the guidelines for the Gnome error alerts.