A | B | C | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | AA | AB | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Source | What are we doing? | Design Pattern Name | Description | Instructions | Is this pattern elsewhere at VA or in USWDS? | Authenticated experiences ONLY? | Possible Examples | Comments | Github documentation | |||||||||||||||||
2 | Becky/Contract | Help users to... | Input necessary data only | Form pre-fill based on authenticated user data | Forms will be pre-filled based on user data for authenticated users | Somewhat within the prefill component (VA) | Yes | Form pre-fill and saved data in the current authenticated experience when it is done. | Here is an example from AdHoc on what pre-fill could look like. | https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/ask-va/design/Fields,%20options%20and%20labels/How%20prefill%20works.md#initial-prefill-pattern | |||||||||||||||||
3 | Becky/Contract | Help users to... | Make decisions based on personalized form flows | Smart form flows based on what is already known about the user (e.g. benefits pre-approval) | Forms will reduce burden and present smarter choices based on what is already known about the user | Yes | Notification that informs a user that they can have a shorter form by using their authenticated profile to pre-fill information/previous form information. | ||||||||||||||||||||
4 | Becky/Contract | Help users to... | Edit profile | User profile editing flows | Users will be able to edit their profile | Yes | github profile | ||||||||||||||||||||
5 | Becky/Contract | Help users to... | Know when there's a personal notification | Profile based notifications/alerts both persistent and time limited | Users will be alerted to action items they need to take through persistent and time-based notifications | Yes | |||||||||||||||||||||
6 | Becky/Contract | Help users to... | Navigate as an authenticated user | Authenticated experience navigation integrated into global navigvation structures | Users will be able to easily navigate between authenticated content/applications and the rest of VA.gov | Yes | thinking of Google auth experience where everything has a seemless transition and same look and feel | ||||||||||||||||||||
7 | Becky/Contract | Help users to... | Edit appointments | In person appointment management for authenticated users | Users will be able to make and modify and in-person appointment, such as a doctor's appointment | Yes | thinking of My Chart experience | ||||||||||||||||||||
8 | Becky/Contract | Help users to... | Stay informed of request status | Case management flows (e.g. helpdesk ticket tracking) | Users will be able to track the progress of their request through VA, such as a helpdesk ticket | Yes | |||||||||||||||||||||
9 | Becky/Contract | Help users to... | View profile across multiple applications/websites | Consistent user profile presentation across multiple enterprise applications/websites | Users will have a consistent user profile presentation across multiple enterprise applications/websites | Yes | thinking of Google auth experience where everything has a seemless transition and same look and feel | ||||||||||||||||||||
10 | Becky/Contract | Help users to... | Reduce authentications across environments | Complex authentication flows, such as moving across environments using a single sign-in credential | Users can move across environments after authenticating | Yes | thinking of Google auth experience where everything has a seemless transition and same look and feel | ||||||||||||||||||||
11 | Becky/Contract | Help users to... | [other pattern] | Other personalized experience patterns as determined by discovery and prioritized by OCTO, for instance based on user feedback | [outcome] | [Depends] | |||||||||||||||||||||
12 | Becky/Contract | Help users to... | Message people who can help them within the applciation/website | Web based messaging interface – compose/draft, review messages, reply (e.g. secure mail) | Users can engage in meaningful dialogue with government stakeholders within their authenticated experience | Yes | User sends a message to their doctor, nurse, or admin via their authenticated portal | ||||||||||||||||||||
13 | Becky/Contract | Help users to... | Maintain accurate data within their profile | Personal profile maintenance interfaces | Users are able to keep their profile data up-to-date | Yes | |||||||||||||||||||||
14 | VADS | Ask users for... | A mutually exclusive answer (AKA All or none of the above) | 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. | In the case where the response uses checkboxes, below the question, specify that the user may “select all that apply.” | No | No - it happens in both | ||||||||||||||||||||
15 | VADS | Ask users for... | A single response (AKA One Thing per Page) | Asking for one logical thing at a time allows users to focus on what you are asking from them. Choose the most appropriate implementation of this pattern in forms when we need to collect a single response from a user. | We should always divide long forms into multiple smaller sections that make up a logical series of pages or steps. This helps make a long form less daunting, and easier to understand by allowing the user to focus on smaller tasks. | No | No - it happens in both | ||||||||||||||||||||
16 | VADS | Ask users for... | Addresses | Follow this pattern to ask a user for an address. | Asking for an address. For example, the address for a military base, home, or mailing address. | Yes (Address) | Unsure | ||||||||||||||||||||
17 | VADS | Ask users for... | Contact Preferences | Follow this pattern when you want to ask a user how they’d like to be contacted. | 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. | Yes (Contact Preferences) | Unsure | ||||||||||||||||||||
18 | VADS | Ask users for... | Dates | Use this pattern to collect dates from a person | Follow this pattern whenever you need a person to provide a date on a form. | Yes (Date of Birth) | Unsure | ||||||||||||||||||||
19 | VADS | Ask users for... | Direct deposit | Follow this pattern to ask users for their banking information in order to enable direct deposit | Provide, review and change banking information. | Yes | |||||||||||||||||||||
20 | VADS | Ask users for... | Email address | Follow this pattern to ask a user for an email address | When you need to collect an email address. For example, for contact information. | Yes (Email Address) | No - it happens in both | ||||||||||||||||||||
21 | VADS | Ask users for... | Feedback | VA asks users of VA.gov for feedback via a feedback button and form provided by Medallia | Always provide the ability for users to provide sentiment feedback. The feedback button appears at the bottom of every modernized VA.gov page. | No | No - it happens in both | ||||||||||||||||||||
22 | VADS | Ask users for... | Files (AKA File Upload) | Follow this pattern to help users upload a file. | Required documentation. When a user must upload a file in order to provide required documentation | No | Yes | ||||||||||||||||||||
23 | VADS | Ask users for... | Gender | Follow this pattern whenever you need to ask Veterans their gender. | Don’t ask if it does not benefit the user experience. You should only ask users about gender when absolutely necessary. | Yes (Gender) | |||||||||||||||||||||
24 | VADS | Ask users for... | Multiple responses (AKA List & Loop) | Choose the most appropriate implementation of this pattern in forms when we need to collect multiple responses from a user. | Collecting the same data in a series of questions. Collecting many possible responses. | No | |||||||||||||||||||||
25 | VADS | Ask users for... | Names | Follow this pattern whenever you need to ask for a person's name for an application. | When you need to collect a person’s name. For example, for contact information or to complete an application. | Yes (Name) | |||||||||||||||||||||
26 | VADS | Ask users for... | Phone numbers | Follow this pattern when you want to ask for a phone number. | When you need to collect a phone number. For example, for contact information. | Yes (Phone Number) | |||||||||||||||||||||
27 | VADS | Ask users for... | Pronouns | Follw this pattern to ask Veterans for their pronouns. | When you need to collect a person’s pronouns in order to address them appropriately. | Yes (Pronouns) | |||||||||||||||||||||
28 | VADS | Ask users for... | Race, ethnicity, or origin | Follow this pattern whenever you need to ask veterans for their race, ethnicity or origin. | Don’t ask if it does not benefit the user experience. Only collect users’ information on this topic if you are going to use the data. | Yes (Race and Ethnicity) | |||||||||||||||||||||
29 | VADS | Ask users for... | Relationship to Veteran | Follow this pattern to ask a user for their relationship to the Veteran. | Asking for the relationship to the Veteran. For example, when a caregiver is filling out a form. | No | |||||||||||||||||||||
30 | VADS | Ask users for... | Service History | Follow this pattern to ask a user about their service/military history | Service periods, Use the multiple response pattern for adding multiple service periods, Some forms will only require the last branch of service. | No | |||||||||||||||||||||
31 | VADS | Ask users for... | Signature | Use this pattern when you need a user to provide their signature as a statement of truth | Certification statement or statement of truth. | No | |||||||||||||||||||||
32 | VADS | Ask users for... | Social security or VA file number | Follow this pattern whenever you need to collect a person's Social Security or VA file number for an application. | When you need to collect a person’s Social Security or VA file number. For example, for an application for identity purposes. | Yes (Social Security Number) | |||||||||||||||||||||
33 | VADS | Help users to... | Check Answers | Follow this pattern to help users check their answers before submitting a form. | 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. | No | |||||||||||||||||||||
34 | VADS | Help users to... | Check eligibility | Follow this pattern to help users check their eligibility for a benefit or service. | When a user may not be eligible for a benefit or service. Providing users feedback on their eligibility for a benefit or service, and enabling a way to change their answers, can help reduce a high rate of declined applications. | No | |||||||||||||||||||||
35 | VADS | Help users to... | Check personal information (AKA Authenticated info list) | 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. | The purpose of this pattern is: To create an easily scannable list / group of a user’s related items, To consolidate the page layout and remove the sidebar, so as to reduce page scanning, and To maintain consistency with mobile layout patterns. | No | |||||||||||||||||||||
36 | VADS | Help users to... | Complete a sub task (AKA Sub-task, Wizard) | Helps users complete a shorter task before, or within, a larger process or flow. | Task before or within a flow | No | |||||||||||||||||||||
37 | VADS | Help users to... | Keep a record of submitted information | This pattern provides the user with a printable record of their submission. | When you are collecting information from users on a long form. The pattern provides the user with a printable record of their submission. A printed record provides a reference for future use and helps to confirm a successful form submission. | Yes (Keep a Record) | |||||||||||||||||||||
38 | VADS | Help users to... | Know how their information is updated | Follow this pattern to help users know how and when their personal information will be updated in their profile when the user is updating information in an application. | Prefilled Profile data is being displayed and is editable. When pre-filling a form with data stored in the user’s Profile, it is appropriate to explain which data we have stored for a user and make it clear if that data will be changed if edited in this form. | No | |||||||||||||||||||||
39 | VADS | Help users to... | Navigate a long list (AKA Show more options) | Allows users to navigate and process a long list of items by progressively displaying additional items as needed. | Progressively reveal more options. When you need to focus the user’s attention on the top of a long list of options. | No | |||||||||||||||||||||
40 | VADS | Help users to... | Navigate benefit applications (AKA Benefit applications) | 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. | To give the user a quick way to ‘jump’ to desired content | No | |||||||||||||||||||||
41 | VADS | Help users to... | Recover from errors (AKA Error messages) | Details the structure, style, and tone for error and informational messages | Every error has a title, description and button or link for navigation | No | Ticket #1083 is requesting updated guidance on this pattern. | ||||||||||||||||||||
42 | VADS | Help users to... | Stay informed of their application status | When we need to keep the user informed of their application status, there is currently no "one size fits all" solution. To provide clarity, this page shows examples of patterns that exist on VA.gov today. | When users need to stay informed of their application status. After users have submitted an application, keep them informed of their application status. | No | |||||||||||||||||||||
43 | ? | Inform users of.... | Auto-save alert | Informs users that their application has been saved, the date it was last saved on, and the request ID # | No | Yes | We think this is used in the 526 form | The Ask a Vet team presented some research on this pattern, but have deprioritized the work for now. | |||||||||||||||||||
44 | |||||||||||||||||||||||||||
45 | |||||||||||||||||||||||||||
46 | |||||||||||||||||||||||||||
47 | |||||||||||||||||||||||||||
48 | |||||||||||||||||||||||||||
49 | |||||||||||||||||||||||||||
50 | |||||||||||||||||||||||||||
51 | |||||||||||||||||||||||||||
52 | |||||||||||||||||||||||||||
53 | |||||||||||||||||||||||||||
54 | |||||||||||||||||||||||||||
55 | |||||||||||||||||||||||||||
56 | |||||||||||||||||||||||||||
57 | |||||||||||||||||||||||||||
58 | |||||||||||||||||||||||||||
59 | |||||||||||||||||||||||||||
60 | |||||||||||||||||||||||||||
61 | |||||||||||||||||||||||||||
62 | |||||||||||||||||||||||||||
63 | |||||||||||||||||||||||||||
64 | |||||||||||||||||||||||||||
65 | |||||||||||||||||||||||||||
66 | |||||||||||||||||||||||||||
67 | |||||||||||||||||||||||||||
68 | |||||||||||||||||||||||||||
69 | |||||||||||||||||||||||||||
70 | |||||||||||||||||||||||||||
71 | |||||||||||||||||||||||||||
72 | |||||||||||||||||||||||||||
73 | |||||||||||||||||||||||||||
74 | |||||||||||||||||||||||||||
75 | |||||||||||||||||||||||||||
76 | |||||||||||||||||||||||||||
77 | |||||||||||||||||||||||||||
78 | |||||||||||||||||||||||||||
79 | |||||||||||||||||||||||||||
80 | |||||||||||||||||||||||||||
81 | |||||||||||||||||||||||||||
82 | |||||||||||||||||||||||||||
83 | |||||||||||||||||||||||||||
84 | |||||||||||||||||||||||||||
85 | |||||||||||||||||||||||||||
86 | |||||||||||||||||||||||||||
87 | |||||||||||||||||||||||||||
88 | |||||||||||||||||||||||||||
89 | |||||||||||||||||||||||||||
90 | |||||||||||||||||||||||||||
91 | |||||||||||||||||||||||||||
92 | |||||||||||||||||||||||||||
93 | |||||||||||||||||||||||||||
94 | |||||||||||||||||||||||||||
95 | |||||||||||||||||||||||||||
96 | |||||||||||||||||||||||||||
97 | |||||||||||||||||||||||||||
98 | |||||||||||||||||||||||||||
99 | |||||||||||||||||||||||||||
100 |