The Dos and Don’ts of Picture-in-picture Video in UX design

Movement is a powerful tool for designers: it has the potential to catch your eye, convey meaning and emotion, and keep users engaged. While designers are now applying UI animations in novel ways, the use of picture-in-picture videos has also gained much popularity in digital interface design.

These ‘PIPs’ are minified video views that are either part of the page layout or ‘float’ over the interface, often pinned to a corner of the screen. In both approaches the video is visible at all times, allowing the user to freely browse in the background.

PIPs can be useful in specific contexts, while in other instances they’re more like webpage window-dressing.

In this article, we’ll discuss trends of using video in interfaces, how PIPs can enhance the user experience and some of their challenges and risks.

PIPs are pretty much ubiquitous in television. In this show, close-ups of the two teams are placed on top of a bird-angle shot. Lately, PIPs have become popular in interfaces too. (Photo by Wang John on Unsplash)

1 — Communication apps

The most notable examples of interfaces using PIP layouts are (video) call apps like Skype or Google Hangouts, where you can see the other person as well as yourself (typically in a PIP window). Over the years, these products have evolved — not just technically, but also from a usability standpoint.

Granted, many of these calls still start awkwardly, with users asking each other “Can you see me? Can you hear me?”. But over the years, these apps have added nifty features like:

• Google Hangout automatically switching the order of each participant’s video thumbnail based on their activity.
• Skype allowing you to blur your background.
• FaceTime (iOS) letting you drag the picture-in-picture views across all corners, clearing the view.
• Android Oreo enabling you to continue a video call picture-in-picture on top of the OS.

In Android Oreo, you can take the PIP window of a video call anywhere.

Interestingly, some of these interaction concepts and conventions are now being used outside of communication apps.

2 — Keep playing on the side

In certain video-centered platforms and services, videos follow the user around as a PIP window. This way, the video takes a backseat while the user browses freely.

A well-known example of this is the mobile YouTube app. When you navigate away from a video page, the video first minimizes the video to a thumbnail, which you can then dismiss by swiping it away. You can also have it keep playing in its smaller form as you browse the app. You can always enlarge it again.

When YouTube first introduced the PIP interaction, how-to videos and articles popped up explaining how to get rid of the minimized video. In a later version, they replaced the swiping to dismiss gesture with a more obvious close button.

This interaction pattern, of minimizing a video to the side, has become widespread. Sometimes with some subtle differences:

• In the Twitch app, you can move the PIPs across all corners. Same as with most communication apps.
• In WhatsApp, rich snippets of videos open as large PIPs, which you can move to the top or bottom.
• On Facebook, you can pin a timeline video to the top right of the screen. You can then minimize it even further.

In WhatsApp you can move the PIP to the top or bottom of the screen while playing.

Apart from websites and apps, operating systems (OSes) are subsequently adding the support for PIP versions:

• On MacOS, Safari allows you to change any video into a PIP window. For every video, the PIP window has the same familiar controls.
• In older versions of Android you could vertically stack and reorder any app in split-screen. Now, in the Android Oreo, you transform certain apps into floating picture-in-picture windows.

3 — Engaging audiences

Lastly, there’s the trend of websites and apps enhancing their otherwise static pages with videos that play upon landing. This way, the video can be a part of an article’s story. At other times it’s more loosely related to the content, or sometimes even entirely unrelated. Here, the user might not have visited the page to watch a video, but is tempted to engage with it anyway.

Some examples of this are:

• Metacritic auto-plays a trailer when you open the detail page of a movie, video game, or series. When you scroll past it, it moves to the bottom right corner.
• Bloomberg starts playing the show’s coverage of an item at the top of the page. When you scroll past it, it moves to the sidebar and becomes part of the page.
• When you open an article on MailOnline, a playlist of ‘Today’s best videos’ starts playing in the bottom right corner of the screen.

Top row: A detail page on Metacritic, middle row: an article page on Bloomberg, bottom: an article page on MailOnline.

Our take on PIPs

Now that we’ve outlined some of the contexts, here are some things to keep in mind when you design or develop PIPs for your product:

• Plug into OS capabilities for the most flexibility. PIPs by OSes like MacOS or Android are more flexible compared to browser, app and website PIPs. These OS PIPs can truly follow the user anywhere, at all times. Moreover, users are already familiar with those PIP controls.

Vimeo uses their own PIP when you scroll past a video, but they also support the OS’s PIP with the option to dismiss, play/pause, and to option to go back to the video’s webpage.

• Keep context in mind. Some things should play automatically, some shouldn’t. For most video platforms like YouTube, you can safely assume that most users come to watch a video (nobody should read the comments… ever). On Metacritic, however, visitors may already be familiar with the subject and come to look for the latest reviews. In that case, the PIP becomes more of an annoyance. A worse offender is OnlineMail, which, as soon as you open an article, tries to lead users away from their content with completely unrelated videos. Generally speaking, it’s better to keep visitors focused on the main subject than trying to divert them to other content too quickly.
• Determine the best (or least frustrating) position. Both Independent and Bloomberg neatly integrate the PIP into their layout (grid) system. Being able to pin videos to the corner of the screen can be useful too. If you do this, consider the browser’s height so there’s always enough vertical screen left for the main content.

Facebook’s PIP floats over the side column. From there, it can be collapsed further into a thin strip. Having to collapse the video to reveal the sidebar items feels a bit clunky. That said, the sidebar doesn’t contain anything other than suggestions and ads anyway…

• Treat PIPs as an enhancement. PIPs are great to keep your user involved as they browse. From the vendor’s side, it can lead visitors into a video loop, thereby increasing the time-on-site. If it’s not a video platform, don’t treat PIPs as core functionality. Using sticky (video) elements on smaller devices is especially tricky as reading the main content becomes a lot harder. Not just because there’s less space, but also because it increases the user’s cognitive load. Either be sure the video content is what’ll interest most users or avoid using PIPs on smaller devices altogether.

On the Fandom, the PIP video is fairly easy to miss or ignore on larger screens (it sits in the bottom right). On mobile it’s quite the opposite: the PIP is extremely prominent because it’s made sticky at the top of the screen.

• Not every brand needs PIPs. Consider PIPs based on the user’s mode of consumption but also the company’s identity. PIPs might fit most fast news outlets, increasing the feeling that journalism is always on the move. Sports sites might want to add them so users can follow soccer matches while they peruse other content. On the other hand, Netflix deliberately doesn’t use PIPs in its app and website. They believe that if you want to watch a series or movie, there’s only one way to do it properly: in full screen.

Closing thoughts

In summary, when applied to the right brand, in the right context, and in the right form, PIPs can be a strong addition to a product or service. They allow the user to interact with a product more flexibly, staying engaged as they do so.

We’d love to hear from you: what is your experience with PIP videos from a design or consumer standpoint? Do you think it’s a gimmick? When and where do you think it’s most useful, if at all? Let us know in the comments. Oh, and don’t forget to clap.

P.S. We recently worked on a project that used PIPs, we’ll update this article when we can share the result. For now: PIP, PIP, Cheerio! 👋