Patterns
๐Ÿ“ฑ

Cross-Platform Agent UX(CPX)

Consistent agent experience patterns across devices and platforms with seamless synchronization and adaptation

Complexity: highUI/UX & Human-AI Interaction

๐ŸŽฏ 30-Second Overview

Pattern: Consistent agent experiences across desktop, mobile, and web with seamless synchronization and platform-optimized adaptation

Why: Enables fluid multi-device workflows, maintains user context, and leverages each platform's unique strengths

Key Insight: Design consistency + platform adaptation + real-time sync โ†’ unified cross-device experience

โšก Quick Implementation

1Design System:Unified colors, typography, layouts
2State Sync:Real-time cross-device synchronization
3Platform Adaptation:Device-specific optimizations
4Context Transfer:Seamless device switching
5Feature Parity:Consistent capabilities across platforms
Example: design_system โ†’ state_sync โ†’ platform_adaptation โ†’ context_transfer โ†’ feature_parity

๐Ÿ“‹ Do's & Don'ts

โœ…Maintain visual consistency across all platforms
โœ…Adapt interactions to platform conventions (gestures, navigation)
โœ…Sync agent state and conversation history in real-time
โœ…Preserve context when users switch between devices
โœ…Optimize for each platform's strengths and capabilities
โŒCreate completely different experiences per platform
โŒIgnore platform-specific interaction patterns
โŒLose conversation state during device transitions
โŒForce mobile interfaces to match desktop layouts
โŒSacrifice performance for visual consistency

๐Ÿšฆ When to Use

Use When

  • โ€ข Multi-device user workflows
  • โ€ข Consumer-facing applications
  • โ€ข Enterprise productivity tools
  • โ€ข Mobile-first agent experiences

Avoid When

  • โ€ข Single-platform specialized tools
  • โ€ข Resource-constrained environments
  • โ€ข Platform-specific features required
  • โ€ข Simple single-purpose applications

๐Ÿ“Š Key Metrics

Cross-Device Usage
% users active on multiple platforms
Context Transfer Success
Seamless device switching rate
Platform Consistency Score
UI/UX uniformity rating
Feature Parity
Capability availability across platforms
Sync Performance
Real-time state synchronization latency
User Satisfaction
Cross-platform experience rating

๐Ÿ’ก Top Use Cases

Personal Assistant: mobile voice โ†’ desktop detailed responses โ†’ tablet visual review
Enterprise Tools: mobile field work โ†’ desktop analysis โ†’ tablet presentations
Customer Support: phone initial contact โ†’ web detailed troubleshooting โ†’ app follow-up
E-commerce: mobile browsing โ†’ desktop purchasing โ†’ tablet order tracking
Education: mobile quick questions โ†’ desktop study sessions โ†’ tablet interactive content

References & Further Reading

Deepen your understanding with these curated resources

Contribute to this collection

Know a great resource? Submit a pull request to add it.

Contribute

Patterns

closed

Loading...

Built by Kortexya