1.7

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.
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.
Page 383