2019.1

Designing a COTG Template
Designing a Capture OnTheGo template is more than adding elements to a Web form. This
topic shares some insights regarding the design process and principles.
Design process
Ideally, the design process consists of the following steps.
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681, about elements that were specially designed for
COTG.
l "Form Elements" on page694, about elements that can be used on COTG forms
and on any other Web form.
l "Using Foundation" on page563, 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" on the next page.
Page 556