Your primary audience is designers and engineers. Consider if the information you provide will help them make a decision that results in a positive and cohesive user experience.
What is a UI pattern?
UI patterns are reusable solutions to common design problems (“how do people filter data?”, “how do we portray loading and progress?” or “how do people save content?”). They provide guidelines and best practices that can be strategically applied across multiple areas. In result, they help create a consistent and predictable experience, making it easier for users to utilise a product.
What’s the difference between a UI pattern and a component?
UI patterns guide how components are organised and interact together to solve a user problem. Components are the building blocks of UI patterns. Both help create a cohesive user experience, at different scale.
Establishing and documenting a UI pattern is different from creating a component. There is a similarity in documenting usage guidelines for both (when to use, when not to use, and do’s and don’ts) that help make decisions about when a pattern or component should be used, but that’s where the similarities between them end.
Structure
- Define a user goal: outline a specific user problem that will be solved by the pattern.
- Set the context: provide details on when the situation occurs. Answer how this pattern will positively impact usability. You can optionally point out UX Laws and usability heuristics relevant to the pattern.
- Describe the solution: explain the design patterns that should be used to meet the user goal. Avoid referencing patterns we want to discourage—while they might be helpful when describing components, for patterns, focus on best-case user experience. You can use the following formats to describe the solution:
- List of approaches with accompanying descriptions and imagery
- List of general principles (for example, Navigation UI Pattern)
- Table of approaches with information on when to use them
- Showcase examples: provide real-world examples of applying the pattern. You can use a combination of textual descriptions with imagery, interaction flows or prototypes.
Using imagery
Imagery is welcome but not required when writing UI patterns. If you’d like to provide visual examples to support a UI pattern, follow the guidelines below.
Do
- Use mid-fidelity illustrations, focusing on highlighting the pattern rather than accurately reflecting the UI
Don’t
- Use direct screenshots; instead, provide links to locations in the product
Here’s an example from our messaging pattern:
Contributing a UI Pattern
We consider adding an UI Pattern as a Heavy contribution to the design system, as it establishes a high-level guidance for solving user goals across the entire product. When proposing a new UI Pattern, follow the guidelines for a Heavy contribution.