Designing forms for higher performance on Mobile devices

Mobile forms in Adobe Experience Manager forms offers rendering of XFA form templates in HTML5 format. This capability enables the rendering of forms on mobile devices and desktop browsers on which XFA-based PDF is not supported.
As the rendition of forms is targeted for devices which have limited processing capabilities / network bandwidth, a few considerations should be kept in mind while designing the forms. Most of these suggestions are applicable even for XFA forms which as accessed through HTML Workspace on a desktop, but due to limited resources on the tablet/mobile device, a special focus is required for such devices.

  • Reducing the number of nodes in the form: HTML forms generates Model and HTML DOM elements for the various elements of an XFA form. Each of these elements contain various properties to control the view and behaviour, thereby increasing the overall DOM structure. Following approaches are suggested to reduce the number of elements:
    • For a field the label should be provided through the caption and not through a separate text object (apart from performance it also helps in managing the form and avoid any layout issues).
    • Draw elements do not participate in information capture, and are required more for the readability and appearance. Design should ensure that where possible multiple draw texts should be merged into single draw text element.
  • Resource optimization and compression: Following approach should be evaluated for compression of resources:
    • Images embedded/referred in the form should be compressed to reduce the overall form size. Also, the form design should be approached as a web form to be filled on the mobile device, and not a paper form. In many scenarios a logo image may not be required on all the pages.
    • JavaScript and CSS files can be compressed using the minify option in Configuration Manager (Day CQ HTML Library Manager). For details on minify please refer to the documentation at: http://docs.adobe.com/docs/en/aem/6-0/deploy/configuring/osgi-configuration-settings.html
    • Web Server compression should be enabled to perform compression of request/response, thereby reducing the network bandwidth. For details on compression please refer to the documentation at: http://helpx.adobe.com/aem-forms/6/performance-tuning-aem-forms.html
  • Handling large forms: There are instances when the form need to capture large amounts of data resulting in hundreds of fields in the form. The following points should be kept in mind while designing the form:
    • From a usability perspective filling multiple small forms is more convenient than filling a large form. So one should evaluate splitting the large forms.
    • For a form which has multiple sections, each section may be divided into a separate page which loads when the user moves to the next page (Mobile Forms by default loads the next page on user interaction for page scroll).
    • Conditional sections/sub-sections may be hidden by default and made visible only when the required condition is met.
    • A tabbed navigation may be introduced to have only a section of the form visible at a time (this also assists in resolving usability issues in large forms).
  • Handling tabular data:
    • Avoid columns which are not actually required to be filled-in by the user.
    • In case certain read-only columns (which do not capture the information, but are required to describe the information in the rows) are required – evaluate if such columns can be merged into a single column.
    • On a mobile device a user would be able to view only a subset of tables having large number of rows. In such a scenario introduce a paged navigation where the data is populated from a hidden data table into a visible view table having limited number of rows and columns.

Note: For special cases where the XFA forms contain large sections of elements which are not required during form filling (and are required only for Document of Record), a more aggressive approach to reduce the number of nodes can be to maintain different copies of XFA forms – one for form filling, and one for generating Document of Record on the server. This approach involves maintaining two copies of the same form and the performance gain needs to be evaluated keeping in mind the maintenance overhead.

VN:F [1.9.22_1171]
Was this helpful? Please rate the content.
Rating: 8.0/10 (9 votes cast)
Designing forms for higher performance on Mobile devices, 8.0 out of 10 based on 9 ratings
This entry was posted in Adobe LiveCycle ES3 and tagged , . Bookmark the permalink.

Comments are closed.