[Article] UI-Based Chatbots vs. Text-Based Chatbots: Task Completion Rate, Time-on-Task, and User Satisfaction

[Rahulkhinchi03]

Closes #9

Summary

A research-backed comparison of text-based and UI-based chatbots across task completion rate, time-on-task, and user satisfaction. The article makes the case through peer-reviewed UX research and is useful to any developer building a chatbot on any stack. OpenUI enters in the second-to-last section as the practical implementation path, not as the predetermined answer.

What this covers

• Why accurate chatbot responses still produce low task completion rates
• How text-based output creates cognitive load that structured UI removes
• Research findings on time-on-task and user satisfaction across interface types
• Where generative UI differs from predefined button flows
• How OpenUI handles this technically, with working code examples

Research citations

• Nguyen, Sidorova & Torres (2021). "User interactions with chatbot interfaces
  vs. menu-based interfaces." Computers in Human Behavior, 125.
  https://www.sciencedirect.com/science/article/abs/pii/S0747563221004167

• Følstad & Skjuve (2022). "Understanding the user experience of customer
  service chatbots." International Journal of Human-Computer Studies, 161.
  https://www.sciencedirect.com/science/article/pii/S1071581922000179

• Nielsen Norman Group. "The User Experience of Chatbots."
  https://www.nngroup.com/articles/chatbots/

• Forethought CX Platform Review (2025).
  https://forethought.ai/blog/why-are-some-chatbots-still-bad

Code

All code samples use @openuidev/react-ui@0.10.2 and @openuidev/react-lang. Verified against the published npm package docs. Imports use correct subpath exports including @openuidev/react-ui/genui-lib for prompt generation. OpenUI Lang syntax example taken directly from the live playground output.

Visuals

#	Description	Source
1	Side-by-side chat comparison (text vs UI response)	Original Figma
2	OpenUI homepage: Text wall vs card grid	openui.com screenshot
3	OpenUI Playground: Raw OpenUI Lang + rendered weather dashboard	openui.com/playground screenshot
4	OpenUI Demo: Full PR dashboard from a single text prompt	openui.com/demo screenshot
5	Chatbot Format Health Metrics dashboard	Original Figma

Writing standards checklist

• No AI filler phrases ("rapidly evolving", "seamless", "powerful tool", "let's dive in" — none present)
• Developer-to-developer tone throughout
• OpenUI appears naturally, not force-fitted. It enters section 6 of 7
• Content is useful without OpenUI. First 5 sections stand alone
• All research claims attributed with direct links
• Code uses real shipped APIs, not invented examples
• No version numbers pinned in prose.Ppackage version noted here only.
• Third-party screenshots attributed to source URLs

[entelligence-ai-pr-reviews]

EntelligenceAI PR Summary

Introduces a new article and associated image assets comparing UI-based and text-based chatbot approaches.

• Added articles/ui-based-vs-text-based-chatbots.md (278 lines) with performance metric analysis, cognitive load theory, and academic research citations
• Includes a technical implementation guide for the OpenUI open-source toolkit with code samples and token efficiency benchmarks
• Covers evaluation metric recommendations for task completion rate, time-on-task, and user satisfaction
• Added 6 supporting image assets under assets/ui-based-vs-text-based-chatbots/: demo.png, gitpulse.png, health.png, hero-web.png, text-vs-ui.png, and weather-dashboard.png

---

Confidence Score: 5/5 - Safe to Merge

Safe to merge — this PR introduces a new article articles/ui-based-vs-text-based-chatbots.md and associated image assets with no runtime code changes, no logic modifications, and no security-sensitive material. The content covers UI-based vs. text-based chatbot performance metrics, cognitive load theory, and an OpenUI implementation guide, all of which are purely editorial in nature. No review comments were generated, no critical or significant heuristic issues were flagged, and the changes are entirely additive documentation assets that carry no risk of regression or breakage.

Key Findings:

• The PR is entirely composed of a new markdown article and image assets — no application logic, configuration, or security-relevant code is modified, making regression risk effectively zero.
• No review comments, unresolved concerns, or heuristic issues were identified across the changed files, including articles/ui-based-vs-text-based-chatbots.md and its accompanying image assets.
• The article content includes code samples and benchmarks for the OpenUI toolkit, but these are illustrative/documentation-only snippets with no executed path in the codebase.

Files requiring special attention

• articles/ui-based-vs-text-based-chatbots.md

[entelligence-ai-pr-reviews]

Walkthrough

This PR adds a new technical article comparing UI-based and text-based chatbots, covering performance metrics (task completion rate, time-on-task, user satisfaction), cognitive load theory, academic citations, and a technical implementation guide for the OpenUI toolkit with code samples and token efficiency benchmarks. Six supporting image assets are included to illustrate the article content.

Changes

File(s)	Summary
articles/ui-based-vs-text-based-chatbots.md	Adds a 278-line article comparing UI-based and text-based chatbots, including performance metrics, cognitive load analysis, academic citations, OpenUI implementation guide, code samples, token efficiency benchmarks, and evaluation recommendations.
assets/ui-based-vs-text-based-chatbots/demo.png
assets/ui-based-vs-text-based-chatbots/gitpulse.png
assets/ui-based-vs-text-based-chatbots/health.png
assets/ui-based-vs-text-based-chatbots/hero-web.png
assets/ui-based-vs-text-based-chatbots/text-vs-ui.png
assets/ui-based-vs-text-based-chatbots/weather-dashboard.png	Adds six new binary image assets serving as hero banner, comparison illustrations, and supporting visuals for the chatbot comparison article.

Sequence Diagram

This diagram shows the interactions between components:

sequenceDiagram
    title OpenUI: From User Query to Rendered UI Components

    actor User
    participant App as "Chat App"
    participant Lib as "Component Library\n(openuiLibrary)"
    participant LLM as "LLM"
    participant Stream as "OpenUI Lang Stream"
    participant Renderer as "Renderer"

    Note over App, Lib: Setup Phase (once at initialization)
    App->>Lib: openuiLibrary.prompt(openuiPromptOptions)
    Lib-->>App: systemPrompt (component-aware instructions)

    Note over User, Renderer: Runtime: User sends a query
    User->>App: "What parameters does /auth/token accept?"
    activate App

    App->>LLM: { systemPrompt, userMessage }
    activate LLM
    Note over LLM: Model decides at runtime<br/>what component to render<br/>(table, form, card, chart...)
    LLM-->>Stream: OpenUI Lang tokens (streaming)
    deactivate LLM

    Note over Stream: e.g. root = Stack([paramTable])<br/>paramTable = Table([...fields, types, flags])
    loop Token streaming
        Stream-->>Renderer: next OpenUI Lang token
        Renderer->>Lib: resolve component(token)
        Lib-->>Renderer: React component
        Renderer-->>User: progressively rendered UI
    end

    deactivate App

    alt Text-based chatbot (old approach)
        Note over User: Reads prose -> parses relevance -><br/>holds in memory -> navigates elsewhere<br/>4 steps before task completion
    else UI-based chatbot with OpenUI
        Note over User: Sees interactive component<br/>(table, form, card) -> acts directly<br/>Task completion inside the response
    end

Loading

---

🔗 Cross-Repository Impact Analysis

Enable automatic detection of breaking changes across your dependent repositories. → Set up now

Learn more about Cross-Repository Analysis

What It Does

• Automatically identifies repositories that depend on this code
• Analyzes potential breaking changes across your entire codebase
• Provides risk assessment before merging to prevent cross-repo issues

How to Enable

1. Visit Settings → Code Management
2. Configure repository dependencies
3. Future PRs will automatically include cross-repo impact analysis!

Benefits

• 🛡️ Prevent breaking changes across repositories
• 🔍 Catch integration issues before they reach production
• 📊 Better visibility into your multi-repo architecture

---

[entelligence-ai-pr-reviews]

LGTM 👍 No issues found.

[Rahulkhinchi03]

Hi @vishxrad, @zahlekhan,
Here I go with my first PR :)

[zahlekhan]

Thanks @Rahulkhinchi03 , reviewing this