Form Design

What is a form? (3)

A series of questions that use field entries to gather data (e.g. contact details, customer feelings about a purchase, satisfaction surveys or event registration); one aspect is the design and placement of boxes and buttons, including formatting and styling; the other is establishing what happens when someone submits the form

What are the types of form? (8)

Contact; sign-up; order; event registration; donation; feedback; survey; booking

What is a question protocol? (4)

Only add a question if you know why you need the information; what you will do with it; which users need to give it; how you will check it is accurate

Why is a question protocol different from the form itself? (2)

It is about how you will use the answers; it comes first, then you decide how to ask the questions

Why do good questions matter? (3)

The right question types let users share the right data; well-designed questions and instructions minimise frustration because users know what to provide and how; field types, context, wording and validation all affect the user's experience

What are the two general types of question? (2)

Open questions (text fields where the user types what they want); choice questions (the user picks from options you provide)

What are the open question types? (5)

Short text; long text; email; URL; numbers

What are the guidelines for open questions? (3)

Make the field size proportional to the amount of text expected; use validation such as word, character and value limits to keep data clean; tell users the limits so they save time and frustration

What are the choice question types? (7)

Radio buttons; checkboxes; dropdown; multi-select dropdown; date; date and time; time

Why use choice questions? (3)

They give structured data from a predetermined set of options; users don't have to imagine possible answers; users don't spend time typing

What is the template for choosing a field type for a choice question? (3)

Select one option: radio buttons, dropdown or single choice select list; select multiple options: checkboxes or multiple choice select list; very long option list: dropdown to save space

Why are radio buttons and checkboxes the fastest for users? (2)

Users can see all choices at once; no extra clicks are required

What does the form tag do? (4)

Encloses every HTML form with an opening and closing tag; the boxes and buttons are made by other tags but would not appear without it; also holds information telling the browser how to process the form; if a form does not appear, check both tags are present

What are the rules for multiple forms on a page? (2)

You can put more than one form on a page; you cannot nest forms

What are names and values in a form? (3)

Each box (piece of information) is given a name by the page designer; the reader's entry becomes the value for that name; e.g. a box named "phone" gets the reader's phone number as its value

What is the template for a form element in HTML? (3)

Start with the form element and its action and method attributes; add input elements, each with a type and a name; close the form element

What is the template for an input tag? (3)

Input element with a type attribute (text, password, radio, etc.); a name attribute (and id for labels); optional extras such as value or minlength

What are the button types in HTML? (4)

submit (sends the form, with an optional value for the label); reset (clears the form); button (runs JavaScript events, value is compulsory for input buttons); the button element with type="button"

What input types are available? (7)

Text and password; email, url and tel; number and range; date, time, month and week; checkbox and radio; file and color; submit, reset, button and search

What are the textarea, radio button and checkbox templates? (3)

textarea element with a name for multi-line text; input with type radio, a shared name and a value for each choice; input with type checkbox, a name and a value for each option

What are the HTML5 text field input types? (6)

date; time; email; url; number; tel

What is the label element? (3)

Describes a form control; linked to the input using the for attribute matching the input's id; also helps screen readers

What is the template for a label? (2)

A label element with for set to the input's id; an input with a matching id

What is the fieldset element? (2)

Groups form controls and labels into organised sections; makes long forms easier to scan

What is the legend element? (2)

Provides a caption or heading for a fieldset; wraps text describing the controls inside the fieldset

What is the template for a grouped section of a form? (3)

A fieldset element; a legend element giving the group heading; labels and inputs inside the fieldset

What is the disabled attribute? (2)

A Boolean attribute that turns off a control; the control is not available for interaction or input

What is the placeholder attribute? (2)

Provides a hint or tip inside an input or textarea; disappears once the control is clicked in or gains focus

What are the top 10 form recommendations? (10)

Keep it short; visually group related labels and fields; use a single column layout; use logical sequencing; avoid placeholder text; match fields to the type and size of input; distinguish optional and required fields; explain input and formatting requirements; avoid reset and clear buttons; provide highly visible and specific error messages

Why should a form be kept short? (3)

Removing unnecessary fields takes more time but reduces user effort; completion rates increase; every field cut increases the conversion rate

Which fields should be removed from a form? (3)

Fields whose information can be derived another way; fields whose information can be collected more conveniently later; fields that can simply be omitted

How should related labels and fields be grouped? (4)

Place labels close to the fields they describe; label above the field for mobile and shorter desktop forms; label beside the field for extremely long desktop forms; avoid ambiguous spacing and use the label attribute for screen readers

What should you do if a form asks about two topics? (2)

Section it into two separate groups of fields; tag the groups for screen readers

Why use a single column layout? (3)

Multiple columns interrupt vertical momentum; users stay in the flow without reorienting; use a separate row for each field

What is the exception to the single column rule? (2)

Short or logically related fields can share a row; e.g. city, county and postcode

What does logical sequencing involve? (4)

Use standard sequences for fields (e.g. card number, expiry date, security code); use standard sequences for value choices (e.g. standard, 2-day, 1-day shipping); list the most common values first; test Tab-key navigation follows the field order

Why avoid placeholder text? (2)

Designers like it because it reduces clutter; it causes many usability problems and is best avoided

What does matching fields to the type and size of input involve? (3)

Avoid dropdowns for only 2 or 3 options; show them as radio buttons (a single click or tap); make text fields about the size of the expected input

How should optional and required fields be handled? (3)

Eliminate as many optional fields as possible; limit the form to only 1 or 2 optional fields; clearly label optional fields so users don't find out by trial and error

How should input and formatting requirements be handled? (3)

State the exact instructions for any required format or input type; don't make users guess requirements such as passwords; eliminate arbitrary formatting rules where possible (e.g. brackets in phone numbers)

Why avoid Reset and Clear buttons? (3)

The risk of accidental deletion outweighs the unlikely need to start over; for very sensitive input (e.g. financial), provide a Cancel button instead; make Cancel much less visually prominent than Submit

How should error messages be designed? (4)

Make them highly visible and specific; signal errors with more than colour alone (outline the field, use red text and a heavier font); preserve the erroneous input so users can correct it; include a specific explanation of the problem

What is the template for an error message? (3)

Show where the error is (highlight the field); say what is wrong in plain words; say how to fix it

What are the key summary points for form design? (4)

Good form design is critical to a good user experience; start by asking the right questions; select the right controls; follow best practice in form design