2019.1

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
on how users enter information on a mobile device and how they expect the form to look and
behave.
Tip
If the COTG Form replaces a paper form, it can be tempting to stick to the original layout for the
sake of recognizability. Don't fall into that trap. In the end, the users - customers and employees -
will be happier with a user-friendly form that adapts to different screen sizes and looks like it was
designed for the web.
Most design guidelines for web forms apply to COTG forms as well. Two key concepts are
responsive design and usability.
Responsive design
Responsive Design is "an approach to web design aimed at crafting sites to provide an optimal
viewing and interaction experience - easy reading and navigation with a minimum of resizing,
panning, and scrolling — across a wide range of devices". (Source: Wikipedia.).
With the COTG app for Android or iOS, COTG forms can be viewed on a wide variety of mobile
devices, with different screen sizes. A responsive design will adapt to the size and orientation
of the screen, to avoid navigation tasks like zooming in or out and scrolling horizontally. The
layout may change to optimize the user experience on that device: information that is shown
side by side on a larger tablet may be stacked when viewed on a smaller device.
It is complicated and time consuming to create a responsive design all by yourself. Therefore it
is advisable to start creating a COTG form with a COTG Template Wizard (see "Capture
OnTheGo template wizards" on page559). All Web and COTG Template Wizards in Connect
Designer make use of the Zurb Foundation front-end framework to make the templates
responsive (see "Using Foundation" on page563 and
http://foundation.zurb.com/learn/about.html).
Page 557