AI Text Highlight
AI Text Highlight is a pattern that provides visual highlighting (e.g.: through color and/or font styles) on AI generated text. It is part of the overall set of “recognition patterns” that emerge with the use of generative AI services and functions and which integrate with further AI interaction patterns like explainability and/or AI-Feedback.
Challenge
How might we design an intuitive and inclusive experience for AI-assisted text generation, that allows users to clearly distinguish AI-generated text from human-authored content.
My Role
Led the design from initial research to handoff to development while collaborating with user researchers and designers responsible for associated patterns
Tools
Figma . FigJam . Mural
Process
Secondary Research & Insights
To understand how humans experience text highlighting and its importance in AI-generated content, I performed initial research to gain knowledge. Research sources included:
1. Human behaviors with GenAI content
2. Literature knowledge
3. Competitive Analysis (AI tools such as Google Bard, Microsoft Copilot, Grammarly, other AI-assisted tools)
Insights:
1. Text highlighting is a common practice in Generative AI applications.
2. In general AI-assisted text generation happens in a sandbox before merging with user-authored content.
3. Most highlighting patterns for GenAI currently do not seem to fulfill accessibility needs.
4. AI-assisted text generation generally follow these steps:
Generate -> Verify / regenerate / choose draft / tune -> Accept / discard
2. In general AI-assisted text generation happens in a sandbox before merging with user-authored content.
3. Most highlighting patterns for GenAI currently do not seem to fulfill accessibility needs.
4. AI-assisted text generation generally follow these steps:
Generate -> Verify / regenerate / choose draft / tune -> Accept / discard
Explorations
Collaboration with product teams to understand use cases that can benefit from this pattern and Insights gathered around the need for highlighting, visual states, visual markers, color choice and so on., served as guiding factors for concept exploration.
Design Reviews
Based on the explored concepts, I facilitated stakeholder reviews with SAP community, design system experts, accessibility and others.
High-Fidelity Mockups
Prototypes
(May not reflect final version)
Specifications and Guidelines
Expert reviews were conducted and once the final designs were signed off by different stakeholders , I documented the design specifications for implementation and authored the usage guidelines which were published internally.
AI Web UI Kit
Since the pattern involved creation of UI components which did not exist in the SAP Design System, I created new Figma components as part of the SAP AI Web UI Kit
Guided Prompt | Pattern #2
Guided prompts provide structured input-UIs to guide the user in instructing the generative Al model on the desired output. They are helpful when users want to specify certain attributes, styles, or parameters for the generated content.
Guided prompts offer control and precision in generating output that aligns with user preferences. All provided information is combined into a processable prompt in the back-end and the user only needs to select the desired option instead of verbalizing them in a custom prompt.
Guided prompts offer control and precision in generating output that aligns with user preferences. All provided information is combined into a processable prompt in the back-end and the user only needs to select the desired option instead of verbalizing them in a custom prompt.
Process
A similar process was followed in creation of Guided Prompt pattern, which was eventually published as internal UX guidelines.
Disclaimer:
Certain aspects of the case study have been intentionally hidden and are available to internal colleagues upon request. Please contact me directly via internal channels if you are part of SAP.
Result:
Both patterns were successfully published as internal guidelines, used by designers across SAP. Specifications were written to aid developers in implementing the pattern and its associated components. New components were created and integrated with the AI Web UI Kit.
