Agentic Design

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

Design Systems

Material Design - Cross-Platform Guidelines

Apple Human Interface Guidelines - Multi-Platform Design

Microsoft Fluent Design - Cross-Device Experiences

IBM Carbon Design System - Multi-Platform Components

Implementation Guides

React Native - Cross-Platform Development

Flutter - Multi-Platform UI Framework

Electron - Desktop App Development

Progressive Web Apps - Cross-Platform Web Standards

Tools & Libraries

Expo - React Native Platform

Ionic - Cross-Platform Mobile Framework

Xamarin - Microsoft Cross-Platform Development

Cordova - Hybrid Mobile App Platform

Community & Discussions

Cross-Platform Development Reddit

UX Stack Exchange - Multi-Platform Design

Designer Hangout - Cross-Platform UX Community

Mobile UX Planet - Platform Design Articles

Contribute to this collection

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

Contribute

Patterns

closed

Loading...

Built by Kortexya