The Ultimate Guide to AI Chatbot Design and UI

The Ultimate Guide to AI Chatbot Design and UI

AI chatbot design is about more than choosing colours, adding an icon and placing a chat bubble in the corner of a website.

An effective chatbot must be easy to notice, understand and use. It should guide visitors towards useful answers without interrupting their journey or creating another barrier between them and the business.

This requires both good user-interface design and thoughtful conversation design.

The visual interface determines how the chatbot looks and behaves on the screen. The conversational experience determines what the chatbot says, what it asks and how it helps users complete their goals.

This guide explains how to design an AI chatbot that is clear, accessible, trustworthy and aligned with your wider website experience.

TLDR: What makes a good AI chatbot design?

A good AI chatbot design makes it immediately clear:

• What the chatbot can help with
• That the visitor is interacting with AI
• How to begin a conversation
• What information the chatbot needs
• How to return to a previous step
• How to reach a human when necessary
• How personal information will be used

The best chatbot interfaces combine:

1. A simple and readable visual layout
2. A clear opening message
3. Suggested questions or quick replies
4. Short and useful responses
5. Consistent branding
6. Mobile-friendly controls
7. Accessible typography and contrast
8. Graceful error and fallback messages
9. An obvious human handover route
10. Regular testing and improvement

A visually attractive chatbot can still provide a poor experience if its conversation is confusing. Equally, an intelligent chatbot may be ignored if the interface feels intrusive, difficult to use or disconnected from the website.

What is AI chatbot design?

AI chatbot design is the process of planning how a chatbot looks, communicates and responds to users.

It includes two connected disciplines.

Chatbot UI design

Chatbot user-interface design covers the visible and interactive parts of the chatbot.

These include:

• Chat launcher
• Chat window
• Header
• Message bubbles
• Input field
• Send button
• Quick replies
• Forms
• Icons
• Avatars
• Notifications
• Loading indicators
• Close and minimise controls

Chatbot UX design

Chatbot user-experience design covers how the entire interaction feels and functions.

It includes:

• The chatbot’s purpose
• Opening messages
• Conversation structure
• User journeys
• Response length
• Question order
• Error handling
• Human escalation
• Accessibility
• Privacy
• Conversation completion
• Post-chat actions

The interface and experience should be designed together. A well-styled chat window cannot compensate for unclear answers or frustrating conversation flows.

What is a conversational user interface?

A conversational user interface allows people to interact with software using natural language.

Instead of navigating only through menus, buttons and pages, the user can type or speak a request.

Examples include:

• Website chatbots
• Voice assistants
• Customer-support bots
• AI shopping assistants
• Internal employee assistants
• Product-onboarding assistants
• Lead-generation chatbots

Conversational interfaces often combine free-text input with structured elements such as buttons, forms and quick replies.

This hybrid approach gives users freedom while still providing guidance.

Why AI chatbot design matters

A chatbot is often positioned at an important point in the customer journey.

A visitor may open it because they:

• Cannot find information
• Need help choosing a service
• Have a problem
• Want to check a price
• Are considering making an enquiry
• Need support outside working hours
• Do not want to make a telephone call

The design can determine whether that visitor receives useful assistance or leaves the website frustrated.

Good chatbot design can help a business:

• Make information easier to find
• Reduce repeated customer questions
• Capture more relevant leads
• Improve out-of-hours support
• Guide visitors towards the right service
• Increase appointment or meeting bookings
• Create a more consistent brand experience
• Reduce unnecessary support tickets

Poor chatbot design can result in:

• High abandonment rates
• Repetitive conversations
• Incorrect lead information
• Frustrated customers
• Reduced trust
• Missed enquiries
• Unnecessary requests for human support

Chatbot UI vs chatbot UX

Although the terms are often used together, they describe different parts of the experience.

Chatbot UI	Chatbot UX
How the chatbot looks	How the chatbot works and feels
Colours and typography	Conversation structure
Chat window layout	User goals and journeys
Buttons and input fields	Question order
Icons and avatars	Error handling
Message bubble styling	Human handover
Animations and transitions	Completion and satisfaction
Responsive presentation	Overall ease of use

An effective chatbot needs both.

A beautiful interface with a confusing conversation is unsuccessful. A capable chatbot presented through an inaccessible or intrusive interface may also perform poorly.

Core principles of effective chatbot design

1. Clarity

The visitor should understand what the chatbot is and what it can do within a few seconds.

Avoid vague opening messages such as:

Hello. How can I help?

This does not explain the chatbot’s capabilities.

A clearer alternative would be:

Hi, I’m Nertia’s AI assistant. I can explain our services, help you choose the right option or guide you towards starting a project.

The second message gives the user a clear starting point.

2. Simplicity

The chatbot should not present too many controls, messages or options at once.

A simple interface helps users focus on the conversation.

Use:

• Short opening messages
• Clear buttons
• Limited initial choices
• Familiar icons
• Simple navigation
• One primary action at a time

Avoid:

• Large blocks of text
• Excessive animation
• Complicated menus
• Too many quick replies
• Unnecessary form fields
• Multiple competing calls to action

3. Consistency

The chatbot should feel like part of the same business and website.

Maintain consistency in:

• Brand colours
• Typography
• Border radius
• Icon style
• Button design
• Language
• Tone of voice
• Spacing
• Animation speed

A chatbot that looks like an unrelated third-party widget may feel less trustworthy.

4. Relevance

Every message should move the user closer to an answer or action.

Do not ask for information that is not needed.

For example, a visitor should not need to provide their full name, telephone number and company details before asking a basic service question.

5. Control

Users should remain in control of the conversation.

They should be able to:

• Type their own question
• Choose a suggested option
• Return to a previous topic
• Correct an answer
• Restart the conversation
• Minimise the chatbot
• Close the chatbot
• Ask for a person
• Decline to provide optional information

6. Transparency

The interface should clearly identify the chatbot as AI.

It should not pretend to be a real employee.

The chatbot should also explain its limitations when relevant and avoid making unsupported promises.

7. Accessibility

The chatbot should be usable by people with different visual, physical and cognitive requirements.

Accessibility should be considered during the initial design rather than added at the end.

Anatomy of an AI chatbot interface

A typical website chatbot contains several core components.

Chat launcher

The launcher is the button visitors use to open the chatbot.

It commonly appears in the bottom-right corner of a website, although the best position may depend on other fixed elements.

A launcher should:

• Be easy to recognise
• Have sufficient contrast
• Be large enough to select
• Avoid covering important website content
• Remain visible without becoming distracting
• Include an accessible label
• Work properly on mobile

The launcher may use:

• A chat icon
• A message icon
• A small logo
• A labelled button
• A combination of icon and text

A text label such as Ask us a question may provide more clarity than an unexplained icon.

Proactive invitation

A proactive invitation is a short message that appears near the launcher.

Examples include:

• Need help choosing a service?
• Have a question about pricing?
• Not sure where to begin?
• Looking for a particular feature?

These prompts can increase discovery, but they should be used carefully.

Avoid:

• Opening the full chat automatically
• Repeatedly showing the same invitation
• Covering page content
• Using loud sounds
• Displaying the prompt immediately before the visitor has viewed the page
• Showing irrelevant messages on every page

A contextual invitation is more useful than a generic one.

For example, a visitor on a website-design page could see:

Planning a new website? I can explain our process and help you take the next step.

Chat window

The chat window contains the conversation.

It should provide enough space for messages without dominating the website.

The window usually contains:

• Header
• Conversation history
• Quick replies
• Text input
• Send button
• Close or minimise control
• Privacy or support links

On mobile, the chatbot may need to open in a near-full-screen or full-screen layout to provide enough usable space.

Header

The header helps users understand who or what they are interacting with.

It may contain:

• Chatbot name
• AI label
• Business logo
• Status indicator
• Short purpose statement
• Minimise button
• Close button
• Menu for additional actions

A useful header could read:

Nertia AI Assistant
Ask about our services or get help choosing an option.

Avoid displaying a fake employee name or photograph in a way that suggests the chatbot is a real person.

Message area

The message area should clearly separate chatbot and user messages.

Use consistent alignment and styling.

Common patterns include:

• Chatbot messages aligned left
• User messages aligned right
• Different background shades
• Clear spacing between messages
• Grouped messages from the same sender
• Timestamps only where useful

Do not rely only on colour to show who sent a message. Alignment, labels or avatars can provide additional clarity.

Message bubbles

Message bubbles should be readable and flexible enough to support different content types.

They may contain:

• Plain text
• Links
• Lists
• Images
• Product cards
• Appointment options
• Forms
• Videos
• Files
• Confirmation messages

Avoid placing very long paragraphs inside one bubble.

Break longer responses into:

• Short paragraphs
• Bulleted lists
• Clear steps
• Expandable sections
• Links to full website pages

Input field

The input field is where visitors type questions.

It should include:

• A clear border or visual boundary
• Readable placeholder text
• Visible focus state
• Enough height for comfortable use
• Support for multiple lines when required
• A clearly labelled send button

Useful placeholder examples include:

• Ask about our services
• Type your question
• How can we help?
• Ask about pricing, setup or features

Avoid placeholder text that disappears without a persistent label when the user begins typing if this creates ambiguity.

Send button

The send button should be easy to recognise and operate.

It may contain:

• The word Send
• A paper-plane icon
• An arrow icon
• An icon with an accessible text label

The button should have clear active, hover, focus and disabled states.

Quick replies

Quick replies help users begin or continue the conversation without typing.

Examples include:

• Explore services
• Ask about pricing
• Book a call
• Get technical help
• Speak to someone

Quick replies are useful when:

• Common intentions are known
• The chatbot needs structured information
• Users may not know what to ask
• A process has several defined routes

Keep the number of choices manageable. Three or four clear options are usually easier to understand than a long row of buttons.

Always allow the visitor to type another question where possible.

Cards and rich content

Cards can present structured options such as:

• Services
• Products
• Pricing plans
• Appointment slots
• Articles
• Locations
• Case studies

Each card should have:

• Clear heading
• Short description
• Relevant image only when useful
• One obvious action
• Accessible link text

Avoid forcing users to scroll through large horizontal carousels inside a narrow chat window.

Forms

Chatbots often use forms for lead capture, bookings or support requests.

Only request information that is necessary.

A lead form might ask for:

• Name
• Email address
• Company
• Relevant service
• Short project description

Do not ask for every detail before the visitor has received value from the interaction.

For longer processes, show progress such as:

Step 2 of 4

Users should also be able to correct previous information.

Loading and typing indicators

A typing indicator reassures visitors that the chatbot is processing their question.

It should appear only while the system is genuinely preparing a response.

Avoid fake delays intended to make the chatbot appear human. These slow the experience unnecessarily and can reduce trust.

For longer actions, use more informative feedback:

• Searching our service information…
• Checking available appointment times…
• Preparing your answer…

Error messages

Error messages should explain what happened and what the user can do next.

Instead of:

Error 503.

Use:

I’m having trouble loading that information. Please try again, or use our contact form to speak with the team.

The message should not blame the visitor.

Chatbot UI component checklist

Component	Primary purpose	Design priority
Launcher	Opens the chatbot	Visibility without obstruction
Invitation	Encourages relevant engagement	Timing and context
Header	Identifies the assistant	Transparency
Message area	Displays the conversation	Readability
Input field	Accepts questions	Accessibility and clarity
Quick replies	Guide user choices	Simplicity
Cards	Present structured options	Clear hierarchy
Forms	Collect information	Minimum required input
Typing indicator	Shows system activity	Honest feedback
Handover option	Connects users to people	Visibility and reliability
Close control	Ends or hides the chat	User control

How to design the opening chatbot experience

The first few seconds of the interaction are important.

A visitor should not need to experiment to understand what the chatbot does.

A strong opening experience usually includes:

1. A clear AI identity
2. A short explanation
3. Two to four suggested actions
4. The option to type a question

For example:

Hi, I’m Nertia’s AI assistant. I can explain our chatbot, digital twin and website services or help you choose the right place to begin.

Suggested options:

• Explore chatbot services
• Learn about digital twins
• Discuss a new website
• Ask another question

This opening is more useful than asking only, “How can I help?”

Chatbot greeting examples

Customer support chatbot

Hi, I’m the AI support assistant. I can help with product information, account guidance and common technical questions. What do you need help with?

Lead-generation chatbot

Tell me what you are looking to achieve, and I’ll help you find the most relevant service or arrange a conversation with our team.

Ecommerce chatbot

Looking for something specific? I can help you find products, compare options or answer delivery questions.

Local service chatbot

Need help with a project? I can check the services we offer, confirm the areas we cover and collect a few details for the team.

SaaS onboarding chatbot

Welcome. I can explain features, guide you through setup or help you find the right support article.

Designing chatbot conversation flows

Conversation design determines how the chatbot guides a user from their initial question to an answer or completed action.

Start with the user’s goal

Do not design a conversation around the company’s internal structure.

A visitor may not understand your departments, product categories or terminology.

Design around intentions such as:

• I need support
• I want a quote
• I am comparing services
• I want to book
• I need to find information
• I have a problem
• I want to speak to someone

Map common journeys

Create a simple map for each important user goal.

A lead-generation journey might be:

1. Identify the required service
2. Understand the visitor’s goal
3. Ask one or two qualification questions
4. Recommend the next step
5. Collect contact details
6. Confirm what happens next

A support journey might be:

1. Identify the issue
2. Provide the most relevant answer
3. Check whether it solved the problem
4. Suggest another step
5. Escalate when necessary

Ask one question at a time

Avoid asking several questions in one message.

Poor example:

What service do you need, what is your budget, when do you need it and where are you located?

Better approach:

Which service are you interested in?

Then:

What would you like the service to help you achieve?

Then ask for timing, location or budget only when relevant.

Use progressive disclosure

Progressive disclosure means showing information as it becomes relevant rather than presenting everything at once.

For example, do not show a long list of technical chatbot features before knowing what the visitor needs.

First ask:

Are you primarily looking to improve customer support or generate more leads?

The answer can then determine what information appears next.

Confirm important information

When a user provides important details, summarise them before submission.

For example:

Here is what I have:

Service: Website design
Project type: New company website
Preferred start: Within two months
Contact email: name@example.com

Shall I send this to the team?

This helps prevent errors and gives users control.

Avoid conversational dead ends

Every response should provide a clear next step.

A dead-end response might say:

We do not offer that.

A more helpful version would say:

We do not currently offer that service. I can show you our available services or help you contact the team to discuss an alternative.

Keep responses concise

Chat interfaces are not ideal for long articles.

Give the immediate answer first and then offer supporting detail.

For example:

Yes, each chatbot can be customised to match your brand.

You can adjust the colours, logo, interface styling and conversation tone. Would you like to see the main design options?

This is easier to use than a large, uninterrupted explanation.

Use links strategically

Links can help users verify information or move to a full page.

Use descriptive link labels such as:

• View chatbot features
• Read our privacy policy
• Explore website design
• Book a consultation

Avoid vague labels such as:

• Click here
• Read more
• This page

Do not send the visitor away from the chatbot when the answer can be provided directly.

Plan for interruptions

Users may change topic, correct themselves or ask unrelated questions.

The chatbot should be able to:

• Recognise a new intention
• Confirm when the topic changes
• Return to a previous process
• Preserve relevant information
• Allow the user to restart

For example:

We can pause the booking process. What would you like to ask instead?

Conversation design framework

Stage	User need	Chatbot responsibility
Discovery	Understand what the chatbot does	Explain purpose clearly
Intent	State a question or goal	Interpret or offer options
Guidance	Receive relevant information	Answer concisely
Action	Complete a task	Collect only necessary details
Confirmation	Check the outcome	Summarise and confirm
Escalation	Get additional help	Provide a reliable human route
Closure	Understand what happens next	End clearly and positively

Free-text conversations vs guided chatbot flows

Most modern business chatbots can combine free-text AI with structured conversation flows.

Free-text AI	Guided flow
Users can ask questions naturally	Users choose from predefined options
Flexible and conversational	Predictable and controlled
Handles varied wording	Reduces ambiguity
Useful for information retrieval	Useful for forms and processes
Requires safeguards and testing	Can feel restrictive
May generate unexpected responses	Requires manually mapped routes

A hybrid chatbot often provides the best experience.

Use free text for:

• Questions
• Service explanations
• Product guidance
• Information discovery

Use guided flows for:

• Lead capture
• Appointment booking
• Support triage
• Account verification
• Structured applications

Chatbot personality and tone of voice

A chatbot should have a consistent communication style, but it does not need to imitate a human employee.

Define the chatbot’s tone using practical characteristics.

For example:

• Calm
• Clear
• Professional
• Helpful
• Concise
• Friendly without being overly casual

Also define what it should avoid:

• Slang
• Excessive enthusiasm
• Sarcasm
• Unsupported promises
• Too many emojis
• Pretending to have human feelings
• Blaming the customer

Tone examples

Too robotic

REQUEST RECEIVED. SELECT OPTION.

Too casual

Heyyy! 👋 What’s up? Let’s smash your problem together! 🚀

Clear and professional

Hello. I can help you explore our services, answer common questions or connect you with the team.

The appropriate tone depends on the brand, but clarity should remain the priority.

Should a chatbot have a name?

A chatbot can have a name, but the name should not obscure the fact that it is AI.

Clear examples include:

• Nertia AI Assistant
• Nertia Support Assistant
• Virtual Product Guide
• AI Website Assistant

Avoid using a realistic employee identity, job title and photograph without clearly explaining that the assistant is automated.

Should a chatbot use an avatar?

An avatar can make the chatbot easier to recognise and more visually engaging.

Possible options include:

• Company logo
• Abstract assistant icon
• Branded mascot
• Illustrated character
• Clearly labelled AI avatar
• Digital representation of a spokesperson

The avatar should remain small and should not distract from the messages.

Businesses can also combine a conversational assistant with a more advanced digital twin that presents information through a high-fidelity visual avatar and modelled voice.

When a digital twin or human-style avatar is used, the interface should explain that the content or interaction is AI-generated.

Designing chatbot branding

A chatbot should complement the surrounding website.

Consider:

• Primary and secondary brand colours
• Button styling
• Corner radius
• Font family
• Icon style
• Logo treatment
• Light and dark backgrounds
• Animation
• Voice and language

Do not reproduce every part of the brand inside a small chat window. The interface needs enough simplicity and contrast to remain usable.

Colour and contrast

Colour should support hierarchy and readability.

Use contrast to distinguish:

• User messages
• Chatbot messages
• Buttons
• Links
• Focus states
• Error states
• Disabled controls

Do not rely on colour alone to communicate meaning.

For example, an error field should include an icon or text explanation rather than only a red border.

Typography

Chatbot text should be easy to read on desktop and mobile.

Consider:

• Sufficient font size
• Comfortable line height
• Clear hierarchy
• Limited font weights
• Readable link styling
• Short line lengths

Avoid very small type simply to fit more content into the chat window.

The user should not need to zoom in to read messages or controls.

Spacing

Consistent spacing helps users understand which elements belong together.

Use enough space between:

• Separate messages
• Buttons
• Form fields
• Cards
• Sections
• Links

Touch controls should not be positioned so closely that mobile users accidentally select the wrong option.

Animation

Animation can communicate state changes, but it should remain subtle.

Useful animation includes:

• Opening and closing transitions
• Loading feedback
• Message appearance
• Button-state changes
• Confirmation feedback

Avoid:

• Constant pulsing
• Bouncing launchers
• Large character animations
• Repeated attention-grabbing movement
• Slow transitions that delay interaction

Respect users who prefer reduced motion.

Custom chatbot design vs templates

Businesses can begin with a platform template or create a more customised interface.

Template chatbot design	Custom chatbot design
Faster to configure	Tailored to the business
Lower initial effort	Greater design control
Uses proven patterns	Better brand alignment
May have limited styling	Can support specific user journeys
Can look generic	Can feel integrated with the website
Suitable for basic use	Better for differentiated experiences

A template is not automatically poor design. A clear, accessible template may perform better than a heavily customised interface that ignores usability.

Customisation should improve the customer experience rather than simply make the chatbot look different.

Nertia’s AI Chatbot Maker lets businesses create, design, test and deploy chatbots from one dashboard while controlling their knowledge and visual presentation.

Chatbot design for mobile devices

Many visitors will use a chatbot through a mobile browser.

Mobile chatbot design requires more than shrinking the desktop interface.

Use an appropriate window size

A narrow floating panel may not provide enough space on a phone.

Consider opening the chatbot as:

• A full-screen view
• A near-full-screen overlay
• A bottom sheet that can expand

The user should still be able to close or minimise it easily.

Protect the input field

The on-screen keyboard can cover important controls or recent messages.

Test the experience with different mobile keyboards and browser heights.

When the keyboard opens:

• Keep the input visible
• Keep the latest message visible
• Avoid moving controls unpredictably
• Maintain enough space to review the response

Avoid horizontal scrolling

Buttons, cards and message content should fit within the available width.

Long URLs should wrap or be replaced by descriptive text.

Position the launcher carefully

The launcher should not cover:

• Cookie controls
• Checkout buttons
• Mobile navigation
• Accessibility tools
• Contact buttons
• Form controls

Reduce typing requirements

Use quick replies, selection controls and autofill where appropriate.

Typing long details into a chatbot can be tiring on a mobile device.

Test touch targets

Buttons and close controls should be large enough to select accurately.

Pay particular attention to:

• Close icon
• Back button
• Send button
• Quick replies
• Form checkboxes
• Calendar controls

Desktop vs mobile chatbot UI

Desktop	Mobile
Floating panel is often suitable	Full-screen or expanded view may work better
More room for cards and links	Content should remain compact
Physical keyboard available	Reduce required typing
Hover states can provide feedback	Touch and focus states are essential
Multiple website elements remain visible	Avoid covering key controls
Wider messages possible	Keep sentences and buttons short

Accessibility in chatbot design

An accessible chatbot should work for keyboard users, screen-reader users and people with visual, physical or cognitive requirements.

Keyboard access

Users should be able to:

• Open the chatbot
• Move through controls
• Enter a question
• Select quick replies
• Submit forms
• Close the chatbot
• Return to the website

Focus should move logically when the chat opens and closes.

Visible focus states

Interactive controls need a clear focus indicator.

Do not remove browser focus outlines without replacing them with an equally visible alternative.

Screen-reader labels

Icons such as close, send and minimise need meaningful accessible labels.

For example:

• Open chat assistant
• Send message
• Minimise chat
• Close chat
• Return to previous question

Live message announcements

New chatbot responses should be announced appropriately to screen-reader users without repeatedly interrupting or rereading the full conversation.

Colour contrast

Text, buttons, links and form boundaries need sufficient contrast against their backgrounds.

Test normal, hover, focus, active and disabled states.

Text resizing

The interface should remain usable when users increase text size.

Messages and controls should reflow rather than becoming cut off.

Reduced motion

Avoid essential information being communicated only through movement.

Support reduced-motion preferences for non-essential animations.

Plain language

Clear language improves accessibility for everyone.

Use:

• Short sentences
• Familiar words
• Clear instructions
• Specific error messages
• Descriptive buttons

Avoid unnecessary jargon and unexplained abbreviations.

Time limits

Do not end the conversation or clear entered information too quickly.

Warn users before a session expires and provide a way to continue where appropriate.

Accessible chatbot checklist

Before publishing, check whether users can:

• Open the chatbot with a keyboard
• Understand its purpose without relying on colour
• Read text at increased sizes
• Navigate all controls in a logical order
• Hear useful labels through a screen reader
• Close the chatbot easily
• Pause or avoid unnecessary movement
• Correct form errors
• Reach a human through an accessible route

Designing chatbot lead-generation journeys

A lead-generation chatbot should help the visitor make progress rather than immediately demand contact details.

A useful flow is:

1. Understand the visitor’s goal
2. Provide a relevant answer or recommendation
3. Explain the next step
4. Ask for essential project information
5. Request contact details
6. Confirm submission and follow-up

Ask for contact details at the right time

A visitor is more likely to share information after receiving value.

Instead of opening with:

Enter your email to continue.

Begin by helping them:

Which service are you interested in?

Then explain the service or ask relevant questions before requesting contact details.

Keep qualification proportionate

For a simple callback, you may only need:

• Name
• Contact method
• Short message

For a complex project, you may also require:

• Company
• Project type
• Goals
• Timing
• Budget range

Do not recreate a long enquiry form inside the chatbot unless each answer changes the conversation meaningfully.

Explain why information is needed

Instead of asking:

What is your budget?

Use:

Do you have a budget range in mind? This helps us recommend a suitable approach.

Confirm the next step

After submission, tell the user:

• That their details were received
• Who will review them
• How they will be contacted
• Whether another action is required

Avoid vague conclusions such as:

Done.

A better confirmation is:

Thank you. Your project details have been sent to the Nertia team. We’ll review them and contact you using the email address provided.

Chatbot design for customer support

Support chatbot design should prioritise resolution and escalation.

Identify the issue quickly

Use broad categories when they genuinely help:

• Account
• Billing
• Technical issue
• Product question
• Order or delivery
• Something else

Do not force users through several categories when the AI can interpret their written question directly.

Show sources where useful

When explaining a policy or process, provide a link to the official page.

This gives users confidence and allows them to review the complete information.

Check whether the answer helped

After providing an answer, ask:

Did that solve your question?

Options:

• Yes
• Not yet
• Speak to support

This provides useful feedback and prevents premature conversation closure.

Escalate with context

When the conversation moves to a person, pass across relevant details where the system supports it.

The user should not need to repeat the entire issue.

Useful handover information may include:

• Customer’s question
• Steps already attempted
• Relevant account or order reference
• Previous chatbot answers
• Preferred contact details

Human handover design

A human handover should be clear and realistic.

Do not show Chat with a person now when no live support is available.

Instead, explain the available route:

Our team is currently offline. I can collect your details so they can respond during working hours.

Possible handover options include:

• Live agent
• Contact form
• Support ticket
• Telephone number
• Email address
• Meeting booking
• Callback request

AI chatbot design mistakes to avoid

Automatically opening the full chatbot

This interrupts visitors and may cover important content.

Use a subtle invitation instead, unless the chat is central to the page’s purpose.

Hiding the close button

Users should never feel trapped inside the chatbot.

The close or minimise control should be visible and easy to select.

Asking for information too early

Do not demand personal details before answering a simple question.

Providing too many options

A long list of buttons can create decision fatigue.

Show the most relevant choices and allow users to ask something else.

Writing long chatbot responses

Large blocks of text are difficult to scan in a chat window.

Answer first, then provide details or a link.

Pretending the chatbot is human

This can reduce trust once the user realises the interaction is automated.

Identify it clearly as AI.

Using excessive personality

Jokes, emojis and informal language can distract from the user’s goal.

Match the business’s tone and the seriousness of the task.

Creating dead ends

When the chatbot cannot help, offer a useful alternative.

Forgetting mobile layouts

A desktop-only chatbot can become difficult or impossible to use when the mobile keyboard opens.

Ignoring accessibility

Small text, low contrast and inaccessible controls can prevent people from using the chatbot.

No human fallback

Some issues require judgement, empathy or account-specific support.

Repeating the same fallback response

Repeatedly saying “I don’t understand” without offering options creates frustration.

Covering website controls

A chatbot launcher should not block cookie notices, checkout actions or navigation.

Collecting unnecessary information

Every requested field should have a clear purpose.

Not testing unusual inputs

Visitors may enter:

• Misspellings
• Very short questions
• Long messages
• Several questions at once
• Emojis
• Abbreviations
• Unexpected topics

The chatbot should handle these gracefully.

Chatbot fallback message examples

When the question is unclear

I’m not certain what you mean yet. Could you rephrase the question, or choose one of these options?

When the information is unavailable

I don’t have that information in my current knowledge. I can help you contact the team for a confirmed answer.

When the request is outside scope

I’m designed to help with Nertia’s services, platform and resources. Would you like help with one of those areas?

When a human is required

This needs input from a member of the team. I can collect your details or direct you to our contact page.

When a technical error occurs

I’m having trouble completing that action. Your message has not been submitted. Please try again or contact the team directly.

Designing chatbot privacy and consent

Chatbot design should help users understand when their information is being collected and why.

Before asking for personal information:

• Explain the purpose
• Request only necessary information
• Link to the privacy notice
• Mark optional fields clearly
• Avoid asking for sensitive information in open chat
• Confirm when information has been submitted

Do not ask visitors to provide:

• Passwords
• Complete card details
• Unnecessary medical information
• Unnecessary identification documents
• Confidential business information without secure handling

Measuring chatbot design success

A chatbot should be improved using both quantitative data and qualitative feedback.

Useful metrics include:

Launcher engagement rate

The percentage of relevant visitors who open the chatbot.

A low rate may indicate that the launcher is difficult to notice or does not communicate a useful purpose.

A very high rate is not automatically positive if users open it accidentally.

Conversation start rate

The percentage of people who open the window and send a message or select an option.

A low start rate may indicate an unclear greeting or poor suggested actions.

Completion rate

The percentage of users who complete the intended journey, such as finding an answer, submitting an enquiry or booking an appointment.

Resolution rate

The percentage of questions resolved without further support.

This should not be increased by preventing access to humans.

Drop-off rate

The percentage of visitors who abandon a conversation before completion.

Review the point at which they leave.

Fallback rate

The percentage of questions the chatbot cannot answer confidently.

A high rate may reveal missing knowledge, unclear instructions or unexpected visitor needs.

Human escalation rate

This shows how often visitors require further help.

Escalation is not automatically a failure. Some issues should be handled by people.

Lead conversion rate

The percentage of relevant conversations that result in a completed enquiry, booking or sales action.

User satisfaction

Ask a simple post-conversation question such as:

Was this helpful?

Avoid long feedback forms after every interaction.

Chatbot performance metrics compared

Metric	What it indicates	Possible design issue
Low open rate	Visitors do not engage	Poor placement or unclear launcher
Low start rate	Users open but do not continue	Weak greeting or options
High early drop-off	Conversation loses users quickly	Too many questions or unclear purpose
High fallback rate	Bot cannot answer	Missing knowledge or poor intent handling
High form abandonment	Users leave during data collection	Too many fields
Low resolution rate	Questions remain unanswered	Weak answers or knowledge
High repeat-question rate	Users ask the same thing again	Response is unclear
Low satisfaction	Users dislike the experience	Requires conversation review
Low conversion rate	Chat does not lead to action	Weak CTA or irrelevant qualification

How to test an AI chatbot before launch

Testing should cover visual presentation, conversation quality and technical behaviour.

Visual testing

Check:

• Desktop layout
• Mobile layout
• Tablet layout
• Light and dark page backgrounds
• Browser zoom
• Long messages
• Long button labels
• Error states
• Loading states
• Keyboard appearance
• Form validation

Conversation testing

Test:

• Common customer questions
• Misspellings
• Short questions
• Long descriptions
• Multiple questions
• Unexpected wording
• Restricted topics
• Requests for a person
• Topic changes
• Unanswerable questions
• Inappropriate or abusive language

Accessibility testing

Check:

• Keyboard navigation
• Focus order
• Screen-reader labels
• Colour contrast
• Text resizing
• Reduced motion
• Error announcements
• Touch-target size

Technical testing

Check:

• Website installation
• Page-loading impact
• Form submission
• Email notifications
• CRM integration
• Appointment booking
• Analytics
• Data storage
• Session handling
• Browser compatibility

Nertia’s chatbot platform includes a dedicated test area so businesses can review their assistant before deploying it to a live website. It also provides conversation history and analytics for ongoing improvement.

Chatbot design review checklist

Before launch, confirm that:

• The chatbot’s purpose is clear
• It identifies itself as AI
• The greeting is concise
• Suggested actions are relevant
• Users can type freely
• Buttons are readable
• The interface matches the website
• Mobile layouts have been tested
• Keyboard navigation works
• Form fields are necessary
• Errors explain what to do next
• Restricted topics have safeguards
• Human support is available when required
• Privacy information is accessible
• The close button is easy to use
• Analytics are configured
• Conversations will be reviewed after launch

How chatbot design fits into website UX

A chatbot is one part of the website experience.

It should not compensate for confusing navigation, missing service information or poor page structure.

Before adding a chatbot, ensure the website already provides:

• Clear service pages
• Readable content
• Logical navigation
• Accessible contact options
• Transparent pricing or process information where appropriate
• Strong mobile usability
• Visible calls to action

The chatbot should help visitors navigate and understand this content, not hide it.

Nertia’s website design and development service can help businesses create a clear wider customer journey before integrating conversational experiences.

How chatbots and digital twins work together

A chatbot manages questions and conversational logic.

A digital twin or AI avatar can provide a visual and spoken representation of a person.

Together, they may create an experience in which:

1. A visitor asks a question
2. The chatbot interprets the request
3. Approved information is retrieved
4. A visual avatar presents the response
5. The visitor can continue the conversation or contact a person

This can make certain experiences more engaging, but it also introduces additional design requirements.

The interface should explain:

• That the representative is digital
• Whether the voice is generated
• What information the system can access
• How to reach a real person

Learn more about Nertia’s digital twin service, which combines high-fidelity avatars, voice modelling and multilingual video production.

Chatbot design trends

Chatbot interfaces continue to become more integrated with wider digital experiences.

Important developments include:

Multimodal conversations

Users may communicate through text, voice, images and uploaded documents within one conversation.

Embedded page assistants

Instead of appearing only as a floating widget, chatbots can be embedded directly into service pages, dashboards and onboarding experiences.

Generative interfaces

Chatbots may create temporary forms, cards or controls based on what the user is trying to achieve.

More contextual prompts

Chatbot invitations and suggested questions can reflect the page or product the visitor is viewing.

Voice interfaces

Voice can make certain interactions faster or more accessible, although users should always have control over microphone access.

Visual AI representatives

Digital twins and AI avatars may present chatbot responses through video or speech.

Better human collaboration

Chatbots are likely to improve how they summarise conversations and transfer context to human employees.

Stronger transparency

As AI use becomes more common, clear labels, privacy controls and explanation of system limitations will become increasingly important.

Design a chatbot that feels like part of your business

A successful chatbot should not feel like an unrelated widget placed on top of your website.

It should reflect your brand, understand its role and help visitors complete meaningful actions with as little friction as possible.

Nertia’s AI Chatbot Maker gives businesses control over the design, knowledge and deployment of their chatbots.

You can build and manage multiple assistants, upload approved knowledge, customise the experience, review conversations, test responses and track performance from one dashboard.

Create your AI chatbot with Nertia

For more advanced requirements, Nertia also provides bespoke chatbot setup and development tailored to your workflow, brand and customer journey.