This guideline provides a comprehensive reference for common User Interface (UI) terminology associated with designing AI chatbot interfaces.
Empty State
Toolbar (Chat Toolbar, Action Bar)
An action bar at the top provides quick access to essential actions, navigation options, or settings.Title (ChatBot Name)
Indicates the name or functionality of the chatbot, aiding user recognition and brand reinforcement.Chat Window (Conversation Pane)
The main interaction area displays ongoing conversations between the user and the chatbot.Product Logo
Graphical representation reinforces chatbot branding and user trust.Product Version
Displays the current software version for easy reference, helpful in troubleshooting and user support.Pre-defined Prompt Action Panel
Area providing suggested prompts to guide user interactions when starting new conversations.Pre-defined Prompt Action Card
Individual interactive elements suggest specific tasks or questions to help users begin interacting with the chatbot.System Message
Messages initiated by the chatbot system offering guidance, information, or system updates.Text Input Field (Chat Input Field, Prompt Entry Box)
The field enables users to enter textual messages or queries to interact with the chatbot.Close Window
A button allowing users to close or dismiss the chatbot interface.Detach Window
Option to open chatbot interactions in a separate, floating window for multitasking convenience.Search Option
A feature enabling users to search previous conversations or relevant knowledge bases.Menu (Additional Settings)
Provides access to secondary actions or configurations such as help, settings, and other options.Send Button
Button that submits user-entered text or prompts the chatbot for processing.Emoji Picker
Allows users to select emojis for expressive and informal communication.Voice Input Option
Offers voice-to-text capabilities, enhancing accessibility and convenience.Image Attachment Option
Enables users to upload images as part of their interaction.File Attachment Option
Permits users to attach files or documents within their conversation.
Conversation Initiating State
Username
Identifies the individual user engaging with the chatbot.Chat Bubble
Graphically separates each message in a conversation, distinctly displaying messages from the user and chatbot.User Avatar
Provides a visual identity for users, enhancing personal recognition and context.Bot Name
Identifies the chatbot's persona or functional identity within interactions.Bot Avatar
Visual icon representing the chatbot, enhancing personality and brand identity.Progress Indicator
Indicates processing status during response generation or loading.Timestamp
Displays the exact time each message was exchanged to provide chronological context.User Message/Prompt
User-initiated queries or interactions are marked in the conversation flow.Abort Action
Allows users to stop ongoing processes or responses from the chatbot.Typing/Generating Indicator
Indicates the chatbot's active generation of responses, enhancing user patience and expectation management.Scrollbar
Allows users to navigate through the conversation history easily.
Conversation State
Bot Name
Identifies the chatbot's persona or functional identity within interactions.Bot Avatar
Visual icon representing the chatbot, enhancing personality and brand identity.Quick-Reply Chips
Tappable options that allow quick selection of suggested replies.Timestamp
Records when messages are sent or received, facilitating conversation tracking.Bot Response
Structured and contextual replies from the chatbot.Quick Feedback Widget
Enables instant feedback on chatbot performance.Knowledge Source Reference
Provides links or citations backing chatbot responses.
Sources
Here are the resources I found and considered during my research on chatbot UI terminology:
Carbon Design System: Carbon Design System
Google Material Design: Material Design
Nielsen Norman Group: Nielsen Norman Group: UX Training, Consulting, & Research
UX Planet: https://uxplanet.org/
Medium UX Design articles: The most insightful stories about UX Design - Medium
