Skip to content

Commit

Permalink
content updates from staging ticket
Browse files Browse the repository at this point in the history
  • Loading branch information
adamwhitlock1 committed Dec 12, 2024
1 parent 1475ac5 commit fd73319
Showing 1 changed file with 21 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ anchors:
* **User control and freedom.** This pattern also gives users control over their own information thereby providing [control and freedom](https://www.nngroup.com/articles/user-control-and-freedom/).

### When not to use this pattern
- **For unauthenticated users**. Users who aren't signed in shouldn't see their information prefilled when they interact with an application. But, when forms don't require users to be signed in, they should see an information alert describing benefits to signing in. [View the unauthenticated intro page alert](#unauthenticated-intro-page-alert) later described on this page.
- **For unauthenticated users.** Users who aren't signed in shouldn't see their information prefilled when they interact with an application. But, when forms don't require users to be signed in, they should see an information alert describing benefits to signing in. [View the unauthenticated intro page alert](#unauthenticated-intro-page-alert) later described on this page.

### When to use caution
- **When prefilling data from a source other than VA Profile.** It is crucial to explain to the user exactly where the data is coming from so that if there are any errors in the data, it is clear how to correct them.
Expand All @@ -37,7 +37,7 @@ anchors:
This pattern involves these types of pages found in VA.gov forms:
- **Introduction page**: The first page of a form. Introduces the process the Veteran or other beneficiary will follow to apply for a benefit or to complete a supporting form. Changes slightly after a user signs in.
- **Personal information page**: Usually the first page of a form after the user signs in. Has personal details that cannot be edited online, like name, date of birth, Social Security number, etc.
- **Prefill check page**: Any page of a form that displays prefilled information users can edit within the form.
- **Prefill edit pages**: Any pages on which users edit prefilled data.

#### Introduction page
There are two states of an introduction page: Authenticated and Unauthenticated.
Expand All @@ -54,24 +54,28 @@ There are two states of an introduction page: Authenticated and Unauthenticated.

### How this pattern works

#### Communicate when and why information will be prefilled
This pattern communicates when and why information will be prefilled with:
- **Unauthenticated intro page alert.** This tells users they should expect prefilled information in a form after they sign in. The alert also encourages users to sign in to benefit from this time-saving feature.
- **Authenticated intro page alert.** This alert tells users that some of their information may be prefilled for them because they are signed in.

#### Communicate information that cannot be edited
This pattern communicates information that cannot be edited with:
- **Uneditable prefilled information displayed in a card.** Prefilled information (such as legal name, date of birth, and Social Security number) is displayed in a card component.
- **Directions for updating uneditable information.** Helper text is added under the card that has the bolded word "note" and directions to update this information offline. For additional guidance on helping users update prefilled information, see the ["Help users to... Know how their information is updated"](https://design.va.gov/patterns/help-users-to/know-how-their-information-is-updated) pattern which will be updated soon.
This pattern communicates information that cannot be edited by:
- **Omitting the edit link in cards with non-editable information.** For information that cannot be changed online (such as legal name, date of birth, and Social Security number), remove the edit link within the card component.
- **Including textual instructions for updating uneditable information.** Under the card with the uneditable data, display informational text starting with the bolded word “Note:” followed by directions to update this information offline. See the "content considerations" section below for sample text.

#### Communicate information that can be edited
This pattern communicates information that can be edited with:
- **Editable prefilled information displayed in a card with an edit link.** Prefilled information that is editable is displayed in a card component with a link to edit the information. For additional guidance on helping users update prefilled information, see the ["Help users to... Know how their information is updated"](https://design.va.gov/patterns/help-users-to/know-how-their-information-is-updated) pattern which will be updated soon.
This pattern communicates information that can be edited by:
- **Displaying editable prefilled information in a card with an edit link.** Display prefilled information in a card component with a link to edit the information. This information may include contact information, such as phone, email, or mailing address.

### Components used in this pattern
#### Communicate where changes will save
- **In most cases, save changes to the VA Profile.** In [user research](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/authenticated-patterns/Design-and-research/2024-07-Research-Initiative-One-Prefill/Prefill%20Research%20Report%2009_2024.md), most users indicated that they want changes made to their information to update the information stored on their VA Profile. On the edit page, display an informational alert informing users that these changes will impact their profile information.

#### Where needed, give users the choice of where to save
- **In some cases, users want to choose where to save their information.** This is especially relevant for information that may change semi-frequently. For example, when applying to refill and track VA prescriptions or medical devices, users may want to send to a temporary mailing address, and may not want this temporary mailing address to save to their VA Profile. In these cases, on the edit page, do not display the informational alert informing them where their changes will save. Instead, display a required radio button below the fields asking them if they also want to update this information in their VA Profile.

- [Alert](https://design.va.gov/components/alert/)
- [Card](https://design.va.gov/components/card)
#### Display success alerts when information has been saved
- **Inform users where the changes were saved.** Display a success alert informing users "We've made these changes to this form and your VA.gov profile" or "We've made these changes to only this form.” This alert should be placed at the top of the page, below the stepper and text "We’ll save your application on every change." Use a standard alert within the form steps. Use a slim alert if the user made changes from the final review page.

### Components used in this pattern
- [Alert](/components/alert/)
- [Radio button](/components/form/radio-button)
- [Additional info](/components/additional-info)


## Examples
Expand Down Expand Up @@ -145,26 +149,9 @@ If a user can update their information, than pieces of information can be shown

[View more prefill card examples on storybook](https://design.va.gov/storybook/?path=/docs/patterns-components-card--docs)

### Prefilled info alert

A prefill info alert tells users that some information on a form has been prefilled.

```html
<va-alert status="info">
<p class="vads-u-margin-y--0">
<strong>Note:</strong> We've prefilled some of your information from your account.
If you need to correct anything, you can select edit below.
All updates will be made only to this form.
</p>
</va-alert>
```

[View mort prefill alert examples on storybook](https://design.va.gov/storybook/?path=/docs/patterns-components-prefill-alert--docs)


## Content considerations
### Directions for updating uneditable information
Directions for updating information that can't be updated online vary. So directions should be updated based on the context of the form or application used. CAIA is currently working on finalizing some base language to be included, but general guidelines are:
Directions for updating information that cant be updated online vary. See the ["Help users to... Update Prefilled information" pattern](/patterns/help-users-to/update-prefilled-information) for guidance. So directions should be updated based on the context of the form or application used. CAIA is currently working on finalizing some base language to be included, but general guidelines are:
- If it's benefits-related, include the content that has the VA benefits hotline
- If it's health-related, include the content that has the VA benefits hotline AND the content to contact your local medical center

Expand Down Expand Up @@ -195,4 +182,4 @@ Directions for updating information that can't be updated online vary. So direct


## Research findings
The Authenticated Experience Design Patterns team conducted [user research](https://github.com/department-of-veterans-affairs/va.gov-team/tree/master/products/authenticated-patterns/Design%20and%20Research/2024-07-Research%20Initiative-One-Prefill) to gather validation about this pattern.
The Authenticated Experience Design Patterns team conducted [user research](https://github.com/department-of-veterans-affairs/va.gov-team/tree/master/products/authenticated-patterns/Design%20and%20Research/2024-07-Research%20Initiative-One-Prefill) in mid 2024 to gather validation about this pattern. The pattern was [further tested](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/authenticated-patterns/Design-and-research/2024-09-Research-Initiative-Two-Update-Prefill/Update%20Prefill%20Research%20Report.md) as part of a late 2024 study by the same team.

0 comments on commit fd73319

Please sign in to comment.