User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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.
The controls naturally reside next to the time bar slider. This slider is horizontal, so they fit best on top or on bottom.
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:
So starting from the top, drilling down, the controls should go with the song, that will end up in the bottom.
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:
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?
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.
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.
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.
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.
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.
