We stand with Ukraine and our team members from Ukraine.

The Community Of Over 640,000

Home ›› Conversational Design ›› Considerations for your chatbot design

Considerations for your chatbot design

by Michelle Lee
4 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Whether you’re exploring custom chatbots, browsing third parties, or looking to improve your own chatbot design, it’s good to know what kinds of UX requirements you need beforehand. Exploring chat options can be daunting but here are some UX considerations for when refreshing or building your chatbot design.

How to nail your chatbot design

Be conscious of the size and placement of chat sticky elements

We don’t typically recommend using sticky chat elements, but if this is a must for your company, these elements should take up a minimal amount of space and appear unintrusive. 

The chatbot design should also be adjusted for mobile as the smaller screen can lead to sticky chat elements covering key page information or actions. Nothing is more frustrating for a user than being unable to interact with the page because the sticky chat element is blocking their view and they don’t know how to access the page behind it. Check your pages on different devices to see what your sticky chat element may be covering. 

Credible's chat element on their desktop homepage

The sticky chat element on desktop remains minimal and unobtrusive in the bottom right corner.

Credible's sticky chat element on their mobile homepage

On mobile, the sticky chat element is adjusted to show only the icon rather than the icon and copy. This small size helps to decrease the likelihood of it covering key page information.

Keep the chat feature accessible without relying on a sticky chat element

Regardless of whether you use sticky chat elements or not, keeping static links to the chat on relevant pages – as well as in the footer and navigation – makes it easy for users to find and use this feature themselves. 

Intersperse static links at the end of FAQ or policy content in case the user needs more information.. Place live chat links in the footer on desktop and in hamburger menus on mobile sites too, as this is where most users will look for it if a sticky option is unavailable.

Showing the static link to live chat and other forms of support on Madewell's desktop footer

Various forms of support including a static link to live chat can be found at the top of the footer.

Abercrombie & Fitch's customer support page with static link to chat


Users can navigate to the main customer support page from the hamburger menu where they can find static links to various forms of support, including chat, which is featured more prominently than other types of support.

Avoid non-user initiation of chat dialogs

Users typically express the most frustration when unwanted pop-ups, overlays, or dialogs appear uninitiated, leading to disruption of the experience. The same goes for chat dialogs and prompts. So a key thing to keep in mind for your chatbot design is allowing users to initiate the chat themselves when they are ready for help. 

If prompting the chat is a must for your team, then avoid initiating chat dialogs in the middle of the screen, and allow the user to interact with the page behind the overlay. Keep the dismissal button of the chat dialog easy to see and tap, keeping the tappable/clickable area reasonably visible.

Bloomingdale's sticky chat element on their desktop homepage

On desktop, a very minimal chat prompt is visible next to the main sticky chat button. However, it disappears as the user scrolls down the page to avoid disrupting the experience.

Bloomingdale's sticky chat element on mobile

The sticky chat element remains uninitiated unless interacted with by the user on mobile to avoid covering key page content.

Encourage users to search for information with an FAQ or navigational assistant prior to using live support

Encourage users to engage with an assistant to help with common issues without having to wait for a live representative. Only when users indicate they need more help, should you connect them directly to a live representative. 

This helps reduce the number of call center requests, as well as providing immediate relief to users with simple-to-fix issues. And remember, make it clear to the user when they are interacting with an assistant versus live support. 

Crate & Barrel's initiated chat dialog on the desktop homepage

The user is first prompted and encouraged to choose an appropriate topic or search for an issue. However, should the user not be satisfied with these topics or the search results, they can click on the chat button at the bottom of the dialog to start a conversation with a live representative.

Crate & Barrel's suggested topics and search in the mobile chat dialog

The same is seen on mobile; the chat dialog takes up the full screen so that it is easy to interact with.

Be clear about how the user should engage with the chatbot, and adjust messaging for offline hours

When initiated, provide immediate instructions on how to use the chat. Another great way to improve your chatbot design is by providing the user with pre-determined suggestions, topics, or common issues to narrow down the problem and speed up the support process. 

During offline hours, allow the user to ‘leave a message,’ instead. Prompt them to leave their name, email, and describe the issue so they feel satisfied their issue will be dealt with once support comes back online.

Honeybook's offline chat dialog
Honeybooks chat dialog offline messaging

When the chat is operating during offline hours, the user is encouraged to watch a helpful video on the product or leave any questions and their email address so the team can get back to the user the next business day.

Assisted and live chat can be complicated as there will always be a varied range of issues the users can bring up. However consistent and well-guided interactions help to create a smooth experience for users who are already frustrated.

Remove customer friction with Contentsquare 

Find out why your customers behave the way they do with our industry-leading customer experience analytics platform. Use our Session Replay feature to understand why customers may not be interacting with your chatbot design, or discover your most profitable digital paths with in-depth Sunburst visualizations, covering data from 100% of your customer journeys.

post authorMichelle Lee

Michelle Lee, Michelle is a UX/UI Designer who loves finding design solutions that marry both business and user needs. When she’s not designing, you can find her pursuing yet another new hobby, visiting a museum, or laughing a little too loudly somewhere in the distance.

Tweet
Share
Post
Share
Email
Print
Ideas In Brief

Chatbot design has specific UX considerations to create exceptional conversations. In this article, the author recommends making sure to:

  • Be conscious of the size and placement of sticky chat elements
  • Keep the chat feature accessible without relying on a sticky chat element
  • Avoid non-user initiation of chat dialogs
  • Encourage users to search for information with an FAQ or navigational assistant prior to using live support
  • Be clear about how the user should engage with the chatbot, and adjust messaging for offline hours
  • Particular attention has to be paid to sticky chat elements, feature accessibility, pop-ups, navigation and offline assistance.

Read the full article for a breakdown of how to pay attention to these details while getting started with conversational design.

Related Articles

An inclusive process leads to experiences that improve lives and develop their full potential on the market which is beneficial for both business and people. Learn how to widen accessible products to inclusive ecosystems by using 5 simple methods. 

How to Design for Human Aging: 5 Methods for Inclusive Digital Experiences
  • In order to reach age-inclusive solutions, designers need to adopt an inclusive mindset, make empathetic decisions and apply practical methods.
  • 5 methods for inclusive digital experiences:
    1. Inclusive, in-person research and testing
    2. Focus on behavior instead of demographics
    3. Tailor accessibility guidelines
    4. Map product demands with capabilities
    5. Question interface conventions
  • An inclusive process leads to experiences that improve lives and develop their full potential on the market which is beneficial for both business and people.
Share:How to Design for Human Aging: 5 Methods for Inclusive Digital Experiences
7 min read
How to Design for Human Aging: 5 Methods for Inclusive Digital Experiences

Design tokens aren’t just something that you can easily retrofit into your existing wardrobe. They require an entirely new way of thinking and working. Learn how to start thinking in design tokens by completely changing the way you work with design systems.

Design Token Thinking
  • Design tokens require an entirely new way of thinking and working.
  • Designers can be documenting their design system, but the documentation will always be a step behind their design file.
  • The author unpacks the idea of an alternative design system and names it “the way of the future.”
  • Design tokens need to become a primary method for how you talk about and interact with your design system, both internally and externally.
  • In the end, you can get a design system that is:
    1. Future proof
    2. Accessible
    3. Able to be easily changed.
Share:Design Token Thinking
5 min read
Design token thinking

Typing search queries is gradually becoming an outdated artifact of the past and voice tech is becoming more useful and promising by the day. So what other prospects await for voice tech and why is it so special? We’re about to find out!

Voice Search and Voice Interfaces 101
  • This article covers some essential voice search statistics, how people interact with voice interfaces, what can users do with voice and why startups should care about all of this.
  • Typing search queries is gradually becoming an outdated artifact of the past.
  • The author believes that the overwhelming consumer shift towards voice interfaces will inevitably lead to the mass adoption of this technology among startups.
  • How to Design a Voice Interface?
    • Pre-design Stage
    • The Main Design (user research, customer journey mapping, VUI competitor analysis, gathering requirements, prototyping, usability testing)
Share:Voice Search and Voice Interfaces 101
8 min read
Voice-Search-and-Voice-Interfaces-101-

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and