UI Patterns

Core Interactions (≈15-20 patterns)

• Table interactions (pagination, filtering, sorting)
• Form submission and validation
• Multi-step workflows
• Search and filtering
• Data export/import
• Bulk operations
• Detail view navigation
• Hierarchical data navigation
• Create/edit/delete operations
• Approval workflows
• Alert acknowledgment
• Dashboard interactions
• Help/documentation access
• Error handling and recovery
• Keyboard shortcuts and accessibility

Information Density & Layout Hierarchies (≈10-15 patterns)

• Button hierarchy (primary, secondary, tertiary)
• Information density levels (compact, standard, spacious)
• Section headers and typography
• Form field organization
• Responsive layout breakpoints
• Card vs. table vs. list view patterns
• Modal vs. drawer usage
• Consistent spacing standards
• Icon usage and placement
• Color usage for status indicators
• Navigation placement and hierarchy
• Required vs. optional field indicators
• Empty state presentations
• Warning/alert visual hierarchy

Component Standardization by Data Type (≈15-20 patterns)

• Date inputs and displays (format, picker type)
• Numeric inputs (meters, measurements, currency)
• Text fields (lengths, validation)
• Address and location inputs
• Status indicators and state management
• File uploads and attachments
• User selection and assignment
• Time period selection
• Range inputs (sliders vs. numeric)
• Dropdown vs. radio button usage
• Meter reading inputs and validation
• Asset selection interfaces
• ID/reference number formatting
• Comments and notes fields
• History and audit trail displays
• Search parameters by data type
• Selection interfaces (single vs. multiple)

Industry-Specific Conventions (≈10-15 patterns)

• Meter reading display formats
• Consumption visualization standards
• Billing cycle representations
• Work order status visualization
• Asset health indicators
• Outage/downtime visualization
• Regulatory compliance indicators
• Field measurement units and conversions
• Geographic/territory visualizations
• Customer classification displays
• Rate/tariff presentations
• Equipment status monitoring
• Maintenance schedule visualization
• Service territory mapping

Organizational Framework (≈5-10 pattern categories)

Based on utility B2B SaaS requirements, I recommend organizing your patterns by:

1. User action types (viewing, editing, creating, etc.)
2. Industry-specific workflows (meter management, billing, work orders, etc.)
3. Data complexity (simple entries, complex relationships, hierarchical data)
4. User roles (field technicians, administrators, customer service)
5. Device contexts (desktop, tablet, mobile field use)