Type and hit Enter to search

UX/UI

Generative AI UX Design Patterns: Enabling Integration Conversations in Your Product Ecosystem

September 28, 2024 3 Mins Read
58 Views

Expanding the Role of Generative AI in UX
Generative AI offers far more potential than being limited to conversational interfaces like ChatGPT or niche features, such as auto-generating cover letters on job sites. By exploring innovative approaches to integrating Generative AI into your product’s functionality, you can unlock new dimensions of user value.

This guide introduces three perspectives for exploring the integration of Generative AI: System Scope, Spatial Relationships, and Functional Relationships. These frameworks can spark meaningful discussions about incorporating Generative AI into your UX ecosystem.

System Scope: How Much of the System is AI-Driven?

Taking a systems-thinking approach, we can analyze how Generative AI integrates into the overall system by examining its scope. System scope can be categorized into four levels: Component, Feature, Flow, and Application.

1. Component

AI provides contextual enhancements to specific UI elements.

  • Example: A table cell with an info icon that opens a Generative AI-powered explanation.
    This represents the most lightweight integration of AI.

2. Feature

Generative AI performs specific tasks within an existing feature.

  • Example: A “Generate Content” button embedded in a text editor.
    This allows AI to serve as an actionable tool within the existing functionality.

3. Flow

AI automates or reshapes workflows, potentially eliminating screens or steps in a process.

  • Example: AI reimagining a user’s workflow by automating routine tasks or optimizing task sequences.

4. Application

Here, AI becomes the core driver of a standalone application designed for a specific purpose.

  • Examples:
    • Rationale AI helps users make informed decisions.
    • Julius AI integrates data analysis and visualization.

Platform and Ecosystem

At broader levels, AI can operate within:

  • Platforms: Supporting multiple applications with tailored AI experiences (e.g., industry-specific, organization-focused, or personal platforms like Rewind AI).
  • Ecosystems: Connecting features across apps and platforms to create cohesive, cross-functional AI systems (e.g., Cove.AI or Salesforce’s Generative Canvas).

Spatial Relationships: Where Does AI Reside Relative to Features?

Spatial integration considers how Generative AI features are positioned within an application. Key spatial relationships include:

1. Separate

Generative AI is hosted on a different screen or page, isolating it from existing features.

  • Example: Testing new AI capabilities without disrupting the current user experience.

2. Alongside

AI features are placed adjacent to existing tools, providing supplementary functionality.

  • Example: Microsoft Copilot or Google Workspace’s AI sidebar for generating images.

3. Layered

AI functionality overlays existing features, such as Grammarly’s floating window for content enhancement.

4. Integrated – Parent

AI takes the lead in driving the user experience.

  • Example: Generative AI powering search results on Perplexity.ai.

5. Integrated – Child

AI complements an existing feature by providing secondary insights or outputs.

  • Example: Bing’s AI-generated content is part of search results.

6. Point

AI adds micro-interactions, such as tooltips or annotations, to enhance specific elements.

  • Example: AI-generated explanations embedded in table cells or form fields.

7. Canvas

AI-generated elements populate a canvas interface, allowing users to arrange and interact freely.

  • Example: Salesforce Generative Canvas integrates enterprise data for diagramming and planning.

Functional Relationships: How Do AI and Features Interact?

Functional relationships determine how Generative AI interacts with the surrounding features or content. These relationships can range from minimal interaction to deeply integrated workflows:

1. Separate

The AI operates independently of content on the screen.

  • Example: Google’s “Create Image with Duet AI” operates independently of slide content.

2. Aware Of

AI responds to specific user actions by leveraging existing content but requires manual input to integrate results.

  • Example: IBM WatsonX Code Assistant generates suggestions based on user selections.

3. Acting Upon

Changes in feature content automatically update AI outputs.

  • Example: MIRO Assist responds dynamically to diagram changes.

4. Feature Incorporates

AI generates content directly within a feature, streamlining user workflows.

  • Example: Automated table generation in response to structured data inputs.

5. Uses Feature

AI integrates feature components conversationally, offering advanced editing and arrangement capabilities.

  • Example: Perplexity.ai combines AI results with interactive features like source analysis.

6. Uses Conversationally

AI integrates features seamlessly within an ongoing conversation, maintaining a conversational context.

Key Takeaways

When incorporating Generative AI into your products, use these perspectives to guide discussions and identify the best integration strategies. The value of Generative AI depends on aligning its system scope, spatial positioning, and functional relationships with user needs and product goals.

Share Article

Other Articles