9.1 Guidelines For Good Form Design

Here are some tips on how to plan a form design. Do you have some good tips to share? Email us at support@zegeba.com.

General guidelines for good form design

• Create a good layout
  Use empty space between sections, place elements and sections logically.
• Use good language
  Type clear, simple and unambiguous text, correctly spelt. Use Help texts and show units of measurement.
• Document your work
  Use the Notes field in the property tab Settings or create a hidden page where you explain your design.
• Most importantly: make your form as simple as possible
  It may be used by people who are not native speakers of the form language, or who are not used to filling in forms in an app. And a simple, good design may prevent mistakes that can have serious consequences.

Checklist when working on a form

1. Is the form going to be used on phones or only on tablets?
   If on phones, adapt the design to narrow screens by selecting an appropriate Preview setting in the Designer. See Designing: 2.6 Previewing forms.

2. Should the form be designed as one long page, or with multiple pages sideways?

3. On each page element, add numbers / names / icons / colors.
   Make it easy to tell the difference between pages in the navigation bar at the bottom. See Designing: 2.6 Previewing forms.

4. Set just a few elements as Mandatory.
   A form with many, or all, elements marked as Mandatory looks messy and commanding.

5. Will the data be used in integration with other systems?
   If so, be extra careful with giving good names to element IDs. Name elements where the user answers, name grids, etc.
   At integrations, the element IDs will be listed and other people will need to see what they mean.

6. Are the serial numbers used just digits or do they have letter prefixes?
   If just digits, use a Number element. If they have prefixes, use a Text Input element.

7. If the form has long tables, consider numbering each table row.
   Using e.g. 1.1, 1.2, etc. for each table row/question makes it easier to talk and write about each row/question.
   It is also easier to create IDs for the elements in each row, e.g. _1_1_comment, _1_2_comment, etc.

8. If repeats contain Image Captures, do the photos have a suitable size when printed?
   If the photos are too big, consider adding a Comment element to the repeat
   or create a grid in the repeat and place e.g. two Image Capture elements next to each other in the grid row.

9. Use description formulas to duplicate earlier entries.
   Use {#id} to avoid having to enter data more than once, and to state what have been selected previously.

10. Hide what the user does not need to see
    Create rules based on the user’s selections that hide what is not relevant to that user.
    See Designing: 5.1 Rules (branching/skip formulas).

11. Mark as “Hide on PDF” elements like help texts, buttons, etc. than do not have to be on the PDF.
    See Designing: 4.2.4 PDF tab.

12. Add a Spacer element at the bottom of pages to leave some empty space below the last input elements.
    Mark this as “Hide on PDF”.

13. Check that the PDF looks good.
    Are the margins big enough to print the header and footer? Should page breaks be added?
    Make style adjustments in grid padding, font sizes, colors, add extra Spacer elements, etc. to get a nice and easily readable PDF.

14. Should email notifications be sent?
    At which form states should they be sent, to whom and with which message text?
    See Designing: 8.2 Automatic email notifications with PDF reports and form links.

15. Are the values in the form’s Description Formula clear and sufficient?
    Check with the users how it looks in the app and Dashboard, especially after the form has been used for a while.
    See Designing: 6.4 Description Formula.