WebRTC series: 4 Indispensable UX patterns to create transparent voice and video calls
In the two previous posts in this UX series, we talked about making sure WebRTC-enabled features fit seamlessly into your application and how to get users started with voice and video calls. In this installment, we’ll look at the experience of the call itself and some reliable UX patterns.
Voice and video calls can range from enjoyable to frustrating and there are a lot of variables that contribute to making it a positive or negative experience. We can work to limit those variables, but it’s also important to make as many of them as transparent to the user as possible.
1. Show Them What They Look Like
Using video calling for the first time can feel uncomfortable. You’re talking to someone through a screen and you can’t stop awkwardly staring at your own face in the little box off to the side. Despite feeling strange watching yourself talk, this local video preview gives useful context.
Just like the hair check step of joining a call that we discussed in the last post, the local preview shows the user what the other participants are seeing. As a user switches sitting positions or physical environments during a call, they can use the local preview to make sure their face is still clear and in frame. Sitting in front of a bright window, for example, can create a spooky silhouette and obscure facial expressions. Give people this information so they can adjust their appearance and surroundings.
So where do you put the local preview box within your layout? A common interface pattern is to place it alone in the top left corner. Another pattern is to include the local preview in a roster of participants at the bottom of the screen.
Neither is incorrect, but because people will look at themselves frequently during the call, placing it near the top of the screen has additional benefit. Built-in, front-facing cameras on notebook computers and desktop monitors are generally located just above the center of the screen. This puts the user’s eye line toward the camera. People who spend a lot of time on video calls will regularly glance directly into the camera knowing it gives the other participants the eye contact often missed through the screen.
Another option, though less commonly implemented, is giving the user the ability to move the local preview box around on the screen. They could place it where it feels comfortable for their eyes or where it won’t block someone else’s face.
2. Show Them Who They’re Talking To
For a video call, video streams from participants is a default expectation. But what happens when people choose to hide their video? What do others see then? At the very least a placeholder should show up where the video stream is expected. This communicates that someone is in fact there, but their video is hidden. There’s something very unsettling about someone being on your call and you not knowing it. Always inform the user of how many people are participating. This can be in the form of a number count or a corresponding box for each person.
When you think about hidden video, questions start to pop up about other ways to identify
people on the call. And when there is no video at all, on a voice call for example, this is even more important. Give users a way to visually identify themselves. Two of the most common patterns are a text name and an avatar. For applications with user accounts, a name and photo could be automatically included from their profile information. Or for anonymous apps, give them the opportunity to type in a name and upload a photo.
Seeing photos and names for people on the call puts people at ease and helps conversations feel more personal, secure, and easier to navigate, especially when there are a lot of voices to decipher. This is a situation where the next point really helps.
3. Show Them What’s Happening
For that example of a voice call with lots of people speaking, include some kind of “current speaker” indicator. For many video call apps, the current speaker becomes the most prominent video stream in the layout. Or it could be a subtle icon or a label or simply a differently-colored border around their video stream or avatar. For calls with several people, especially people you don’t know well, this feature is crucial.
Another piece of important visual feedback is who on a call might be muted. If a user mutes themselves, ensure there is an indicator that tells them. Icons and interface color changes are common ways of doing this. And give an indicator to the user when other people on the call are muted, too. At the very least it provides information about what people are doing. And in practice it helps quickly resolve the issue of someone forgetting to unmute before speaking.
For video calls, as mentioned earlier, it’s good to put in a placeholder when someone’s video is hidden. This could be a grey box with an icon in the place of a video stream. This also applies to the local preview. Although it isn’t necessary to hide the user’s own preview while it’s hidden for others, it’s definitely recommended. This makes it very clear that their video isn’t showing up for the other participants and maintains consistency for this feature across users.
4. Give Them Control Over What They See and Hear
For voice or video calls, a user may want to temporarily mute another person. There could be a lot of background noise or an echo they want to silence in order to hear another voice more clearly. When this feature is implemented, it usually only mutes *for the person who selects it* and not for the entire group. This ensures each user is still in control of their own experience and voice on the call.
For video calls, users often want more options for which video streams fill the screen. They might want the current speaker to always be most prominent or instead favor a specific stream (such as a meeting leader) no matter who might be speaking. Some video call interfaces are designed to feature one stream at a time and others allow for multiple streams to sit side-by-side Brady Bunch style. Whatever you choose for your application, consider giving the user control over which and how many streams take priority on their screen.
Consider these patterns when designing your WebRTC call interfaces. It boils down to providing users with visual feedback as things happen and giving them control over their experience. In the next post in this series, we’ll discuss connectivity and bandwidth issues you might encounter and ways to optimize and plan for them.