Designing Chat Widget’s Message Bubble for Mobile Web

When browsing most modern websites, you've likely noticed that chat widgets have become a standard feature. These widgets typically include a chat bubble, often positioned in the bottom-right or bottom-left corner of the screen. The design of the chat bubble is usually circular or square, featuring an icon-commonly a speech bubble, messaging symbol, or similar visual cue.

If a new message arrives or if the widget aims to invite users to chat, a message bubble often appears above the main chat bubble. This message bubble is compact, typically around 70-120 pixels in height, and designed to accommodate two to three lines of text. It serves as a preview of the conversation or an attention-grabbing element to prompt user interaction.

This approach is widely adopted across various live chat products, including Intercom, Crisp, Help Scout, LiveChat, and Facebook Messenger. The pattern is so standardized that users immediately recognize and are comfortable interacting with it. It works well for desktop screens, where there is ample space, and the design does not interfere with the user's primary browsing experience.

However, when the same design is applied to mobile screens, it introduces significant usability challenges. Mobile screens have limited real estate, and chat widgets, especially those with auto-invite features, can occupy as much as one-third of the screen. This obstructs the user's view of the main content and can feel intrusive.

Many businesses recognize this issue and either disable auto-invite features for mobile users. This highlights the need for chat widget designs to be thoughtfully adapted for mobile web interfaces, ensuring a seamless user experience without compromising usability.

To design effective mobile interfaces for chat widgets, it's essential to first understand the requirements and purpose of chat bubbles and message bubbles. Here's what we identified:

1. Sneak Peek Without Obstruction:

   Customers won't keep the chat widget open all the time because it obstructs their browsing experience. After sending a message, they might close the widget. If a new message arrives, it's important to show a sneak peek of the message without obstructing the user's view, ensuring they are notified without disruption.

2. Proactive Engagement:

   The chat bubble also serves as a tool for proactively inviting users to engage with support or sales teams. This could help with upselling, providing assistance, or resolving issues promptly.

3. Unread Message Visibility:

   Customers might revisit the website hours or even days later. When they do, the chat widget should clearly indicate that there are unread messages, ensuring they don't miss any important updates.

These requirements are straightforward to meet on desktop interfaces. Typically, there's a chat widget with an unread counter, and new messages may briefly pop up above the chat bubble. However, achieving the same functionality on mobile screens without obstructing the user experience is challenging due to limited screen real estate.

Our Approach to Mobile Chat Widget Design

To address these issues, we brainstormed and devised a solution that meets all three requirements while enhancing the user experience on mobile devices. Here's what we did:

1. Horizontal Layout for Message Bubbles:

   Instead of placing new message bubbles above the chat widget (which takes up vertical space), we displayed them in the same horizontal line as the chat bubble. This preserves more screen space for the main website content while ensuring the message remains visible.

1. Timed Visibility with Animation:

   Even though the horizontal layout minimizes obstruction, it might still partially hide website action items or buttons. To address this, we made the message bubble appear for 4-5 seconds with smooth entry and exit animations. After this, the bubble automatically hides itself, leaving the screen uncluttered.

1. Persistent Unread Counter:

   Once the message bubble hides, we display a small, unobtrusive unread counter next to the chat widget. Unlike desktop screens, where a small dot might be overlooked, this counter is designed to remain noticeable on mobile screens without being intrusive.

Optimized Mobile Experience

With this redesign, we've created a mobile-friendly chat widget experience that adapts automatically to smaller screens. The new design meets all user requirements-ensuring notifications for new messages, inviting proactive engagement, and maintaining visibility for unread messages-all while optimizing usability for mobile visitors.

Happy ClickConnecting!