Signed out
-
+ 
Signed in
-
+ 
{{ collection_name }}
+ {{ page.sub-section | replace: "-", " " | capitalize }}… +
+ {% endif %}+ Also known as: {{ page.aka }} +
+ {% endif %} {% if page.status %} {% include _status.html %} {% endif %} diff --git a/src/_patterns/forms/all-or-none-of-the-above.md b/src/_patterns/ask-users-for/a-mutually-exclusive-answer.md similarity index 90% rename from src/_patterns/forms/all-or-none-of-the-above.md rename to src/_patterns/ask-users-for/a-mutually-exclusive-answer.md index e2042f552..a34f463df 100644 --- a/src/_patterns/forms/all-or-none-of-the-above.md +++ b/src/_patterns/ask-users-for/a-mutually-exclusive-answer.md @@ -1,8 +1,11 @@ --- layout: pattern -permalink: /patterns/forms/all-or-none-of-the-above -has-parent: /patterns/forms/ -title: All or none of the above +title: A mutually exclusive answer +permalink: /patterns/ask-users-for/a-mutually-exclusive-answer +redirect_from: + - /patterns/forms/all-or-none-of-the-above +aka: All or none of the above +sub-section: ask-users-for intro-text: "In some questions, either none of the options or all of them may apply to the user. Here is how to design responses for that instance." status: use-deployed anchors: diff --git a/src/_patterns/ask-users-for/addresses.md b/src/_patterns/ask-users-for/addresses.md new file mode 100644 index 000000000..825fa08d8 --- /dev/null +++ b/src/_patterns/ask-users-for/addresses.md @@ -0,0 +1,115 @@ +--- +layout: pattern +permalink: /patterns/ask-users-for/addresses +sub-section: ask-users-for +title: Addresses +intro-text: "Follow this pattern to ask a user for an address." +status: use-deployed +anchors: + - anchor: Usage + - anchor: Examples + - anchor: How to design and build + - anchor: Content considerations +--- + +## Usage + +### When to use this pattern + +* **Asking for an address.** For example, the address for a military base, home, or mailing address. + +## Examples + +### Single address + + +### Mailing address + + +### Home address + + + +## How to design and build + +### Layout details + +#### Single address +Here is the content structure for asking a user for a single address: + +- Checkbox for military address (if applicable) +- Additional info component (if applicable) +- Country select box +- Street address text input +- Street address line 2 text input +- Street address line 3 text input (if applicable) +- City text input +- State/Province/Region select box +- Postal code text input + +#### Multiple addresses + +Here is the content structure for asking a user for multiple addresses: + +- Header - Mailing or Home Address +- Relevant information regarding this form and the user’s address (if applicable) +- Checkbox for military address (if applicable) +- Additional info component (if applicable) +- Country select box +- Street address text input +- Street address line 2 text input +- Street address line 3 text input (if applicable) +- City text input +- State/Province/Region select box +- Postal code text input +- Radio button component for mailing address same as home address (this is on mailing address page only) + +### How this pattern works + +#### Single address +- **If required, include a checkbox for United States military base address.** Under the additional information component, there should be an explanation: + U.S. military bases are considered a domestic address and a part of the United States. When the checkbox is checked, the country select box becomes disabled. +- **If asking for only one address on a form, be clear with the user which address (mailing or home) you’re asking for.** We recommend asking for a mailing address if you need to only ask for one address. +- **Street address Line 3 can be omitted.** Sometimes partner databases do not support a third line of address. + +#### Multiple addresses: Mailing and Home addresses + +Follow this guidance when asking for both mailing and home addresses. In some forms, we ask for both addresses because some veterans live in different homes depending on the time of year. + +- **Add guidance on where users can go to edit their account information on all VA accounts.** Let the user know that when filling out contact information, they will have to edit their profile information. An example message is: *Any updates you make here to your contact information will only apply to this application. To update your contact information for all of your VA accounts, go to your profile page (link to profile).* +- **The mailing address always comes before home address.** We ask for a mailing address before home address because the majority of VA's correspondence is over mail. +- **On the mailing address form, ask users if the home address is the same as the mailing address.** If the user chooses “Yes”, they can skip the home address form. + +## Content considerations + +* If you need to display an address after it has been collected, then [follow content style guidelines on addresses](/content-style-guide/dates-and-numbers#addresses). + +### Error message templates for addresses + +**When a user doesn’t enter a street address:** + +Say 'Please enter a street address' + +**When a user doesn’t enter a city:** + + Say 'Please enter a city' + +**When a user doesn’t enter a state:** + +Say 'Please enter a state' + +**When a user doesn’t enter a postal code:** + +Say 'Please enter a postal code' + +**When a postal code is entered incorrectly:** + +Say 'Please enter a valid 5- or 9-digit postal code (dashes allowed)' + +**When a postal code can’t be correct:** + +Say 'Please provide a valid postal code' + +**When a user doesn’t select a state or province:** + +Say 'Please select a state or province' \ No newline at end of file diff --git a/src/_patterns/ask-users-for/contact-preferences.md b/src/_patterns/ask-users-for/contact-preferences.md new file mode 100644 index 000000000..2e8ad0520 --- /dev/null +++ b/src/_patterns/ask-users-for/contact-preferences.md @@ -0,0 +1,28 @@ +--- +layout: pattern +permalink: /patterns/ask-users-for/contact-preferences +sub-section: ask-users-for +title: Contact preferences +intro-text: Follow this pattern when you want to ask a user how they’d like to be contacted. +status: use-deployed +anchors: + - anchor: Usage + - anchor: Examples + - anchor: How to design and build +--- + +## Usage + +### When to use this pattern + +* **When needed and you would like to offer a method of contact.** Method of contact is form-dependent. Work with your stakeholders on whether your form needs a method of contact. + +## Examples + + + +## How to design and build + +### How this pattern works + +- **Give users the opportunity to pick one method of contact.** Provide contact information methods in radio button list form. \ No newline at end of file diff --git a/src/_patterns/ask-users-for/dates.md b/src/_patterns/ask-users-for/dates.md new file mode 100644 index 000000000..41d1029ad --- /dev/null +++ b/src/_patterns/ask-users-for/dates.md @@ -0,0 +1,84 @@ +--- +layout: pattern +permalink: /patterns/ask-users-for/dates +sub-section: ask-users-for +title: Dates +intro-text: "Use this pattern to collect dates from a person." +status: use-deployed +anchors: + - anchor: Usage + - anchor: How to design and build + - anchor: Content considerations +--- + +## Usage + +### When to use this pattern + +Follow this pattern whenever you need a person to provide a date on a form. + +Dates you may need people to provide include: +- Dates a person knows, like a date of birth or marriage anniversary. +- Dates a person can approximate, like February 2021. +- Date ranges, like service history dates. + +### Dates a person knows + +Use the [Memorable date]({{ site.baseurl }}/components/form/memorable-date) component for dates a person is likely to have memorized such as a date of birth or marriage anniversary. + +You can also use the standard [date]({{ site.baseurl }}/components/form/date) component: + + + +#### Date of birth + +Follow this pattern whenever you need to ask for a user’s date and place of birth. + + + +### Dates a user can approximate + +Use the [month/year date]({{ site.baseurl }}/components/form/date-input#monthyear) component variation for dates that a user may struggle to remember. For example: *When did you receive your high school diploma or equivalency certificate?* + + + +### Date ranges + +Use one of the aforementioned components depending on the question being asked. For example: Service history dates. + + + +## How to design and build + +### How this pattern works + +- **Write clear form labels for date ranges** Do not use “From” and “To” to when labeling form labels for date ranges. Make it clear what dates you’re asking for. Example: “Obligation start date” and “Obligation end date” +- **Spell out full month names in the selected state** The month select box should have the full month’s name. Example: January +- **Validate date inputs.** You should validate date inputs so you can let users know if they have entered one incorrectly. A general validation message for an incorrect date: *Please enter a valid date* +- **Use the date input field for date of birth.** Writing out the label for each birth date string and separating them into three fields instead of one eliminates potential format confusion. +- **Use one text input for Place of birth.** This format is easier to fill out for both Veterans born outside the United States and for Veterans who were born United States citizens. + +## Content considerations + +### Error message templates for dates + +**If nothing is entered** +Say 'Please enter a date' + +**If the date entered can’t be correct** +Say ‘Please provide a valid date' + +**If the date entered is in a month year format and can’t be correct** +Say 'Please enter a valid month and year' + +**If the year needed to be within a specific range** +Say 'Please enter a year between [minimum year] and [maximum year]' + +**For a date range, if the date must be after another date** +Say 'To date must be after From date' + +**If the date is in the past when it needs to be today or in the future** +Say 'Please provide a valid current or future date' + +**If the date is in the future when it needs to be past date or current date** +Say 'Please enter a valid current or past date' \ No newline at end of file diff --git a/src/_patterns/forms/direct-deposit.md b/src/_patterns/ask-users-for/direct-deposit.md similarity index 73% rename from src/_patterns/forms/direct-deposit.md rename to src/_patterns/ask-users-for/direct-deposit.md index 9aeb42fbb..99cc3ad33 100644 --- a/src/_patterns/forms/direct-deposit.md +++ b/src/_patterns/ask-users-for/direct-deposit.md @@ -1,42 +1,53 @@ --- layout: pattern -permalink: /patterns/forms/direct-deposit -has-parent: /patterns/forms/ +permalink: /patterns/ask-users-for/direct-deposit +sub-section: ask-users-for title: Direct deposit -intro-text: "The current implementation for collecting direct deposit information on VA.gov forms." +intro-text: "Follow this pattern to ask users for their banking information in order to enable direct deposit." status: use-deployed anchors: - - anchor: Input - - anchor: Review + - anchor: Usage + - anchor: Examples + - anchor: How to design and build + - anchor: Content considerations --- -## Input - - +## Usage ### When to use this pattern -Apply this pattern when Veterans are asked to provide banking information to receive funds electronically. +* **Provide banking information.** Apply the [input pattern](#how-to-design-and-build---input) when Veterans are asked to provide banking information to receive funds electronically. +* **Review and change banking information.** Follow this [review pattern](#how-to-design-and-build---review) to provide Veterans with the ability to change their bank account information. This direct deposit information is pre-populated because the Veteran already filled these bank details beforehand. + +## Examples + + + +### Production example + +[VA Form 22-10203 (Application for Edith Nourse Rogers STEM Scholarship)](https://www.va.gov/education/other-va-education-benefits/stem-scholarship/apply-for-scholarship-form-22-10203/introduction) + +## How to design and build - Input -#### Direct deposit card name +### Direct deposit card name Under the form name and chapter title, begin the card with a heading level 3 of “Direct deposit information” -#### Card description +### Card description Under the card name have a short description on how VA only accepts direct deposit and what their direct deposit information is going to be used for. Example: *We make payments only through direct deposit, also called electronic funds transfer (EFT).* -#### Check image +### Check image The check image provides a guide for Veterans to find their account and routing numbers from a check when filling out direct deposit information. -#### Check image caption +### Check image caption Provides a caption for the check image, which is used to provide supplemental information for the image. -### Form controls +### Anatomy - Form controls #### Account type Present the account type as a radio button group since the Veteran has only two options to choose from: checking and savings. @@ -51,7 +62,7 @@ The bank routing number text input is required for this form pattern. The routin The bank account number text input is required for this form pattern. #### “I don’t want to use direct deposit” checkbox - + Underneath the direct deposit input card, give the Veteran the option to not give their direct deposit information. When the checkbox is checked, the direct deposit input card above will disappear. @@ -72,16 +83,10 @@ Example of additional information that can be displayed: To get started, call one of the participating banks or credit unions listed on the VBBP website. Be sure to mention the Veterans Benefits Banking Program. Note: The Department of the Treasury requires us to make electronic payments. If you don’t want to use direct deposit, you’ll need to call the Department of the Treasury at **888-224-2950**. Ask to talk with a representative who handles waiver requests. They can answer any questions or concerns you may have.* -**Live application examples:** - -[VA Form 22-10203 (Application for Edith Nourse Rogers STEM Scholarship)](https://www.va.gov/education/other-va-education-benefits/stem-scholarship/apply-for-scholarship-form-22-10203/introduction) - -## Review +## How to design and build - Review - + -### When to use this pattern -Follow this pattern to provide Veterans with the ability to change their bank account information. This direct deposit information is pre-populated because the veteran already filled these bank details beforehand. #### Bank account information card The direct deposit information will live in the bank account information card. The card will have a short description on what the information below means, *“This is the bank account information we have on file for you. This is where we’ll send your payments.”* @@ -91,7 +96,9 @@ Mask the routing and account number but leave the 4 last digits. This masking is #### Call to action When the “update account information” button is clicked, the bank account information card will turn into an interactive card in which the review state will revert back into the input state. -#### Error message templates for direct deposit +## Content considerations + +### Error message templates for direct deposit **When a user doesn’t enter a bank account number:** diff --git a/src/_patterns/ask-users-for/email-address.md b/src/_patterns/ask-users-for/email-address.md new file mode 100644 index 000000000..7375867da --- /dev/null +++ b/src/_patterns/ask-users-for/email-address.md @@ -0,0 +1,46 @@ +--- +layout: pattern +permalink: /patterns/ask-users-for/email-address +sub-section: ask-users-for +title: Email address +intro-text: "Follow this pattern to ask a user for an email address." +status: use-deployed +anchors: + - anchor: Usage + - anchor: Examples + - anchor: How to design and build + - anchor: Content considerations +--- + +## Usage + +### When to use this pattern + +* **When you need to collect an email address.** For example, for contact information. + +## Examples + + + +## How to design and build + +### How this pattern works + +- **If possible, tell users why you want their email address.** Users need to know that the VA won’t abuse their email and which email they’d like to provide. An example message is: *Please enter your contact information so we can get in touch with you if we have questions about your application.* +- **Validate email addresses.** You should validate email addresses so you can let users know if they have entered one incorrectly. A validation message for when a user forgets the “@”: *Please enter a valid email address.* A validation message for when a user doesn’t use the same email in the “Confirm email address” field: *This email doesn't match the one you entered above.* + +## Content considerations + +### Error message templates for email addresses + +**When a user doesn’t enter an email address:** + +Say 'Please enter an email address' + +**When a user doesn’t enter an email address in the correct format:** + +Say 'Please enter an email address using this format: X@X.com' + +**When a user doesn’t use the same email in the “Confirm email address” field:** + +Say ‘This email doesn’t match the one you entered above’. \ No newline at end of file diff --git a/src/_patterns/feedback.md b/src/_patterns/ask-users-for/feedback.md similarity index 85% rename from src/_patterns/feedback.md rename to src/_patterns/ask-users-for/feedback.md index f391e15d9..183fd575f 100644 --- a/src/_patterns/feedback.md +++ b/src/_patterns/ask-users-for/feedback.md @@ -1,6 +1,10 @@ --- layout: pattern title: Feedback +permalink: /patterns/ask-users-for/feedback +redirect_from: + - /patterns/feedback +sub-section: ask-users-for intro-text: VA asks users of VA.gov for feedback via a feedback button and form provided by Medallia. contributors: Ian McCullough (VSP Contact Center) status: use-deployed @@ -20,7 +24,7 @@ anchors: ## Examples -{% include component-example.html alt="About VA health benefits page screenshot with call-outs." file="/images/patterns/feedback/feedback-anatomy.png" caption="Page anatomy showing the placement for the feedback button." width="50%" %} +{% include component-example.html alt="About VA health benefits page screenshot with call-outs." file="/images/patterns/ask-users-for/feedback/feedback-anatomy.png" caption="Page anatomy showing the placement for the feedback button." width="50%" %} 1. **Main Content**. Content, including any left or right rail sections, within the main content of the page between the header and footer, but above the Back to Top/Last Updated/Feedback section. 2. **Back to Top Button**. Button that scrolls the user back to the top of the page when clicked. This button does not appear on all VA.gov pages. @@ -29,7 +33,7 @@ anchors: ### Feedback form in modal -{% include component-example.html alt="The Medallia feedback form." file="/images/patterns/feedback/feedback-form.png" caption="A 3 question form which appears in a modal after a user clicks the Feedback button and quickly allows the user to provide feedback." width="50%" %} +{% include component-example.html alt="The Medallia feedback form." file="/images/patterns/ask-users-for/feedback/feedback-form.png" caption="A 3 question form which appears in a modal after a user clicks the Feedback button and quickly allows the user to provide feedback." width="50%" %} ## How to design and build @@ -66,7 +70,7 @@ To better establish user expectations of location, appropriate space will be pro Manage your VA debt – Desktop - {% include component-example.html alt="The Medallia feedback button shown on a snippet of a desktop width page." file="/images/patterns/feedback/feedback-example-desktop-1.png" caption="An example of the placement of the feedback button at the bottom of a snippet of a page." %} + {% include component-example.html alt="The Medallia feedback button shown on a snippet of a desktop width page." file="/images/patterns/ask-users-for/feedback/feedback-example-desktop-1.png" caption="An example of the placement of the feedback button at the bottom of a snippet of a page." %}
-- Use bordered, multi-selectable accordions
-- When an accordion is open, each section within a chapter should have a secondary “Edit” button in the top right.
-- Underneath the accordions include the note:
-Note: According to federal law, there are criminal penalties, including a fine and/or imprisonment for up to 5 years, for withholding information or for providing incorrect information (See 18 U.S.C. 1001).
-and
-- Privacy agreement
-- Button pair: Secondary button labeled “Back” and Default blue button labeled “Submit application”
-- Last saved application date and time in green background color only alert style
-- Finish this application later default link
-
-**Note:** This content will vary depending on your form. Work with your content specialist or check out the form labels.
-
-## Usage
-
-- Each chapter should be its own accordion.
-- List chapters in chronological order.
-- ‘File upload’ and ‘Add another’ sections should be in the gray card style.
-- ‘Add another’ primary button should be placed at the bottom left on cards that allow users to add information.
-
-- ‘Delete file’ secondary button should be placed at the bottom left on cards that allow users to upload files
-
-
-
diff --git a/src/_patterns/forms/check-a-service-is-suitable.md b/src/_patterns/help-users-to/check-a-service-is-suitable.md
similarity index 85%
rename from src/_patterns/forms/check-a-service-is-suitable.md
rename to src/_patterns/help-users-to/check-a-service-is-suitable.md
index 6c04797aa..3a9c370ef 100644
--- a/src/_patterns/forms/check-a-service-is-suitable.md
+++ b/src/_patterns/help-users-to/check-a-service-is-suitable.md
@@ -1,9 +1,11 @@
---
layout: pattern
-title: Check a service is suitable
-intro-text: "Helps a user to determine if they can or should use a service."
+permalink: /patterns/help-users-to/check-their-eligibility
+title: Check their eligibility
+sub-section: help-users-to
+intro-text: "Helps a user to determine if they are eligible to apply or use a service."
draft: true
-research-title: check-a-service-is-suitable
+research-title: check-their-eligibility
status: use-with-caution-available
anchors:
- anchor: Usage
diff --git a/src/_patterns/help-users-to/check-answers.md b/src/_patterns/help-users-to/check-answers.md
new file mode 100644
index 000000000..69f4ba48a
--- /dev/null
+++ b/src/_patterns/help-users-to/check-answers.md
@@ -0,0 +1,49 @@
+---
+layout: pattern
+title: Check answers
+permalink: /patterns/help-users-to/check-answers
+redirect_from:
+ - /patterns/forms/review
+sub-section: help-users-to
+intro-text: "Follow this pattern to help users check their answers before submitting a form."
+status: use-deployed
+anchors:
+ - anchor: Usage
+ - anchor: How to design and build
+---
+
+## Usage
+
+### When to use this pattern
+
+* **At the end of a form flow.** Allowing users to check their answers before submitting their form allows them an opportunity to catch any mistakes they have made and allows for them to reconsider their answers.
+
+## How to design and build
+
+### How this pattern works
+
+- Each chapter should be its own accordion.
+- List chapters in chronological order.
+- ‘File upload’ and ‘Add another’ sections should be in the gray card style.
+- ‘Add another’ primary button should be placed at the bottom left on cards that allow users to add information.
+- ‘Delete file’ secondary button should be placed at the bottom left on cards that allow users to upload files
+
+### Layout details
+
+- Show the [Progress bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented) along with the chapter title: Review application.
+- Use bordered, multi-selectable [accordions]({{ site.baseurl }}/components/accordion).
+- When an accordion is open, each section within a chapter should have a secondary “Edit” button in the top right.
+- Underneath the accordions include the note:
+> Note: According to federal law, there are criminal penalties, including a fine and/or imprisonment for up to 5 years, for withholding information or for providing incorrect information (See 18 U.S.C. 1001).
+- Following the note also include the Privacy agreement.
+- [Button pair]({{ site.baseurl }}/components/button/button-pair): Secondary button labeled “Back” and Default blue button labeled “Submit application”
+- Last saved application date and time in green background color only alert style
+- Finish this application later default link
+
+**Note:** This content will vary depending on your form. Work with your content specialist or check out the form labels.
+
+### Components used in this pattern
+
+* [Accordion]({{ site.baseurl }}/components/accordion)
+* [Button pair]({{ site.baseurl }}/components/button/button-pair)
+* [Progress bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented)
\ No newline at end of file
diff --git a/src/_patterns/authenticated-info-list.md b/src/_patterns/help-users-to/check-personal-information.md
similarity index 85%
rename from src/_patterns/authenticated-info-list.md
rename to src/_patterns/help-users-to/check-personal-information.md
index 1f9064ec9..9d48ce83d 100644
--- a/src/_patterns/authenticated-info-list.md
+++ b/src/_patterns/help-users-to/check-personal-information.md
@@ -1,6 +1,11 @@
---
layout: pattern
-title: Authenticated info list
+title: Check personal information
+permalink: /patterns/help-users-to/check-personal-information
+redirect_from:
+ - /patterns/authenticated-info-list
+aka: Authenticated info list
+sub-section: help-users-to
intro-text: "This pattern helps users quickly see a list of items related to their own personal information, as well as quickly navigate to answers to the questions they might have."
status: use-with-caution-available
contributors: Shawna Hein, Kevin Stachura
@@ -13,8 +18,6 @@ anchors:
- anchor: Research
---
-
-
## Purpose
The purpose of this pattern is:
@@ -26,7 +29,7 @@ The purpose of this pattern is:
## Example
-
+
1. **'On this page' component.** This section should link to the associated content on the page. It should 'jump' to that section when the user clicks it.
@@ -39,15 +42,15 @@ The purpose of this pattern is:
#### Typical layout
-
+
#### Layout with consolidated additional information (FAQs section)
-
+
### Mobile
-
+
### Usage
@@ -66,7 +69,7 @@ The on this page component should start with a link to the list itself, and then
#### Integrating contextual questions in the cards
Overall questions should be in a content area accessed by the "on this page" component, but more contextual questions can be "additional info" components on the cards themselves. Example provided.
-
+
#### Items on the card and optional card elements
Make sure to not overload elements on the cards. If you're finding you need to let the user know about a fair amount of information about a single card, link to a details page with more detail.
diff --git a/src/_patterns/forms/sub-task.md b/src/_patterns/help-users-to/complete-a-sub-task.md
similarity index 93%
rename from src/_patterns/forms/sub-task.md
rename to src/_patterns/help-users-to/complete-a-sub-task.md
index 3f590bdf7..f618d5299 100644
--- a/src/_patterns/forms/sub-task.md
+++ b/src/_patterns/help-users-to/complete-a-sub-task.md
@@ -1,8 +1,11 @@
---
layout: pattern
-title: Sub-task
-permalink: /patterns/forms/sub-task
-has-parent: /patterns/forms/
+permalink: /patterns/help-users-to/complete-a-sub-task
+redirect_from:
+ - /patterns/forms/sub-task
+sub-section: help-users-to
+title: Complete a sub task
+aka: Sub-task, Wizard
intro-text: "Helps users complete a shorter task before, or within, a larger process or flow."
research-title: sub-task
sketch-link: https://www.sketch.com/our-workspace-the-pattern-library/specific-page-for-this-pattern
@@ -27,7 +30,7 @@ The sub-task pattern provides guidance on how to "keep it simple". This pattern
All of the use cases below are valid uses for this pattern.
-* **Task before a flow.** Sometimes, the eligibility for a VA benefit or resource is so complex that it has multiple access pathways, depending on a user's specific needs or circumstances. Users may experience consequences (e.g. not getting the benefit or limiting benefit options), if they misunderstand eligibility content or choose the wrong pathway. Use this pattern to guide users down an optimal pathway for their circumstances. This is also known as [branching eligibility choices]({{ site.baseurl }}/patterns/benefit-applications#f-optional-sub-task-pattern-for-branching-eligibility-choices).
+* **Task before a flow.** Sometimes, the eligibility for a VA benefit or resource is so complex that it has multiple access pathways, depending on a user's specific needs or circumstances. Users may experience consequences (e.g. not getting the benefit or limiting benefit options), if they misunderstand eligibility content or choose the wrong pathway. Use this pattern to guide users down an optimal pathway for their circumstances. This is also known as [branching eligibility choices]({{ site.baseurl }}/patterns/help-users-to/navigate-benefit-applications#f-optional-help-users-to-complete-a-sub-task-pattern-for-branching-eligibility-choices).
* **Task within a flow.** Use this pattern when we need the user to complete a shorter task, one that can be accomplished with a few questions, within a larger process that may span touchpoints.
#### Design principles
@@ -43,7 +46,7 @@ That one decision or question may require more than one input from the user as t
### When not to use this pattern
-* **In place of a standard form flow.** This pattern does not replace a standard form flow and layout. This pattern exists within a larger flow or process, not by itself. Thus it would be inappropriate to create a stand-alone form flow that does not have a [Progress bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented), [Button pair]({{ site.baseurl }}/components/button/button-pair), and other components found in a typical [form flow]({{ site.baseurl }}/patterns/forms/#the-structure-of-a-form).
+* **In place of a standard form flow.** This pattern does not replace a standard form flow and layout. This pattern exists within a larger flow or process, not by itself. Thus it would be inappropriate to create a stand-alone form flow that does not have a [Progress bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented), [Button pair]({{ site.baseurl }}/components/button/button-pair), and other components found in a typical [form flow]({{ site.baseurl }}/templates/forms/#the-structure-of-a-form).
### When to use caution
@@ -53,14 +56,14 @@ That one decision or question may require more than one input from the user as t
### Pre-check-in experience
-{% include component-example.html alt="Check-in experience sub-task example." file="/images/patterns/forms/sub-task/Check-in-sub-task.png" caption="Pre-check-in sub-task." %}
+{% include component-example.html alt="Check-in experience sub-task example." file="/images/patterns/help-users-to/complete-a-sub-task/Check-in-sub-task.png" caption="Pre-check-in sub-task." %}
* An example of a task that helps determine if current information on file for a Veteran is correct before checking in at a facility. This example shows the success path.
* Note that this example features a [Button pair]({{ site.baseurl }}/components/button/button-pair) for Yes/no which has some [accessibility considerations](#accessibility-considerations).
### VA Online Scheduling (VAOS) Vaccine sub-task
-{% include component-example.html alt="VA Online Scheduling sub-task example." file="/images/patterns/forms/sub-task/VAOS-vaccine-sub-task.png" caption="VA Online Scheduling vaccine sub-task." %}
+{% include component-example.html alt="VA Online Scheduling sub-task example." file="/images/patterns/help-users-to/complete-a-sub-task/VAOS-vaccine-sub-task.png" caption="VA Online Scheduling vaccine sub-task." %}
* An example of a short task within a larger process, the questions related to vaccination status are a sub-task that results in either the user moving forward in the process or reaching a stopping point. This is sometimes also referred to as a "screener question", in that it screens out users from continuing along the larger process.
* Step 4 in this sub-task shows an example of an [end point](#define-clear-end-points).
diff --git a/src/_patterns/show-more-options.md b/src/_patterns/help-users-to/navigate-a-long-list.md
similarity index 66%
rename from src/_patterns/show-more-options.md
rename to src/_patterns/help-users-to/navigate-a-long-list.md
index 591fc5c19..212f7e485 100644
--- a/src/_patterns/show-more-options.md
+++ b/src/_patterns/help-users-to/navigate-a-long-list.md
@@ -1,9 +1,14 @@
---
layout: pattern
-title: Show more options
+title: Navigate a long list
+permalink: /patterns/help-users-to/navigate-a-long-list
+redirect_from:
+ - /patterns/show-more-options
+aka: Show more options
+sub-section: help-users-to
contributors: Peter Russo (VAOS)
added: 7/5/2022
-intro-text: Allows users to progressively display the available options in a long list as needed. This helps the user process a long list in smaller chunks.
+intro-text: Allows users to navigate and process a long list of items by progressively displaying additional items as needed.
research-title: Show more options
sketch-link: https://www.sketch.com/s/610156b6-f281-4497-81f3-64454fc72156/p/AC70760E-54B7-41E1-982A-26E3B29049DF
status: use-with-caution-candidate
@@ -28,29 +33,31 @@ anchors:
## Examples
-{% include component-example.html alt="Show more options screen example from the VA Online Scheduling application." file="/images/patterns/show-more-options/vaos-choose-location.png" caption="The VA Online Scheduling application uses the Show more options pattern for choosing VA facility locations." width="50%" %}
+{% include component-example.html alt="Show more options screen example from the VA Online Scheduling application." file="/images/patterns/help-users-to/navigate-a-long-list/vaos-choose-location.png" caption="The VA Online Scheduling application uses this pattern for choosing VA facility locations." width="50%" %}
+
+{% include component-example.html alt="Help users to navigate a long list example from the VA Claim Status tool." file="/images/patterns/help-users-to/navigate-a-long-list/claim-status-tool.gif" caption="The VA Claim Status tools uses this pattern for navigating a long list of older updates to a claim." width="75%" %}
## How to design and build
### Anatomy or layout details
-{% include component-example.html alt="Show more options mock-up screen examples." file="/images/patterns/show-more-options/interactions.png" caption="The anatomy of the Show more options pattern." %}
+{% include component-example.html alt="Show more options mock-up screen examples." file="/images/patterns/help-users-to/navigate-a-long-list/interactions-v2.png" caption="The anatomy of the help users to navigate a long list pattern." %}
1. **Default state**. A mobile screen of a page in a VA.gov form flow. The form question consists of a list with ten total options. 5 options are displayed. A link underneath reads "+ show 5 more options"
2. **Default state - sorter**. A dropdown labeled "Sort these options".
3. **Default state - radio options**. Five generic radio buttons.
-4. **Default state - show more link**. Show more link exists between the options nad the navigation buttons.
+4. **Default state - show more button or link**. Show more button or link exists between the options and the navigation buttons.
5. **State when all options are showing**. A mobile screen of a page in a VA.gov form flow. Same as the first except 10 radio buttons are showing, and the link is not.
-6. **State when there are only 5 total options**. A mobile screen of a page in a VA.gov form flow. Same as the first except there is no link to show more options.
+6. **State when there are only 5 total options**. A mobile screen of a page in a VA.gov form flow. Same as the first except there is no link or button to show more options.
### How this pattern works
* Given a long list of options, only the first 5 options are displayed.
-* A link below the options acts as a trigger for revealing additional options.
- * This link does not appear if there are 5 or less options.
-* Clicking the link displays more options, 5 at a time.
-* Once all options are displayed, the link disappears.
-* Once the additional options are revealed, there is no need and thus no mechanism to hide them.
+* A button or link below the options acts as a trigger for revealing additional options.
+ * This button or link does not appear if there are 5 or less options.
+* Clicking the button or link displays more options, 5 at a time.
+* Once all options are displayed, the button or link disappears, or changes label ("Hide options").
+* Once the additional options are revealed, there may be no need, and thus no mechanism, to hide them.
### Components used in this pattern
@@ -59,6 +66,7 @@ anchors:
### Page templates available for this pattern
* This pattern exists in VA Online Scheduling (VAOS) on the facility and provider sections of the "Start scheduling" flow.
+* This pattern also exists in the VA Claim Status tool.
## Content considerations
diff --git a/src/_patterns/benefit-applications.md b/src/_patterns/help-users-to/navigate-benefit-applications.md
similarity index 82%
rename from src/_patterns/benefit-applications.md
rename to src/_patterns/help-users-to/navigate-benefit-applications.md
index 691caadeb..1abb9ec61 100644
--- a/src/_patterns/benefit-applications.md
+++ b/src/_patterns/help-users-to/navigate-benefit-applications.md
@@ -1,6 +1,11 @@
---
layout: pattern
-title: Benefit applications
+title: Navigate benefit applications
+permalink: /patterns/help-users-to/navigate-benefit-applications
+redirect_from:
+ - /patterns/benefit-applications
+aka: Benefit applications
+sub-section: help-users-to
status: use-deployed
intro-text: "Users can apply for benefits in any of the benefit hubs on VA.gov. The policies and regulations around these benefits are very complex, and users often have difficulty determining if they are eligible, what they need to provide, and what to expect after they've submitted their application. For these reasons, Benefit applications, as a pattern, is divided into four distinct \"epics\" that help users navigate the process from start to finish."
anchors:
@@ -35,7 +40,7 @@ The hierarchy of the eligibility pattern allows it to be flexible enough to cove
The eligibility page consists of the following elements:
-
+
#### A. Title and statement of intent
The title should be “Eligibility for (Most Commonly Used Benefit Name).” The statement of intent should state the job the page will do for the user, by stating something like “Find out if you are eligible for (most commonly requested benefits, described in plain language). This allows a user to quickly assess if they are in the right place, and it helps search engines highly rank these pages for appropriate searches.
@@ -49,14 +54,14 @@ The featured content component is used to present the user with the most commonl
Use a single featured component for the most common scenario.
- +Use two or more featured components for multiple scenarios, because there can't be more than one that is the most common. Use other page elements for this purpose.
- +Signed out
-
+
Signed in
-
+
Signed out
-
+ 
Signed in
-
+ 
Signed out
-
+ 
Signed in
-
+ 
Signed out
-
+ 
Signed in
-
+ 