28

Is it okay to place video controls at the top of a video? Like so:

VideoControlsTop
Mainly considering a full screen video streaming platform like Netflix, I believe this format has some benefits:

  • Subtitles would always be visible and wouldn't jump around when the video controls are shown. This also applies to text overlays like names/ descriptions in interview situations.
  • In my opinion this follows the natural flow of a web page. The browser toolbar and controls display at the top, along with the website menu bar/ other important interactions.

The only downsides that I can think of right now are:

  • On mobile devices the users hand would be more likely to obscure the screen.
  • It's just not what users are used to.
Improve this question
4
  • 5
    Jumping of subtitles is not obligatory. I've seen some video players when subtitles are situated above the video-navigation controls. When controls fade, subtitles still on the same place
    – Schullz
    Jan 27, 2016 at 12:31
  • 7
    On a mobile device you have the problem that the controls are at the top of the screen - and the thumb is at the bottom.
    – icc97
    Jan 27, 2016 at 16:54
  • Didn't Windows Media Player Classic do this?
    – user253751
    Jan 28, 2016 at 3:55
  • @immibis The seekbar & controls? I can't even move them anywhere aside from the bottom in MPC.
    – Martheen
    Jan 29, 2016 at 6:23

3 Answers 3

Reset to default
35

I just don't see much benefit, while the downside is significant.

As for the benefits you mention:

  • The point about obscuring subtitles seems quite minor to me. Typically when using the navigation, the user is necessarily distracted from the video content, anyway. Update: some people have pushed back about obscuring content. However, if the user needs to see all content when navigating, resizing the window seems like a fine solution. The subtitles moving up slightly would not matter much.
  • The configuration of a web page with navigation at the top is mainly due to variable-length content that may not all fit on the screen. It is important to make sure the navigation is visible, and it is much easier to do this by putting the navigation at the top. This doesn't apply to a video though, since it is a fixed viewport that always must be completely visible to be useful.

The downsides you mention both seem important:

  • More and more users are using touch input--not just on phones and tablets, but on some newer laptops and desktops as well. Obscuring the screen to access the video controls will be a nuisance for all of these people.
  • "It's not what users are used to" is a big deal. It will make a major difference to the comfort users have with your app/site, so don't do something different unless there is a compelling benefit.
Improve this answer
5
  • 4
    Plus: With Mobile Devices I don't care so much about obscuring the screen - more about it beeing really hard to move your thumb up to the upper hand of the screen when holding the device! When Watching on a tablet holding it with one hand, I almost certainly drop it when trying to reach the very top of the screen. My Hand is at the Bottom, the controls should be there too!
    – Falco
    Jan 27, 2016 at 13:05
  • In a lot of cases you want to read the subtitles while using the controls, for example you want to seek to (around) a location where something is said. If the controls hide the subtitles then this is a big no-no. If they jump around it's also a bit annoying, although not that severe. If the platform is something where subtitles are important (like a language learner site) I'd definitely start thinking about alternatives, and putting the controls on top might be a good idea. Otherwise no
    – SztupY
    Jan 27, 2016 at 14:02
  • 1
    I've gone so far as to move the floating controls in VLC to the top of the screen so they don't obscure useful content in the videos I watch. I know this is just one anecdotal data point, but in my case the benefit is significant while the downside is minimal. So I don't think the case is as clear as you make it out to be.
    – David Z
    Jan 27, 2016 at 14:38
  • 3
    Another thing you might add is that users who are accustomed to moving their mouse out of the way put it at the bottom/right where the cursor is out of the view of the screen. So, having the controls at the bottom, allows the cursor to always be near the controls. If it's at the top, either the cursor is not left near the controls, or the cursor is stuck overlaying part of the video. (I know some systems will hide it automatically after n seconds, but not all do)
    – David
    Jan 27, 2016 at 15:44
  • @David, yes that is a good point. Even on systems that hide the cursor, I tend to move it to the bottom, since it is annoying to wait for it to disappear (or have it reappear if you accidentally touch the mouse).
    – user31143
    Jan 28, 2016 at 7:15
15

The top of panels is usually reserved for controls over the panel itself, not the content of the panel.

For instance, in your example you have the Full Screen icon in the top-right, which at a glance is strikingly similar to the close 'X' icon that would dismiss the panel altogether.

Also, out of context it's hard to tell whether it'd work. As a single window like your mockup is one thing, but when embedded into a page with content and browser-chrome surrounding it it may be another matter.

Now that doesn't mean it isn't acceptable, but you'd need to test it. You may find people are more annoyed about it than not.

Improve this answer
7

Instead of asking "why shouldn't I?", ask "why should I?".

Currently the de-facto standard is to put the timeline at the bottom. Changing this will cause mental friction, so you've got to have a good reason not to follow standards. If you have a good enough reason, then yes, maybe, maybe, move it up. But consider alternative solutions first.

Why do you want to move them up?

To be consistent with other parts of the interface? Well, there's a taskbar on the bottom on the PC, and there are generally buttons on the bottom of a phone. If there's a scrollbar in a browser window, it's at the bottom. So it's not exactly like all interactivity is at the top.

To stay out of the way of subtitles? Like someone already mentioned, when you use the controls, you're not focused on the movie itself anymore; often the screen even goes a bit dim. But lets say you want to pay attention to both. What's the true problem? The (red) bar gets in the way of text. Not the play or fullscreen buttons on either side. Just the red line.

So what if we move that line down to the bottom of the screen, and move the text up a few pixels, if necessary? Here's a mockup:

enter image description here

Improve this answer
2
  • 1
    I largely agree with your answer. However, the video player may not have control of the subtitle position. Depending on the application, subtitles or other text may be embedded in a video rather than positioned there by the player.
    – user31143
    Jan 28, 2016 at 12:18
  • @dan1111 Yeah, but we're talking edge cases here. Any editor worth their salt would be aware of the safe area and whitespace/padding. My example was taken from a random google image, all I did was throw in some shapes in MSPaint. Of course, the red line could be lowered even more, could even be just the bottom row of pixels likw how Win10 shows running processes ( howtogeek.com/wp-content/uploads/2015/01/… ). You're absolutely right, but I tried to find a 99% solution that wasn't too drastic.
    – PixelSnader
    Jan 28, 2016 at 16:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.