|
Designing a COTG TemplateDesigning 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 processIdeally, the design process consists of the following steps.
Form designPaper 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.). ![]() 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. UsabilityUsability 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. |
|