2021.1

1. Gathering information. It is often tempting to skip this step, especially when a Capture
OnTheGo form replaces a paper form, but the research that you do to find out what the
company actually needs will prove to be well worth your time. Creating specifications up
front prevents discussions, reduces rework and therefore saves time.
2. Listing the input fields that are needed, their type, and possible input constraints. Think
of how the information should be visually grouped. To get an overview of all the elements
and features that can be used in a Capture OnTheGo form, check out the following pages:
l "COTG Elements" on page700, about elements that were specially designed for
COTG.
l "Form Elements" on page712, about elements that can be used on COTG forms
and on any other Web form.
l "Using Foundation" on page577, about elements and features that come with the
Foundation framework that is added automatically by COTG template wizards.
l After creating a Capture OnTheGo template using a wizard, you can find more
ready-made elements in the Snippets folder on the Resources pane.
3. Creating mockups. A mockup or wire frame will help you to layout the form and allows
your customer to provide feedback early in the project. This will save you a lot of time:
typically it is easier to change the sketch than to rework the code. In addition, mockups
provide a way to do usability testing before actually creating the form.
Note that mobile devices come in various sizes. It is important to adapt the form design to
these screen sizes. There are various free and commercial mockup applications (both
online and offline), but a sketch on paper will do too. Check out the free mockup
templates from www.interfacesketch.com. Their templates are designed to help you
sketch your designs for different devices on paper. Sketching tools and related
techniques can be found on Zurb's website: Sharpies, Shaders and Highlighters.
4. Creating the form. Create the form in accordance with web design principles; see "Form
design" below.
5. Testing the form. Even if you did proper research and showed a mockup, customers or
users will likely come up with new requirements once they've seen the initial live version.
Be prepared and plan for this, too.
Form design
Paper forms and web forms are very different in nature. For example, paper forms have a fixed
size: the size of the paper they are printed on. Web forms can be viewed on screens with
different sizes, in portrait or landscape format. Paper forms are filled out with a pen, while web
forms are filled out using one's fingers or a stylus. Good form design requires an understanding
Page 570