Creating forms? Think adaptive and visual.

Adaptive forms in Adobe Experience Manager are new-age forms. These forms change their appearance based on the screen size of the device and are interactive in nature. These forms also integrate with Adobe Analytics and Adobe Campaign. Using adaptive forms, you can deliver personalized and targeted experiences to users based on their demography and other features. It is easier to create and manage the forms when a proper process is followed. This blog walks you through the various stages of designing adaptive forms.

First of all, make sure that you have put together the right team of contributors. You need a product manager/owner to provide requirements and approve the design of the form. You can play this role yourself if you have a good understanding of the requirements. Otherwise, find someone from the organization who can provide the right input. You also require an experience designer to design the appearance and flow of the forms for multiple devices, a business user to define the workflow and rules, a developer to create templates and JavaScript libraries, and a form author to create the forms.

The adaptive form design process has multiple stages. You can run some of these stages in parallel to each other.

Adaptive form design stages

  • Prepare business requirements: A product manager defines business requirements for the adaptive form. Business requirements include the purpose, target audience, and target devices (desktop, tablet, or mobile) for the form. The product manager can also share a skeleton of the form. It helps the experience designer and the business user get started with designing the form. A product manager is the owner and final approving authority for the form.
  • Prepare design documents: An experience designer works with the product manager to create the design specification document, data flow diagrams, error specification documents, and services documents for the form. These documents form the layers of an adaptive form.
    • Experience design document: An adaptive form can have different designs for different target devices. The experience design document contains the visual design and workflow of a form for all the supported devices. This document serves as the base document for designing the template for the form. A sample experience design document with designs for mobile and desktop versions of an adaptive form is displayed below:
       Click image to download a sample experience design document
    • Design specification sheet: The design specification sheet contains information about alignment, spacing, color, font, width, and height for each of the components of a form. The document also provides padding-related information for the form. The design specification sheet for an example adaptive form is displayed below:
      Click image to download a sample design specification sheet
    • Data Flow Diagram (DFD): A DFD document depicts data types, field names, maximum length, minimum length, default states, decision points, and rules for each field in the form. Rules help build complex logic in adaptive forms. The document is quite helpful and a big time-saver for the form authors. The document preempts all the information that the form will capture from the user.  An adaptive form can directly access information from WSDLs and REST APIs. The DFD document also provides names of WSDLs, REST APIs, and respective methods to use. The DFD document for an example adaptive form is displayed below.
      Click image to download a sample Data Flow Diagram document
    • Error specification document: You can apply validation to each field of an adaptive form and display help/error messages associated with each validation. Generally, there is a different error message for every field. The error specification document provides help/error messages for each and every field. It also describes the location, font, color, and other formatting options for the error messages.
      Click image to download a sample error specification document
    • Color style sheet: The color style sheet is the color palette of all the colors used in the adaptive form. It also specifies the name, size, and color for the fonts used in an adaptive form.
      Click image to download a sample color style sheet
    • Additional documents: Design specification documents are devoid of detailed options of a drop-down or list box. You can include such information in additional documents.
  • Create adaptive form templates: A template has the structure and initial content of an adaptive form. It helps create forms with a consistent appearance. For example, you can create a template to make all form authors have an identical header, footer, navigation menus, and a Submit button for all the enrollment forms. Adaptive forms provide a template editor to create templates.
  • Create client libraries: Modern websites rely heavily on client-side processing driven by complex JavaScript and CSS code. Organizing , optimizing, and serving such code can be complex. To help deal with this issue, AEM provides Client-side Library Folders, which allow you to store your client-side code in the repository, organize it into categories, and define when and how each category of code is to be served to the client. For information, see AEM Client Libraries explained by example by Feike Visser.
  • Create the adaptive form: Use a template to create the adaptive form. Lay out the fields as described in the design specification document for all the supported device types and test the layout using the preview functionality. There are a few best practices to develop efficient forms. For details, see Best practices for working with adaptive forms.
  • Create and apply rules: Apply rules and add error messages to the fields of the adaptive form as described in DFD and error specification documents. Rules are triggered on form objects and the form itself based on user input. Rules can directly access information from WSDLs and REST APIs. Use the services document for information about WSDL and REST APIs. Adaptive forms provide a rule editor for creating rules.
  • Create and apply themes: Create a theme to reflect the style/appearance described in the design specification document and error specification document. A theme contains styling details for adaptive forms. You can reuse a theme in different forms. Styles include properties such as background colors, state colors, transparency, alignment, and size. When you apply the theme to a form, the specified style reflects on the corresponding components of the form. Adaptive forms provide a theme editor to create themes.
  • Create form fragments: An organization generally has tens of thousands of forms. These forms also have a few common fields, such as personal information, communication address, permanent address, and financial details. You can convert such common fields to form fragments and later use these fragments in other forms, as required.

Now, your adaptive form is ready. You can send the document to the product manager for approval and publishing schedule. For any change in the form, update the corresponding design document and communicate the changes to the form author. It is easier for a form author to follow the visual representation and update the form.

After the adaptive form is published, you can use Adobe Analytics to track the page views, browser types, and demography of the users accessing the form. Create a slightly tweaked version of the form and do A/B testing to identify the better performing version of the form. Keep tweaking and improving the performance of the forms.