The 'Up', 'Down' and 'Edit' buttons on the form overview page don't have any additional visually hidden text, so for a screen reader user they will appear as identical buttons and it won't be clear what they do or which items they affect.

This page needs updating to align with the rest of the journey.

Page title (that appears in the browser tab):

• Update to the correct page name, "Edit confirmation - GOV.UK Forms" (This should reflect the Page title given by user if changed)

Main changes to editing area of the page:

• Back button added
• Green "Create a new page" button updated to "Save changes"
• Link to "page list" needs moved to under green button
• Link to "page list" content needs to be updated to "Go to form overview" (as per other pages)

Changes to in page preview area:

• Add h2 "Page preview" (might need input from @hannahkc )
• Remove "Open in a new tab" from preview frame
• Add "Preview page in anew tab" as a link above the preview frame
• Remove the "Update preview" link(?) from under the preview frame

As is screenshot

We need more general forms for testing with users with accessibility needs

Currently the Hint Text details component on the Edit Question page is closed by default even if it contains text:

This will make it harder for users if they:

• want to review the content of their questions quickly
• spot a mistake in the hint text after saving the page.

Instead, we could change the default state of this component to be open if there is content in the hint text field and closed if the field is empty.

At the moment all content must be written in HTML, which creates an unnecessary overhead for any content designer wanting to collaborate on this prototype.

The return journey flow sets the session data to include predefined form data if the user enters via /form-designer/returning. This then redirects the user to /form-designer/form-list.

If the user goes to /form-designer/form-list directly, the data is not populated, so the expected return journey content doesn't appear.

There are problems with the page titles on several pages in the prototype:

• Form builder home screen:
  • Current title: 'Form home'
  • Problem: this doesn't really sum up what this page is.
  • Suggested replacement: 'Your forms'
• Form naming screen
  • Current title: 'Create a form'
  • Problem: this might be OK, but there may be an argument for changing it to 'Name your form' or similar to better reflect what this page does.
  • Suggested replacement: keep current name or 'Name your form'
• Create/Edit question page
  • Current title: Uses the question title, e.g. 'What is your name?'
  • Problem: this doesn't indicate that this is an editing page - it would be hard to distinguish this from the corresponding preview page.
  • Suggested replacement: 'Edit question: What is your name?'
• New tab preview page:
  • Current title: 'Edit question'
  • Problem: this is completely incorrect - this isn't an editing page, and it gives no indication what page is being previewed.
  • Suggested replacement: 'Preview: What is your name?'

Arguably we should also add a '- GOV.UK Forms' suffix to all of the titles on the site - this is a common pattern.

The 'page templates' option on the 'Choose a page type' screen doesn't actually work yet.

Each template will probably need a custom edit view.

For example, the 'Address' template will contain multiple fields, for each line of the address - not something that the 'from scratch' edit view could do.

The last question when previewing the journey says "Check your answers" - this seems unnecessary and has been seen to cause some issues.

To align with pattern, this should just be "Continue" as per other pages

To support demonstrations of the prototype, a number answer type should be added to the list of options on the edit page.

It function the same as the short text option, but show audience members our future intentions to add it.

This issue is to implement the journey for "I need to set the email address a completed form is sent to (trello)".
Mural link to screen flow

Set the email address for completed forms

If we already hold an end point email address we should show the "Are you sure you want to change this email address?" screen, displaying the email they have previously added. Otherwise, we can go to the "Confirmation code sent" screen to finish this part of the journey.

Are you sure you want to change this email address?

This screen should include both the previously added email in full and the one they have entered and would replace it.
If users are presented this screen we want to confirm if they are happy to change the email or not. If they select "Yes" we should continue them through the journey to the "Confirmation code sent" screen. Otherwise, we should take them back out to the Form overview screen.

Confirmation code sent

This page includes text that says "We've sent a confirmation code and your email address to [[email protected]]. The recipient will be asked to give you the code. You need to enter the code to confirm the email address. The code is valid for 7 days." There are two links underneath that say, "Enter confirmation code to verify the email address" and "Go to form overview"

This is the end of this part of the users journey. They have a link that will allow them to return to the form overview screen OR a link to allow them to enter the confirmation code to verify the email address (separate issue) - this will cover scenarios where the form creator is within the team/has been given access to the processing inbox, or is wanting to test the end to end form submission journey including what the email will look like.

Screen flow diagram

The journey will end with an email being sent to the email provided, the content of which will be created and added to another github issue.

Eg - user can type into the fields and see the results on the 'Check your answers' page.

No form validation needed at this stage though.

Add a way for the user to back out of the naming of their form page, this should return them to the last page they were on, for example their list of forms page. This should follow the back link component.

** Discuss if we want to update the page heading as part of this ticket
https://app.mural.co/t/gaap0347/m/gaap0347/1652082094071/bd86d8544291bd649aa003aa1c9a94576e730bc6?wid=35-1652855983740

As-is screenshot

Fix bug where using the browser's back button doesn't work after adding 2 or more questions (low priority)

Allow the user to edit the form title if they think they have made a typo or want to change it. This should be possible even if it is the first time they land on the form overview page.

** Needs further discussion
https://app.mural.co/t/gaap0347/m/gaap0347/1652082094071/bd86d8544291bd649aa003aa1c9a94576e730bc6?wid=0-1652855983740

As-is screenshot

• Present a cleaner version of this page when the user first goes to it after naming a form
• Separate pages into those added by the user and those which are automatically created
• Move publish link/button to the bottom of the page
• Use the actual title of the Form submitted page and update it if it's edited by the user.
• Add additional text by the 'Check your answers' and 'Form submitted' pages to explain what they are.

Two small fixes resulting from the prototype review which were not merged before user testing.

See - https://trello.com/c/37LaeJvS

• The question disappears from the National Insurance number preview in a new tab (though the question is there in the preview pane)
• header on form home and form name doesn't match the headers on the rest of the pages

• Make it so the preview pane stays in line with the rest of the page - we don't think it needs to remain static as the user scrolls because the page is pretty short

Swap the "save changes" button and "add next question" button about so that the primary action on the edit pages is to "Save and add next question"

Change content on buttons to:
Button 1 (green)
"Save and add next question" (when adding)
"Save and edit next question" (when editing)

Button 2 (grey)
"Save and preview question"

Button 3 (red)
"Delete question" (when editing)

It might be nice if the page preview updated automatically as you filled out or changed the edit form.

Perhaps updated each time you moved focus from a field?

We'll need to decide if 'edit' pages only save updates when you hit a 'Save' button, or if they 'save as you go'.

Related to

I need to require a number as an answer to a question
Design: require a longer text answer to a question

User needs

As a form creator, I need to require a longer text answer to a question, so that I can collect the data we need in the right format.

The Why

This will allow departments to collect a free text answer to questions that need a longer answer, like multiple paragraphs. We need this to do the “Redundancy claim for holiday taken, but not paid“ form, as well as two other redundancy claim forms. And it is a common question/answer type.

Hypothesis

If we include a free text option as an answer type
then a form creator will be able to collect free text information from their users

How to test the solution and what success looks like

We implement a <textarea> element into the list of answer types.

We should consider how our users will describe a textarea and explore what language we use to name the answer type

We should consider adding a description to explain what the textarea answer type is

We could consider testing the answer type as part of splitting the question and answer flow (putting the answer type selection first)

User Needs

As a form creator, I need to require a number as an answer to a question, so that I can collect the data we need in the right format.

The why

• this is a common type of answer needed in forms
• end users using speech to text software might struggle to enter numbers without this, as the validation might reject the text "one hundred and eighty"
• end users can more easily enter numbers when a number keyboard appears on mobile or tablet devices

How to test the solution

We implement a number input type into the list of answer types.

We should consider how our users will describe a this input type and explore what language we use to name it

We should consider adding a description to explain what the number input answer type is

This issue is related to the https://trello.com/c/x4GJbX3l card

###User need:

As a form creator, I need to add content about what happens next to a confirmation page, so the form submitter has clear expectations.

Lets remove hint text input question etc from the details component.
It should be visible all the time

This page needs updating to align with the rest of the journey.

Page title (that appears in the browser tab):

• Update to the correct page name, "Edit check your answers - GOV.UK Forms" (This should reflect the Page title given by user if changed)

Main changes to editing area of the page:

• Back button added
• Green "Create a new page" button updated to "Save changes"
• Link to "page list" needs moved to under green button
• Link to "page list" content needs to be updated to "Go to form overview" (as per other pages)

Changes to in page preview area:

• Add h2 "Page preview" (might need input from @hannahkc )
• Remove "Open in a new tab" from preview frame
• Add "Preview page in anew tab" as a link above the preview frame
• Remove the "Update preview" link(?) from under the preview frame

As is screenshot

• Remove back button from the preview pane
• Remove hover styling/disable the green button in the preview pane (because it doesn't do anything)
  these changes should apply to page-preview.html, confirmation-page-preview.html, and check-answers-page-preview.html

Users are seeing a back link on the first question in their journey when testing a form.
This is then taking them to an empty start page - we removed the start page, so could we remove the back link if first question.

Design and content for the check your answers page and declaration

Creating/editing a form Mural area

Form summary page

It would be useful if, when the user selected page template from the list, they saw a preview of it in the preview pane. This could be treated as a JavaScript enhancement.

We want to try making it more obvious to users that they are viewing a DRAFT version of the form they are creating.

We hope this will help users understand where they are and hopefully prompt them to be able to mentally switch between editing/creating and previewing/testing.

We need to consider adding visually hidden text to the end of the page heading for example, "What is your name? preview"

Example of DRAFT background from publishing journey:
https://draft-origin.publishing.service.gov.uk/apply-national-insurance-number?token=eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI1MTgxZTQyNi1iNzU3LTQ5ZjItYWM4My0yYTYwMjg2OTQxYzciLCJjb250ZW50X2lkIjoiYjcwNTMxZDQtZTkwNC00YTk1LWE0ODAtMmRhZDVjMzIyY2E0IiwiaWF0IjoxNjU1NzU4ODgwLCJleHAiOjE2NTgzNTA4ODB9.HtXmH92DN7qY0pBmLNBrMWJuJml87lAE_6BEh2gvPTc

Small updates to the button text and delete journey found on this trello card:

https://trello.com/c/BuQaxAYu/267-prototype-iterations-for-round-3-of-usability-testing-sprint-3-4

Update the page title to have something to change.

Expected behaviour

Given I am on a question page in the new tab preview
When I press the enter key on a form field
Then I expect to be taken to the next page in the form

Actual behaviour

Instead I am taken to https://forms-prototypes.london.cloudapps.digital/form-designer/page-preview-new-tab/edit-question-save, a page which contains only a 'continue' button and no content.

This only happens when using the enter key, not when clicking the continue button.

https://trello.com/c/7NU2xSRL/437-add-insolvency-service-form-to-the-prototype-for-testing

Need to add example data for Insolvency Service form that has been agreed - Amendment form: redundancy claim for holiday pay

1. Full name

2. Claim reference number (begins LN) or National Insurance number (QQ123456C)

3. Name of company

4. What date did your holiday (leave) year start? 
(for example, 1st January 2020)

5. How many holiday days were you entitled to for the whole leave year? 
Please include bank holidays

6. How many holiday days did you take between the date your leave year started and the date you were made redundant? 
Please include any bank holidays that happened during this time.

7. Did you carry over any holiday days from your last leave year? 
If ‘yes’, how many days?

Make sure there is an option for non Insolvency Service testing - Take your pet abroad

Need to create 'edit' and 'preview' views for the 'Check your Answers' page.

Probably the only editable parts of the page would be the page title (which would default to 'Check your answers before sending your application') and a page declaration (which would default to 'By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.').

On the check your answers screen when users test their forms they are presented with empty answers (and if date used they see "01/") when no answer has been provided.

This seems to have caused some confusion, so we would like to test using some content to show that it would contain the answer etc.

Could we add "Not completed" to each row where no answer has been given when running through the service in test/preview.
This should appear for every input type on check your answers, even where input type is date/number/telephone etc.

The page count is off by one - for example the form below has 2 pages, but is showing as a '3 page draft form'.

This is possibly related to removing start pages from the prototype.

You can't currently delete a page.

I think implementing this will probably require a rewrite of the way pages are created.

If you delete page 4, then I guess you'll need to renumber all the pages higher than it?

This would probably be much easier to implement if page data was stored like this p1.name rather than this p1-name.

The delete function could be made available from each row in the page list, and also from the bottom of the edit page view. Not sure of the best design yet, but we can explore that once the functionality is in.

Work from trello card Spike: explore task list for next steps in publishing form

The what

• create new page for task list
• list items agreed on Publishing a form Mural (listed below)
• make task list page first page after entering a form name (on form creation journey)
• make task list page first page after clicking to edit a form (on form return journey)

New sections and links:

Create your form

• Edit the name of your form
• Add and edit your questions
• Preview your form in a new tab link to sit on "Add and edit your questions" page
• Review summary page and add declaration
• Add information about what happens next

Set form responses

• Set the email address completed forms will be sent to
• Enter the email address confirmation code

Get your form ready to go live

• Provide a link to your privacy information
• Provide a link to your accessibility statement

Publish your form

• Make your form live
• How to publish the form on GOV.UK

Example of overall task list pattern and layout

It would be useful if users could click on a row in the page list and the preview pane would update to show that page. I think this could be treated as a JavaScript enhancement.

This issue is to implement the journey for "I need to set the email address a completed form is sent to (trello)".
Mural link to screen flow

Enter the confirmation code

Enter the confirmation code error state

Email address confirmed

The confirmation code has expired

Screen flow diagram

Radio buttons and checkboxes were previously part of the prototype and are required for the Civil Service Live event.

Add the features back to the question creation screen and ensure they work in the preview/check your answers screen.

We no longer need the Civil Service Live prototype.

• Shutdown the PAAS instance containing the CSL version
• Remove the feature flags used to add CSL specific features

We would like to remove the short name input from edit pages - we think it adds confusion and would like to test the impact of removing it.

We should use the long version across the service including, summaries (CYA, emails and form overview.
The preview URL could use the long version replacing caps with lowercase, spaces with dashes ('-') and removing any other punctuation

We should add some visually hidden text to the 'Edit' link on the forms list page. This will make them easier to navigate for screen reader users (e.g. when they are listed in the Voiceover rotor).

We previously did this for equivalent links on the Form Overview page, but missed it here.

• Move 'hint text' up to appear under the question fields. Improve the label and hint text to be more meaningful and explanatory
• Add a save button which will save the question without changing page (this is functionally identical to the 'update preview' button, which we're removing, so really it's just a rename).
• Change the button options to 'Save', 'add new question', and 'delete question' - and have a link to go back to the page list (form overview).
• Add a back button

You can't currently move a page higher or lower in the page list.

I think implementing this will probably require a rewrite of the way pages are created.

If you move page 4, then I guess you'll need to renumber one of the pages next to it?

This would probably be much easier to implement if page data was stored like this p1.name rather than this p1-name.

The move function could be made available from each row in the page list, and also from the bottom of the edit page view. Not sure of the best design yet, but we can explore that once the functionality is in.

Could we create a single-page version of the form, that we could then style for print - so we can explore how feasible it might be to auto-generate a printable / PDF version of a form?

The routing and page views are inconsistently implemented, and not very DRY.