Blog
Augmented Reality

UI Best Practices for Augmented Reality Video Calls

For modern video calling software, augmented reality (AR) features are a must-have. Products without virtual backgrounds or face touch-up will quickly get overtaken by the competitors. However, you also need to integrate such features in a way that is convenient and easy to find. In this article, I will share the best practices for AR in video call UI on mobile and web platforms.

[navigation]

TL;DR:

  • In video calls, augmented reality helps helps users feel more confident and present a more professional image;
  • Let users set up their effects before joining the call;
  • Place icons where they are easily seen by the users;
  • The effects should be no further than one click from the call. If not on the main screen, the best place for them is settings menu;
  • Use a pop-up menu to save space and give easy access to certain features;
  • In mobile apps, place effects buttons near the main call to action;
  • Turn touch-up on by default;
  • Add avatars to let users protect their privacy.

Augmented reality meetings

Augmented reality has enhanced user engagement and personalized virtual interactions. Background replacement, for instance, allows participants to maintain privacy and create a professional environment, regardless of their actual surroundings. According to a study by Cisco, 80% of remote workers feel that background noise and distractions negatively impact their productivity during video calls. By offering customizable backgrounds, platforms like Zoom and Microsoft Teams enable users to project a more polished image, thereby fostering a more focused and professional atmosphere.

Face touch-up has also gained traction, as they help users present themselves in a more flattering light. A survey conducted by Lifesize found that 75% of respondents believe that looking good on video calls is important for making a positive impression. This demand for enhanced appearance has led to the integration of beauty filters and skin smoothing options in many popular video conferencing tools. While some may argue that such features promote unrealistic beauty standards, they undeniably contribute to users' confidence during meetings, allowing them to engage more effectively without the distraction of self-consciousness.

Moreover, the use of face masks and avatars has introduced an element of fun and creativity to video conferencing, appealing particularly to younger audiences. According to Statista, 56% of Gen Z users prefer platforms that offer customizable avatars and playful filters. This trend not only enhances user engagement but also fosters a sense of community among participants, making meetings feel less formal and more interactive. As organizations increasingly adopt remote work policies, the integration of these AR features can serve as valuable tools for maintaining team morale and collaboration in a digital-first world.

Web

In this section, I will describe the best practices for video calling web UI.

1. Pre-call setup

Before a user joins a call, they should be able to tweak the virtual background, camera options, and effects. This is best done on a separate screen.

Pre-call setup@2x

2. Icon design and placement

Make sure your icons are clearly visible and are placed in a location where a user immediately notices them (see example below). Their design should also be unambiguous, so that people can understand the functionality of each button.

Icon design and placement@2x

3. Effects in camera settings

If you can’t have a separate button for effects, put them in the camera settings section. However, they must not be more than one step away from the camera screen itself. 

If you have few effects, show them all at once, so that the user doesn’t have to move through unnecessary additional sections.

Effects in camera settings@2x

4. Settings menu

This section is also fitting for effects. Using a recognizable icon like three dots or a cogwheel would let users quickly understand the contents of the underlying menu. 

Mobile UI best practices state that using an icon+text combination would be the easiest to glean information from.

Settings menu@2x

5. Pop-up menu

You can place certain effects (e.g. user’s personal favorites or the most popular ones) into a separate menu that appears only when a cursor is on the video screen. It won’t take any space but will be easy to access.

Pop-up menu@2x

Mobile

In this section, I will describe the best practices for video calls mobile UI.

1. Button positioning

Place the effects icons near the main call to action (“go live,” “start streaming,” etc.). You can use separate buttons for different effects, e.g. one for touch-up, and another for masks. 

As usual, make sure that the effects can be accessed both before and during the call/stream.

Mobile Button positioning@2x

2. Touch-up on by default

This feature is popular enough to be always on unless the user specifically turns it off.

Mobile Touch-up on by default@2x

3. Avatars

Add the avatars functionality to help users combat camera anxiety and protect their privacy.

Bigo Live@2x

Conclusion

Augmented reality can be a great benefit to video conferencing software. AR improves users’ confidence, protects their privacy, and give them more self-expression options. With these best practices, you will be able to get the most out of the features you integrate and see augmented reality as the asset it is.

Power Your App with AR Face Filters SDK  Start Free Trial

Top