Dates tested: 2022-06-10 to 2022-06-14
Superceeded by version 4
Sprint 5
Our first round of accessibility testing
Other changes we're making include preparing for civil service live (CSL) 2022 for example, radios and checkboxes
We plan to test a partial creation of a sample form as if the user has already logged into the GOV.UK Forms platform and is re-creating one of their departments existing forms.
We will also test a return journey as though they are returning to make fixes to an existing draft form.
Below are the screens a form creator will see when making or editing their forms.
Page with “GOV.UK Forms” heading and green “Create a form” start button.
Page with “What is the name of your form?” question heading.
There is hint text that says, “The form name will be shown at the top of each page of the form. Use a name that describes what the form will help people to do. For example, ‘Apply for a licence’.” above a text input.
Below the text input is a green “Save and continue” button.
Page with “Apply for a juggling licence” caption above the heading that says “Form overview”.
There is a green “Add a question” button.
Below the button is a secondary heading “Form name”. The form name appears below in a summary list component, with “Apply for a juggling licence” on the left with an “Edit” link on the right.
Changes to the ‘form overview’ page
Page with “Question 1” caption above a heading “Edit question”.
A secondary heading, “Question text”, comes directly before the hint text “Ask a question the way you would in person. For example ‘What is your address?’” and then a text input.
A second secondary heading, “Question short name (optional)”, followed by hint text “The short name will be used when the form’s questions are all displayed in a list. Use a short descriptive name. For example ‘Address’.” and then a text input.
Below these is a detail component, blue link with an arrow before the text, “Add hint text to help people answer the question” that is closed.
Next is a secondary heading, “What kind of answer do you need to this question?”, which has the hint text “The answer will be validated to check it’s in the selected format.” Below are radio buttons that determine the input type required:
- Single line of text, selected
- Address
- Date
- Email address
- National Insurance number
- Phone number
The page ends with a green “Save question” button, next to a grey “Create next question” button. Below the two buttons is a “Go to form overview” link.
On the right side of the screen there is a secondary heading, “Question preview” with a link to “Preview question in a new tab”.
Below the link is a smaller version of an empty GOV.UK service page within an iframe, to mimic a mobile screen. It shows the GOV.UK logo on a black header. Within the body of the page is a disabled green ‘Continue’ button.
Page with “Question 1” caption above a heading “Edit question” with detail component expanded.
The detail component, “Add hint text to help people answer the question”, is now expanded revealing the hint text “You can use hint text if you need to explain the format the answer should be in, or where to find the information you’ve asked for.” before a text input.
As part of the minor fixes we made based on the previous round, we removed the “Delete question” button from the first time the user lands on a new “Edit question” screen where the question has not been saved yet. This is reduce confusion as they haven’t added the question yet so there is nothing to delete at this point.
We also update the ‘save’ button content to “Save question” for the first time the user adds a new question. This then changes to “Save changes” once they have saved their question. The ‘delete’ button also appears once the question has been saved.
Page with “Question 2” caption above a heading “What is your date of birth?”.
The first text input contains the text that appears as the pages heading, “What is your date of birth?”.
The second text input with the secondary heading label “Question short name (optional)” has the text “Date of birth” in the text input.
The ‘Date’ radio is now selected.
On the right side of the screen the iframe has now updated to include the question text “What is your date of birth?” and displays the date component underneath with inputs for ‘Day’, ‘Month’ and ‘Year’. The green “Continue” button is still disabled.
Page with “Are you sure you want to delete this question?” as the heading.
There are two radio options, “Yes” and “No”. Below is a green “Continue” button.
Page with “Check your answers” caption above the heading “Check your answers”.
There is a secondary heading label, “Page title”, with the hint text “Appears at the top of the page”. Under this is an editable text input containing a provided name, “Check your answers”, also shown in the preview on the right.
There is another secondary heading label, “Declaration”, with hint text “The declaration that people make when they submit the form”. Below this is an editable text area containing a provided example of what the form filler needs to agree to, “By submitting this form you are confirming that, to the best of your knowledge, the answers you are providing are correct.”
Below the text area is a character counter, “You have 1878 characters remaining”, giving form creators an idea of how much they have left of a 2,000 character limit.
At the end of the page is a green “Save changes” button above a “Go to form overview” link.
On the right side of the screen there is a secondary heading, “Page preview” with a link to “Preview page in a new tab”.
The iframe includes the title “Check your answers” and displays the secondary heading, “Declaration”, above the text input content provided on the left, “By submitting this form you are confirming that, to the best of your knowledge, the answers you are providing are correct.”
Page with “Confirmation” caption above the heading “Form submitted”.
There is a secondary heading label, “Page title”, with the hint text “Appears in the green box”. Under this is an editable text input containing a provided name, “Form submitted”, also shown in the preview on the right.
There is another secondary heading label, “What happens next”, with hint text “Tell people what will happen next and anything that they need to do”. Below this is an editable text area containing a provided example of what the form filler should expect, “We’ve sent you an email to confirm we have received your form.”
Below the text area is a character counter, “You have 1938 characters remaining”, giving form creators an idea of how much they have left of a 2,000 character limit.
At the end of the page is a green “Save changes” button above a “Go to form overview” link.
On the right side of the screen there is a secondary heading, “Page preview” with a link to “Preview page in a new tab”.
The iframe includes the title “Form submitted” above text “Your reference number is HDJ2123F” in a green box. There is also a secondary heading, “What happens next”, above the text input content provided on the left, “We’ve sent you an email to confirm we have received your form.”
Page with “Publish form” caption above the heading “Apply for a juggling licence”.
There is a question, “Where do you want to publish the form?” with two radio options below, “On the GOV.UK website” and “On my organisation’s website”.
There is a green “Publish form” button, the word ‘or’, and then a link to “return to page list”.
On the right side of the screen the iframe includes the title “Apply for a juggling licence” above a green “Start now” button to simulate the journey from the start page.
- references to editing ‘page’ have been changed to ‘question’ for example, “Edit question”
- added “Form name” to the form overview page so form creator has a way to change it
- content improvements to hint text for question long/short names
- added secondary heading and made other small changes to the in page preview (iframe on the right on the screen)
- removed red “Delete” button from edit page if the page has not been saved
- add delete question journey with confirmation interrupt page
- set data to pull through to check your answers
- got prototype ready for civil service live (CSL) 2022
- improved prototype ready for accessibility testing
- removed “Start page” from preview journey as we will not be allowing creation or hosting of start pages in our service, it was agreed this would be down on the publishing tools
For more information, see v0.0.3 release notes.
Below are the screens the form filler (the end user) would see as they complete the form.
Page with “What is your name?” question as a label for a text input. There is a green “Continue” button at the bottom.
This page is an example of the first (and all following) question pages that a form creator has added to their form.
The basic structure includes a “Back” link which should take the form filler to the previous page, mimicking the browser back button - in this instance it would return the user to the start page.
When the form filler clicks the “Continue” button the product should validate that an input has been given (field is not empty or radio is selected for example) before continuing through to the next question in sequence.
Page with “What is your National Insurance number?” question as a label for a text input. There is a green “Check your answers” button at the bottom.
This page is an example of the last question in a form sequence. The difference being a green “Check your answers” button in place of the usual “Continue”.
Page with “Check your answers” heading followed by a summary list component.
The summary list component lists rows of the “Short version” of the questions the form creator has added with a space to the right where the form fillers answer would appear. Finally there is a “Change” link for the form filler to correct or change any answer they feel is incorrect.
Below is a secondary heading, “Declaration”, before the text “By submitting this form you are confirming that, to the best of your knowledge, the answers you are providing are correct.” This is an example declaration for the form filler to agree to, by clicking the green “Agree and submit” button. The text of the declaration is editable by the form creator within the admin side of the builder, meaning it can be customised as to the needs of the different forms or department.
Page with “Form submitted” heading followed by “Your reference number is HDJ2123F” in a green box.
This page includes a secondary heading “What happens next” followed by the content “We’ve sent you an email to confirm we have received your form.” This text is editable by the form creator within the admin side of the builder, meaning it can be customised as to the needs of the different forms or department and should match their internal service level agreements (SLAs).
- All users successfully created a form, including participant using a screen reader
- The product was compared favourably to inaccessible forms by several users. It was also compared favourably to other form building tools.
- Users appreciated simple, clear design and language, and one question per page design
- There were some issues experienced by the user using a screen reader to navigate the site
- Radio buttons in the question type selection did not seem to be immediately discoverable
- User was unsure whether the save button would move them to another page. They were hesitant to use it as when using a screen reader moving to another page requires users to undertake the effort to re-orient themselves to the new page.
- Preview in a new tab caused a navigation challenge with getting out of the preview and back to form editing
- We saw some similar challenges to other usability testing
- Some challenges being clear when user was taking the role of 'form creator' and when they were previewing as 'form completer'
- Re-ordering questions was not clear to all users
- Some uncertainty around whether work had been saved when creating a question
- Some uncertainty as to what the preview pane did, particularly before users had saved a question and it had populated with their content
- Users often needed to consider answer type before they were able to write useful hint text, but the current interface asks for hint text first
Accessibility testing: Form building (GitHub)
Based on the findings from this version and the previous round we think we should
- re-consider the call to action buttons, being more explicit about what happens when the user clicks one
- explore the idea of providing feedback to users when they make an action such as ‘save’ or ‘move’
- explore potential ways to help form creators distinguish when they are creating a form versus viewing a preview of their form
- explore if we can make the preview pane more useful, or if we should consider removing it altogether
- users wanted to add hint text after they knew how the input looked, is there anything we should consider to help them know how their question might look, or guide them better to create hint text?
We also had another discussion about removing the ‘short version’ question as it wasn’t really adding anything and continued to not be seen as useful.