{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "event",
    "type" : "single",
    "title" : "USWDS Monthly Call - March 2023 |Digital.gov",
    "description": "USWDS Monthly Call - March 2023",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2023/03/28/uswds-monthly-call-march-2023/index.json","item" : [
    {"title" :"USWDS Monthly Call - March 2023","summary" : "Making sense: Cognition, perception, and design","date" : "2023-03-28T14:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","start_date" : "2023-03-28T14:00:00-05:00","end_date" : "2023-03-28T15:00:00-05:00",
      "event_organizer" : "Digital.gov","host" : "U.S. Web Design System","registration_url" : "https://gsa.zoomgov.com/meeting/register/vJItceqgqjwoHl_zCE4rfcQlOhV1ePPSqjg","captions" : "https://www.streamtext.net/player/?event=BIS-GSA-1731","youtube_id" : "ceRXbLwEgD0","topics" : {
        
            "open-source" : "Open source",
            "usability" : "Usability"
            },"content" :"\n\u003ca\n    href=\"https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-march-2023.pptx\"\u003eView the slides (PowerPoint presentation, 1.8 MB, 56 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 March 2023\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.\u003c/p\u003e\n\u003cp\u003eFor March 2023, this month, we\u0026rsquo;re celebrating Women\u0026rsquo;s History Month (with our logo in shades of orange, teal, purple, and pink), as well as St. Patrick\u0026rsquo;s Day this week (with shades of clover green), and the Spring Equinox next week (with shades of cherry-blossom pink). This week also featured both Pi Day and the Ides of March. Perhaps you did as I did, and had a meal with both pizza and a caesar salad.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 2:\u003c/strong\u003e My name is Dan Williams, [my pronouns are] he/him, and I\u0026rsquo;m the USWDS product lead — and here on-screen is my avatar: dark hair, blue sweater, collared shirt. Today my physical self is wearing something very similar, a blue cardigan and collared shirt. I\u0026rsquo;d 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.gov event, you agree to abide by Digital.gov’s community guidelines at \u003ca href=\"https://digital.gov/communities/community-guidelines/\"\u003edigital.gov/communities/community-guidelines/\u003c/a\u003e - 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?\nFirst we\u0026rsquo;ll take a quick look at the most recent design system releases.\nThen we\u0026rsquo;ll spend the rest of our time talking about cognitive theory!\nWe ought to have some time left at the end for Q\u0026amp;A. So let\u0026rsquo;s get right into it.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 4:\u003c/strong\u003e Since the last monthly call, we\u0026rsquo;ve published both USWDS 3.4.0 and 3.4.1. Due to a sequencing error in our release process, we inadvertently left a couple new features out of USWDS 3.4.0 when we released it, so we quickly released a patch version, 3.4.1, that includes all the features and bugfixes we intended to release in 3.4.0.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 5:\u003c/strong\u003e Here\u0026rsquo;s a bit of what you get in this feature-filled release:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eSince we no longer directly support IE11 post-USWDS 3.0, as of USWDS 3.4.1 we now no longer reference woff and ttf font files in our @font-face rules — we only reference woff2 fonts. This means if you self-host a custom font in your project that only includes woff2 files, our built-in font face generator will work for you. It was time. But if your project still has to support IE11, we have a new setting you can pass that will output the woff and ttf fonts as well.\u003c/li\u003e\n\u003cli\u003eThis release will also improve contrast of incomplete step indicator steps\u003c/li\u003e\n\u003cli\u003eIt will allow full-page width headers\u003c/li\u003e\n\u003cli\u003eIt will remove grid dependency from usa-banner package\u003c/li\u003e\n\u003cli\u003eAnd properly vocalize secondary navigation items\u003c/li\u003e\n\u003cli\u003eAnd it will Improve wrapping of external links and icons\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 6:\u003c/strong\u003e In addition, USWDS 3.4.1 will also\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eAllow date pickers inside modals\u003c/li\u003e\n\u003cli\u003eImprove URL display for in-page navigation links\u003c/li\u003e\n\u003cli\u003eAllow any spacing unit in alert padding settings\u003c/li\u003e\n\u003cli\u003eFix broken outline-05 utility\u003c/li\u003e\n\u003cli\u003eAnd finally, on our website, we expanded and improved our Gender Identity and Sex patterns and guidance.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 7:\u003c/strong\u003e And that\u0026rsquo;s USWDS 3.4.1. It\u0026rsquo;s out now.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 8:\u003c/strong\u003e So I\u0026rsquo;d like to take a little bit of a step back this month and discuss something that I\u0026rsquo;ve often considered one of the fundamentals of design, learning a bit about how our brains make sense of the world.\u003c/p\u003e\n\u003cp\u003eAfter we published our pattern guidance, we got some good feedback that while we were starting to get into patterns and interactions, we still didn\u0026rsquo;t have any information about general rules of UX. We definitely should! And as I was thinking through the kinds of things that we might consider general rules of UX, I kept coming back to some of the ideas we\u0026rsquo;ll talk about today — and as the USWDS team starts to think about how we want to address general rules of UX, we might start with some observations about human cognition that are more than 100 years old, but continue to be proven by neuroscience today.\u003c/p\u003e\n\u003cp\u003eSo let me take a swing at trying to make something that\u0026rsquo;s interesting to me, interesting to others in \u003cstrong\u003eMaking Sense: Attention, grouping, and decisions!\u003c/strong\u003e Now, I\u0026rsquo;m an enthusiastic practitioner, interested in the topics I\u0026rsquo;ll discuss here, but I\u0026rsquo;m not a psychologist nor a cognitive scientist. If you are, and I say something that doesn\u0026rsquo;t sound right to you, call it out in the chat and we\u0026rsquo;ll be sure to discuss it at the end.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 9:\u003c/strong\u003e There are all types of angles on design work when it comes to the products we\u0026rsquo;re all a part of, websites and digital services: there\u0026rsquo;s visual design, product design, interaction design, content design, service design, ux design, and the the tenets of human-centered design that connect all of these.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 10:\u003c/strong\u003e These are ways that we all contribute to the process of design, to the process of intentional decision making, whether we\u0026rsquo;re helping to make these decisions or supporting the ways we make them or the ways we implement these decisions in our products.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 11:\u003c/strong\u003e By and large, at the end of the day, we\u0026rsquo;re designing for people. In some ways we support machines and other processes, but our end users are typically the humans we center our design process around.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 12:\u003c/strong\u003e So one of the things that connects many design disciplines is human interaction. We\u0026rsquo;re creating tools and spaces — predominant digital spaces — for people to do things. So one thing I\u0026rsquo;d like to assert is that in our world of designing for human interaction, we designers are engineers of human attention.\u003c/p\u003e\n\u003cp\u003eJust as electrical engineers deal with electricity and structural engineers work with materials like steel, concrete, wood, plastic, and water, human interaction digital designers (to use a broad term) deal with human attention: conserving, supporting, sustaining, and rewarding the attention of the people who use our sites and services to do something that they need or want to do.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 13:\u003c/strong\u003e Just as electricity, steel, and water have their own properties, characteristics, and physics, attention is a resource with its own properties.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 14:\u003c/strong\u003e So what is attention? Attention is the focus of awareness, following one stream of sensation over another. Of the countless sources of sensory input available to our bodies, attention is the stream we choose, consciously or unconsciously.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 15:\u003c/strong\u003e Attention is coordinated in the brain, and in part directed by the sense of self we hold in our brains, which we might call the mind. We can consciously direct our focus — direct our attention — in different ways (in different physical or mental directions) based on a conscious goal, or intention. When we\u0026rsquo;re goal seeking, our intention directs our attention.\u003c/p\u003e\n\u003cp\u003eFor instance, if we want to make breakfast, we might direct our attention (our sensory focus) toward navigating our body to the kitchen, asking ourself what we want to eat, then checking the cabinet for cereal, the refrigerator for milk, and the shelf for bowl, and so on.\u003c/p\u003e\n\u003cp\u003eFor many of the tasks we attend to in our day-to-day lives, this type of attention — of using our senses and our memory to follow a chain or flow of navigation and decision making — is simple and frictionless, and takes little energy.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 16:\u003c/strong\u003e And this is good, since it turns out that we humans have somewhat little energy to spend on decision making. Our brains have evolved to become extremely efficient at navigating huge amounts of sensory information to accomplish tasks, and the primary way our brains do this is by forgetting and ignoring. We are very good at forgetting and ignoring!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 17:\u003c/strong\u003e Attention is as much about ignoring as it is about focusing. We spend energy on attention so we don\u0026rsquo;t spend it trying to understand everything that\u0026rsquo;s happening around us.\u003c/p\u003e\n\u003cp\u003eForgetting is the job of what we call working memory. Working memory is not entirely dissimilar to the random access memory we have in our computer — type of temporary buffer memory that helps us make the decision we need to make at the moment then move on to something else. We don\u0026rsquo;t typically store vast quantities of sensory data directly in our brains the way a digital camera might. What we store in working memory is only stored for somewhere between a fraction of a second to just a few seconds.\u003c/p\u003e\n\u003cp\u003eNotably, our brains have separate areas for processing visual working memory and language-based working memory. This is also true for deaf people: the message content of sign language is processed differently from other visual stimuli. Language-based working memory is sometimes called an echoic loop.\u003c/p\u003e\n\u003cp\u003eThroughout the flow of an action, our brains use the perceptual or orientation working memory with the language working memory to make decisions. For example, the message \u0026ldquo;let the dog out\u0026rdquo; and the image of a dog near a door might lead to a plan to open the door. This creates an intention, which directs the next step in the flow of attention. Let\u0026rsquo;s navigate to the door. Find the handle and turn it. What?!? The door is locked?!? OK, don\u0026rsquo;t panic. Let\u0026rsquo;s use a bit more working memory and attention to unlock the door and continue with the flow. We\u0026rsquo;ve got this!\u003c/p\u003e\n\u003cp\u003eIn another hour, will we remember whether the door was locked when we let out the dog? Probably not! Will we even remember in another 10 minutes? Probably not! Every brain is a bit different, but this tends to be the case. It takes real effort and may even be impossible to remember what you had for dinner a week ago.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 18:\u003c/strong\u003e Our brains are optimized to be just-in-time systems. We acquire and store just enough information to get us on to the next thing. And only, over time, if there are significant internal or external consequences to a particular action do we begin to form longer-term associations that we call long-term memories.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 19:\u003c/strong\u003e In fact, if we look around our room, we can easily recognize it as our room — but if we were asked to draw or describe specific features of the room, like whether there was specific shirt or book here or there — or certainly something like how many stripes are on the rug — it might be hard to conjure those specifics. We often only get the gist of a situation, and selectively use our senses and our attention only when we need it to draw out specifics. A principle of cognition is that \u0026ldquo;the world is its own memory\u0026rdquo; — we are beings that are built to live in a kind of consistent, coherent, and continuous reality. It\u0026rsquo;s important that we can trust that if we have a chair in our room, for instance, it\u0026rsquo;ll be there until we move it. It doesn\u0026rsquo;t just disappear. The world is its own memory, its continuity and consistency are the foundation that we as humans depend on to work properly.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 20:\u003c/strong\u003e We\u0026rsquo;re constantly toggling from gist to specific — trying to maintain a general model that can allow us to navigate to something specific when we need it. The relationship between gist and specific is what allows us to use our attention and our working memory efficiently and effectively to navigate a world of infinite information without requiring infinite resources.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 21:\u003c/strong\u003e Imagine that you\u0026rsquo;ve been given an unusual task: enter an unfamiliar building and find a jar of honey. If you were in your own home, you might know where you\u0026rsquo;d look. It wouldn\u0026rsquo;t take much energy. It would even be easy to give directions to a neighbor trying to find a jar of honey in your home, even if they\u0026rsquo;ve never been inside it. Now let me describe two very terrible buildings that would make this task difficult.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 22:\u003c/strong\u003e The first is what we\u0026rsquo;ll call \u003cstrong\u003ethe random warehouse\u003c/strong\u003e. It\u0026rsquo;s just a big open warehouse with shelves and shelves of different items, arranged randomly. Where would you look for the honey? What strategies might you use to find it? Is there any gist you could make of this situation to help you out? Probably not! You\u0026rsquo;d just have to look thoroughly and monotonously from one shelf to another trying to scan for this specific jar. It would be a big task and you might give up. It\u0026rsquo;s a lot of work to go from item to item. It\u0026rsquo;s tedious and time consuming! There\u0026rsquo;s no organization! How much do you really want that honey?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 23:\u003c/strong\u003e The next scenario might be even worse. Let\u0026rsquo;s call it \u003cstrong\u003ethe mystery house\u003c/strong\u003e. In the mystery house, it looks a lot like the type of house you recognize. It has rooms like kitchens and bathrooms and living rooms, but nothing is where you expect it to be, the kitchen cabinets seem to be full of laundry, there\u0026rsquo;s a stairway that leads nowhere. It has the appearance of order, but it\u0026rsquo;s completely out of sync with your expectations! While the first scenario feels lazy and tedious, this one actually feels cruel. It\u0026rsquo;s encouraging us to see organization, to make a gist then punishing us for doing it. I don\u0026rsquo;t know about you but I\u0026rsquo;d give up on finding that honey in the mystery house much faster than in the random warehouse. It actually takes more energy to work against bad organization than against no organization!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 24:\u003c/strong\u003e Our minds need consistent, meaningful organization to make sense of the world. We need to be able to move from gist to specific with as little energy as possible. And our minds are built to do just this: create gists and spot differences.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 25:\u003c/strong\u003e For more than 100 years, scientists and psychologists have been studying the concept of the gist, and it has a fancy German name as well: gestalt. Gestalt, which might also be translated as wholeness or form is a concept explored in depth by the Czech psychologist Max Wertheimer in the early part of the 20th century — around the time of the first World War. Gestalt theory proposes that we make sense of the world through the perception of wholeness — and that this wholeness is a kind of model, different from being simply the totality of its constituent parts.\u003c/p\u003e\n\u003cp\u003eWertheimer helped define the field of \u003cstrong\u003ecognitive psychology\u003c/strong\u003e, which was focused on attention, language use, memory, perception, problem solving, creativity, and reasoning. This is and was distinguished from \u003cstrong\u003ebehaviorism\u003c/strong\u003e, which saw some of these cognitive concepts as fundamentally unknowable — or at least unobservable — focusing instead on what can be more easily observable, or behaviors.\u003c/p\u003e\n\u003cp\u003eIt\u0026rsquo;s perhaps important to say that when it comes to understanding how we live, think, and act, there may be no either/or here. Both behaviorism and cognitive psychology contribute to what — ironically — we might consider the gestalt or gist of human psychology.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 26:\u003c/strong\u003e Gestalt psychology proposes that our minds function not as recording devices, or accumulators of data. We do accumulate data, but what our brains store most effectively are models, organizational concepts that allow us to store group information — a kind of compression algorithm that allows us to avoid data redundancy. We don\u0026rsquo;t need to know what every single iteration of an apple looks like, we only need to hold the concept of an apple and sample the details from case to case as our intention and attention demands.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 27:\u003c/strong\u003e Gestalt theory proposes that our minds are built to form groups — that we perform certain kinds of grouping automatically — and cognitive science has ample evidence that this is true. I\u0026rsquo;d like to show some types of grouping identified by gestalt theorists. You may have some familiarity with them already, they\u0026rsquo;re called the \u003cstrong\u003eGestalt Principles of Grouping\u003c/strong\u003e. These are visual examples, but grouping is not an exclusively visual phenomenon. Think of how we perceive something like rhythm in music: we hear or even feel the rhythm as a complete structure — a wholeness — instead of simply a sequence of individual notes or beats.\u003c/p\u003e\n\u003cp\u003eToday, we\u0026rsquo;re going to look at seven principles of grouping. This is a living field, some of these principles are the originals identified by the original Gestalt theorists, and some have been added by subsequent studies.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 28:\u003c/strong\u003e The first concept is somewhat meta, and it\u0026rsquo;s the concept that we want to find meaning by grouping. We tend to group stimuli in a way that preserves and enhances some type of meaning, preferring the simplest explanation. This is called the \u003cstrong\u003eprinciple of Prägnanz\u003c/strong\u003e — whose exact translation is precision, but might better be translated as elegance, in the way that a solution to a problem might be considered elegant. We\u0026rsquo;re inclined to find an elegant explanation to describe a collection of data.\u003c/p\u003e\n\u003cp\u003eA common example of this principle is anthropomorphization: the way we might see an elephant in a cloud or a face in the splotches on your toast. In a more practical sense, it helps us orient to unusual perspective or lighting — seeing a cat in a curving pattern of shadows on the bed at night, for instance. Or in the example on this slide, we can see what might be considered a complex pattern of arcs and intersections, but the principle of Prägnanz predicts that most of us will quickly interpret this image as six overlapping circles.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 29:\u003c/strong\u003e The second grouping principle says that we\u0026rsquo;re inclined to group together items that have similar characteristics. This could be color, shape, size, texture, orientation, etc. This one is called the \u003cstrong\u003eprinciple of Similarity\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eLinks, buttons, fonts, headers — grouping less influenced by proximity.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 30:\u003c/strong\u003e The third grouping principle says that we’re inclined to group together objects that are closer together physically. This is called the \u003cstrong\u003eprinciple of Proximity\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eSectioning, items in a navigation, spacing and whitespace.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 31:\u003c/strong\u003e The fourth grouping principle says that we’re inclined to group together objects that are found in the same closed region. This is called the \u003cstrong\u003eprinciple of Common Region\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eConnecting sometimes dissimilar items, powerful effect strong than other forms of grouping.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 32:\u003c/strong\u003e The fifth grouping principle says that we’re inclined to group together objects that are moving together. This is called the \u003cstrong\u003eprinciple of Common Fate\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eReduce animation in the design system, scrolling, avoiding parallax, moving at different speeds.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 33:\u003c/strong\u003e The fifth grouping principle says that we’re inclined to group together objects that follow a common path, and that we favor smooth or curved paths over those with unexpected changes in direction. This is called the \u003cstrong\u003eprinciple of Continuity\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eGradual incremental change improves group identity, in a large-scale sense, this builds trust. common path is also used in something like step indicator, or process list.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 34:\u003c/strong\u003e The sixth grouping principle says that we\u0026rsquo;re inclined to fill in blanks to perceive a complete object whenever an external stimulus partially matches that object. This is called the \u003cstrong\u003eprinciple of Closure\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eIndication that more information exists off-screen. Used in slider and carousel, but also in standard vertical scrolling. The inverse is the \u0026ldquo;illusion of completeness\u0026rdquo; when there is more content off-screen, but there\u0026rsquo;s no indication that you should scroll, there are no partial elements you want to complete.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 35:\u003c/strong\u003e Just as our brains are inclined to group elements by characteristics that imply a group identity, we\u0026rsquo;re equally inclined to identify differences between a single element and other elements in the same perceptual field, groups of one. You could think about this perception of difference as contrast since contrast is measurement of the degree of difference. We\u0026rsquo;re all familiar with color contrast and what\u0026rsquo;s required by Section 508 and WCAG, which is a difference in luminance, but there are lots of other ways to perceive difference.\u003c/p\u003e\n\u003cp\u003eWhen there are groups of one with sufficient difference, the result is something called the pop-out effect. In the pop-out effect, the element that is different pops out of its context and captures primary attention. Often only after we attend to the element isolated by the pop-out effect can we attend to other groupings and other characteristics of an environment. The pop-out effect can be a powerful driver of attention and, as such, can also be super distracting. Sometimes the power of the pop-out effect can overwhelm the attention and capture all the resources in working memory, at least until it can be actively ignored. Use it intentionally and be on the lookout for any unintentional pop-outs.\u003c/p\u003e\n\u003cp\u003eHere are a few characteristics that can trigger the pop-out effect.\u003c/p\u003e\n\u003cp\u003eSome are more dramatic than others, and all of them depend on the degree of difference.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 36:\u003c/strong\u003e Luminance\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 37:\u003c/strong\u003e Size\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 38:\u003c/strong\u003e Shape\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 39:\u003c/strong\u003e Hue\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 40:\u003c/strong\u003e Alignment\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 41:\u003c/strong\u003e Orientation\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 42:\u003c/strong\u003e Outline\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 43:\u003c/strong\u003e Our brains are really good at both grouping and finding key details. Part of our job as designers is to use what the brain is already doing all the time and reinforce that activity with meaning. Our job is to understand the intentions of the people who use our sites and services, and create interactive environments that are organized in such a way that folks can easily orient themselves and make a reliable guess about what they should do next.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 44:\u003c/strong\u003e As I was writing this presentation, I thought that an alternative title for it — instead of \u003cstrong\u003eMaking Sense\u003c/strong\u003e — might be \u003cstrong\u003eWhat Do I Do Now?\u003c/strong\u003e since this is the driving force behind every interaction big and small. How do I make the next decision? Where do I focus my attention now?\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 45:\u003c/strong\u003e Each decision that a user needs to make in any process uses up a little bit of working memory. And the total amount of working memory we\u0026rsquo;re using at any one time is something we call \u003cstrong\u003ecognitive load\u003c/strong\u003e. And when the cognitive load reaches the max of our working memory, that\u0026rsquo;s when we get frustrated and give up or get mad.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 46:\u003c/strong\u003e People have all their free working memory available to a task only on the best of days. Most days, there are plenty of other things happening that are literally taking up space in our memory. Distractions, stresses, and fatigue all add to our cognitive load, leaving even less available for understanding how to do something new.\u003c/p\u003e\n\u003cp\u003eWhen possible we want to structure our experiences so each individual step a user takes is as meaningful and as simple as it can be.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 47:\u003c/strong\u003e Using meaningful groupings is like creating a navigable decision tree. The first groupings we notice are our first decision —in which grouping should I focus my attention first? Then we sample a detail from that grouping. What\u0026rsquo;s the purpose of that grouping? Did it confirm my assumption about its purpose? Does it have the information I\u0026rsquo;m looking for? If not, we go to the next grouping. Then, when we find a relevant grouping we look inside it to make our next decision. At each step we want to limit the amount of decision-making we expect of the user. Studies show that people have a much harder time if they\u0026rsquo;re trying to decide from between more than seven choices. More than seven, you may want to reorganize groupings so users can make a simpler choice first.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 48:\u003c/strong\u003e And of course, these groupings should be meaningful. Remember the mystery house example from before —structure that gave the appearance of meaning without meaningful organization was even more frustrating than no structure at all! Beware of miscellaneous, grab-bag sections in your sites and services, like a sidebar that contains a half-dozen unrelated modules.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 49:\u003c/strong\u003e Using meaningful groupings to help users easily get the gist of an interaction is drawn from research into the visual parts of the brain and came out of studying visual design, but the concept can also inform how we design for blind users and is very applicable to understanding the needs of folks who are colorblind, or who use screen magnifiers. And it\u0026rsquo;s also critically important to content designers.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 50:\u003c/strong\u003e Even though blind users navigating our sites with screen readers aren\u0026rsquo;t perceiving our page groupings visually, many of these meaningful groupings still exist, and are, in fact, more explicit and important for screen readers. Some of the most common visual groupings are defined in our markup with semantic HTML and ARIA roles. Markup semantics, which ARIA extends, give canonical names to common groupings \u003cstrong\u003eHeader\u003c/strong\u003e, \u003cstrong\u003efooter\u003c/strong\u003e, \u003cstrong\u003emain\u003c/strong\u003e, \u003cstrong\u003ebody\u003c/strong\u003e, \u003cstrong\u003esection\u003c/strong\u003e, \u003cstrong\u003enav\u003c/strong\u003e, \u003cstrong\u003earticle\u003c/strong\u003e, \u003cstrong\u003easide\u003c/strong\u003e, \u003cstrong\u003efigure\u003c/strong\u003e, and \u003cstrong\u003elists\u003c/strong\u003e are all examples of meaningful groupings available to screen readers. In fact, semantic HTML and ARIA roles can give a great hint to designers about the types of groupings they should make sure are clear in their visual designs!\u003c/p\u003e\n\u003cp\u003eBlind users certainly use focused attention and working memory, and have limited cognitive load. Just as sighted users might use their eyes to scan groups and common elements, screen readers users can and do similarly scan and browse pages. Technology should enable the same type of gist/detail scanning that sighted users do with their eyes.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 51:\u003c/strong\u003e Other perceptual differences like color blindness and limited field of vision highlight the importance of layering methods of grouping and difference. Don\u0026rsquo;t leave critical functionality ungrouped; with something like screen magnifiers, the field of vision is constrained, need to visually connect functionality.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 52:\u003c/strong\u003e And finally, many of the principles of grouping and distinction are critically important to content design. Chapters, sections, paragraphs, sentences and lists are common structural groupings that are considered the building blocks of writing.\u003c/p\u003e\n\u003cp\u003eThe techniques of Plain Language filter these building blocks through the lens of cognitive load and simplicity.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eUse clear headings.\u003c/li\u003e\n\u003cli\u003eKeep paragraphs short.\u003c/li\u003e\n\u003cli\u003eUse lists instead of paragraphs when possible.\u003c/li\u003e\n\u003cli\u003eStick to the point.\u003c/li\u003e\n\u003cli\u003eUse parallel structure to highlight the differences between clauses.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eEach of these guidelines helps users easily scan to find the meaning of a group of text. In so many ways, our overall grouping structures of layout and design exist to support text. Our layout grouping should be informed by our content, and our content should, itself, be meaningfully grouped.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 53:\u003c/strong\u003e At the end of the day, all of this somewhat academic content is in the service of helping us better and more completely understand the people we serve. For us designers, none of this information is useful independent of user experience, no design is better because it better implements Gestalt groupings, no designer is more effective because they think of themselves as an engineer of attention. A design is better because it addresses user needs more effectively. If information about some of what we understand to be fundamentals of cognition helps us stay engaged with our audience, and helps us understand what kind of design decisions to try when we have a problem, then that, I hope, is also something of value.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 54:\u003c/strong\u003e For more information, you can find a number of good resources online. Here are a few things to search for:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eGestalt principles of grouping\u003c/li\u003e\n\u003cli\u003eMax Wertheimer\u003c/li\u003e\n\u003cli\u003ecognitive psychology\u003c/li\u003e\n\u003cli\u003eattention\u003c/li\u003e\n\u003cli\u003ecognitive load\u003c/li\u003e\n\u003cli\u003eworking memory\u003c/li\u003e\n\u003cli\u003eunconscious pop-out\u003c/li\u003e\n\u003cli\u003eselective attention test video\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 55:\u003c/strong\u003e Q\u0026amp;A\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 56:\u003c/strong\u003e Thanks for joining today’s USWDS monthly call. Next month, we’ll be digging into some of the results of our recent top tasks survey. We had more than 100 responses to this survey and there are some clear findings we\u0026rsquo;d like to share. Please look out for an event feedback survey from Digital.gov. You\u0026rsquo;ll get this in your email, and there\u0026rsquo;s also a link in the chat. Your feedback makes a difference to us, so we\u0026rsquo;d appreciate the extra time it takes you to provide it.\u003c/p\u003e\n\u003cp\u003eThank you, and see you next month!\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\n\n\u003cp\u003eJoin the Design System team as we take a step back and explore how our design decisions both support and are supported by the ways our bodies and brains perceive order and make sense of the world.\u003c/p\u003e\n\u003cp\u003eIn this session, we\u0026rsquo;ll discuss:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eHow does grouping affect perception?\u003c/li\u003e\n\u003cli\u003eWhat is cognitive load?\u003c/li\u003e\n\u003cli\u003eHow can we use principles of cognition in the service of design decisions?\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eThis event is best suited for:\u003c/strong\u003e Designers of all levels\u003c/p\u003e\n\u003ch2 id=\"speakers\"\u003eSpeakers\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eDan Williams -\u003c/strong\u003e Product Lead, USWDS\u003c/li\u003e\n\u003c/ul\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" :"2023-03-28-uswds-monthly-call-march-2023.md",
      
      "filepath" :"events/2023/03/2023-03-28-uswds-monthly-call-march-2023.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/events/2023/03/2023-03-28-uswds-monthly-call-march-2023.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/events/2023/03/2023-03-28-uswds-monthly-call-march-2023.md","slug" : "uswds-monthly-call-march-2023","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2023/03/28/uswds-monthly-call-march-2023/"
    }
  ]
}