Good form design – ELMER

I’m a huge fan of keeping things simple, usable and accessible when it comes to developing stuff (if possible).

A cool source of ideas for building usable and accessible “forms” is the ELMER guidelines. These guidelines are aimed at those building public sector forms, but I think the guidelines are good for anyone having to build forms.

Here’s a little from the website:

“Simplification of public forms is important to improve communication between the users and the public sector. The proceeding transition to electronic reporting may be an important simplification measure for the respondents, but only if the Internet-based solutions are felt to be more user friendly than the old paper versions. By applying good pedagogical principles, electronic forms may also ensure a better understanding of the task, better control of the data before submission, and by that even better response quality and more efficient processing by the relevant authority.”

The guidelines aren’t that tough to read and they make a lot of sense. The forms that we ended up with when building against these guidelines just flowed well and felt much better than the original prototypes we’d built.

Here’s some of the “stand-out” ideas I took from the guidelines, which helped to build much better forms with greater usability and accessibility. I must also add that these excerpts below were taken from the guidelines about a year ago (I know…. my draft list of posts is too large). I’ve checked a few of them against the current guidelines and they are still the same, but some might have changed in the last year. Another document to re-read :)

“The page order in forms must be locked where:

   1) the order is significant with regard to response interpretation and quality, or
   2) the order will depend on responses given on previous pages.”

“User-requested help must appear when the user clicks on a standardised help icon in
connection with a question. The user can make the help text disappear from the
screen by clicking again on the same symbol, and must be replaced by a different text
if the user clicks on the icon connected to a different question”

“In forms where a significant number of questions are irrelevant for specific form filler
groups , or where different form filler groups shall complete significantly different

sets of questions, different tracks must be developed. Each individual user shall be

directed to the relevant track. Several tracks may consist of identical pages/question

sequences”

“Both labels and input fields for response dependent questions must be greyed on the
form pages and only be opened for completion if previous answers indicate that they
are relevant”

“Each individual page should be delimited with a view to avoid an unreasonably long
download time. The download time is affected by such factors as graphics use, the
amount and type of controls and the number of fields.”

“If there are several interim sums which are not simultaneously visible to the user, a
separate summations group should be created at the bottom of the page. If the interim

sums are located on different pages, they should be transferred to a summary page”

“Fonts, font sizes, colours and other graphic elements, must be used consistently and
uniformly in all forms issued by the same inquirer. The forms must differentiate

clearly between various types of elements (headings, category headings, labels, error

messages and warnings, etc.). As a general rule, sans serif fonts should be used and

colours should provide good contrast.”

Links to information that is irrelevant to the form completion should be avoided. “
“The readability of help texts should be increased through use of typographic means.
Except for very brief phrases, the texts should be broken into a series of easily read-

able chunks with highlighted headings and keywords.”

“In cases of incorrect completion of individual fields, an error message must appear
automatically as soon as possible after the error has occurred. The text must appear in
the information area and the relevant field must be clearly marked. Messages presented
in a separate window (dialogue boxes or pop-ups) must not be used”

 

As you can see, there are some interesting ideas that might work for you.

Tags: , , ,

Comments are closed.