Jayson Cheung

Knowledge Consultant |
UX Designer

Youtube Playback Controls Reimagined

- User Experience Design -

Independent Project

Current User Experience

Misunderstood Intentions

I want to watch the video in fullscreen, but the playback controls are too close to the fullscreen button. Sometimes I click on the playback controls by mistake, and the video jumps to the end, often revealing spoilers! This happens most often on the mobile and app version of YouTube.

Let's take a look at YouTube's current desktop and app layouts for its playback controls. (August 2018)

In the desktop version, we see the controls for playback are all grouped near the bottom of the video interface, whereas the mobile interface spreads out the controls. When the desktop version is brought into fullscreen, we see some controls introduced near the top of the interface, namely the 'Watch Later' and 'Share' buttons, along with the video title. It is interesting to note that in both versions, the 'Fullscreen' button is placed in the bottom right corner of the interface, near the control for video scrubbing.

The decision to keep the fullscreen button in its current location may be due to user familiarity and convention. Other internet videoplayers, such as jwplayer, Vimeo, and Flowplayer, all place the fullscreen button in the same location. However, this raises the problem mentioned above, where users may mistakenly interact with the scrubbing controls instead of the fullscreen control, causing the unintended action of jumping ahead in video playback. This is quite jarring and possibly frustrating for the user, as they may need to rediscover their current scrubbing position to resume watching.

Reimagined User Experience

A solution is to isolate scrubbing controls to the bottom of the interface for both the desktop and app interfaces, and move other controls currently occupying the same space elsewhere. On the desktop version, a myriad of controls (play, next, volume, closed captions, quality, 'Theatre Mode', and fullscreen) currently occupy the same space as the scrubbing control. Controls such as closed captioning, quality, fullscreen, and even volume are often set at the beginning of the video and are not changed. These controls are able to be grouped in the same location as the current fullscreen 'Share' and 'Watch Later' buttons. Currently, play/pause are modified by two controls: one in the bottom left and one in the middle of the video interface. Removal of the bottom left controls and relying on the middle controls for play and pause is possible through user adoption. Currently, YouTube can promote the existence of the middle play/pause control through its animation, even when users use the control in the bottom left of the interface. User adoption of the middle control can be increased by a phased introduction of the control by disabling Autoplay on videos to ensure that users discover the middle control for play/pause.

On the mobile app version, the controls to modify the 'one-time video adjustments' such as quality and captions, already occupy the top right corner. Volume is controlled by hardware controls, so a simple relocation of the fullscreen button to the top right area will prevent user error when attempting to toggle fullscreen mode on the app interface.

By isolating the scrubbing controls, users may experience less cognitive burden in attempting the precise interaction with the fullscreen control while avoiding the controls for scrubbing. Meanwhile, the area at the top right enjoys good spacing and adherence of Fitt's Law while not obstructing the content of the video.

Disclaimer: This project was developed entirely independently and without influence from any third party.

External Resources Used:
Laptop Mockup by Danielle Buerli
Google Nexus 6P Mockup by MockUPhone
Share icon by Hare Krishna on the Noun Project

- Project Date -
AUG 2018

Back to Top