Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Among alot of the music players around the player controls have usually been arrange to the top of the application window, or to the bottom.

What is the rationale behind the positioning, the choice of placement?

Edit ↓

In which cases should one go for top-aligned controls when designing?

In which cases should one go for bottom-aligned controls when designing?

share|improve this question
    
I prefer when the controls are close to my taskbar, so I can switch to the player and pause the music quickly. Of course there are other ways to do that (Windows 7 has player controls on the preview window, Ubuntu's unity has an applet next to the clock, your keyboard might have a shortcut for that), but sometimes you need to do it the old way. Personally, I usually use taskbars at the top of the screen (sometimes on the left), which integrates nicely with top controls but is annoying on Windows Media Player, which has bottom controls... –  marcus Sep 6 '12 at 21:21
add comment

8 Answers

To build on Benny's answer, which I really like, I think there's a natural mapping here. Cassette decks used physical buttons, which didn't work so well when you put them vertically. In order to put the buttons on the side, you'd either have to stack the buttons vertically or significantly extend your UI area.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Intuitively, neither of those options really work. I don't think there's an explicit logic behind it, but they just don't feel right.

Good old Winamp did a bunch of funky things with button placement using skins. While fun, none of those designs really caught on as the norm. A more standard top / bottom row of buttons is what we're used to, and it's what people have come to expect. Just like how green means go, and red means stop. Winamp Skins

share|improve this answer
    
+1 for natural mapping! –  Benny Skogberg Sep 6 '12 at 17:41
3  
+1 for the Winamp images as a contrast. –  Burhan Ali Sep 7 '12 at 6:02
add comment

The controls naturally reside next to the time bar slider. This slider is horizontal, so they fit best on top or on bottom.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Why put it on top in iTunes? Because toolbars and quick actions historically go there.

Why put it on bottom in Spotify? Because of hierarchy and our reading order left-to-right and top-to-bottom:

  • A directory (left) or a search (top) is used to find a list of songs,
  • A list of songs (from an album, an artist or a playlist) contain the song,
  • The song has controls.

So starting from the top, drilling down, the controls should go with the song, that will end up in the bottom.

mockup

download bmml source

share|improve this answer
    
You would favor a bottom-aligned design then? –  yusf Sep 6 '12 at 18:10
2  
I'd only favor congruency with the rest of the design. Which is clear in both iTunes and Spotify (while WMP not so much), and I prefer the keyboard media keys anyway. :) –  JOG Sep 6 '12 at 20:16
add comment

As many other digital controls, this one probably originates from the cassette player button placement, where you mechanically pushed the audio head onto the tape on a cassette player. When the audio player was possible on a software, designers probably thought it would be a good idea to mimic the real worlds cassette players, which looked like this:

Cassette player


Note to reviewer: This answer was made to the original question, having a different meaning

Why put the controls in the bottom of a music player UI?

Among alot of the music players around the player controls have usually been arrange to the top of the application window, or to the bottom.

What is the rationale behind the positioning?

share|improve this answer
2  
This seems like a guess to me, especially since there were other music players with controls all over the place. Can you make a more concrete connection between the two? –  dhmholley Sep 6 '12 at 13:05
    
@dhmholley I'll do my best –  Benny Skogberg Sep 6 '12 at 13:06
2  
You couldn't put controls all over the place: in the days of early (piano key) cassette players you had to keep the buttons close to each other as you had to press down both the record (red) button and the play button at the same time using two fingers to start recording. –  PhillipW Sep 6 '12 at 15:29
    
I might have messed up your answer by modifying the title a bit. :S –  yusf Sep 6 '12 at 17:59
    
@yusf No worries! One can see the original question if one clicks on the edit time link. I might get back and make an update later :-) –  Benny Skogberg Sep 6 '12 at 18:26
add comment

Bottom positioning is usually used at players, that have both audio and video possibilities (WMP is most popular one). And in video playback most important stage activities usually is placed over the middle of the frame (especially faces/eyes of video participants). Also to manipulate playback you don't have to move cursor over the scene (and disturb any action) — that is another reason of placement at the bottom.

So it originates from backward compatibility with video playback and to maintain consistence between audio and video controls. In other cases top or bottom placement usually goes from visual hierarchy and other goals — so there is no straight pattern.

share|improve this answer
add comment

When viewing the applications from a desktop (e.g. with a mouse), top or bottom makes little difference in terms of space used or usability. Thus, the decision of where to place important controls is more a matter of taste.

However, for touch-friendly/mobile devices, bottom is definitely the better option. This is because your finger does not have to travel as far or cover up the main display when you use them.

Thus, to achieve consistency between desktop and mobile versions of the applications, mobile wins and the most heavily-used controls should go at the bottom.

share|improve this answer
    
Guess Android didn't get that bottom toolbar memo heh? –  yusf Sep 6 '12 at 18:00
1  
@yusf: I don't have an Android device, but I did search for "Android music player" on Google images, and through at least the first 50 images, every result that had play/ff/rew buttons had them below the viewing area, so I apologize but I'm not sure what you are referencing. –  Briguy37 Sep 6 '12 at 18:51
add comment

The biggest reason to place them at the top or bottom is scanability. You can very easily glance immediately to the top or bottom of the player, regardless of the content, without a close look. If the buttons are in the middle you have to search for them.

Also as Matt Obee mentioned, it makes the most sense for the time bar to be horizontal (how time is generally represented in info visualization) so a vertical layout for controls is generally ruled out.

As for why is the bottom the most common position? I suspect it's largely because it's often where TVs present menus/overlays. Any sort of "pop-in" menu often appears at the bottom (like Youtube's controls).

I'm not sure there's a great reason for bottom alignment being the most common (though if you have a large TV craning your neck up is usually less comfortable than glancing down, an TVs are usually at or above eye-level), but it's now common enough to be a convention. Once something's a convention it's rarely worth challenging conventions without real data to support a change.

share|improve this answer
add comment

It is in part due to the progress bar, which of course needs to be presented horizontally; it makes sense for the playback controls to be located in the same place.

share|improve this answer
2  
But why at the bottom? –  JonW Sep 6 '12 at 13:06
    
It's not always the bottom. The question asked why they are often arranged "to the top of the application window, or to the bottom. I believe it's just because the horizontal width is required. –  Matt Obee Sep 6 '12 at 13:09
    
Why does a progress bar need to be presented horizontally? Actually, that could make a good question, hang on... –  dhmholley Sep 6 '12 at 16:11
    
That question was added as "Why are progress bars horizontal?" –  3nafish May 17 '13 at 14:54
add comment

I think iTunes did it on the top perhaps as it's like a toolbar, and according to Apple HIG, toolbar should be at the top.

Spotify does this at the bottom as they try to act like a browser it seems, and somehow the music toolbar went to be a secondary toolbar (pretty funny for a music player). Personally, I don't like that the Spotify controls are at the bottom.

Windows Media Player has its toolbars because of movies, as Alex said, this is plausibe - if the content itself is visual, we expect to read it from right-to-left, top-to-bottom. In case of videos, it'd be disturbing to have meaningful content at the top which doesn't belong to the actual media. For similar reasons, sometimes gallery applications of online newspapers place navigation at the bottom and try to have the fewest top elements possible.

share|improve this answer
    
The browser argument seems legit, as Spotify positions itself besides it's kins such as Grooveshark and other browser based music services. –  yusf Sep 6 '12 at 18:37
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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