diff --git a/design/features/routing/screenshots-v5/001-add-a-route-from-a-question-error.png b/design/features/routing/screenshots-v5/001-add-a-route-from-a-question-error.png new file mode 100644 index 000000000..ce1bd2529 Binary files /dev/null and b/design/features/routing/screenshots-v5/001-add-a-route-from-a-question-error.png differ diff --git a/design/features/routing/screenshots-v5/001-add-a-route-from-a-question-withOptions.png b/design/features/routing/screenshots-v5/001-add-a-route-from-a-question-withOptions.png new file mode 100644 index 000000000..68edad7e9 Binary files /dev/null and b/design/features/routing/screenshots-v5/001-add-a-route-from-a-question-withOptions.png differ diff --git a/design/features/routing/screenshots-v5/002-add-a-route-from-a-question-YouCannotAddARouteYet.png b/design/features/routing/screenshots-v5/002-add-a-route-from-a-question-YouCannotAddARouteYet.png new file mode 100644 index 000000000..28d1dbcc9 Binary files /dev/null and b/design/features/routing/screenshots-v5/002-add-a-route-from-a-question-YouCannotAddARouteYet.png differ diff --git a/design/features/routing/screenshots-v5/002-add-a-route-from-a-question-YouHaveNoMoreQuestionsToAddARouteFrom.png b/design/features/routing/screenshots-v5/002-add-a-route-from-a-question-YouHaveNoMoreQuestionsToAddARouteFrom.png new file mode 100644 index 000000000..94ce4b03d Binary files /dev/null and b/design/features/routing/screenshots-v5/002-add-a-route-from-a-question-YouHaveNoMoreQuestionsToAddARouteFrom.png differ diff --git a/design/features/routing/screenshots-v5/003-question-xs-routes-bothRoutesSet.png b/design/features/routing/screenshots-v5/003-question-xs-routes-bothRoutesSet.png new file mode 100644 index 000000000..14da2c65f Binary files /dev/null and b/design/features/routing/screenshots-v5/003-question-xs-routes-bothRoutesSet.png differ diff --git a/design/features/routing/screenshots-v5/003-question-xs-routes-route1Set.png b/design/features/routing/screenshots-v5/003-question-xs-routes-route1Set.png new file mode 100644 index 000000000..0e493f8c5 Binary files /dev/null and b/design/features/routing/screenshots-v5/003-question-xs-routes-route1Set.png differ diff --git a/design/features/routing/screenshots-v5/004-are-you-sure-you-want-to-delete-route-1.png b/design/features/routing/screenshots-v5/004-are-you-sure-you-want-to-delete-route-1.png new file mode 100644 index 000000000..826f6157d Binary files /dev/null and b/design/features/routing/screenshots-v5/004-are-you-sure-you-want-to-delete-route-1.png differ diff --git a/design/features/routing/screenshots-v5/005-are-you-sure-you-want-to-delete-the-route-for-any-other-answer-error.png b/design/features/routing/screenshots-v5/005-are-you-sure-you-want-to-delete-the-route-for-any-other-answer-error.png new file mode 100644 index 000000000..f59ef7441 Binary files /dev/null and b/design/features/routing/screenshots-v5/005-are-you-sure-you-want-to-delete-the-route-for-any-other-answer-error.png differ diff --git a/design/features/routing/screenshots-v5/005-are-you-sure-you-want-to-delete-the-route-for-any-other-answer.png b/design/features/routing/screenshots-v5/005-are-you-sure-you-want-to-delete-the-route-for-any-other-answer.png new file mode 100644 index 000000000..b6ad8022a Binary files /dev/null and b/design/features/routing/screenshots-v5/005-are-you-sure-you-want-to-delete-the-route-for-any-other-answer.png differ diff --git a/design/features/routing/screenshots-v5/006-add-and-edit-your-questions-listWithRouting.png b/design/features/routing/screenshots-v5/006-add-and-edit-your-questions-listWithRouting.png new file mode 100644 index 000000000..619e00de1 Binary files /dev/null and b/design/features/routing/screenshots-v5/006-add-and-edit-your-questions-listWithRouting.png differ diff --git a/design/features/routing/screenshots-v5/README.md b/design/features/routing/screenshots-v5/README.md new file mode 100644 index 000000000..5e49ca9b1 --- /dev/null +++ b/design/features/routing/screenshots-v5/README.md @@ -0,0 +1 @@ +This folder contains screenshots from our [Branching designs Mural board](https://app.mural.co/t/gaap0347/m/gaap0347/1728478914347/6a7e0b709f50f00f81cab37414fdf44ec8601a70?wid=0-1737023334487). These screens are documented in [Branching and exit pages iteration 3](../version-5-branching-iteration-3.md). diff --git a/design/features/routing/screenshots-v6/001-add-a-route-from-a-question-withOptions.png b/design/features/routing/screenshots-v6/001-add-a-route-from-a-question-withOptions.png new file mode 100644 index 000000000..138809648 Binary files /dev/null and b/design/features/routing/screenshots-v6/001-add-a-route-from-a-question-withOptions.png differ diff --git a/design/features/routing/screenshots-v6/002-add-route-1-skipPersonTo-Dropdown.png b/design/features/routing/screenshots-v6/002-add-route-1-skipPersonTo-Dropdown.png new file mode 100644 index 000000000..e4d5300c7 Binary files /dev/null and b/design/features/routing/screenshots-v6/002-add-route-1-skipPersonTo-Dropdown.png differ diff --git a/design/features/routing/screenshots-v6/003-edit-exit-page-disabledJS.png b/design/features/routing/screenshots-v6/003-edit-exit-page-disabledJS.png new file mode 100644 index 000000000..48a2080b5 Binary files /dev/null and b/design/features/routing/screenshots-v6/003-edit-exit-page-disabledJS.png differ diff --git a/design/features/routing/screenshots-v6/003-edit-exit-page-markdownEditor.png b/design/features/routing/screenshots-v6/003-edit-exit-page-markdownEditor.png new file mode 100644 index 000000000..4092895c6 Binary files /dev/null and b/design/features/routing/screenshots-v6/003-edit-exit-page-markdownEditor.png differ diff --git a/design/features/routing/screenshots-v6/004-edit-exit-page-markdownPreviewer.png b/design/features/routing/screenshots-v6/004-edit-exit-page-markdownPreviewer.png new file mode 100644 index 000000000..232fa89f3 Binary files /dev/null and b/design/features/routing/screenshots-v6/004-edit-exit-page-markdownPreviewer.png differ diff --git a/design/features/routing/screenshots-v6/005-question-xs-routes-withExitPageRoute.png b/design/features/routing/screenshots-v6/005-question-xs-routes-withExitPageRoute.png new file mode 100644 index 000000000..3b0bd80aa Binary files /dev/null and b/design/features/routing/screenshots-v6/005-question-xs-routes-withExitPageRoute.png differ diff --git a/design/features/routing/screenshots-v6/006-edit-route-1-withExitPage.png b/design/features/routing/screenshots-v6/006-edit-route-1-withExitPage.png new file mode 100644 index 000000000..d7bb8563f Binary files /dev/null and b/design/features/routing/screenshots-v6/006-edit-route-1-withExitPage.png differ diff --git a/design/features/routing/screenshots-v6/007-are-you-sure-you-want-to-delete-this-exit-page-error.png b/design/features/routing/screenshots-v6/007-are-you-sure-you-want-to-delete-this-exit-page-error.png new file mode 100644 index 000000000..779a14a50 Binary files /dev/null and b/design/features/routing/screenshots-v6/007-are-you-sure-you-want-to-delete-this-exit-page-error.png differ diff --git a/design/features/routing/screenshots-v6/007-are-you-sure-you-want-to-delete-this-exit-page.png b/design/features/routing/screenshots-v6/007-are-you-sure-you-want-to-delete-this-exit-page.png new file mode 100644 index 000000000..33ed263fa Binary files /dev/null and b/design/features/routing/screenshots-v6/007-are-you-sure-you-want-to-delete-this-exit-page.png differ diff --git a/design/features/routing/screenshots-v6/008-add-and-edit-your-questions-withRoutes.png b/design/features/routing/screenshots-v6/008-add-and-edit-your-questions-withRoutes.png new file mode 100644 index 000000000..ced4b4bb4 Binary files /dev/null and b/design/features/routing/screenshots-v6/008-add-and-edit-your-questions-withRoutes.png differ diff --git a/design/features/routing/screenshots-v6/009-your-questions-live-view-withRoutes.png b/design/features/routing/screenshots-v6/009-your-questions-live-view-withRoutes.png new file mode 100644 index 000000000..50283ef97 Binary files /dev/null and b/design/features/routing/screenshots-v6/009-your-questions-live-view-withRoutes.png differ diff --git a/design/features/routing/screenshots-v6/010-are-you-sure-you-want-to-delete-this-question-routeStartWarning.png b/design/features/routing/screenshots-v6/010-are-you-sure-you-want-to-delete-this-question-routeStartWarning.png new file mode 100644 index 000000000..93851b523 Binary files /dev/null and b/design/features/routing/screenshots-v6/010-are-you-sure-you-want-to-delete-this-question-routeStartWarning.png differ diff --git a/design/features/routing/screenshots-v6/010-question-x-is-the-start-of-a-route-warning.png b/design/features/routing/screenshots-v6/010-question-x-is-the-start-of-a-route-warning.png new file mode 100644 index 000000000..c5645cf5b Binary files /dev/null and b/design/features/routing/screenshots-v6/010-question-x-is-the-start-of-a-route-warning.png differ diff --git a/design/features/routing/screenshots-v6/010-question-x-routes-to-an-exit-page-warning.png b/design/features/routing/screenshots-v6/010-question-x-routes-to-an-exit-page-warning.png new file mode 100644 index 000000000..f61eb2219 Binary files /dev/null and b/design/features/routing/screenshots-v6/010-question-x-routes-to-an-exit-page-warning.png differ diff --git a/design/features/routing/screenshots-v6/011-edit-question-withRoutingConcept.png b/design/features/routing/screenshots-v6/011-edit-question-withRoutingConcept.png new file mode 100644 index 000000000..e1d6e5f09 Binary files /dev/null and b/design/features/routing/screenshots-v6/011-edit-question-withRoutingConcept.png differ diff --git a/design/features/routing/screenshots-v6/104-exit-page-outline.png b/design/features/routing/screenshots-v6/104-exit-page-outline.png new file mode 100644 index 000000000..d0216aec6 Binary files /dev/null and b/design/features/routing/screenshots-v6/104-exit-page-outline.png differ diff --git a/design/features/routing/screenshots-v6/README.md b/design/features/routing/screenshots-v6/README.md new file mode 100644 index 000000000..ca5434e34 --- /dev/null +++ b/design/features/routing/screenshots-v6/README.md @@ -0,0 +1 @@ +This folder contains screenshots from our [Exit pages iteration 1 Mural board](https://app.mural.co/t/gaap0347/m/gaap0347/1740496027781/5a34f1bab377b7c7126742591825b0d3d616b9dc?wid=0-1740496156549). These screens are documented in [Exit pages iteration 2](../version-6-exit-pages.md). diff --git a/design/features/routing/version-5-branching-iteration-3.md b/design/features/routing/version-5-branching-iteration-3.md new file mode 100644 index 000000000..b7f658a9b --- /dev/null +++ b/design/features/routing/version-5-branching-iteration-3.md @@ -0,0 +1,251 @@ +# Branching iteration 3 + +Date created: 2025-06-11 + +* * * + +## Contents + +- [What this documentation covers](#what-this-documentation-covers) +- [Designs](#designs) + +* * * + +## What this documentation covers + +This is the third iteration that was created and put live into production based on previous research. + +[This iteration’s designs in Mural](https://app.mural.co/t/gaap0347/m/gaap0347/1728478914347/6a7e0b709f50f00f81cab37414fdf44ec8601a70?wid=0-1737023334487). + +## Designs + +### Add a route from a question + +Page titled “Add a route from a question” with guidance and radio options, “Which question do you want to add a route from?”. Screenshot +There is a problem: Select the question you want to add a route from + +#### Description of the image and the changes made in this iteration: + +The page’s H1 is ‘Add a route from a question’. It then has some guidance and a radio question for form creators to select a question to start a route from. + +The guidance aims to set expectations for the form creator about what they can and cannot do with routing. It has been updated since the last iteration to make it clearer. It now reads: + +> You can add a route from a question where people can select only one answer from a list. +> +> If someone selects the answer you specify, they’ll skip forward to a later question, or the end of the form. +> +> People who select any other answer will continue to the next question. If you need to, you can add a second route so they skip one or more questions later in the form. +> +> You can only add a route from a question that does not already have 2 routes. Go back to your questions if you need to edit an existing route. + +Note: this implementation did not include exit page functionality and so missed additional guidance content that was added later. + +The guidance is followed by a question: + +> Which question do you want to add a route from? + +This was previously followed by hint text but has been incorporated into the guidance removing the need for it as part of the question component. + +The answer options are all the ‘selection from a list’ questions from the form that only allow one answer (radio questions). In the example in the image above, there are 2 questions the form creator can select from. + +Finally, there’s a green ‘Continue’ button. + +After the form creator has selected a question to start their route from and then ‘Continue’, they move to the ‘Edit route 1’ page. + +### Add a route from a question - You cannot add a route yet + +Page titled “Add a route from a question” with guidance the bottom section has been replaced by new static content “You cannot add a route yet” with more context beneath. Screenshot + +#### Description of the image and the changes made in this iteration: + +This page shows an alternative version of the ‘Add a route from a question’ page where a form does not meet the minimum criteria that allows routing to be added. + +The page heading and guidance content remain the same while the bottom section is replaced by a section titled ‘You cannot add a route yet’. The content reads: + +> Before you can add a route, your form needs to have a question that: +> +> - asks people to select only one option from a list +> - has at least one question after it +> +> It’s usually easiest to create all your form’s questions first, then add the routes you need. + +The updated content reflects more accurately the criteria required to be able to add routing to a question. We also add new additional context of adding all your forms questions before adding your routing. + +The page ends with a blue ‘Back to your questions’ link. + +### Add a route from a question - You have no more questions to add a route from + +Page titled “Add a route from a question” with guidance the bottom section has been replaced by new static content “You have no more questions to add a route from” with more context beneath. Screenshot + +#### Description of the image and the changes made in this iteration: + +This page shows an alternative version of the ‘Add a route from a question’ page where a form may already have routing applied to all possible questions that meet the minimum criteria meaning there are no longer any questions that can have new routes added. + +The page heading and guidance content remain the same while the bottom section is replaced by a section titled ‘You have no more questions to add a route from’. The content reads: + +> You can only add a route from a question that does not already have 2 routes. If you need to edit an existing route, go back to your questions. + +The new content more accurately reflects the updated criteria for routing and informs form creators to consider returning to their question list if they need to make changes to an existing question’s routes. + +The page ends with a blue ‘Back to your questions’ link. + +### Edit route 1 + +We’ve made no changes to this page in this iteration. The form creator selects the answer that will skip people forward, and the question they want them to skip to. + +When they click ‘Continue’ they are taken to the ‘Question x’s routes’ page. + +### Question x’s routes - with Route 1 set + +Page titled “Question 2’s routes” showing the question text and a summary card for ‘route 1’. Row 1 of the summary card shows “If the answer is Yes”, with the second row “take the person to 4. What is your business area?”. Below is explanatory text for ‘any other answer’. Screenshot + +#### Description of the image and the changes made in this iteration: + +This page shows the routes that you have from a specific question. It also allows you to: + +- edit the first route +- delete the first route +- set questions to skip later in the form for any other answer +- delete all routes from this question, after having added 2 routes to the question +- continue to your questions + +The H1 is now ‘Questions 2’s routes’. This was changed from ‘Edit question 2’s routes’ for accuracy - because you can’t actually edit the routes on this page. + +The page then plays back the question the routes in the page apply to. In this example: + +> Question 2: Are you directly employed? + +There is then 1 grey box - using the ‘summary card’ component. Titled ‘Route 1’. + +There is a blue ‘Edit’ link alongside a newly added ‘Delete’ link in the top right corner of the Route 1 summary card. + +The Route 1 box content has not been updated in this iteration. It shows the route that has been created by the form creator. It reads: + +> If the answer is: Yes +> +> take the person to: 4. What is your business area? + +Below the Route 1 box is now a secondary heading, ‘Any other answer’, followed by guidance content explaining how the forms routes will normally work for people filling in the form who haven’t selected the answer that triggers Route 1. This content reads: + +> People who select any other answer will continue to question 3. +> +> If you need to, you can make these people skip one or more questions later in the form. For example, you might want them to skip route 1’s questions to create 2 different ‘branches’ of questions. + +Next is a grey secondary action button ‘Set questions to skip’. + +This has changed from the previous version to try to make it clearer how the other routes work and that the form creator can change the default form flow for the other routes on this screen by way of the button. + +We have then hidden the previously always there red ‘Delete routes’ button to reduce confusion. Finally there is a link to ‘Continue to your questions’. + +If the form creator selects the button to ‘Set questions to skip’ they’ll go to the ‘Set questions to skip’ page. + +### Set questions to skip + +We’ve made no changes to this page in this iteration. The form creator selects the question that will people will skip from if they haven’t triggered Route 1, and the question they want them to skip to after answer the question. + +When they click ‘Save and continue’ they are taken back to the ‘Question x’s routes’ page. + +### Question x’s routes - with Route 1 and Route for any other answer set + +Page titled “Question 2’s routes” now showing two summary cards. Route 1 and Route for any other answer. Screenshot + +#### Description of the image and the changes made in this iteration: + +People are returned to this page after setting questions to skip for Route 2. The page now shows the question that will be skipped as part of Route for any other answer, as well as the option to edit or delete Route for any other answer. + +The H1 is ‘Questions 2’s routes’. + +The page then plays back the question the routes in the page apply to. In this example: + +> Question 2: Are you directly employed? + +There are then 2 grey boxes - using the ‘summary card’ component. The first is titled ‘Route 1’ and the second ‘Route for any other answer’. + +The Route 1 box is unchanged from previously. It reads: + +> If the answer is: Yes +> +> take the person to: 4. What is your business area? + +There are also blue ‘Edit’ and ‘Delete’ links in the top right corner of the Route 1 summary card. + +In the Route for any other answer summary card, we then play back the secondary route associated with this question. It reads: + +> For any other answer, continue to: 3. What are your company details? +> +> Then after the person answers: 3. What are the company details? +> +> take them to: 6. Your personal details + +There is then a red ‘Delete routes’ button. And a link to ‘Continue to your questions’. + + +### Are you sure you want to delete route 1 + +Page titled “Are you sure you want to delete route 1?”, this question then has yes and no radio options. Screenshot + +#### Description of the image and the changes made in this iteration: + +This page asks the form creator to confirm whether they want to delete the Route 1 associated with question 2. + +As part of this iteration we added a blue ‘Important’ notification banner to the start of the page which reads: + +> If you delete this route, the route for any other answer will also be deleted. + +This will only appear where a question has 2 routes added to it. It is designed to warn the form creator what will happen if they choose to continue the deletion of Route 1. + +The pages H1, ‘Are you sure you want to delete route 1?’, appears next and is the question label for 2 radio options, ‘Yes’ or ‘No’. + +Finally is a green ‘Save and continue’ button which will take the form creator to the next screen depending on their answer. + +If they select: + +- ‘Yes’ they will continue to their questions list +- ‘No’ they will return to the question x’s routes screen + + +### Are you sure you want to delete the route for any other answer + +Page titled “Are you sure you want to delete the route for any other answer?”, this question then has yes and no radio options. Screenshot + +There is a problem notification box showing ‘Select ‘Yes’ to delete the route’ error message. Screenshot + +#### Description of the image and the changes made in this iteration: + +This page asks the form creator to confirm whether they want to delete the Route for any other answer associated with question 2. + +The pages H1 ‘Are you sure you want to delete the route for any other answer?’ is the question label for 2 radio options, ‘Yes’ or ‘No’. + +There is a green ‘Save and continue’ button which will return the form creator to the question x’s routes screen. If they had selected ‘Yes’ a green success banner will appear confirming the deletion of the route. + + +### Add and edit your questions - showing routes + +Page titled “Add and edit your questions”. The page lists the questions added to a form, including a summary of the routing beneath the question that it triggers. Screenshot + +#### Description of the image and the changes made in this iteration: + +This page shows a list of the questions in a form. It shows what number each question is and its question text. To the right of each question there’s a ‘Edit’ link, ‘Move up’ and ‘Move down’ grey buttons. Between 3 of the questions in the design there are route descriptions to explain to the form creator what routing has been set and where people are skipped to. + +In this iteration, the wording for the label of a route has been made less concise. It now only tells the form creator which question the route belongs to. + +There are 3 examples in the image. The route label and description between questions 1 and 2 reads: + +> Question 1’s routes: If “Have you undergone a BPSS check?” is answered as “No” go to the exit page, “You are not eligible for this service” + +The route label and description between questions 2 and 3 reads: + +> Question 2’s routes: If “Are you directly employed?” is answered as “Yes” go to 4, “What is your business area?” + +The route label and description between questions 3 and 4 reads: + +> Question 2’s routes: After 3, “What are the company details?” go to 6, “Your personal details” + +Each route description also has a blue ‘Edit’ link to the right. + +### Your questions - read-only view of a live form + +We’ve made no changes to this page in this iteration. + + +[Back to the top](#branching-iteration-3) diff --git a/design/features/routing/version-6-exit-pages.md b/design/features/routing/version-6-exit-pages.md new file mode 100644 index 000000000..49cb86928 --- /dev/null +++ b/design/features/routing/version-6-exit-pages.md @@ -0,0 +1,320 @@ +# Exit pages iteration 2 + +Date created: 2025-06-20 + +* * * + +## Contents + +- [What this documentation covers](#what-this-documentation-covers) +- [Designs](#designs) + +* * * + +## What this documentation covers + +This is based on the first iteration that was created with minor changes that were then put live in production. + +[This iteration’s designs in Mural](https://app.mural.co/t/gaap0347/m/gaap0347/1740496027781/5a34f1bab377b7c7126742591825b0d3d616b9dc?wid=0-1740496156549). + +## Designs + +### Add a route from a question + +Page titled “Add a route from a question” with guidance and radio options. Screenshot + +#### Description of the image and the changes made in this iteration: + +The page’s H1 is ‘Add a route from a question’. It then has some guidance and a radio question for form creators to select a question to start a route from. + +The guidance aims to set expectations for the form creator about what they can and cannot do with routing. It has been updated since the last iteration to make it clearer. It now reads: + +> You can add a route to a question so if someone selects one specific answer, they’ll be skipped to: +> +> - a later question +> - the end of the form +> - an ‘exit page’ to remove them from the form - for example, because they’re not eligible +> +> People who select any other answer will continue to the next question and through the rest of the form. + +Note: this implementation did not include exit page functionality and so missed additional guidance content that was added later. + +The guidance is followed by a question: + +> Which question do you want to start a route from? + +Then hint text: + +> A route can only start from a question where people select one item from a list. + +The answer options are all the ‘selection from a list’ questions from the form that only allow one answer (radio questions). In the example in the image above, there are 2 questions the form creator can select from. + +Finally, there’s a green ‘Continue’ button. + +After the form creator has selected a question to start their route from and then ‘Continue’, they move to the ‘Edit route 1’ page. + +### Add route 1: select an answer and where to skip to - showing ‘skip the person to’ dropdown + + + +#### Description of the image and the changes made in this iteration: + +The page’s H1 is ‘Add route 1: select an answer and where to skip to’. It then has some guidance before a summary component showing the question number and content. In this example it reads: + +> Question 2: Have you had a BPSS check? + +The guidance above aims to set expectations for the form creator about what they can do with content of the current and following questions. It reads: + +> You can skip people who select one specific answer to [question 2] to a later question or page. People who select any other answer will continue to [question 3]. + +Next are two dropdowns that the form creator select from to create their route. The first, ‘If the answer selected is’, has already been selected and is showing the word ‘No’. The second dropdown labelled ‘skip the person to’ is covered by an open dropdown menu showing the list of options available to the form creator. It lists the placeholder text, ‘Select a question or page’, followed by all of the questions, number followed by content, left in the form starting from the current question. The final two rows of the dropdown list give the form creator the option to see and create a new ‘exit page’ for the above answer. They show: + +> An ‘exit page’ to leave the form +> Add an exit page + +By selecting the ‘Add an exit page’ option from the list when the form creator clicks ‘Save and continue’ they are taken to the ‘Edit exit page’ screen. + +### Edit exit page - Markdown editor - Write content + + + +#### Description of the image and the changes made in this iteration: + +The page’s H1 is ‘Edit exit page’. This is followed by a labelled single line text input, ‘Page heading’ with the hint text: + +> Use a heading that summarises why someone cannot continue with the form. For example, ‘You’re not eligible for this service’. + +This is followed by the ‘Add content’ section with some basic guidance reading: + +> Use Markdown if you need to format your exit page content. Formatting help can be found below. + +Below are two tabs, ‘Write content’ and ‘Preview content’. We are reusing the markdown what you see is what you get (WYSIWYG) type editor that was developed as part of the [detailed guidance work](). The idea is to allow form creators to have greater control over how their content appears to form fillers. Meaning they can make the content more legible while adding clear next steps, options and links to follow based on the reason for seeing an ‘exit page’. + +Within the ‘Write content’ tab we include some additional help text: + +> Explain why they cannot continue to use the form and, if possible, tell them what they should do instead. + +Followed by the different format type buttons that inject markdown code into the textarea beneath. These include: + +- H2 for secondary-level headings +- H3 for third-level headings +- Hyperlink to add links to other pages outside of the form +- Bulleted lists +- Numbered lists + +The textarea has a character counter to show form creators the limit of characters than are supported by the form tool. The screenshot includes a limit of 4000 characters but this was set to 4999 characters to match other maximum character limits placed on textareas. + +Finally in editing tab is a ‘Formatting help’ detail component, hiding the extra guidance to help form creators write and understand the markdown code. + +At the bottom of the page is a green ‘Save and continue’ button which will take the user back to the ‘question xs routes’ screen. Alongside the button is a blue ‘Cancel’ link which will return the form creator back to the ‘Add route 1: select an answer and where to skip to’ page. + +### Edit exit page - Markdown editor - Preview content + + + +#### Description of the image and the changes made in this iteration: + +This screen is the same as the ‘Edit exit page - Markdown editor - Write content’ above but the ‘Preview content’ tab is now active. + +Within the tab is a preview of how the form creators markdown will be presented to the form filler. This example shows a heading level 2 followed by some content with a link half way through it. This is followed by an example of bulleted list items. + +### Exit page structure - what the form filler would see + + + +#### Description of the image and the changes made in this iteration: + +This screenshot shows an example of the structure as it would appear to the person filling in the form. + +It shows the deault GOV.UK design with logo on a black background. Beneath is the latest update to the service navigation showing the forms name bolded on a grey background. + +Next is the ‘Back’ link. Above the pages H1, this example shows ‘[page heading]’. This is followed by some example snippets: + +> [body content - markdown] +> +> [body content - markdown] +> +> [example link - markdown] + +The body ends with the usual ‘Get help with this form’ detail component that appears across a form created on GOV.UK Forms. + +This example was used to help illustrate to across the team what the end page and markdown should look like without getting confused by ipsum lorem. + +### Question x’s routes - with Route 1 set + + + +#### Description of the image and the changes made in this iteration: + +This page shows the routes that you have from a specific question. It also allows you to: + +- edit the first route +- delete the first route +- continue to your questions + +Some things that have changed when a form creator adds an exit page to an answer include removing: + +- set questions to skip later in the form for any other answer +- delete all routes from this question, after having added 2 routes to the question + +The H1 is ‘Questions 2’s routes’. + +The page then plays back the question the routes in the page apply to. In this example: + +> Question 2: Are you directly employed? + +There is then 1 grey box - using the ‘summary card’ component. Titled ‘Route 1’. + +There is a blue ‘Edit’ link alongside a ‘Delete’ link in the top right corner of the Route 1 summary card. + +It shows the route that has been created by the form creator, in this case the page heading of the newly created exit page. It reads: + +> If the answer is: Yes +> +> skip the person to: You are not eligible for this service + +Below the Route 1 box is now a secondary heading, ‘If people select any other answer’, followed by guidance content explaining how the forms routes will normally work for people filling in the form who haven’t selected the answer that triggers Route 1. This content reads: + +> People who select any other answer will continue to [question 3] and through the rest of the form. + +This content was updated to reflect the fact we do not allow 2 or more routes from a question while also limiting the functionality of an exit page question to only allow one bit of routing. Removing the chances that questions later in the form are orphaned by accident. + +The page ends with a link to ‘Continue to your questions’. + +### Edit route 1 - showing the option to edit an exit page + + + +#### Description of the image and the changes made in this iteration: + +On this screen everything is mostly the same as if you are adding a new route 1. The changes made are the H1 which now reads ‘Edit route 1’. The 2 dropdowns still show with the existing selections visible. Beneath the ‘skip the person to’ dropdown - which shows ‘You are not eligible for this service’ for a created exit page - there is a new link, ‘Edit “You are not eligible for this service”. This link takes the form creator to the ‘Edit exit page’ screen to make changes or delete the page. + +Next are the green ‘Save and continue’ and red ‘Delete route’ buttons. The page ends with a link ‘Back to question 2’s routes’. + +### Are you sure you want to delete this exit page + + + +There is a problem notification box showing ‘Select ‘Yes’ to delete the route’ error message. Screenshot + +#### Description of the image and the changes made in this iteration: + +When form creators need to delete an exit page we need them to confirm the action in case a mistake was made. This screen is also designed to warn them of other implications deletion will cause. + +The screen starts with a blue ‘Important’ notification banner. It reads: + +> If you delete this exit page, the route to it iwll also be deleted + +The screen then goes on to display the name of the exit page, ‘You are not eligible for this service’, as a caption above the H1 ‘Are you sure you want to delete this exit page?’. + +The H1 also acts as the label for a radio option question with the ‘Yes’ or ‘No’ radio options. + +The page ends with a green ‘Save and continue’ button. The form creator is taken to the next relevant screen depending on their answer. If they answer: + +- ‘Yes’: they will be taken to the ‘add and edit your questions’ screen showing the ‘Success’ banner +- ‘No’: they will return to the ‘Edit exit page’ screen to continue editing + +### Add and edit your questions - question xs routes have been deleted + + + +#### Description of the image and the changes made in this iteration: + +This screen shows the ‘Add and edit your questions’ page as it appears when editing a draft version of your form. + +As part of this iteration we wanted to add a ‘Success’ notification banner when the form creator confirms the deletion of a route or routes. The content of the banner reads: + +> Question 2’s routes have been deleted + +The rest of the page is the same as before the routes were added. + +### Your questions - read-only view of a live form + + + +#### Description of the image and the changes made in this iteration: + +This page shows the list of a live form’s questions. It lists each of the form’s questions in a summary card component. If a route starts from a question, the summary card for that question also includes a description of that route. The image shows examples of 3 questions with routes with 1 question showing the content where an exit page route has been added. + +The summary card for Question 1 with an exit page, reads: + +> 1\. Have you undergone a BPSS check? +> +> Answer type: Selection from a list, one option only. +> +> Options: Yes, No +> +> Route: If the answer is “No” go to the exit page, “You are not eligible for this service” + +### Are you sure you want to delete this question + + + +#### Description of the image and the changes made in this iteration: + +When form creators need to delete a question we currently ask them to confirm the action in case a mistake was made. As part of the exit page work we also need to inform form creators when a question has an exit page added as we will also delete this from the backend if they continue. + +The screen starts with a blue ‘Important’ notification banner. It reads: + +> **Question 2 is the start of a route** +> +> If you delete this question, its routes will also be deleted. View question 2’s routes. + +The screen then goes on to display the question text, ‘What is the name of the company contact?’, as a caption above the H1 ‘Are you sure you want to delete this question?’. + +The H1 also acts as the label for a radio option question with the ‘Yes’ or ‘No’ radio options. + +The page ends with a green ‘Save and continue’ button. The form creator is taken to the next relevant screen depending on their answer. If they answer: + +- ‘Yes’: they will be taken to the ‘add and edit your questions’ screen showing the ‘Success’ banner +- ‘No’: they will return to the ‘Edit question’ screen to continue editing + +#### Proposed alternate banner notifications for exit pages release - not implemented + +As part of the design work done for exit pages we explored making the content of the ‘Important’ banners more accurate giving additional context where an exit page would be impacted. + +##### Question X is the start of a route + + +This version of the blue ‘Important’ banner would appear where the question being deleted has an exit page route added, replacing current version to be more specific about the exit page content also being deleted. + +The content of the banner reads: + +> **Question 2 is the start of a route** +> +> If you delete this question, its routes and exit page will also be delete. View question 2’s routes. + +The ‘View question 2’s routes’ is a link that will take the user to the relevant question routes summary screen in case they need to better understand the implications of their choice or make other amendments to the routing instead. + +##### Question X routes to an exit page + + +The content of this version reads: + +> **Question 2 routes to an exit page** +> +> If you delete this question, its route and exit page will also be delete. View question 2’s routes. + +This version still includes the link to ‘View question 2’s route’ summary screen. + + +### Edit question - proposed routing content + + + +#### Description of the image and the changes made in this iteration: + +This is the current ‘Edit question’ page with a new concept we explored when designing [2 branches](version-5-branching-iteration-3.md) and exit pages. + +The overall page is the same up to and including the playback of ‘Answer settings’ section. Beneath we added a new ‘Routes’ section. The idea was to give form creators an idea of if a question has or is impacted by routing elsewhere in the form. The example shown is where a question is being skipped by a previous questions route. It reads: + +> Some people will not see this question because of Question 2’s routes. + +‘Question 2’s routes’ is a link to the route summmary screen for question 2 in this example. + +Other potential options we explored include: + +- when the question meets the criteria for adding a question route to it, we would show the option to add a new route +- if the question is the start or end of a route with the option to go to the routes summary screen + +The team feel this is worth exploring further going forward but has not been prioritised as something for development yet. The designs still need to be explored in testing.