What is a design pattern?

- [Instructor] As UX designers, we approach designing interfaces by using design patterns. Design patterns are common solutions for common design problems. The pattern concept is rooted from architecture. In 1977, a book called "The Pattern Language" was written by Christopher Alexander and other co-authors on how to organize towns and cities using common understandings people have around space and using repeatable solutions. Patterns in UX are also repeatable solutions. Design patterns are documented interactions and best practices for how and when to use the correct user interface element. Design patterns typically consist of the following elements: interaction and behavior, description, and best practices. Depending on the pattern library, the pattern may have both visual and technical specifications if they've been developed into reusable components that engineers can use when developing the experience. Let's take a look at how pattern interactions are constructed. In this example, we have a pattern for a calendar in a text box input. While this seems like a very straightforward interaction, there are some key states and considerations when diving into the details of this calendar input. One consideration is whether or not the calendar is invoked from the icon or the field. In this description, it's invoked by the focus on the field, not just the icon. The next interaction is with the calendar itself. Some questions we want to answer for how this pattern works is: What will the date default to? How does this user change the date if they want to select something for next year? Can the user just enter the date into the field? In this case, they can. We then have the end state and how the date is formatted after the user selects the date from the calendar. Will it be shown like in this example or will it be using the month written out as September? All of these interactions and states should be documented in the pattern itself. Specs that highlight key interactions are also included in the pattern documentation. In our example, we walk through a calendar pattern. This pattern didn't include any visual or technical elements, this was just a design pattern that focused on interactions. Patterns establish consistency for interactions and sets expectations on how the user should interact with an interface element. The other element of design patterns is the visual design. Oftentimes, design patterns are a subtle reflection of the brand. For example, looking at a simple element like a radio button, we can see how different brands handle color to reinforce their identity. Like in this example from E-Trade, a financial trading platform, and this example from MailChimp, a marketing automation platform. The combination of interaction patterns, technical, and visual specifications are collectively known as a design system. Design systems are comprehensive and are used to help expedite development while maintaining visual and interaction consistency. Design systems help design scale. Using this accordion example, we can visualize the interaction design as how the accordion behaves when we click on the panel. The code snippet is the underlying code that componentized this element and the visual design is the color, type, and icons used on the element itself. Design systems have a combination of interaction, code, and visual design. Interaction patterns are the foundation of usable and consistent interface design.