alphagov / forms-prototypes Goto Github PK
View Code? Open in Web Editor NEWPrototypes from the GOV.UK Forms team in the Government Digital Service.
Home Page: https://forms-prototypes.herokuapp.com/
License: MIT License
Prototypes from the GOV.UK Forms team in the Government Digital Service.
Home Page: https://forms-prototypes.herokuapp.com/
License: MIT License
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
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.
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.
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.
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.
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.
Work from trello card Spike: explore task list for next steps in publishing form
Create your form
Set form responses
Get your form ready to go live
Publish your form
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)
There are problems with the page titles on several pages in the prototype:
Arguably we should also add a '- GOV.UK Forms' suffix to all of the titles on the site - this is a common pattern.
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.
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:
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.
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):
Main changes to editing area of the page:
Changes to in page preview area:
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
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.
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
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.
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
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.
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.
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.
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.
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.
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
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
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.
The routing and page views are inconsistently implemented, and not very DRY.
Fix bug where using the browser's back button doesn't work after adding 2 or more questions (low priority)
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.
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
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.
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.
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'.
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
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.
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.
This page needs updating to align with the rest of the journey.
Page title (that appears in the browser tab):
Main changes to editing area of the page:
Changes to in page preview area:
We need more general forms for testing with users with accessibility needs
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
page-preview.html
, confirmation-page-preview.html
, and check-answers-page-preview.html
Lets remove hint text input question etc from the details component.
It should be visible all the time
Two small fixes resulting from the prototype review which were not merged before user testing.
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
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.').
Update the page title to have something to change.
We no longer need the Civil Service Live prototype.
Related to
I need to require a number as an answer to a question
Design: require a longer text answer to a question
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.
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.
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
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)
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.
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
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.