Live chat has become an almost ubiquitous part of our web browsing. Most modern websites now come with that familiar chat button splashed up-front on the bottom of their pages – offering an attractive service window into the site. However, the offer does not always live up to the experience.
When implemented poorly, live chat can be an annoyance rather than an assistance. Sometimes it jars with a website instead of gelling with it, and sometimes the ‘live’ promise is unfulfilled. So, how can brands ensure they are offering a good experience with live chat software? Here is the quick and dirty UX 101.
First things first, the placement of your live chat button matters. Do not bury a live chat option deep within your contact page, where visitors must actively search and scroll to access help. Chat should be immediately available. (That is its whole point.)
To make your live chat channel as accessible as possible, use standardised positioning that is easy to find. Avoid sidebars and small textual footer links. Instead, stick to a fixed chat button on the bottom right-hand side of all your website pages.
Regarding UX, the lowest level of effort required to use chat, the better. In fact, 78% of consumers across the globe will buy more from brands that cut the time and effort needed to interact with them: a statistic worth remembering when deploying chat. So, use the standard chat placement hotspot and create familiarity for your visitors.
The Chat Button
Website visitors should not only know where to look for live chat but also what to be looking for. It has become a recent design trend to swap chat buttons with vague icons that do not plainly denote chat. Visually, that levitating speech mark icon might be ‘cool’. Regarding practicality, though, it might not always convey universal meaning and recognition.
Never assume that your website visitor knows what your design choices mean. A chat button that labels itself as “Chat” is less glamorous than an enigmatic icon, but it is also less ambiguous. Alternatively, in the words of Thomas Byttebier: “When in doubt, always remember this: the best icon is a text label.”
In short, good UX design eliminates guesswork. The best chat buttons blend style with pragmatics to signify your chat channel. You cannot go wrong with a simple, well-designed chat button with an accompanying “Live chat” label.
The Website Integration
This leads us to design. You can take steps to place your chat button in the best place and ensure that it is appropriately labelled, but bad design can still break the experience. A live chat channel should integrate seamlessly with your website, matching the look and feel of your brand and slotting onto your pages naturally.
From colour to the font, to images, your live chat software must align with your brand guidelines. A visitor hitting your website should see the chat option, understand what it is and recognise it as native to your brand. A disjointed chat channel paves the way for a disjointed digital experience.
Now, that does not mean to say that live chat should be part of the website wallpaper. You want the chat functionality to be intuitive, but not intrusive. So, use your company colours and styling, but add subtle features to your chat button such as a slight wiggle or small bounce to encourage engagement.
You cannot talk about live chat engagement without talking about proactive invitations. A proactive (or dynamic) chat invitation is a session initiated by the company rather than the visitor. Typically, they will be sent at key points in the customer journey, to reach out to visitors when the time is ripe. When used strategically, proactive chat can earn a staggering 105% ROI.
Unfortunately, dynamic chat invitations are not always employed with great UX in mind. Many brands have a nasty habit of pummelling their visitors with automatic chat messages whenever they enter a new page. As I discussed in an earlier article, this type of ‘engagement’ tactic is nothing short of irritating.
For your website visitor to have a great experience with proactive chat, the invitation should be sent only when it is likely to be useful. So, implement triggers to send messages at the most welcome times, such as when a visitor is lingering on a “Book a demo” page. That way, the chat offer will be a boon rather than a bother.
The Chat Window
So, you have placed your chat to make it accessible, you have fine-tuned your button and website integration, and you have set up careful triggers to offer proactive (but not pestering) service. So far, so good for live chat UX.
Next, you need to consider the chat window itself. This is where the visitor’s conversation will take place, and a clean, uncluttered and easy to use interface is essential. Once more, a look consistent with your branding is necessary to create a unified experience. You might also want to include (real) images of agents or a company logo for credibility.
You must remember here that chat should be a part of the user’s online experience, not apart from it. So, the chat user should be able to read the conversation in the chat window while being able to browse your site seamlessly. This means using an inline chat window as opposed to a pop-out chat window. Inline chat follows the user from page to page in its embedded position and means that they do not have to navigate a window separate from your website to communicate.
Combined, all these factors allow you to get the chat started off on the right foot. 33% of website visitors are frustrated by poor quality or unresponsive contact facilities, and a substantial introduction to live chat can combat that common vexation.
If you have done everything right so far, the website visitor will be having a positive experience with chat. To keep it up, the live chat session itself needs to start as smoothly as everything that’s gone before it.
One way to ensure a smooth chat session is through a pre-chat survey. Rather than launching a conversation right away, a simple pre-chat survey allows you to gather essential visitor details such as name and need. From there, you can route the chat to the relevant department and give personalised service from the off.
However, you need to be careful not to put too many layers between the visitor and their conversation. Too many obstacles will be a UX detractor and could put the visitor off chatting in the same way a monstrous web form deters data entry. So, avoid asking for unnecessary details, and be sure to accept all chat requests automatically. (As you might guess from the name of the channel, a live chat user will not be expecting a lengthy wait.)
If you do have to put the visitor in a live chat queue, be sure you keep them updated on wait times throughout. Moreover, once connected, you should aim to respond to the chat user within – at the very least – the minute mark.
Next comes the conversation: the bread and butter of the live chat experience. The most important thing here is to keep a consistent tone. For a streamlined experience, the dialogue used in the chat session should match the tone the visitor has seen from your brand across all your other touchpoints.
As Mark Wheatley writes in The Conversation Engine: “A brand is the look and feel of a company, right down to how the team talks and interacts with its customers.” So, with regards to a live chat channel, if your brand is fun and quirky, you should encourage your chat operators to adopt a lighter tone and employ GIFS and emojis within the live chat session. If, on the other hand, your brand is more formal, you should train operators to be calm, succinct and to the point. (Bearing in mind, of course, the mood of the chat user and their contact reason.)
Outside of tone, smaller touches like using a typing indicator can help keep the chat user in the loop, letting them know you are still there and actively engaged in the session. You will also need to make smart use of chat alerts. Too flashy, and you risk annoying the user. Too subtle, and you risk the user missing new messages and breaking the conversation flow.
It is not rocket science, but these lesser conservational considerations can either consolidate or crack live chat UX.
No matter how good the tech and the touches, your chat UX will fall apart if high-quality customer service does not back it. The most important priorities for consumers are getting through to an agent quickly (80%), and the speed with which their inquiry is resolved (74%).
Fortunately, live chat software typically comes with a range of features that can ensure a quick, efficient experience for users. For example, you can use typing previews to take pre-emptive action, or canned responses to send common answers and explanations quickly. You can pull in a visitor’s existing CRM data, and use nifty tools like sentiment analysis to identify their mood.
However, that is still not enough unless you have got competent, friendly operators at the end of the chat. Your chat channel can look slick and perform excellently and still spawn a horrible user experience if the service itself is inadequate. There is no UX shortcut or technical hack to solve this: you simply need to train your operators well. (Sorry.)
Quick and Dirty
To paraphrase Jared Sinclair, good UX is about process, not product. Your live chat software in itself is mostly irrelevant to the website visitor: it is the set-up and support behind it that will impact their user experience.
Done well, live chat is a UX boon that opens up communication for your website visitors. Poorly done, it is disappointing at best and damaging at worst. So, use this quick overview to start getting your hands dirty in live chat UX. Is yours an experience worth chatting about?
(Lead image: Depositphotos – affiliate link)
Want to learn more?
If you’re interested in the intersection between UX and UI Design, then consider to take the online course UI Design Patterns for Successful Software and alternatively Design Thinking: The Beginner’s Guide. If, on the other hand, you want to brush up on the basics of UX and Usability, you might take the online course on User Experience (or another design topic). Good luck on your learning journey!
(Lead image: Depositphotos – affiliate link)