{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "event",
    "type" : "single",
    "title" : "USWDS Monthly Call - October 2022 |Digital.gov",
    "description": "USWDS Monthly Call - October 2022",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/10/20/october-2022-uswds-monthly-call/index.json","item" : [
    {"kicker" : "USWDS","title" :"USWDS Monthly Call - October 2022","deck" : "How do we help users input information that becomes their user profile?","summary" : "We’ll discuss our approach to developing User Profile design patterns, look at some specific guidance, and talk about why it’s so important.","date" : "2022-10-20T14:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","start_date" : "2022-10-20T14:00:00-05:00","end_date" : "2022-10-20T15:00:00-05:00",
      "event_organizer" : "Digital.gov","host" : "U.S. Web Design System","registration_url" : "https://www.eventbrite.com/e/uswds-monthly-call-user-profile-patterns-oct-2022-tickets-441135597447","captions" : "https://www.streamtext.net/player?event=BIS-GSA-JY","authors" : {"dan-williams" : "Dan Williams"},"topics" : {
        
            "content-strategy" : "Content strategy",
            "design" : "Design",
            "user-experience" : "User experience"
            },"primary_image" : { "uid" : "uswds-monthly-call-october-title-card", "alt" :
  "Title card image of USWDS logo, a multi-colored pentagon shape consisting of five triangles, centered on a black background. In white text, the first line says, USWDS Monthly Call. Below that in yellow text, the second line has the date of the event, October 20, 2022.", "width" :
  "1200", "height" :
  "628", "credit" :
  "", "caption" :
  "", "format" :
  "png" },"content" :"\n\u003ca\n    href=\"https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-october-2022.pptx\"\u003eView the slides (PowerPoint presentation, 7.2 MB, 67 pages)\u003c/a\u003e\n\n\n\u003cdiv class=\"usa-accordion accordion\"\u003e\u003ch3 class=\"usa-accordion__heading\"\u003e\n    \u003cbutton\n      class=\"usa-accordion__button\"\n      title=\"View \"\n      aria-expanded=\"false\"\n      aria-controls=\"accordion-1\"\n    \u003e\n      \u003cspan class=\"icon\"\u003e\n          \u003csvg\n            class=\"usa-icon dg-icon dg-icon--standard margin-bottom-05\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          \u003e\n            \n            \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#content_copy\"\u003e\u003c/use\u003e\n          \u003c/svg\u003e\n        \u003c/span\u003e\u003cspan class=\"src\"\u003e\n        \u003cstrong class=\"kicker\"\u003eSlide by Slide\u003c/strong\u003eUSWDS Monthly Call - Presentation Script for October 2022\n        \u003c/span\n      \u003e\n    \u003c/button\u003e\n  \u003c/h3\u003e\u003cdiv\n      id=\"accordion-1\"\n      class=\"accordion-body usa-accordion__content usa-prose\"\n    \u003e\u003cp\u003e\u003cstrong\u003eSlide 1:\u003c/strong\u003e Hi there and welcome to the U.S. Web Design System monthly call for October 2022. Fall is here. It\u0026rsquo;s pumpkin and decorative gourd season. And here we see the USWDS logo in a pumpkin-colored orange and green.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 2:\u003c/strong\u003e My name is Dan Williams, he/him, and I\u0026rsquo;m the USWDS product lead — and this is my avatar: dark hair, blue sweater, collared shirt. In real life I have a blue sweatshirt, but no collar. I\u0026rsquo;d also like to mention that when we introduce ourselves in these calls, you\u0026rsquo;ll hear things like self-descriptions and pronouns — these help everyone share the same context and know a bit more about who we are, whether or not you can see us.\u003c/p\u003e\n\u003cp\u003eFirst, I\u0026rsquo;d like to mention that we\u0026rsquo;re recording this monthly call, so please refrain from turning on your camera. We will manually turn off any cameras to ensure the recording doesn\u0026rsquo;t show us on camera. Unfortunately, while we are recording this call, we currently aren\u0026rsquo;t able to share the video publicly.\u003c/p\u003e\n\u003cp\u003eI’d also like to remind you that by voluntarily attending this Digital [dot] gov event, you agree to abide by Digital.gov’s community guidelines at digital.gov/communities/community-guidelines/ you can leave the meeting at any time if you do not agree to abide by these guidelines. We’ve posted a link to the community guidelines in the chat.\u003c/p\u003e\n\u003cp\u003eIf you are in the Zoom app, you can use integrated live captioning by selecting the “CC” button on the bottom of the screen. If you prefer live captioning in a separate window, we\u0026rsquo;ve posted a link to the live captioning in the chat.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ll be posting other links and references into the chat as we go along, and I encourage you to ask questions in the chat at any time. If any member of our team can answer your question in the chat, we\u0026rsquo;ll do so, otherwise there\u0026rsquo;ll be some time for questions and answers at the end of the hour. Also, be sure to introduce yourself in the chat as well — it\u0026rsquo;s nice to know who\u0026rsquo;s here. It\u0026rsquo;s good to have you here today.\u003c/p\u003e\n\u003cp\u003eFor those of you who find the chat distracting, you’re welcome to close or hide the chat window during the main presentation. You can reopen it later during the Q\u0026amp;A session at the end of this call.\u003c/p\u003e\n\u003cp\u003eSo thanks! And, with that, let\u0026rsquo;s get started!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 3:\u003c/strong\u003e So what\u0026rsquo;s our agenda for today?\u003c/p\u003e\n\u003cp\u003eFirst we\u0026rsquo;ll look at a nice new site launch\u003c/p\u003e\n\u003cp\u003eThen I\u0026rsquo;d like to spend a moment talking about spam and community guidelines\u003c/p\u003e\n\u003cp\u003eThen I\u0026rsquo;ll highlight some product updates\u003c/p\u003e\n\u003cp\u003eAnd then we’ll spend the rest of our time here today talking about user profile patterns, specifically patterns addressing contact information like name, address, and other contact information!\u003c/p\u003e\n\u003cp\u003eAnd if all goes well, we\u0026rsquo;ll have some time left at the end of Q\u0026amp;A. So let\u0026rsquo;s get right into it.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 4:\u003c/strong\u003e With a nice new site launch\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 5:\u003c/strong\u003e This month, it\u0026rsquo;s exciting to share beta.usa.gov (and beta.usa.gov en español) with you. For USAGov, launching these sites is the next step toward continuing USAGov’s role as the federal front door. Explore the new content structure focused on one user intent per page and interactive features that will allow users to find their answers quicker. On the beta.usa.gov homepage a crisp red, white, and blue design. We see an alert notifying folks that this is a beta site, a link to USAGov en Espanol in the top-right, and a blue hero box with the text: Welcome to the USA.gov beta site, the first step to a new USA.gov.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 6:\u003c/strong\u003e Congratulations, and great work! Be sure to let our team know when a new site launches, either with an email or a note on the USWDS public Slack channel!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 7:\u003c/strong\u003e Spam and community guidelines\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 8:\u003c/strong\u003e USWDS Community page\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 9:\u003c/strong\u003e Digital.gov community guidelines\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 10:\u003c/strong\u003e Community guideline highlights\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 11:\u003c/strong\u003e Thanks for being a good community!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 12:\u003c/strong\u003e So now, a few product updates.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 13:\u003c/strong\u003e So, 2.13.4: Last month we\u0026rsquo;d talked about how we were preparing a security update for USWDS 2.x. Well we\u0026rsquo;re taking a second look at that — not because there were any special security concern about this release, but because we felt it might be an opportunity to strip the package of a lot of its development dependencies, since the package is no longer in active development. For us, it wasn\u0026rsquo;t making sense to manage — for example — a lot of out-of-date dependencies related to a library tool we no longer use, and we\u0026rsquo;re going to take a bit more time with this one to see if we can really simplify this package for long-term maintenance.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 14:\u003c/strong\u003e But we did just have a new design system release this week: \u003ca href=\"https://github.com/uswds/uswds/releases/tag/v3.2.0\"\u003eUSWDS 3.2.0\u003c/a\u003e — which is packed with a number of new changes, may related to accessibility.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 15:\u003c/strong\u003e Notably, we\u0026rsquo;ve made a number of changes to streamline, simplify, and improve how information in the banner is read by screen readers.\u003c/p\u003e\n\u003cp\u003eFirst off, we\u0026rsquo;re updating the ARIA label for the component to \u0026ldquo;Official Website of the United States government.\u0026rdquo; We\u0026rsquo;re not changing the text of the banner for those who read it, but we learned that some screen reader users were mis-hearing the banner text as \u0026ldquo;unofficial\u0026rdquo; website and not \u0026ldquo;An official\u0026rdquo; website. Our change to the ARIA label and the aria-hidden attribute help assure that screen reader users are getting a clear message.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ve also slimmed down our description of the lock icon in the banner extended text, and we\u0026rsquo;ve labeled the Flag image in the top corner as a decorative image, since it doesn\u0026rsquo;t add new information for screen reader users.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 16:\u003c/strong\u003e Other improvements in USWDS 3.2.0 include:\u003c/p\u003e\n\u003cp\u003eImproved accessibility of usa-validation\nImproved screen reader output for character count\nValid ARIA label in Identifier\nFixed potential incompatibility with M1/M2 Macs\nImproved alignment of Alert and Site Alert\nAllow dynamic initialization of Tooltip\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 17:\u003c/strong\u003e So check out USWDS 3.2.0 — there\u0026rsquo;s more information on everything I\u0026rsquo;ve mention linked in the release notes!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 18:\u003c/strong\u003e And now let\u0026rsquo;s move on to user profile patterns. We\u0026rsquo;ve been working hard over the last few months to bring patterns and pattern guidance to the design system. This work is finishing its review now and we\u0026rsquo;re working to finalize the release. Next month, all this work will be live.\u003c/p\u003e\n\u003cp\u003eOver the last couple months we\u0026rsquo;ve introduced you to the concept of design patterns, why they\u0026rsquo;re important for the design system, and the research and development approach we used to arrive at them. Today we’re going to keep going with patterns and start taking a look at some user profile patterns, starting with contact information patterns. And I\u0026rsquo;ll do this with the help of a few guest speakers.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 19:\u003c/strong\u003e I\u0026rsquo;d like to introduce a couple members of the inclusive patterns team. First Meghan O\u0026rsquo;Meara, a Content Strategist and a contractor on our team. Meghan, can you say a bit about yourself and give a quick description of your appearance for anyone audio-only?\u003c/p\u003e\n\u003cp\u003eHi, I\u0026rsquo;m Meghan O\u0026rsquo;Meara, and I\u0026rsquo;m the content strategist on the Inclusive Patterns team. My pronouns are she/her and I have chin-length brown and gray hair. I’m located in Michigan and if my screen wasn’t blurred you’d see my dogs coming in and out of the room.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 20:\u003c/strong\u003e Thanks Meghan, and I\u0026rsquo;d also like to introduce Jonathan Bobel, an Engineer, and a contractor on the Inclusive Patterns team. Jonathan, can you say a bit about yourself and give a quick description of your appearance for anyone audio-only?\u003c/p\u003e\n\u003cp\u003eHi, I\u0026rsquo;m Jonathan Bobel, and I\u0026rsquo;m a UX Engineer on the Inclusive Patterns team. I’m located in Ohio. My pronouns are he and him. I am wearing glasses and have a thick brown beard and short brown hair.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 21:\u003c/strong\u003e We can think of patterns as \u0026ldquo;things users do again and again on our sites and services.\u0026rdquo; A good way to think about a pattern is as a common interaction. When we say pattern, a reasonable synonym is interaction.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 22:\u003c/strong\u003e But this can seem a little abstract, so we\u0026rsquo;ve chosen a specific rubric for how to think of a pattern. A pattern completes the sentence, \u0026ldquo;Help a user to [blank].\u0026rdquo;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 23:\u003c/strong\u003e Such as,\u003c/p\u003e\n\u003cp\u003eHelp a user to \u003cstrong\u003ereview a complex form\u003c/strong\u003e.\nHelp a user to \u003cstrong\u003erefine search results\u003c/strong\u003e.\nHelp a user to \u003cstrong\u003erecover from an error\u003c/strong\u003e.\nHelp a user to \u003cstrong\u003emake an appointment\u003c/strong\u003e.\nHelp a user to \u003cstrong\u003eupload a document\u003c/strong\u003e.\nHelp a user to \u003cstrong\u003eprovide their race and ethnicity\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eAnd, of course, what we\u0026rsquo;ll see in just a moment:\nhelp a user to \u003cstrong\u003eenter their name\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eWe all know that a website is more than just components on a page — the whole reason all those components are there is to help someone do something. And patterns are the human-centered link between components, interactions, and services.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 24:\u003c/strong\u003e Patterns and pattern guidance have the opportunity to describe important user needs, and to give any designer a head start to understanding their specific audience and needs. And from our perspective, effective patterns have a responsibility to reduce barriers to participation through every interaction.\u003c/p\u003e\n\u003cp\u003eWhat does this mean when it comes to name, address, and contact information? What barriers might this information introduce? I\u0026rsquo;d like to pass it to Meaghan to talk about why these are critical patterns, and what we\u0026rsquo;ve learned from our research.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 25:\u003c/strong\u003e Meghan: As we discussed in the last monthly meeting, we did a lot of research to learn from our colleagues around the federal space, and hear from them what types of interactions they are wrestling with and what they would like USWDS to work on. We primarily spoke with people on web teams at high impact service providers — also known as HISPs — the agencies and programs that have the most direct contact with the American people. From these digital teams we heard how challenging asking about personal information can be. Teams discussed trying to design effective information collection tools, while also balancing validation requirements and reporting obligations. At the same time, teams wanted to respect the true diversity of their audience and the individuals that use their sites. We see a colorful illustration of people on the next slides.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 26:\u003c/strong\u003e This respect — which often means supporting users from varying cultures, backgrounds, and perspectives — and in all sorts of different situations — was something digital teams felt was critical to good and effective experience design. But it is also something that supports various executive orders, including \u003ca href=\"https://www.whitehouse.gov/briefing-room/presidential-actions/2021/12/13/executive-order-on-transforming-federal-customer-experience-and-service-delivery-to-rebuild-trust-in-government/\"\u003eExecutive Order 14058\u003c/a\u003e Transforming Federal Customer Experience and Service Delivery to Rebuild Trust in Government and \u003ca href=\"https://www.performance.gov/equity/\"\u003eExecutive Order 13985\u003c/a\u003e Advancing Racial Equity and Support for Underserved Communities through the Federal Government.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 27:\u003c/strong\u003e We’ve developed ten patterns to help users:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eProvide their name\u003c/li\u003e\n\u003cli\u003eEnter their address\u003c/li\u003e\n\u003cli\u003eProvide their email address\u003c/li\u003e\n\u003cli\u003eEnter their phone number\u003c/li\u003e\n\u003cli\u003eIndicate their contact preferences\u003c/li\u003e\n\u003cli\u003eEnter their social security number\u003c/li\u003e\n\u003cli\u003eEnter their date of birth\u003c/li\u003e\n\u003cli\u003eProvide their race and ethnicity\u003c/li\u003e\n\u003cli\u003eProvide their biological sex or gender, and\u003c/li\u003e\n\u003cli\u003eShare their pronouns\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eSome of these patterns are pretty straightforward and some of these are really complicated — and some of these are only just emerging in a rapidly changing environment.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 28:\u003c/strong\u003e Today we are going to focus on the first four: helping users to provide their name, enter their address, provide their email, and enter their phone number. In future Monthly Calls we’ll dive into the others.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 29:\u003c/strong\u003e As a reminder, we\u0026rsquo;ll walk through a typical pattern guidance page on this and the next few slides. You’ll see different elements of the pattern highlighted on each slide. Here we see a USWDS Pattern page. Each pattern has a guidance page, just like a component.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 30:\u003c/strong\u003e Each pattern has a description, how it can apply to your website or service, and how to approach a solution.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 31:\u003c/strong\u003e Each pattern has Guidance. Recommendations on what to do — and what not to do.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 32:\u003c/strong\u003e Each pattern has Considerations: Practical implementation details, often related to usability and accessibility.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 33:\u003c/strong\u003e Most patterns have components and code: USWDS components used within the pattern and how to implement our solution in code.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 34:\u003c/strong\u003e And patterns have supporting information: Other examples, related components, and sources we used in addition to our direct research. So let’s get started.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 35:\u003c/strong\u003e Let\u0026rsquo;s start with name patterns. It might seem that asking for someone’s name is pretty straightforward — after all, everyone has one! But personal names are surprisingly complicated. For example,\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 36:\u003c/strong\u003e In some cultures people have only one name. So if you require a first and last name, not only will the user not have one of each, but they wouldn’t know in which field to place the one name they have.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 37:\u003c/strong\u003e Names can be as short as a single letter. In China, what is transliterated as the letter “E” is one of the most common family names. If you are requiring more than one character for a name, some users won’t be able to complete your form.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 38:\u003c/strong\u003e Names can also be very long. \u003ca href=\"https://www.usatoday.com/story/news/nation/2013/12/30/hawaii-long-name/4256063/\"\u003eFor instance Hawaiian driver\u0026rsquo;s licenses\u003c/a\u003e and ID cards have room for 40 characters for last names, 40 for first names, and 35 characters for middle names.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 39:\u003c/strong\u003e Many languages require special characters or diacritics to accurately represent their names.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 40:\u003c/strong\u003e And names can have multiple upper- and lowercase letters, as well as multiple spaces or hyphens.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 41:\u003c/strong\u003e And in some cultures it is common to have two — or more — last names.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 42:\u003c/strong\u003e You may have heard that Anna May Wong, an American actress of Chinese heritage, will be the first Asian American on U.S. currency. A true trailblazer, she will be on a new quarter. Born Wong Liu Tsong, she was known professionally as Anna May Wong. In many cultures, including Chinese, the family name comes first and the given name comes second, making “first name” inappropriate and potentially confusing.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 43:\u003c/strong\u003e The name pattern is designed to make it easy for users to enter their name in the format required. Names are often used to validate identity, and this helps collect the elements effectively and with as little confusion as possible.\u003c/p\u003e\n\u003cp\u003eAs we discussed, the challenge is that names can vary a lot, and it can be really confusing to try to enter your name into a system that doesn’t support it. It can also be unclear what information you need to provide in order to validate your identity when you’ve changed your name.\u003c/p\u003e\n\u003cp\u003eThis pattern is designed to be used when you need to ask for a user’s name as might appear on government documentation like a Social Security card. We recommend only asking for a name if you really need it and then, be specific about what you’re asking for. For example, “Enter your name as it appears on your passport.”\u003c/p\u003e\n\u003cp\u003eHere we see a name pattern composed of three fields and some supporting information. We see \u003cstrong\u003eFirst or given name\u003c/strong\u003e (for example: Jose, Darren, or Mai), \u003cstrong\u003eMiddle name\u003c/strong\u003e, and \u003cstrong\u003eLast or family name\u003c/strong\u003e (for example: Martinez Gonzalez, Gu, or Smith).\u003c/p\u003e\n\u003cp\u003eThe pattern guidance recommends providing multiple text entry fields, with direction on what to do if the name doesn’t fit into the provided format.\u003c/p\u003e\n\u003cp\u003eOur pattern guidance also suggests\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eSupporting long text fields — and short names\u003c/li\u003e\n\u003cli\u003eSupporting a rich array of special characters\u003c/li\u003e\n\u003cli\u003eAllowing users to enter more than one name in each field\u003c/li\u003e\n\u003cli\u003eAllowing both upper and lowercase letters in each field, along with hyphens, apostrophes and blank spaces\u003c/li\u003e\n\u003cli\u003eAnd we address asking for a maiden name — we recommend against this practice. But if you do need a previous name, ask for it.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 44:\u003c/strong\u003e At this time we are recommending that you consider incorporating “given” and “family” name into your name field labels. This slide highlights the \u003cstrong\u003eFirst or given name\u003c/strong\u003e and \u003cstrong\u003eLast or Family name\u003c/strong\u003e labels in the name pattern. This seems to be an emerging best practice and also addresses some of the challenges with non-Western European names.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 45:\u003c/strong\u003e As I mentioned, if you don’t need to parse apart the pieces of a name — if you don’t need to validate the name, for instance — just ask for the full name in one field.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 46:\u003c/strong\u003e And if you will be reaching out to verbally speak with someone, or expect formal correspondence, consider asking how they’d like to be addressed. For example, Dan, or Mr. Gonzalez, or Dr. Gonzalez.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 47:\u003c/strong\u003e Addresses patterns present some special challenges as well. There is more variation in address format, even within the U.S. and its territories, than we may be aware of.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 48:\u003c/strong\u003e For example, many Puerto Rican addresses require an Urbanization code or name.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 49:\u003c/strong\u003e Many rural areas, including on Tribal lands, don’t follow the usual conventions of number and street.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 50:\u003c/strong\u003e There are all sorts of different complexities of context and situation that impact addresses and need to be considered:\u003c/p\u003e\n\u003cp\u003eSome people may be unhoused, and not have a permanent physical address, but may be able to receive mail at a shelter.\u003c/p\u003e\n\u003cp\u003ePeople may be temporarily unhoused due to a disaster, and need to communicate their physical address for disaster assistance, but a temporary mailing address while living elsewhere.\u003c/p\u003e\n\u003cp\u003eMulti-family dwellings, group homes, and more can add to the complexity. There’s a lot to think through to make sure everyone can effectively communicate their address.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 51:\u003c/strong\u003e The address pattern guidance is for domestic U.S. addresses, including U.S. territories and military outposts. The guidance recommends providing a number of common fields:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eStreet address\u003c/li\u003e\n\u003cli\u003eStreet address line 2\u003c/li\u003e\n\u003cli\u003eCity\u003c/li\u003e\n\u003cli\u003eState, Territory, or military post\u003c/li\u003e\n\u003cli\u003eand ZIP code\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eAnd some less conventional ones, such as Urbanization and Google Plus Codes, if your data collection needs and audience require them. Google Plus Codes identify a physical address, including those that are not identifiable by a typical street address. They can be used to identify even very remote physical locations, and some Tribal Nations are using them.\u003c/p\u003e\n\u003cp\u003eIf your audience includes the residents of Puerto Rico, be sure to include the Urbanization field. That is an integral part of their mailing address.\u003c/p\u003e\n\u003cp\u003eIt\u0026rsquo;s important to note that on this slide, we\u0026rsquo;ve included all the fields associated with a Physical Address pattern —and put them in two columns to fit on the slide —but in an actual digital application, we would always keep all the fields in a single column.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 52:\u003c/strong\u003e The address pattern guidance also suggests you\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eSupport long text fields\u003c/li\u003e\n\u003cli\u003eSupport a rich array of diacritics, accents, and alternative characters\u003c/li\u003e\n\u003cli\u003eConsider using the autocomplete attribute on address input fields\u003c/li\u003e\n\u003cli\u003eIf your program does not serve the armed forces or U.S. territories, you may want to provide links to related resources for these users if such resources exist\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDo not\u003c/strong\u003e assume that people can receive mail at their physical location\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 53:\u003c/strong\u003e There\u0026rsquo;s some more specific guidance for mailing addresses.\u003c/p\u003e\n\u003cp\u003eIf you need both physical address and mailing address, provide a checkbox for “same as physical address” to auto-populate the mailing address if they are the same.\u003c/p\u003e\n\u003cp\u003eThe Google Plus Code does not apply to mailing address\u003c/p\u003e\n\u003cp\u003eA street address is required for a mailing address, but it may not be required for a physical address\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 54:\u003c/strong\u003e While we were working on the address pattern, we did make an unwelcome discovery. Users of assistive technology, especially screen readers, had a consistently difficult time navigating the Combobox used for the State dropdown.\u003c/p\u003e\n\u003cp\u003eWhen the address pattern is published, you\u0026rsquo;ll notice a change in how we\u0026rsquo;re approaching the treatment of some elements because of these challenges. We’ve replaced the Combobox with the Select component. This change will be making its way through related component guidance and templates within the design system, so stay tuned for more information.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 55:\u003c/strong\u003e The email address pattern is pretty straightforward, but there are considerations and opportunities.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 56:\u003c/strong\u003e We recommend you clearly state why you need someone’s email address and under what circumstances you would use it to contact them.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 57:\u003c/strong\u003e Email addresses can be very long. Make sure to accommodate up to 256 characters — which would be a really long (but valid!) email address.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 58:\u003c/strong\u003e Email addresses can get complicated. Simple validation is best. We do recommend you validate formatting by checking for an at symbol that is preceded and followed by one or more characters. We also recommend both client-side and server-side validation, if possible.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 59:\u003c/strong\u003e Here\u0026rsquo;s our email address pattern guidance:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eMake sure to accommodate up to 256 characters\u003c/li\u003e\n\u003cli\u003eAllow people to paste their email address and consider enabling autocomplete to enter the address if they’ve entered it before.\u003c/li\u003e\n\u003cli\u003eAlso, consider the safety implications associated with people who share email addresses. You may need to ask for permission to leave potentially sensitive information.\u003c/li\u003e\n\u003cli\u003eIt is great if you can check for common misspellings of popular email providers — but don’t autocorrect them! Warn people if you detect a likely misspelling, but allow them to continue, since it might be a genuine email address.\u003c/li\u003e\n\u003cli\u003eDon’t restrict top-level domains, unless you have a very specific audience, such as only people with .gov or .mil addresses.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThis slide shows an email address field with a section below asking if sensitive information should be sent via email.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 60:\u003c/strong\u003e You might not think entering a telephone number is a particular challenge, but think about a person displaced due to a crisis. They might be sharing a phone with others. They might be very anxious and easily frustrated. Stress and trauma can make seemingly simple things much more difficult.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 61:\u003c/strong\u003e Some of the key guidance associated with helping users to enter phone numbers addresses this:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eUse “text” input type instead of “numeric”, since numeric inputs carry some usability and accessibility problems. But you can help folks out by using the inputmode=\u0026ldquo;numeric\u0026rdquo; attribute in that text field to both restrict the field to numbers and to automatically enable the numeric keyboard on mobile devices. On this slide we see an image of a mobile device with a phone number field on it. The device shows the numeric keyboard activated…\u003c/li\u003e\n\u003cli\u003eIf you will be contacting the individual by phone, ask whether you can leave sensitive information in a voicemail or text message. Remember people may be sharing phones with others, and may not want to share personal information with them, too.\u003c/li\u003e\n\u003cli\u003eAnother recommendation we made is that you consider using an input mask to shape the correct format, allowing the user to type in the numbers and see it represented in a familiar format. And to demo the input mask component, I’m going to turn it over to Jon.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 62:\u003c/strong\u003e Hi, this is Jonathan. One of the components that aligned well with the profile pattern is an Input Mask. An Input Mask is an overlay on an input that indicates the format of valid input values. It gives a visual or screen-read indication of a common input pattern to assist the user. Some of these common patterns include 5 or 9 digit US ZIP codes, social security numbers, and phone numbers. You’ve probably seen them in action elsewhere in forms online, and we’re adding this optional functionality to the USWDS.\u003c/p\u003e\n\u003cp\u003eLet’s take a look at the Input Mask.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 63:\u003c/strong\u003e [Storybook DEMO of Input Mask]\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eIn these three inputs you’ll notice an underscore and/or dash that show the different masks per input type.\u003c/li\u003e\n\u003cli\u003eThe JavaScript utilizes the input’s placeholder attribute to render a span on top of the input with underscores. As the user types, the underscores are replaced with the actual input from the user. Additionally, the code will restrict the input’s max length to the placeholder’s character count. This includes the underscores, dashes, and back slashes.\u003c/li\u003e\n\u003cli\u003eIf the user tries to type in invalid characters per the supplied pattern, the mask will recognise that and remove the character. [Example: typing in letters to the US ZIP mask]\u003c/li\u003e\n\u003cli\u003eThe aria-describedby hint will give the user a sample of what input is expected. This also is read by the screen reader to assist with accessibility.\u003c/li\u003e\n\u003cli\u003eDepending on the mask, when you’re finished typing the end product will visually show up with the mask applied. For example: the phone number renders with dashes, making it easier to scan and read as a phone number.\u003c/li\u003e\n\u003cli\u003eThe input mask component can be extended, it isn’t limited to just these three examples. You just have to make sure to include a viable placeholder and pattern attribute as well as an aria-describedby hint.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eIn fields with a specific expected format like Social Security Number or ZIP code, an input mask allows you to constrain and shape the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping. It’s an accessible component that will help the user enter valid information.\u003c/p\u003e\n\u003cp\u003eDan?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 64:\u003c/strong\u003e This is Dan. What you’ve seen here is an overview of user profile patterns and how we arrived at pattern recommendations…and a brief demo of the input mask component. Next month, we’ll take a look at some of the other patterns we’ve developed, with a focus around helping users provide personal information and completing complex forms.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 65:\u003c/strong\u003e And while these patterns and components are designed based on extensive research, we expect them to evolve as the equity and inclusivity landscape evolves and as we learn more from you. We invite you to share your input in #USWDS-public slack, GitHub issues, or by emailing the USWDS team.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 66:\u003c/strong\u003e Now some Q\u0026amp;A. You must have some questions.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 67:\u003c/strong\u003e Thanks for joining today’s USWDS monthly call. Next month, we\u0026rsquo;ll be looking at User Profile Patterns Part 2, where we get into more detail about personal information.\u003c/p\u003e\n\u003cp\u003eThank you, and see you in November!\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\n\n\u003cp\u003eMany of the digital solutions we create rely on collecting personal information (like name, address, and phone number), allowing programs and services to connect with people who need assistance. Some of these people may be impacted by housing insecurity, homelessness, or displacement due to disaster.\u003c/p\u003e\n\u003cp\u003eWhen what we ask for doesn’t allow users to confidently and accurately communicate their answers — or allow them to update this information as their circumstances change — we may have created a poor user experience and eroded trust from the start. We’ll discuss our approach to developing User Profile design patterns, look at some specific guidance, and talk about why it’s so important.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThis event is part of a monthly series that takes place on the third Thursday of each month. Don’t forget to set a placeholder on your personal calendar for our future events this year.\u003c/em\u003e\u003c/p\u003e\n\u003ch2 id=\"about-the-uswds\"\u003eAbout the USWDS\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e is a toolkit of principles, guidance, and code to help government teams design and build accessible, mobile-friendly websites backed by user research and modern best practices.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/uswds/uswds/issues\"\u003eContribute on GitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"mailto:uswds@support.digitalgov.gov\"\u003eEmail Us\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://digital.gov/communities/uswds/\"\u003eJoin our community\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://twitter.com/uswds\"\u003eFollow @uswds on Twitter\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n",
      "branch" : "bc-archive-content-3",
      "filename" :"2022-10-13-october-2022-uswds-monthly-call.md",
      
      "filepath" :"events/2022/10/2022-10-13-october-2022-uswds-monthly-call.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/events/2022/10/2022-10-13-october-2022-uswds-monthly-call.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/events/2022/10/2022-10-13-october-2022-uswds-monthly-call.md","slug" : "october-2022-uswds-monthly-call","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/10/20/october-2022-uswds-monthly-call/"
    }
  ]
}