Time is a precious resource. When people visit websites, they want to get answers to their questions quickly and efficiently. However, all too often, they are unable to find the answers they seek and leave. A simple tool can make your website more useful for visitors—chat.
Chat is a very convenient method of communication. In comparison with a telephone call, a chat puts less cognitive load on users because they have more time to formulate a question or response. Last but not least, chat provides a written transcript of the conversation, and this makes it easier for users to refer to it later on.
In this article, I want to share some practical tips that will help you design a smart and helpful chat box.
Identify places where people need assistance
When the product team crafts a web experience, they tend to develop a web design around the “happy path”— a user journey in which the user completes all tasks without exception to produce an expected outcome. But in reality, users can face multiple problems along the way and usually turn to Contact Us or Help pages for support. These pages are excellent candidates for the integration of a chat box.
For eCommerce websites, a chat option on product pages can help users clarify certain things. For example, on a website that sells shoes, the visitor might want to ask questions about the shoe fit. When visitors have a link to chat right on the product page, not only is it convenient for the visitor, customer service will know exactly where the visitor is on the website (no need to ask “What product do you need help with?”).
Clearly specify activity hours
Quick response time is one of the things that makes chat so valuable for users. People expect to have a live conversation with operators. If chat operators aren’t available 24/7, it’s important to specify the hours upfront, before the user types the first sentence. By saying, “We’re available from 9 am till 5 pm PST Monday through Friday,” you set expectations for when users will get a response.
Prepare answers for typical questions
If you want to design an excellent chat box UX, one of the first steps you need to take is reaching out to your customer support team to find the typical questions your target audience asks. Prepare responses for the most frequently asked questions and share the answers with chat operators so they can include this information in their protocol for a chat. The procedure of research and analysis will also help you find the gaps in content and fill them in by adding missing details.
Use a clear label to identify the chat box
UX writing is the practice of creating UI copy that guides users within a product and helps them interact with it. A button label on the UI element that activates chat has a tremendous impact on the user experience. Some websites hide the chat behind vague tags such as “Ask a question.” This approach may not work well for site visitors because it could be misconstrued as a way to send an email or comb through an FAQ.
Remember that users shouldn’t spend any time decoding the meaning of UI elements. Write clear labels that set the right expectations for UI elements. If a button will launch a chat window, it’s better to have this button labeled as “Chat.”
Avoid long sentences and blocks of text
When people interact with digital products, they don’t read the information on the screen word-for-word. Instead, they scan the data. This behavior works for any interaction, and chat box UX is no exception. You can help users scan the text by writing it in short, digestible blocks. This rule should work both for auto-generated content (such as introductory information that users see at the beginning of the chat) and the information from operators.
According to the book Typographie by Emil Ruder, optimal line length for body text is considered to be 50-60 characters per line, including spaces. This line-length creates a comfortable reading rhythm because it helps the eye travel more naturally between the lines.
Use a floating button as a shortcut to chat
Design familiar experiences for your visitors by offering the chat option as a floating button on the right side of the page. Make sure that this button stands out from the rest of the page by using a contrasting color.
Intercom uses a contrasting floating action button for the chat. Image credit Intercom.Be careful with chatbots
Today many websites augment human-assisted chat with bots to minimize the load on human operators. Bots can be useful for any task that doesn’t require human interaction. For example, when visitors want to know details about their hotel reservation, it’s possible to use a chatbot for this. However, it’s vital to understand a few essential things:
- Ensure that the interaction with bots doesn’t cause any friction for the site’s visitors. The interaction with a chatbot shouldn’t take more time and effort than the interaction with a human being. The bot shouldn’t ask any unnecessary questions or ask for irrelevant details. The questions should be clear and concise, so the users understand what the system wants from them.
- Set proper expectations. Some websites that use chatbots create an impression of a conversation with a real human. While this approach might work fine for sophisticated bots, it won’t work for general bots because users can easily spot the robotic conversations. That’s why when you use a bot, it’s safer to tell visitors at first that they will talk with a bot. However, if the bot isn’t helpful, they will then be transferred to a human operator.
- Don’t ask for the same information twice. It can be frustrating for users to answer the same questions twice—once for the bot and another for the human operator. Thus, ensure that the operator will have a full transcript of the conversation with a bot when they need to respond to the user.
Minimize wait time
People don’t like to wait. Even a minute of
waiting can seem like
a long time if you make visitors stare at an empty screen. Keep users updated
on how fast they will get a response. It is especially important to reduce the
wait time on mobile because mobile users can easily be distracted by other
activities (offline or online), eventually switching to them, and forgetting
about the chat entirely.
Here are a few practical recommendations:
- Before the chat starts, estimate how long it is going to take for the operator to help the visitor. Provide this information in a format of time estimations (e.g. “10 minutes”), not their number in a queue. Messages such as “You’re number 3 in the queue” are less helpful than an actual time estimate because visitors won’t be able to predict how much time it takes to complete each conversation.
- A system status indicating the “Operator is typing” is essential for a chat. Without status updates, visitors won’t have any information on what’s happening. Make sure you don’t fake this status and pretend that the operator is typing; otherwise, the users will lose trust in your UI.
Typing indicator. Image credit codemyui.Visually differentiate the messages coming from the visitor and the operator
The messages of the agent should be shown in a different color than the ones from the user. It’s also recommended to use different color palettes for automatically generated messages (such as welcome messages that users see at the very beginning of the conversation).
Use color and contrast to separate the messages coming from the user and the operator. Image credit Adobe Stock.Allow users to provide additional information in the context of the conversation
When users reach customer service, they are often asked to provide additional information about the problem (i.e., a photo of the item or document with the receipt). Provide an option to attach files in the chat box and ensure it works fine both on desktop and mobile devices.
Allow users to download the full transcript of the session
The transcript of a conversation with an operator can serve as a reference in later discussions. That’s why users should have an option to download a transcript as a PDF or receive it as a simple email mockup of the conversation . The transcript should include messages with timestamps.
Provide an option “Save chat” right in the chat window. Image credit zohowebstatic.Allow continuing the conversation on a different medium
Give users complete control over the conversation and allow them to continue the discussion on different mediums such as phone or email. In the first case, the company should ask for the users’ phone numbers so they can provide a callback.
Conclusion
When people use the chat box, they likely need information that they were not able to find by themselves elsewhere. Not only is it vital to provide this information, but it’s also important to analyze why users asked the questions. In many cases, you will find gaps in your content, such as missing product details or unclear language, etc. This analysis will help you identify any problem areas and determine the priority of each issue.