Optimizing Form Designs

Civic Platform's new UI inherits existing form designs used with the legacy V360 UI. Now that forms are displayed as pages and no longer wrapped within portlets, a page opens up more space for a form view. To take advantage of the additional real estate on the page, a form view can be redesigned. Redesigning a form view can reduce or even eliminate the need to scroll.

The following example shows a Custom Fields form that can be re-organized to utilize all of the white space available on the right side of the page:



Similarly, existing V360 list view designs are inherited by the new UI. Now that lists are no longer wrapped in portlets, there is more vertical real estate available to display list items. The following example shows a record list view in the new UI with additional white space at the bottom:



The empty space can be optimized by increasing the default number of rows displayed. To adjust the list view settings:
  1. From a list, click Menu > Edit View:


  2. On the list view editor, set the Contract to the number of rows to be displayed by default, and the Expand field to the number of rows to be displayed when the user chooses Menu > Expand List.

    The Contract and Expand settings on the list view editor:



    The page now displays more rows and less white space:


You can also adjust the DEFAULT_LIST_ROWS standard choice to increase the result row display from a Global Search. The recommendation is 25-30 rows.

Some considerations related to form design:
  • Not all forms need to be re-designed. Consider a phased approach to form re-design.
  • The new UI and the V360 UI share the same form design. If your agency is planning to use the Switch New UI, a form that is redesigned in the new UI may no longer be optimized for V360 usage.
  • As some users might have gotten comfortable with the V360 field layouts, an exercise to educate the users on the benefits of the new form layouts will help during the transition phase.

Related Information
  • Civic Platform User's Guide > Getting to Know the 8.0 User Interface