Interactive Design Patterns

🔮 Design Patterns For AI Interfaces (https://lnkd.in/dyyMKuU9), a practical overview with emerging AI UI patterns, layout considerations and real-life examples — along with interaction patterns and limitations. Neatly put together by Sharang Sharma. One of the major shifts is the move away from traditional “chat-alike” AI interfaces. As Luke Wroblewski wrote, when agents can use multiple tools, call other agents and run in the background, users orchestrate AI work — there’s a lot less chatting back and forth. In fact, chatbot widgets are rarely an experience paradigm that people truly enjoy and can fall in love with. Mostly because the burden of articulating intent efficiently lies on the user. It can be done (and we’ve learned to do that), but it takes an incredible amount of time and articulation to give AI enough meaningful context for it to produce meaningful insights. As it turned out, AI is much better at generating prompt based on user’s context to then feed it into itself. So we see more task-oriented UIs, semantic spreadsheets and infinite canvases — with AI proactively asking questions with predefined options, or where AI suggests presets and templates to get started. Or where AI agents collect context autonomously, and emphasize the work, the plan, the tasks — the outcome, instead of the chat input. All of it are examples of great User-First, AI-Second experiences. Not experiences circling around AI features, but experiences that truly amplify value for users by sprinkling a bit of AI in places where it delivers real value to real users. And that’s what makes truly great products — with AI or without. ✤ Useful Design Patterns Catalogs: Shape of AI: Design Patterns, by Emily Campbell 👍 https://shapeof.ai/ AI UX Patterns, by Luke Bennis 👍 https://lnkd.in/dF9AZeKZ Design Patterns For Trust With AI, via Sarah Gold 👍 https://lnkd.in/etZ7mm2Y AI Guidebook Design Patterns, by Google https://lnkd.in/dTAHuZxh ✤ Useful resources: Usable Chat Interfaces to AI Models, by Luke Wroblewski https://lnkd.in/d-Ssb5G7 The Receding Role of AI Chat, by Luke Wroblewski https://lnkd.in/d8xcujMC Agent Management Interface Patterns, by Luke Wroblewski https://lnkd.in/dp2H9-HQ Designing for AI Engineers, by Eve Weinberg https://lnkd.in/dWHstucP #ux #ai #design

Finally, agents can deliver interactive frontend experiences - and it’s open-source. 𝐀𝐆-𝐔𝐈 (Agent-User Interaction) is an open protocol and design pattern that makes agents collaborative, beyond just chatting. You could think of it like this: - MCP connects agents to tools - A2A connects agents to other agents - AG-UI connects agents to users Backends like CrewAI, LangGraph, Masstra, etc., can do a lot. But the hardest part is embedding them into real, interactive, user-facing software, like Cursor. And switching between agent frameworks is painful... as each one handles output formats, state, and ReAct loops differently. AG-UI is designed to solve this, helping teams build front-end-powered agents that are actually usable. And this isn’t just theoretical. 𝐂𝐨𝐩𝐢𝐥𝐨𝐭𝐊𝐢𝐭 is building it, and their recent collab with Google ADK is pushing the AG-UI standard into real production apps. They’re moving fast on: → Shared state between app and agent → Real-time UI updates as the agent works → Human-in-the-loop controls baked in by default 📍GitHub https://lnkd.in/g43qZgJB *I’ve been following CopilotKit for a while. It’s an open-source framework for building AI copilots directly into apps. And if you’re building with agents, AG-UI is a protocol to start learning. Image: mcp.dailydoseofds

"AI will make traditional interfaces invisible!" I keep hearing this, but my deep dive into over 100 AI workflows in SaaS products and reading about Microsoft's commitment to human agency in AI patterns have convinced me otherwise. Here are the UI patterns I'm seeing: Traditional interfaces serve a crucial role in the consumption of AI products. Advanced prompt engineering can be packaged into user-friendly point-and-click UI, short-hand sentences, or step-by-step wizards for less tech-savvy users. I refer to these as Prompt Triggers. They come in 3 flavors: 1. User Prompting 2. Prompt Templates 3. Prompt Builders Let's unpack these patterns with real-life examples. 1. User Prompting - The free-form approach that allows users to type and send any text-based response to the system. Best when users need fewer limitations. Example: Adobe Photoshop uses a floating action bar for the user’s text prompt. 2. Prompt Templates - Pre-constructed text prompts triggered by a button or action in the UI. Best for enabling specific tasks, like text summarization. Example: Scribe uses an inline editing UI with a list of pre-constructed text prompts. 3. Prompt Builders - Guided wizards that help users build detailed prompts without writing them. Example: Gamma uses a guided wizard for building a detailed prompt for presentation generation. For more weekly UI design insights and inspiration for AI patterns, check out my library at Teardowns.ai.