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.
- 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.
- 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:
- COTG Elements, about elements that were specially designed for COTG.
- Form Elements, about elements that can be used on COTG forms and on any other Web form.
- Using Foundation, about elements and features that come with the Foundation framework that is added automatically by COTG Template wizards.
- After creating a Capture OnTheGo template using a wizard, you can find more ready-made elements in the Snippets folder on the Resources pane.
- 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. - Creating the form. Create the form in accordance with web design principles; see Form design.
- 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.
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). 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 and http://foundation.zurb.com/learn/about.html).
In the Designer, you can test the responsiveness of a form using the Responsive Design button at the top right of the workspace.Some browsers also let you test the responsiveness of a form. In Firefox, for example, select Developer > Responsive Design to view a form in different sizes.
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.
Visually 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.