Patterns
Patterns help users accomplish tasks effectively by using elements in predictable combinations and creating repeatable interaction flows.
- AI-human interaction Part of the extended design system layer Design AI-powered features that balance user needs, transparency, and ethical considerations.
- Affordance Ensure perceivable controls and intuitive user interactions across different modalities.
- Agents and Flows Part of the extended design system layer Interface patterns for GitLab's specialized AI assistance - Agents for domain-specific conversational help, and Flows for automated, repeatable processes.
- Calls to action for GitLab Duo Part of the extended design system layer Guidelines for designing and implementing AI-specific interactive elements that prompt user actions within GitLab.
- Contextual help and info Implement contextual help and information to provide additional context and assistance to a user.
- Dashboards Part of the extended design system layer Guidelines for designing interfaces that present multiple dashboard panels of content and data for analysis and decision-making.
- Destructive actions Emphasize the importance of appropriate friction to prevent accidental actions and help users understand consequences.
- Drag and drop Part of the extended design system layer Provide an intuitive way for users to reorganize content, enhancing control over layout and order.
- Embedded lists Guidelines for creating and managing lists of items within a specific context, such as project settings or configuration pages.
- Empty States Informative and actionable regions aimed at improving feature adoption and usability when no content exists yet.
- Feature discovery Part of the extended design system layer Introduce and promote new functionality, emphasizing user context, motivation, and value to ensure effective adoption.
- Feature management Part of the extended design system layer Discover strategies for configuring, highlighting, and controlling the visibility of product capabilities.
- Feedback Part of the extended design system layer
- Filtering Element combinations to narrow down a data list based on specific criteria.
- Forms Guidelines for creating structured interfaces to capture, validate, and submit manual user input.
- GitLab Duo Chat Interface Part of the extended design system layer The chat interface pattern enables conversational AI experiences within GitLab workflows, providing a familiar messaging interface for multi-turn interactions with AI agents.
- Keyboard shortcuts Part of the extended design system layer Improve user productivity and accessibility by optimizing flows with a keyboard.
- Loading Optimize user experience during wait times with effective indicators and interactions.
- Merge request reports Part of the extended design system layer Widgets that convey information about merge request changes, helping authors and reviewers understand their impact and what needs to be improved.
- Navigation sidebar Part of the extended design system layer Follow the guidance on the structure and behavior of the navigation sidebar to improve user orientation and workflow.
- Notifications Part of the extended design system layer Recommendations for timely and relevant system-generated updates to keep users informed.
- Obfuscation Protect sensitive user data through strategic information concealment in the interface.
- Progressive disclosure Manage information complexity to enhance user understanding and reduce cognitive load.
- Saving and feedback Discover strategies for preserving user progress and communicating system responses effectively.
- Searching Guidelines for different types of searches.
- Settings management Part of the extended design system layer Empower users to control product behavior and appearance while maintaining system-wide consistency.
- Slash commands in GitLab Duo Chat Part of the extended design system layer A method for communicating with and discovering GitLab Duo Chat functionality.