Building with WebRTC: 6 design features for a successful video call

Building and design for video call apps with WebRTC

Over 10 years of TokBox, we’ve seen first hand that not all video communication experiences are created equal. Ever wanted to throw your computer out the window after a clunky and frustrating attempt at a video call on whichever app was chosen by your employer/family/friends?

We’ve been there too, and we feel your pain. So we’ve been working tirelessly at TokBox to create a flexible platform which will allow you to build the optimal video experience for your use case.

We’ll handle the connections, the servers, the monitoring, the intelligent audio controls, so you can go off and build whichever app you’ve been dreaming of to change the world.

Of course we know that you want to delight your customers with an awesome and easy user experience, and we’ve learnt quite a lot about how to do that over 10 years.

In this new series of posts, the TokBox Design team is going to be sharing some choice nuggets about designing UX for live video experiences that delight users. And what better place to start than at the beginning? We’ll kick things off with a look at how you can set your users up for success before a video call even starts.

To illustrate, we’re going to use some screenshots of a demo we’re designing to show you how we put what we preach into practice. Our UX recommendations vary by use case – today we’re looking at group video conferencing but some of the principles will be relevant across different apps.

6 design features you can use to set up a successful video call

Setting up the call

Our users want to know where they are and what they are getting into, so this step helps to set the context for the video call.

When you are setting up the meeting, you can choose the meeting name to identify the call, and perhaps most importantly, can identify yourself. Who doesn’t want to know who they are speaking to?! Of course, lots of users might be using your app for the same thing so it’s a good idea to let them know if they’ve chosen a room name which already exists and therefore might already have guests!  

Recommendation:

  • Give users the option to personalize their meeting room and identify themselves on the call.

video call welcome screen

  • To avoid accidentally joining an existing call, advise the user when a room name has already been used

name your video call

Don’t forget about your mobile users

More and more people use their mobile as their primary device. As phone cameras and connectivity have improved, so has the overall video calling experience. Our demo is fully mobile responsive, and the layout is designed so that the page slides across to fit the new window size on mobile. We know that people’s thumbs are usually close to the bottom of the screen when they are on mobile, and this design makes it easy for you to add information to the fields and use the controls to move right along to the next step.

Recommendations:

  • Lay out fields on the right hand side of the screen – when it’s viewed on a mobile device, the design of the page simply slides across to fit the new window size.
  • Place fields at the bottom of the screen on mobile to make it easy to complete information. 

taking a video call on mobilevideo call check in screen

Ask for permission, not forgiveness

One potentially frustrating feature of WebRTC is that when you’re using an application for the first time, the browser will ask for permission to access camera and microphone. If you don’t give the permission because you miss or accidentally dismiss the prompt, the call won’t work properly. And most likely, you’ll blame the application for not working.

But you can get around that by prompting the request for permission before a call gets underway. In our Demo, we’ve included a pre-call screen that does just that. On both mobile and desktop, the browser itself will take care of prompting you for this, if permission hasn’t been granted in a previous session. Until permission has been given, the “Join Meeting” button remains grey, and you won’t be able to click on it.

Recommendations:

  • Deal with browser permissions for mic and camera early on. Ask your users to give this permission before they join a call.
  • Consider making the permission a prerequisite to move forward in the workflow.

video call permissions granted for webrtc

permissions granted for video call       no permissions granted for a video call

Custom controls for mic and camera

Now that your browser has been given permission to use the microphone and camera, you’re ready to join the call. You can see that the camera is working because you’re on the screen, and the microphone indicator gives you live feedback that the mic is working.

But wait a minute! You’ve just noticed that you’re having a terrible hair day! And is that spinach stuck in your teeth…? Never fear, the pre-call screen has options that will let you switch off the camera before you join the call. Since you’ve already put in your name in step 1, the other callers will still know who you are.

The microphone can also be muted before you join the call – great for when you’re joining the call from a noisy environment.

Recommendation:

  • Allow users to configure the call settings to suit their current environment before they join the video room.

pre-call setting for mic and camera for a video call

pre-call settings on mobile for camera and mic .    pre-call custom settings for mobile in poor bandwith

Connectivity doctor

Even if you are having a great hair day, you might want to switch off your video before joining a call for a very good reason – poor connectivity.

If a user is in an area with poor connectivity on mobile, or using a Wi-Fi network without much bandwidth, it’s likely that the video quality will suffer – and again, they are going to blame your application for not working.

This is where the OpenTok Pre-call test can help out. By allowing participants to check their connection strength before joining the video call, you can help them configure the call for their own environment. For example, if a user tests the connectivity and finds that it’s poor, you can advise them to switch of their video and go audio only. Look out for news about the Pre-call test and how you can integrate this into the app soon! 

Recommendation:

  • Anticipate connectivity problems and provide a pre-call test to help manage users’ expectations for call quality.

pre-call connectivity test for a video call  pre-call connectivity test for a video call

The more the merrier

Finally, no video call is any fun if there is only one participant! So make sure you invite plenty of friends or colleagues to join in.

For invited participants, the pre-call screens are going to look a little different. For a start, an invitee won’t have to name the meeting, but when they get to the precall landing page, they will see the name of the meeting on both the page and the “Join” button. This helps to reassure the participant that they are joining the right call.

They’ll still have all the same options for checking connectivity and setting the video and mic to on or off, so when they do join, they’ll be ready for a great call.

Recommendations:

  • Reassure users they are joining the right video call by including the meeting room name in several places in the workflow and in any emails which are sent with meeting invites.

Joining a video call with permissions granted  joining a video call meeting on mobile

To find out how to start building a video call application with OpenTok and how to incorporate some of these features in your app design, have a look at the resources in our Developer Center. And if you want some expert help to get up and running, get in touch!