In its simplest form, livestream chat is a real-time message board whose participants are communicating in the moment. The practice has gained significant popularity over the last several years — and is accelerating during the last six months —with apps like YouTube, Facebook, Instagram, Twitch, and Periscope all adopting the experience within their platforms.
Live events such as concerts, professional sports, political rallies, and speeches are all regularly live streamed with a chat component. Individuals, too, can host livestreams and interact with followers; perhaps you’ve caught a few shows from your friends on Instagram or Facebook over the years. And throughout the last few months, maybe you’ve noticed the “chat” feature on Zoom calls. While usually not the most dynamic of livestream chats, in practice, it qualifies, giving its participants the ability to communicate and react in the moment alongside video. Other companies that have adopted livestream chat include EventMobi and Freeman, both of which are Stream customers.
And that is what live stream is all about. It is people, in real-time, connecting, and able to feel part of something. And part of the beauty lies in voluntary participation: one mustn't serve as an active commentator to feel that connection; idle observers can feel just as connected by following along. But for those who do, it enhances the commitment of the viewers’ attention and allows them to participate. What follows are dopamine hits as streamers see their comments discussed and debated.
That said, blindly adding livestream chat to one’s video does not guarantee success. There are many best practices, including design and development considerations, to follow when adding the feature, any number of which can impact the user experience. Let’s examine several.
(Cover photo: Caspar Camille Rubin)
In this article:
- Overlays
- Dynamic Reactions and Threads
- Adapt and Adjust
- Moderation and Slow Mode
- Paid Plans and Highlighted Messages
- Virtualized Lists and Solid Infrastructure
- Optimistic UI and Offline Storage
1. Overlays
When streaming YouTube Live on a computer, chat comments are off-screen and to the right. This sidebar design is conducive to a laptop or desktop monitor’s width capabilities. But sidebar views are not always options — on mobile devices, screen space is often at a premium, and chat messages may appear on the video. (Video overlay may still be present on laptop and desktop views — for instance, if you’re streaming Periscope, the design will be a video overlay.)
Is one better than the other? Best practices provide arguments for both — sidebar chats save from distractions to the video, but to read and engage with them, one’s attention must physically shift. And overlaid chat designs, while dynamic and fun, can usually display just a handful of messages at a time so as not to cover or displace too much of the video. When streaming a concert, perhaps many users will be focused on the show, and positioning comments off-screen is preferable. Conversely, when a single person is hosting a live show and interacting with users, the best UX may be for eyeballs to remain in one place.
But no matter your preference, what appears certain is that messages must be readable and accessible. This means text on a background must contain high contrast for users with visual disabilities (WCAG 2.0 general standards is a 4.5:1 ratio — this color contrast tool can help) and make hierarchical sense for all users, including scannability. It must also, of course, be clear when and where users can submit messages, including character limits (if any) and the types of messages allowed (more on this below). Facebook’s livestream product is a good example of a clean, readable feed. On mobile view (seen above), comments are displayed with black text on a white background providing high contrast. This helps maintain readability since comments are overlaid on video and remain in view only a few moments.
Key points to consider when deciding on overlays
- Design livestream chats for how and when audiences will consume the product.
- Also understand why the livestream chat exists, and provide options for video overlays or sidebars depending on what both sides need and want at that moment.
(Source on photo above: Facebook)
2. Dynamic Reactions and Replies
Check your text messages. Are they words only? Probably not. They are likely filled with emojis, GIFs, links and, in the new iOS update, direct replies, and threads. And so too are the best live stream chats — these days, it’s how people expect to message with fellow users online. Fun emojis and GIF responses serve as an outlet for creativity while simultaneously providing practicality: reactions save from unnecessary comments, enabling a denser messaging experience. Meanwhile, threads within chats also help reduce clutter in main conversations and gives people a chance to engage without the weight of a direct message.
But don’t too many videos, GIFs, links, and replies create clunky, messy chat feeds?
That’s where smart design and development become paramount. All GIFs, videos, link previews, and threads should be size-appropriate for the chat. Another option is following the example of Twitch, the online streaming platform primarily built for gaming and esports broadcasts, which allows users to post GIFs to designated places on the video (meaning outside of the chat). At the same time, these users can simultaneously post emoticons and line breaks, plus search keywords and names. While too many features can hamper experiences, it’s wise to build chats the way users expect to communicate in direct and group messaging.
Key points to consider when using dynamic reactions and replies
- Design a chat UI/UX that meets users’ expectations, along with common design patterns so people don’t have to re-learn new communication systems.
- Chats ebb and flow — when groups grow, design features that won’t impact the user experience in a negative way. Put another way: design for natural transitions.
3. Adapt and Adjust
Live stream chats may, at first, include no more than a dozen or so participants. Then someone with half a million followers tweets the link and in a matter of seconds, a livestream chat can balloon to hundreds or thousands of users. In that case, no longer does it make sense to include typing indicators. In the beginning, “Several people are typing” is a nice feature and helps create a sense of community; reading that "Several million people are typing" looks ridiculous and will diminish the user experience. This may also mean disabling videos, GIFs, and links if the chat is tens of thousands of people, say, livestreaming a concert or a NASA launch. Because even the most size-appropriate designs can only handle so many multiple-line images at once.
And a note for back-end developers: When a message is sent, show it immediately, and make the API call afterward. This is called Optimistic UI, which we’ll explore further down.
Key considerations when adapting and adjusting for fluctuating chats
- To design the best experience for users, prepare for chats to grow exponentially. When they do, design so that hosts can change course to better fit the new experience.
- Livestream chat’s magic is its immediacy: design for instant reaction to drive feedback loops.
4. Moderation and Slow Mode
Livestream chats aren’t always without issue. Some comments may include profanity or offensive language. But nearly every platform allows hosts and moderators to curb this behavior. Instagram Live, for instance, provides users the ability to moderate chats by blocking certain phrases, words, users, or comments altogether. Moreover, artificial intelligence-based moderation and karma systems can help mitigate disruptions by enabling machine learning that flags abusive behavior. For example, if users inundate chats with the same message over and over or submit aggressive or inappropriate comments, their accounts are flagged and either immediately banned or brought up for review later. (It works the other way, too — if users prove they can contribute positive, enriching comments that lead to good experiences for everyone else, their accounts are rewarded and in some cases given more privileges.)
Running parallel is controlling the chat’s cadence. As mentioned, dynamic reactions like GIFs and videos can enhance chat experiences. But in some cases, livestream chats can become unwieldy. Too many messages at once or too many of the same messages provide a poor user experience for users and hosts. When this occurs, a best practice is to enact throttling, a pumping of the breaks on chats also known as “slow mode.” Most leading platforms provide this, enabling ways for channel moderators to limit the frequency of messages — YouTube hosts can set time limits from one second to five minutes; Facebook allows limits up to 10 seconds. Whatever the preference, slow mode on livestream chats can result in cleaner, digestible chats, and creates a better experience, placing a premium on quality over sheer quantity.
5. Paid Plans and Highlighted Messages
While generally favored by moderators and hosts, the slow mode feature is not always popular among fervent users and fans who may have an insatiable desire to interact or ask questions. Thus, many platforms like Twitch, YouTube Live, and Facebook allow users to pay to play — that is, users who pay or sign up for a paid account can have their comments highlighted or pinned atop chat streams.
With its Super Chat and Super Sticker features, YouTube charges users a minimum of $5 (and up to $2,000 per week, if your heart desires) for unfettered messaging privileges plus the ability to pin and highlight comments as long as the stream is live. Twitch provides its users (screenshot above) a variety of methods to become members whose subscriptions not only support creators but permits access to custom emotes, loyalty badges, and ad-free viewing. There are differing levels users participate on, too. As mentioned above, users who fall in the good graces of chats via moderators or machine learning tools often are allowed certain features. In practice, this could mean high-karma users are able to bypass the 10-second wait rule and post as frequently as they want while also adding GIFs and links while other users are stuck on text-only messages.
And while we’re here: a nice feature for many chats is to save the history and provide access after the event has passed. YouTube Live does this well. Users are able to scroll through past comments when re-watching a video; or, if they choose, can hide it altogether.
Key points to consider when implementing paid plans and highlighted messages
- Design for control. Giving users the chance to upgrade their accounts (quickly!) so that messages aren’t continuously lost in the shuffle will boost satisfaction and trust.
- Reward users for participation and give immediate feedback, triggering further use.
6. Virtualized Lists and Solid Infrastructure
Livestream chats can contain tens of thousands of messages, resulting in copious user interface inputs. To handle these conversations, virtualized lists show only a fraction of the messages in the viewfinder and help keep the stream fresh and fast while rendering thousands of inputs. Fewer DOM (document object model) nodes will keep streams moving, particularly on slower devices and internet connections. For the uninitiated: a virtualized list — such as Stream’s — is not unlike an automated tap built into your living room chair. The pour continues without having to keep running to the fridge.
Similar to virtualized lists, running livestream chats requires solid infrastructure. Many stacks struggle with this, at least in a cost-effective manner. Stream uses Go, RocksDB, and Raft. The benefits vary, but their variances intertwine and help create stable and fast chats that can be replicated across a variety of platforms.
- Go: We prefer this language for its speed and developer productivity. As we wrote a few years ago, “Go showcases multiple assignments, data structures, pointers, formatting, and a built-in HTTP library.” Indeed, Go is typically 40 times faster than Python, and that matters when you’re an API provider powering chats and feeds for more than 700 companies and a billion end-users.
- RocksDB: In short, Stream uses RocksDB because of its solid storage capabilities and fast input and output. RocksDB was invented by Facebook and is used by Linkedin, Instagram and others.
- Raft: This consensus algorithm ensures that individual machines breaking down don’t impact the uptime of your chat API.
The takeaway here? Many chat technologies that work well with a small amount of users break or are not cost-effective at scale.
Key points to consider when building virtualized lists and solid infrastructure
- Dynamic livestream chats and solid foundations are best built with proven languages and systems.
- Systems that support five thousand users won’t always accommodate five million. Building for future growth means to plan in multiple-year increments.
- Bonus: Message UI should have fixed heights
7. Optimistic UI and Offline Storage
What all best practices for livestream chat have in common is speed. As stated, livestream chats earn their keep by offering blistering feedback loops to users. And to make that happen, systems need to be designed with Optimistic UI and offline storage capabilities.
Optimistic UI can be understood as showing placeholder data while later retrieving the real thing via an API call; eventually, “real” items replace the stand-ins. For example, when someone reacts to a comment with a thumbs up emoji, that initial reaction is a facade — it displays the same to the user, but the back-end hasn’t yet filled (this is, of course, unbeknownst to the user, and they pay no mind). This allows for this instantaneous experience and eschews the delay of retrieving that heavier item. It’s the salesman holding a clip-on tie under your neck to see if you like the shirt pairing while someone runs to the stock room and pulls the real thing a few minutes later.
Offline storage acts similarly and allows users to read and interact with chats without internet connections. The controls all feel the same, the inputs are all available (save, for, perhaps grabbing live links), and when connections resume, the real items fill in.
Key points to consider when creating optimistic UI and offline storage
- Design and build robust UI libraries for any livestream chat to keep conversations lively.
- Livestream chats should be built to accommodate various states of connectivity.
Looking ahead
Livestream chat is only going to grow among the most popular apps and platforms serving people around the world. It presents its challenges, sure, but opportunities abound, and following best practices will help elevate businesses and serve audiences, wherever they are. But it is worth mentioning again: merely adding a livestream chat and walking away hoping for the best usually won’t net desired results. From proper UI considerations and developer tools, sophisticated reactions, host moderation capabilities, and proper storage and scaling plans, livestream chat success requires effort on multiple fronts. Stream’s battle-tested developer tools help assuage these concerns and give businesses the ability to reach millions of users.
As part of a recap, we've put together this infographic below — think of it as review sheet for all UX best practices for livestream chat. And, as always, we're always available to answer any questions about our chat SDKs or talk further about how to help your product grow.
