AI UI Text
We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback for improvements through Jira or schedule a design consultation.
Status:
- Guidelines reviewed by the Fiori Mobile team
- Component enhancements are in progress
Intro
AI UI text serves as the primary means of communication between users and AI systems. By conveying information, instructions, errors, and feedback, effective AI UI text ensures that users can understand and interact with the AI system.
Effective AI UI text helps bridge the gap between complex AI operations and user-friendly experiences, enhancing usability, satisfaction, and accessibility.
This article is based on US English, the primary source language at SAP, and will build upon the existing UI Text Guidelines for SAP Fiori Apps. There are no specific SAP Fiori text guidelines for other languages.
Examples of AI UI text (left to right): explanation, instruction, description, and error message
Usage
Creating effective UI text requires an understanding of the users and the context in which they interact with the AI system. This involves identifying the target audience, understanding their goals, and analyzing the tasks they will perform within various interaction environments.
Do
- Adhere to the default AI UI text examples provided below.
- Follow the suggested wordings to maintain consistency and familiarity for users.
- Only make changes to the default text in limited scenarios where it’s absolutely necessary for a specific use case.
Don't
Avoid creating inconsistent AI UI text across platforms.
Variations
Generally, AI UI text falls into four categories: explanations, instructions, descriptions, and error messages.
Explanations
Explanations make AI actions and decisions clear to users, enhancing transparency and user trust.
Use simple terminology to make explanations concise and straightforward.
Examples:
✅ Created with AI. Verify results before use.
❌ Generated utilizing advanced artificial intelligence algorithms. Validate output integrity prior to deployment.
Examples of AI-generated form fields
Instructions
Instructions guide users through AI system tasks to minimize errors and confusion.
Offer simple instructions with concise and clear wording to minimize user frustration and ensure they can efficiently use AI features.
Examples:
✅ Fix spelling and grammar.
✅ Tell AI what to do.
❌ Make corrections.
❌ Ask artificial intelligence to create content.
Example of AI button
Descriptions
Descriptions enhance transparency and set user expectations by explaining what the AI system is doing.
Use concise language to describe AI tasks and capabilities.
Examples:
✅ Output may contain errors.
✅ Generating results…
❌ Consider verifying AI output errors.
❌ Artificial Intelligence is analyzing the current request…
Placement of AI checkout indicator on a full screen
Error Messages
Error messages provide clear and specific guidance to the user for resolving issues. They help users understand what went wrong and offer actionable steps to fix the problem in order to reduce frustration and downtime.
Provide concise and contextually actionable directions with simple terminology to inform the user of what is wrong and how to fix it.
Examples:
✅ An error occurred. Please try again.
✅ Request failed. Refine your request and try again.
❌ System error. Contact administrator
❌ Artificial Intelligence is having trouble understanding you.
Example of error message for key value form cell