Designing Intent-Aware UX for LLMs: The Intent Color Affordance Pattern

Current Large Language Model (LLM) interfaces present all responses with uniform visual certainty, regardless of underlying risk, uncertainty, or content type. This design creates a fundamental mismatch between human expectations of contextual cues (like vocal tone or hesitation) and an AI’s inability to communicate its own level of risk, leading to widespread user over-reliance and dangerous interface failures in high-stakes domains like medicine and finance.

We propose the Intent Color Affordance (ICA) Pattern, a lightweight, universal design system that introduces immediate visual indicators to calibrate user trust and communicate inherent response risk. The ICA employs a four-color vocabulary (e.g., 🔴 Red for High Risk, 🟠 Orange for Verification Recommended) strategically positioned below AI outputs. This system leverages Progressive Disclosure, offering immediate visual scanning while reserving detailed contextual data (like risk reasoning and behavioral recommendations) for on-demand tooltips.

The contribution is twofold: a systematic approach to responsible AI interface transparency grounded in HCI principles, and a technically feasible working implementation using standard web patterns (Svelte/Tailwind CSS). The ICA pattern transforms AI conversations from uniform text exchanges into contextually aware interactions, enabling users to appropriately assess risk and fostering safer, more sustainable human-AI collaboration.

Human conversation relies heavily on non-verbal cues to communicate context, confidence, and risk. When someone hesitates before giving medical advice, their uncertainty signals that we should seek additional verification. When a confident posture reinforces factual information, we calibrate our trust accordingly. These contextual signals are fundamental to how humans navigate complex information exchanges.

Large Language Models (LLMs) have become increasingly sophisticated at generating human-like responses across diverse domains, from casual conversation to specialized advice in medicine, law, and finance. However, current AI interfaces present all responses with uniform visual treatment, regardless of the underlying risk, uncertainty, or content type. Whether an AI is explaining basic arithmetic or providing medical guidance that could cause harm, users receive identical formatting – clean, confident, and visually indistinguishable.

This interface design creates a fundamental mismatch between human expectations and AI capabilities. Users bring human conversation expectations to interfaces that cannot communicate the contextual awareness humans rely on for safe information processing. The result is a pattern of “interface failures” often mischaracterized as “user errors”: medical advice followed without verification because it appeared authoritative, conspiracy theories reinforced because the AI couldn’t signal growing concern, and escalating mental health crises that memory-enabled systems could detect but cannot communicate.

We propose the Intent Color Affordance (ICA) pattern – a lightweight, universal design system that gives AI responses the equivalent of vocal tone through simple visual cues. Our contribution is both a systematic approach to AI interface transparency and a working implementation that can be deployed immediately across existing chat interfaces.

This subsection anchors on policy/standards and HCI research; representative sources include:

• NIST AI Risk Management Framework (1.0). Transparency, risk tiers, human-factors guidance; good backbone for ICA’s compliance framing. ¹
• EU AI Act (final text). User-awareness + transparency duties for AI systems; aligns with visible risk cues. ²
• ISO/IEC 42001:2023. AI management systems standard; “org-level” controls where ICA can live. ³
• Doshi-Velez & Kim (2017). Canonical XAI position paper on when/why interpretability is needed. ⁴
• Amershi et al. (CHI 2019). 18 Guidelines for Human-AI Interaction; supports progressive disclosure & “when wrong” behaviors. ⁵

• Goal: calibrate reliance, not just explain models. These anchors define when to signal, how much, and why.
• Appropriate trust. Keep users in the Goldilocks zone of reliance; ICA colors act as quick proxies for that zone.
• Misuse / disuse / abuse. Without cues, people over- or under-rely; red/orange states counter both failure modes.
• Automation bias. Uniform “confident” UI invites rubber-stamping; orange microcopy inserts a deliberate pause.
• Team brittleness after updates. Consistent indicators stabilize expectations when models change behind the scenes.
• Uncertainty done right. Put ranges/limits in hover tooltips—comprehensible, optional, and out of the main flow.
• Affordances & conventions. Colors/icons must behave like learned signs; mappings stay fixed product-wide.

• Lee & See (2004). “Appropriate trust” model—foundational for trust calibration.⁶ 
• Parasuraman & Riley (1997). Misuse/disuse/abuse of automation; motivates visible risk states.⁷
• Skitka et al. (2000). Automation bias; shows why uniform “confident” UI misleads. ⁸
• Bansal et al. (AAAI 2019). Human-AI teaming; model updates can harm team performance; optimize for calibration, not just accuracy. ⁹
• Padilla, Lace M. K., Matthew Kay, and Jessica Hullman. “Uncertainty Visualization.” Frontiers in Psychology 11 (2021).¹⁰
• Norman (1999). Affordances & conventions—grounds the “color as status” affordance. ¹¹

• Goal: warn early, clearly, and sparingly—so warnings work when it matters.
• Public-health playbook. Red tooltips use plain, actionable language (“Do X before Y”), not hedged prose.
• Warning effectiveness. Over-warning creates blindness; selective application + progressive disclosure prevent fatigue.
• Label side-effects. Tagging some items as false can imply others are true; avoid “blanket safe” badges—prefer “verification recommended.”
• Accuracy nudges. Gentle prompts to check sources reduce bad sharing; orange nudges encourage verification, not scolding.
• Safety color semantics. Borrow traffic-light meaning, then backstop with icons/contrast for accessibility.
• Clinical precedent. Traffic-light patterns are legible under time pressure; adapt the same quick-read semantics for chat.

• Centers for Disease Control and Prevention (CDC). Crisis & Emergency Risk Communication (CERC) Manual. 2014/updated. ¹²
• World Health Organization (WHO). Emergency Risk Communication (ERC) Guidelines. 2018. ¹³
• Akhawe & Felt (2013), Egelman et al. (2008). Security-warning effectiveness & habituation—supports selective indicators. ¹⁴
• Egelman, Serge, Lorrie F. Cranor, and Jason I. Hong. “You’ve Been Warned: An Empirical Study of the Effectiveness of Web Browser Phishing Warnings.” CHI ’08 (2008). ¹⁵
• Pennycook, Gordon, Adam Bear, Evan T. Collins, and David G. Rand. “The Implied Truth Effect…” Management Science 66, no. 11 (2020): 4944–4957. ¹⁶
• Pennycook, Gordon, Ziv Epstein, Mohsen Mosleh, et al. “Shifting Attention to Accuracy Can Reduce Misinformation Online.” Nature 592 (2021): 590–595.¹⁷
• ISO. ISO 3864-1:2011 — Safety Colours and Safety Signs.¹⁸
• Jayawardena et al., 2025 — “Jayawardena, T., et al. Interface design features of clinical decision support systems for real-time detection of deterioration: A scoping review. (2025).” (Color most common cue; ~50% of color-coded dashboards use traffic-light.) ¹⁹
  

The ICA pattern addresses the contextual communication gap in AI interfaces through four core design principles:

Universal Recognition: Uses color and iconography that translate across cultures and accessibility needs, similar to established UI patterns (red for warnings, green for safe operations).

Progressive Disclosure: Provides immediate visual scanning through simple indicators, with rich contextual information available on demand through hover interactions.

Selective Application: Applies visual indicators only when contextual awareness adds value, avoiding visual noise that would diminish the impact of critical warnings.

Adaptive Intelligence: Supports increasingly sophisticated AI self-assessment capabilities while remaining implementable with current technology.

The ICA pattern employs a four-color system that maps to distinct categories of AI response context:

• 🔴 Red (High Risk): Medical, legal, financial advice that could cause harm if followed without professional verification
• 🟠 Orange (Verification Recommended): Content trending toward misinformation, uncertain data, or topics prone to conspiracy theories
• 🟢 Green (General Information): Confident, well-sourced, low-risk factual responses
• 🔵 Blue (Creative/Subjective): Opinions, creative writing, brainstorming, and non-factual content
• No Indicator: Safe, routine information that requires no special consideration

Visual indicators are positioned below each AI response, adjacent to standard interface elements like copy buttons. Hover or tap interactions reveal detailed context through tooltip overlays that include:

• AI confidence levels and reasoning
• Source quality assessments
• Common user behavioral patterns
• Specific recommendations for information verification
• Explanation of why the content received its classification

The system supports multiple accessibility modes:

• High contrast toggles for vision accessibility
• Icon alternatives for color-blind users
• Screen reader compatible ARIA labels
• Keyboard navigation support
• Multilingual tooltip content

We developed a working prototype that demonstrates the ICA pattern in a standard chat interface. The implementation uses Svelte and Tailwind CSS, requiring minimal integration effort for existing applications. Key technical features include:

• Lightweight classification logic that can be integrated with existing AI safety systems
• Responsive tooltip system with rich contextual information
• Configurable color schemes and accessibility options
• Analytics integration for measuring user behavior changes

Our demonstration includes representative scenarios across all ICA categories:

High Risk (Red): Medical symptom consultation where the AI provides treatment suggestions that could be dangerous if followed without professional medical evaluation.

Verification Recommended (Orange): Conspiracy theory inquiry where the AI provides factual correction while flagging that the topic area is prone to misinformation.

General Information (Green): Factual geography question with high confidence and well-established sources.

Creative/Subjective (Blue): Creative writing request that produces fictional content not intended as factual information.

No Indicator: Mathematical conversion formula representing routine, low-risk information.

The interface maintains visual cleanliness while providing immediate contextual awareness. Users can quickly scan conversations for risk indicators without cognitive overhead, accessing detailed context only when needed. The design respects existing chat interface conventions while adding meaningful safety affordances.

We propose measuring ICA effectiveness through several quantitative and qualitative measures:

Behavioral Metrics:

• Verification rates for high-risk content before user action
• Reduced self-diagnosis attempts following medical queries
• Increased source cross-referencing for flagged misinformation topics
• Time spent reading tooltip context vs. immediate action rates

Trust Calibration:

• Appropriate trust levels across different content categories
• Reduced over-reliance on AI for high-stakes decisions
• Maintained engagement for appropriate use cases

Usability Metrics:

• Learning curve for color/icon recognition
• User preference for ICA vs. traditional warning systems
• Accessibility compliance across user populations

A controlled study comparing user behavior with and without ICA indicators across medical, factual, and creative query categories would provide empirical validation of the pattern’s effectiveness.

The ICA pattern extends beyond chat interfaces to any AI-human interaction point:

• Document analysis tools with confidence indicators
• Code generation platforms with security risk flags
• Educational applications with fact-checking overlays
• Multi-agent systems with source attribution

The pattern’s simplicity enables rapid adoption across the AI industry. Companies could implement basic versions immediately while developing more sophisticated confidence assessment capabilities over time.

As governments develop AI transparency requirements, interface-level risk communication provides a practical compliance pathway that benefits both users and AI providers.

Current limitations include the need for robust classification systems and potential for user habituation to warning indicators. Future research should explore adaptive indicator systems and cross-cultural validation of the visual vocabulary.

The Intent Color Affordance pattern addresses a critical gap in current AI interface design by providing users with contextual cues that enable appropriate trust calibration and risk assessment. Through simple visual indicators and rich progressive disclosure, the pattern transforms AI conversations from uniform text exchanges into contextually aware interactions that support safer and more effective human-AI collaboration.

Our working implementation demonstrates that this approach is both technically feasible and immediately deployable across existing AI applications. As AI systems become more sophisticated at self-assessment, the ICA pattern provides a scalable framework for communicating that intelligence to users through familiar interface conventions.

The pattern represents a shift from trying to make AI responses perfect to making them appropriately contextual – a more achievable and ultimately more valuable goal for real-world AI deployment.

References

• National Institute of Standards and Technology. Artificial Intelligence Risk Management Framework (AI RMF 1.0). 2023. https://nvlpubs.nist.gov/nistpubs/ai/nist.ai.100-1.pdf. 
• European Union. Artificial Intelligence Act. Regulation (EU) 2024/1689. Official Journal of the European Union, 12 July 2024. https://eur-lex.europa.eu/eli/reg/2024/1689/oj/eng. 
• ISO/IEC. 42001:2023 — Artificial intelligence management system. https://www.iso.org/standard/42001. 
• Doshi-Velez, Finale, and Been Kim. “Towards a Rigorous Science of Interpretable Machine Learning.” arXiv:1702.08608 (2017). https://arxiv.org/abs/1702.08608. 
• Amershi, Saleema, et al. “Guidelines for Human-AI Interaction.” In CHI ’19. https://doi.org/10.1145/3290605.3300233 (open PDF above).
• Akhawe, Devdatta, and Adrienne Porter Felt. “Alice in Warningland: A Large-Scale Field Study of Browser Security Warning Effectiveness.” USENIX Security (2013). https://www.usenix.org/system/files/conference/usenixsecurity13/sec13-paper_akhawe.pdf
• Bansal, Gagan, Besmira Nushi, Ece Kamar, et al. “Updates in Human–AI Teams: Understanding and Addressing the Performance/Compatibility Trade-Off.” AAAI (2019). https://aiweb.cs.washington.edu/ai/pubs/bansal-aaai19.pdf
• CDC. Crisis & Emergency Risk Communication (CERC) Manual. 2014/updated. https://www.cdc.gov/cerc/php/cerc-manual/index.html
• Egelman, Serge, Lorrie F. Cranor, and Jason I. Hong. “You’ve Been Warned: An Empirical Study of the Effectiveness of Web Browser Phishing Warnings.” CHI ’08 (2008). https://web.mit.edu/6.033/2014/wwwdocs/papers/youvebeenwarned.pdf
• ISO. ISO 3864-1:2011 — Graphical symbols—Safety colours and safety signs—Part 1: Design principles for safety signs and safety markings. 2011. https://www.iso.org/standard/51021.html.
• Lee, John D., and Katrina A. See. “Trust in Automation: Designing for Appropriate Reliance.” Human Factors 46, no. 1 (2004): 50–80. https://doi.org/10.1518/hfes.46.1.50.30392
• Norman, Donald A. “Affordances, Conventions, and Design.” Interactions 6, no. 3 (1999): 38–43. https://www.jnd.org/dn.mss/affordances-and-design.html
• Parasuraman, Raja, and Victor Riley. “Humans and Automation: Use, Misuse, Disuse, and Abuse.” Human Factors 39, no. 2 (1997): 230–253. https://doi.org/10.1518/001872097778543886
• Pennycook, Gordon, Adam Bear, Evan T. Collins, and David G. Rand. “The Implied Truth Effect…” Management Science 66, no. 11 (2020): 4944–4957. https://doi.org/10.1287/mnsc.2019.3478
• Pennycook, Gordon, Ziv Epstein, Mohsen Mosleh, et al. “Shifting Attention to Accuracy Can Reduce Misinformation Online.” Nature 592 (2021): 590–595. https://www.nature.com/articles/s41586-021-03344-2
• WHO. Emergency Risk Communication (ERC) Guidelines. 2018. https://www.who.int/publications/i/item/9789241550208
• Padilla, Lace M. K., Matthew Kay, and Jessica Hullman. “Uncertainty Visualization.” Frontiers in Psychology 11 (2021). https://www.frontiersin.org/articles/10.3389/fpsyg.2020.579267
• Jayawardena, Tamasha, Melissa T. Baysari, and Adeola Bamgboje-Ayodele. “Interface design features of clinical decision support systems for real-time detection of deterioration: A scoping review.” International Journal of Medical Informatics 201 (Sept 2025): 105946. https://doi.org/10.1016/j.ijmedinf.2025.105946.

Appendix A: Visual Design Specifications
[Detailed color codes, accessibility guidelines, and implementation specifications]

Scroll ↓ to the Demo: Intent color cues in chat

Footnotes:

1. NIST, Artificial Intelligence Risk Management Framework (AI RMF 1.0), 2023, PDF
   https://nvlpubs.nist.gov/nistpubs/ai/nist.ai.100-1.pdf ↩︎
2. European Union, Artificial Intelligence Act, Regulation (EU) 2024/1689, Official Journal (12 July 2024), EUR-Lex
   https://eur-lex.europa.eu/eli/reg/2024/1689/oj/eng ↩︎
3. ISO/IEC, 42001:2023 — Artificial intelligence management system, ISO page https://www.iso.org/standard/42001
   ↩︎
4. Doshi-Velez & Kim, “Towards a Rigorous Science of Interpretable ML,” 2017, arXiv
   https://www.iso.org/standard/42001 ↩︎
5. Amershi et al., “Guidelines for Human-AI Interaction,” CHI 2019, PDF
   https://www.microsoft.com/en-us/research/wp-content/uploads/2019/01/Guidelines-for-Human-AI-Interaction-camera-ready.pdf ↩︎
6. Lee, John D., and Katrina A. See. “Trust in Automation: Designing for Appropriate Reliance.” Human Factors 46, no. 1 (2004): 50–80.
   https://doi.org/10.1518/hfes.46.1.50.30392 ↩︎
7. Parasuraman, Raja, and Victor Riley. “Humans and Automation: Use, Misuse, Disuse, and Abuse.” Human Factors 39, no. 2 (1997): 230–253.
   https://doi.org/10.1518/001872097778543886 ↩︎
8. Skitka, Linda J., Kathleen L. Mosier, and Mark Burdick. “Accountability and Automation Bias.” International Journal of Human–Computer Studies 52, no. 4 (2000): 701–717. https://doi.org/10.1006/ijhc.1999.0399
   ↩︎
9. Bansal, Gagan, et al. “Updates in Human–AI Teams: Understanding and Addressing the Performance/Compatibility Trade-Off.” AAAI (2019). PDF: https://aiweb.cs.washington.edu/ai/pubs/bansal-aaai19.pdf
   ↩︎
10. Padilla, Lace M. K., Matthew Kay, and Jessica Hullman. “Uncertainty Visualization.” Frontiers in Psychology 11 (2021).
    https://www.frontiersin.org/articles/10.3389/fpsyg.2020.579267 ↩︎
11. Norman, Donald A. “Affordances, Conventions, and Design.” Interactions 6, no. 3 (1999): 38–43. (overview)
    https://www.jnd.org/dn.mss/affordances-and-design.html ↩︎
12. Centers for Disease Control and Prevention (CDC). Crisis & Emergency Risk Communication (CERC) Manual. 2014/updated.
    https://www.cdc.gov/cerc/php/cerc-manual/index.html ↩︎
13. World Health Organization (WHO). Emergency Risk Communication (ERC) Guidelines. 2018. https://www.who.int/publications/i/item/9789241550208
    ↩︎
14. Akhawe, Devdatta, and Adrienne Porter Felt. “Alice in Warningland: A Large-Scale Field Study of Browser Security Warning Effectiveness.” USENIX Security (2013). https://www.usenix.org/system/files/conference/usenixsecurity13/sec13-paper_akhawe.pdf
    ↩︎
15. Egelman, Serge, Lorrie F. Cranor, and Jason I. Hong. “You’ve Been Warned: An Empirical Study of the Effectiveness of Web Browser Phishing Warnings.” CHI ’08 (2008). https://web.mit.edu/6.033/2014/wwwdocs/papers/youvebeenwarned.pdf
    ↩︎
16. Pennycook, Gordon, Adam Bear, Evan T. Collins, and David G. Rand. “The Implied Truth Effect…” Management Science 66, no. 11 (2020): 4944–4957.
    https://doi.org/10.1287/mnsc.2019.3478
    ↩︎
17. Pennycook, Gordon, Ziv Epstein, Mohsen Mosleh, et al. “Shifting Attention to Accuracy Can Reduce Misinformation Online.” Nature 592 (2021): 590–595.
    https://www.nature.com/articles/s41586-021-03344-2
    ↩︎
18. ISO 3864-1 — “ISO. ISO 3864-1:2011 — Graphical symbols—Safety colours and safety signs—Part 1: Design principles for safety signs and safety markings.” (scope: standard safety color semantics; you’re extending to UI.)
    https://www.iso.org/standard/51021.html ↩︎
19. Jayawardena et al., 2025 — “Jayawardena, T., et al. Interface design features of clinical decision support systems for real-time detection of deterioration: A scoping review. (2025).” (Color most common cue; ~50% of color-coded dashboards use traffic-light.)
    https://www.sciencedirect.com/science/article/pii/S1386505625001637 ↩︎