Movie Player Mockup *Updated*

Update July 14th 2011, Additional commentary on my old design and changes to other UI’s since I first wrote this post.

A brain storming session on the Moz usability list was sparked off by Firefox’s need for a better generic movie player UI .  After doing some best of breed analysis of current solutions and value mapping each UI element I designed some mockups.

I came up with three states (pre-load/loading, mouse-movement, and mouse-over) and removed every UI element that wasn’t needed during each stage.


Loading Did everyone forget what it’s like to watch video with crappy internet?  You have to wait, and that loading bar lets you know when to play.  It would be nice if FF signaled when there was enough buffer to play.

Play button This clearly imitates Vimeo. I am unsure of the large, pre-load centered play button which (at the moment) everyone seems to favor.

Update July 14th 2011 Looking at this now, I think some sort of central central play button with load notification for slow connections would be nice.  I still think there is room for experimentation, however.

Mouse movement

UI mockup for Firefox's default movie player.

Timeline In consideration of Fitt’s law and to reduce visual complexity, I removed the artificial container around the time/loading line.  Maybe I am wrong here, because everyone else includes the odd containers:

Screenshot of YouTube scrubbing interface

OldSkool YouTube Timeline

But this design hasn’t really changed since the early days of QuickTime, and it’s not like YouTube is known for it’s visual acumen.

Update July 14th 2011 As you can see below, YouTube agreed with me.  Keeping the red line active during playback creates visual motion at a peak color wavelength is really, really stupid.  Often it’s in the peripheral vision, which is tuned to detect and redirect one’s attention.

YouTube video scrubber/scrubber

Load/Buffer Three levels of opacity to indicate the buffer and playhead location.  It is of uniform size as I think the Vimeo style looks odd with the big play button next to it:

What concern me about my proposed solution is it’s accessibility.  I have the eyes of a twenty something  and the screen of designer -what about a woman in her 70”²s using a consumer grade monitor she got free with her Dell 10 years ago?  Hell, even my father, who is in his 50”²s, would probably struggle to pick out the 3 different shades of gray.  Perhaps there is some minimum contrast formula we can use?

Bonus: soft white glow that outlines the controls when they float above dark elements.

Volume Top to bottom indication of volume levels and at the bottom, a mute button/label.  The mute button isn’t shown here as I didn’t have time to change every picture.  When on 0%, the mute label should throb, minimizing the harm of the multiple modal volume system in todays computers.  This goes hand in hand with Rob Cambell’s idea of keeping the volume consistent across movies.

Update July 14th 2011 This is ugly as hell.  We should just jack Vimeo’s volume control’s.  The full-screen icon needs a refresh as well.

Mouse Over

UI screenshot for video player mouse-over state

Scrubber Just a simple highlighting of the playhead.

Runtime Behind the timeline.

Timecode For both the playhead and the mouse location (when it’s over timeline) the timecode pops out underneath the timeline (I think an animation is parented).  Here I show it above the timeline, but I think it would be less distracting be below the timeline

Share I didn’t mock this up, but I think a pie-menu share button (with c/p, Twitter, email, and Facebook buttons) would be cool.

Powered by WordPress. Designed by WooThemes