2020.2

responsive (see "Using Foundation" on page564 and
http://foundation.zurb.com/learn/about.html).
Tip
In the Designer, you can test the responsiveness of a form using the Responsive
Design button at the top right of the workspace.
Some browsers also let you test the responsiveness of a form. In Firefox, for example,
select Developer > Responsive Design to view a form in different sizes.
Usability
Usability defines the ease of use of a form. Is the layout intuitive? Are the form elements easy to
tap on a mobile device? A visually consistent design allows the user to follow the flow while
filling out the form. Below are some key usability aspects to keep in mind when designing
forms.
Provide clear labels. Many modern web sites show labels inside the actual form inputs while
they are empty. This saves space on the form, but once the user has entered data the label is
no longer visible. Show a label at all times to help the user review his input.
Use font sizes that are big enough. On paper, smaller fonts are easier to read than on a web
form. Of course, on a touch screen you can zoom in and out, but a user-friendly form doesn't
force the user to do that.
Provide touch areas that are large enough. COTG forms are used on a mobile device (in the
COTG app). Make sure that the user can easily tap the form elements, hyperlinks and buttons.
The index finger of most adults covers an area that is between 45 and 55 pixels wide. There
should be enough white space between the form inputs so the user won't accidentally put focus
on the wrong element.
Visually group related information. Use headers to mark a section. This makes it easier to
navigate the form. Applying a large font size and background color will make them standout.
You can use Foundation's off-canvas menu and accordeon (collapse) functionality to make it
easier to navigate groups of input fields.
Page 559