IconOf.Com

KOSTAS MAVROPALIAS

LEAD DESIGN ARCHITECT and DEVELOPER at CCKF. CYBERPSYCHOLOGIST.

YouTube updates its video player UI

in User Interfaces (UI) @ April 8, 2010

As I was updating my post on the iPad Experience by adding a video from YouTube, I noticed that YouTube updated the UI of its video player. Here’s how it looks like:

YouTube video player - new UI

YouTube video player - new UI

It seems that after the new video and profile pages that YouTube rolled out over the past few months, it was time to bring the flash player up to speed with the rest of the site’s interface (note: the new UI is not available in all videos yet).

As you can see, the controls have been re-arranged and they have a updated look and feel. In comparison, these are the old vs new designs:

YouTube video player - old vs new design

YouTube video player - old vs new design

As a first impression, I like the improved aesthetics of the player and the less cluttered interface. The right-hand side of the old player was starting to look like a full loaded toolbar from Word (just to watch a video!).

The most obvious change is the progress bar, which has been moved above the other buttons and changes in size as you interact with the video. In its normal state it takes only a few pixels, but when you move your mouse cursor on top of the video player, it expands (having a minor transparency) and lets you interact with it. The rest of the buttons become ‘active’ as well, by a small change in color tone.

In regards to the new progress bar, although they moved it in order to free space for the other buttons, there is a small delay now before you can use it (move the cursor over the player > wait for the bar to appear > locate the progress indicator > click). So, this might have a negative usability effect when you just want to skim through a video quickly.

YouTube video player - new progress bar

YouTube video player - new progress bar

Another interesting change is the volume control, which now expands horizontally as your mouse cursor hovers the button and doesn’t float over the video (how many times I had to click the volume button after I had adjusted the volume, just for the indicator to go away and let me watch the video). I still find the size of the volume bar small. They could increase its width and let us have a finer control over the volume.

YouTube video player - new volume control

YouTube video player - new volume control

YouTube found a simple way to reduce the clutter in the right-hand side of the player, by separating the buttons into two groups:

  • buttons that appear in every video (player size, full screen)
  • buttons that appear only under specific conditions (captions, subtitles, quality)

and giving them a distinct design:

YouTube video player - new misc buttons

YouTube video player - new misc buttons

Overall, the new UI design is less cluttered, straightforward to use and looks sleek (while providing the same functionality). I’m sure we are going to see further updates as the YouTube team starts getting feedback from the users. Well done YouTube!

---