2021.2

Table Of Contents
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.
Provide feedback. Show what input data is expected, clearly identify which fields are required
and show errors when the entered data doesn’t meet the required format.
Capture OnTheGo form characteristics
Reusable forms
Capture OnTheGo forms can be single-use or reusable. This doesn't depend on the design
(although, of course, this should be reflected in the design). What makes a form reusable is a
setting in the Output to Capture OnTheGo plugin in Workflow; see Output to CaptureOnTheGo.
In the Capture OnTheGo app a reusable form is called a 'template'.
Page 581