DRAFT feature: Sections - Multiple UI and UX changes to Section adding and editing flows

[delaynesr]

Multiple UI and UX changes to Section adding and editing flows

Is your feature request related to a problem? Please describe.
Currently, sections are mainly used to simply add a second title to a page to orient the person filling out a form. There is an opportunity to use sections to help designers using the form builder navigate and maintain the form they are creating, especially on longer forms that require more information from users, such as eligibility checks.

There are also multiple entry points within the designer to create a new section, including “Add page”, “Edit page” and the sections tab. Based on my user experience and the user experience of a few colleagues, the sections tab is under utilised and “Add page” is rarely (if ever) used to create new sections. Users are tending to create sections on the fly as needed, using the “Edit page” route to create their sections. This could become messy as more capability is added to sections.

Hypothesis that better design strategy is to keep section editing capability in one place (the sections tab) to make better use of the sections as an organisational tool in the future.

Describe the solution you'd like
Feature/adjustment being proposed is a redesign of sections. The redesign consists of some basic adjustments to page layouts and UI but also some bigger changes that reduce the number of avenues to create a section and ultimately directs users to use the sections tab as the main place that sections are created, edited and managed. Adding capability to sections tab while removing from add page and edit page.

My hypothesis is that this will make it easier for the user to navigate the form and their sections as new features and functionalities are added (such as repeating sections see post #798).

Secondary hypothesis is that if the designer is being user collaboratively my multiple people, then clearer visual organisation of the form using sections could be useful (rather than where things are being in the head of one person).

Figma prototype:
https://www.figma.com/file/Lo1YqFhxMZ52V5TU2OAF8y/XGovFormBuilder-Sections-Redesign?node-id=0%3A1

Annotated Pages for redesign:

Describe alternatives you've considered
Moving all section related capability (except for assigning sections to pages) to the sections tab may not be the right move. The hypothesis will most likely need some user testing to validate. It is unknown how often sections are used generally.

Additional context
The most changes have been made to the Add a section and Edit section pages, allowing users more functionality to see, add, delete and create pages for the section. To make best use of sections as an in designer organisational tool, the main interface of the designer will most likely need a redesign too. User testing is most likely needed to validate these changes/additional.

[adamdavies1]

Just as a side note incase this requires a change to the model structure, some of the old style condition values look something like this sectionName.componentName==value. So we may need some work to make this backward compatible

[jenbutongit]

@adamdavies1 this should be fine. we'll be using the same structure, but adding another option on the sections schema which is optional (so it does not interfere with existing schemas)

{
  // ..rest of json
  "sections": [
     { "name": "mySection",
       "title": "the title",
       "isRepeating": true
     }
   ]
}