{"action":"created","issue":{"url":"https://api.github.com/repos/uswds/uswds/issues/2325","repository_url":"https://api.github.com/repos/uswds/uswds","labels_url":"https://api.github.com/repos/uswds/uswds/issues/2325/labels{/name}","comments_url":"https://api.github.com/repos/uswds/uswds/issues/2325/comments","events_url":"https://api.github.com/repos/uswds/uswds/issues/2325/events","html_url":"https://github.com/uswds/uswds/issues/2325","id":291358013,"number":2325,"title":"Collect design patterns for a shared user research library","user":{"login":"maya","id":5249443,"avatar_url":"https://avatars2.githubusercontent.com/u/5249443?v=4","gravatar_id":"","url":"https://api.github.com/users/maya","html_url":"https://github.com/maya","followers_url":"https://api.github.com/users/maya/followers","following_url":"https://api.github.com/users/maya/following{/other_user}","gists_url":"https://api.github.com/users/maya/gists{/gist_id}","starred_url":"https://api.github.com/users/maya/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maya/subscriptions","organizations_url":"https://api.github.com/users/maya/orgs","repos_url":"https://api.github.com/users/maya/repos","events_url":"https://api.github.com/users/maya/events{/privacy}","received_events_url":"https://api.github.com/users/maya/received_events","type":"User","site_admin":false},"labels":[{"id":228861940,"url":"https://api.github.com/repos/uswds/uswds/labels/[Skill]%20UX","name":"[Skill] UX","color":"0071bc","default":false},{"id":373990644,"url":"https://api.github.com/repos/uswds/uswds/labels/[Status]%20Idea","name":"[Status] Idea","color":"f9c642","default":false},{"id":551879610,"url":"https://api.github.com/repos/uswds/uswds/labels/[Type]%20Research","name":"[Type] Research","color":"02bfe7","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-01-24T21:00:52Z","updated_at":"2018-02-14T22:27:40Z","closed_at":null,"author_association":"OWNER","body":"This is an ongoing list of design patterns we know other agencies have user research for to include in a future shared user research library. More work will need to be done to determine how this may take shape #2297 and is simply a list of design patterns to come back to.\r\n\r\n## Design patterns\r\n- Sticky side navigation\r\n  - USA.gov has videos and user research results\r\n- Forms \r\n  - https://design.cms.gov/ has some research on various design patterns cc @sawyerh \r\n\r\nInspired by [GOV.UK Design Patterns Wiki](https://paper.dropbox.com/doc/GOV.UK-Design-Patterns-Wiki-hkou7bpzKya8Dadv24V1z).\r\n\r\n## ⭐️ Contribute \r\nIf you're working on government websites and have user research on design patterns or UI interactions, please post them to this issue. "},"comment":{"url":"https://api.github.com/repos/uswds/uswds/issues/comments/365765958","html_url":"https://github.com/uswds/uswds/issues/2325#issuecomment-365765958","issue_url":"https://api.github.com/repos/uswds/uswds/issues/2325","id":365765958,"user":{"login":"sawyerh","id":371943,"avatar_url":"https://avatars2.githubusercontent.com/u/371943?v=4","gravatar_id":"","url":"https://api.github.com/users/sawyerh","html_url":"https://github.com/sawyerh","followers_url":"https://api.github.com/users/sawyerh/followers","following_url":"https://api.github.com/users/sawyerh/following{/other_user}","gists_url":"https://api.github.com/users/sawyerh/gists{/gist_id}","starred_url":"https://api.github.com/users/sawyerh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sawyerh/subscriptions","organizations_url":"https://api.github.com/users/sawyerh/orgs","repos_url":"https://api.github.com/users/sawyerh/repos","events_url":"https://api.github.com/users/sawyerh/events{/privacy}","received_events_url":"https://api.github.com/users/sawyerh/received_events","type":"User","site_admin":false},"created_at":"2018-02-14T22:27:40Z","updated_at":"2018-02-14T22:27:40Z","author_association":"CONTRIBUTOR","body":"So far we've done two rounds of user testing for the new HC.gov application. The format of the tests were InVision prototypes, so we haven't yet gotten a ton of results around the usability of the form fields themselves. There is one patterns that we've tested that we do have some preliminary results on, with secondary research, that have been encouraging and worth sharing:\r\n\r\n## Task list\r\n\r\nWe've been testing a \"task list\" pattern as a way to:\r\n\r\n1. Introduce a user to the application so they know what's coming up.\r\n1. Allow the user to navigate to previous sections of the application.\r\n1. Allow a user to see their current progress, at a high level, within the application.\r\n\r\nThis pattern was inspired by [GOV.UK's Task list pages](https://www.gov.uk/service-manual/design/task-list-pages-beta), and they have some [additional research notes here](https://paper.dropbox.com/doc/Task-list-pages-UQUXO53CLWTfwvjaTOboE).\r\n\r\nThe first iteration we tested was this:\r\n\r\n| Step 1 | After completing step 1 | Example form page with \"View all steps\" link |\r\n| ------ | ------------------------ | -------------------- |\r\n| ![image](https://user-images.githubusercontent.com/371943/36230063-3e40b9f2-11a7-11e8-926e-8351f0532f8a.png) | ![image](https://user-images.githubusercontent.com/371943/36230086-4c5adff4-11a7-11e8-8658-37042e1a607b.png) | ![image](https://user-images.githubusercontent.com/371943/36231353-c4e0e406-11ab-11e8-8549-c17cc3f36676.png) |\r\n\r\n\r\nWe tested this prototype with 9 participants and some of the findings were:\r\n\r\n- Most users tended to click the green \"Start\" button right away, not reading the text on the page. For our case, this is actually fine, and showed that users were able to quickly identify how to start their application, and understood to start from the first step in the list.\r\n- Some users commented about the green button, one of them saying:\r\n  > I like green, green means go\r\n- Users understood that grayed-out steps were disabled, and that they needed to complete the steps one at a time from top to bottom.\r\n- In the design, the step titles were intended to be hyperlinks that would take the user to the same page as the \"Start\" button. The goal was to provide multiple ways for a user to proceed with their application, or navigate to previously completed step. However, this seemed to cause confusion for some users. Some users weren't sure where the title link would take them, and some thought it might take them to a page describing the step. Our takeaway here was to remove the link from the title in the next iteration.\r\n- In the prototype, when a user is on a question page, they can click a \"View all steps\" link to navigate back to the task list to see their progress. If a user hadn't yet started the next step, the button would say \"Start\". This caused confusion for some users. When one user came back to the page and the \"Start\" button moved to the second step, there was some concern that it would Start another application, and he suggested it would be clearer if it said \"Continue\". We agree, and in future iterations the CTA will say \"Continue\" for subsequent steps, even if they haven't been started yet.\r\n- Users seemed to understand that to go back to a previous step, they would click the \"Edit\" link to the right of the step.\r\n\r\n\r\nP.S. Let me know if you prefer a different format for sharing future findings."}}
{"actor":{"display_login":"sawyerh"}}