The chat button icon: text vs image

The chat button icon represents the gateway for your website visitors to connect with you online. It’s the entrance to your chat sessions, the point at which visitors show they want to engage in conversation.

The design of your chat button icon, then, is highly influential to the success and engagement rate of your live chat channel.

As such, it might be tempting to opt for a cool, creative chat icon. But could a simpler, text-based design be the way to go for your chat button?

Here, we explore the best practice surrounding chat button icon design.

The importance of a clear chat button icon

Typically, users will avoid or ignore interface elements they don’t understand. Your website visitors are more likely to bounce than to click an ambiguous chat button icon and see what happens.

After all, it’s in human nature to avoid the unknown. Plus, people are used to only paying attention to the things that relate to their motive — they’ll disregard the things that don’t clearly link to their goal.

So, if a chat button icon doesn’t clearly communicate its purpose, then the visitor will likely ignore it. That represents a lost opportunity to engage with prospects or boost customer loyalty with your chat service.

And what’s the point in having a chat channel if no one can find it?

Chat button icon: using an image

There’s a trend — and it’s a tempting one to follow — of using a cool symbol or image as a chat button icon. Think a floating speech mark icon or a subtle speech bubble sat in the corner of your web pages.

Using an image is a way to flex your design creativity. It’s elegant and space-efficient — why have words when you can display a symbol?

The fact is, it’s not clever or good design if it doesn’t work. The core purpose of design is to convey understanding. And when it comes to a chat button icon, images are often too ambiguous.

For example, a speech bubble could mean chat. Or it could take users to your ‘contact us’ page. Or to your website reviews.

Using an unlabelled image assumes that your visitors understand your design choices. But if they don’t, they won’t click to chat.

To sum up:

• Image button pros: looks good, shows your creativity, space-efficient
• Image button cons: ambiguous, assumptive

Chat button icon: using a text label

The other option for a chat button icon is less glamourous than a stylish icon: a text-labelled button.

A text label is basic, and some might say a tad boring. But what it lacks in flair, it more than makes up for in clarity.

There can be no misunderstanding about what a button labelled ‘live chat’, ‘chat’ or ‘click to chat’ will do. A text-labelled chat button icon is a sure-fire way to convey universal recognition that this is a chat button.

In using text for your chat button, you eliminate guesswork — and therefore remove a hurdle between website visitors and your team.

However, this is reliant on the use of clear, unambiguous copy. That is, the text on your chat button should include the word ‘chat’.

Having a vague phrase — for instance, ‘ask a question’ — brings ambiguity back to the button. Does it lead to live chat, or your FAQ section?

To sum up:

• Text button pros: clear, universally recognised, eliminates guesswork
• Text button cons: potentially boring design, the wrong text can still be ambiguous