A while back, I wrote about the many faces of Apple’s OS X applications. At the time of that writing, I identified six-ish unique interface looks:
- Old School Metal
- Smooth Metal 1
- Smooth Metal 2
- Pro Interface
- Other/No Interface
With the release of iTunes 5.0, it seems there are now seven interfaces. For lack of a better description, I guess I would call this one Smooth Metal 3—it seems to incorporate aspects of both Smooth Metal 1 and Smooth Metal 2, yet it doesn’t exactly match the look of either of its cousins. Its predecessor, iTunes 4.9, fell squarely in the Old School Metal bucket. Here’s how the new iTunes interface looks, compared to the old:
On the left is iTunes 4.9; on the right is iTunes 5.0. Click either image for a full-size version of each screenshot. There are many differences between the two interfaces, some obvious and some not so obvious. Keep reading to see some of the changes in detail, as well as my opinion on the new iTunes look.
No more metal: The most notable change is the switch from brushed metal to a solid gradient background for the header, as seen at right (old iTunes is the leftmost of the two images). I really like this change; I was never a real fan of the metal look, especially in an area as large as the iTunes header. The brushed look on that much window area made the window look too “heavy” for my eye. I also find it harder to read text against a brushed metal background—compare the word “Search” in both full-size screenshots above. Against the brushed metal, Search looks a bit fuzzy and washed out; on the solid gradient, it’s darker and crisper.
Smaller Header: The new version of iTunes has a much sleeker header—the vertical size has shrunk from 90 pixels to just 75 pixels, a nearly 17% reduction in height, nearly all of which is due to the repositioning of the volume slider. In iTunes 4.9, the slider was below the play control buttons; now it resides to their right. I’m all in favor of changes to reduce the amount of wasted space, and this seems like a fair trade-off, as the old header had a lot of unused empty space. The slider, amongst other elements, also resizes automatically as you scale the window, so you can still have a relatively narrow iTunes window.
Also of note is the fact that the Browse button has vanished; you’ll now have to use the keyboard shortcut or the menu to access the Browser panel. [Corrected per the comment from PCheese—thanks!]
Info Window: The second most-obvious change in the interface is in the information display area:
In iTunes 4.9 (top image), the window shape was an very-rounded rectangle; iTunes 5 (bottom image) sports a larger rectangle with very subtle rounded corners. There are three display lines in each version, but the displays operate much differently. In iTunes 4.9, clicking on the first row toggled between song, artist, and album display; clicking the second row toggled total time, elapsed time, and remaining time. In iTunes 5, the first row displays the song name, while the second automatically alternates between the album name and artist name. Clicking the first row has no effect; clicking the second temporarily toggles to either album or artist, though the alternating display behavior returns shortly thereafter. The third row now displays elapsed time on the left of the progress bar (which now features vertical ‘completion bars’ that fill in as the song plays), and either time remaining or (if you click the time remaining) total time.
One other positive aspect of the new shape of the info display is that there’s room for the same three rows of information in the “mini” iTunes window (hit the green zoom button to switch to the tiny window), which is actually the one I use the most. In iTunes 4.9, you’d only see two rows of information (artist/album/song info, and elapsed or remaining time). Overakll, I really like the new info display; you get much more information in the same three vertical lines of space.
Movable column indicator: In previous versions of iTunes, a thick bar with a centered dot, as seen at right, separated the playlist and library column from the main information area in iTunes’ main window. In the new version of iTunes, the thick bar and dot have vanished, replaced by a single thin line with no obvious indication that it can be moved—at least, not until you mouse over it and notice the cursor change. (If you have enough entries in the Source column, you will see a scroll bar dividing the two areas, just as in Mail.) While I prefer the thin divider line, it may not be obvious to newcomers that they can easily resize their playlist display by simply dragging what appears to be a solid dividing line. Note that there is an indicator (three bars) at the right edge of the Source column, indicating that the column is resizable. I didn’t notice the bars at first; thanks to Andrew Burke for pointing them out in his comment below.
Colored side panel: New to iTunes 5 is a colored sidebar area (it was white in previous versions), quite similar to the colored sidebar in Mail. At first, I thought the colors were identical in both programs, but a bit of Photoshop work proved me wrong:
The above shows the subtle, yet easily visible, difference in the shades of blue for the two sidebars. If you can’t see the difference there, just open Mail and iTunes, and drag one window over the other—it’s clearly a different shade of blue in each sidebar. For those who care about such things, Photoshop tells me that Mail’s sidebar is RGB #EBF0F8, while iTunes is RGB #E7EDF6. I’m curious as to why the two colors aren’t identical—do the teams not discuss their plans with each other, or are there no standards for sidebar colors and we’re all just lucky it didn’t come out in vivid purple, for instance? It’s not a huge issue, obviously, but it is strange that the colors are so close yet not quite identical.
Button Design: The buttons in iTunes 5 have also received some attention. One minor change is that both the fast forward and rewind buttons have gotten slightly larger—they had a 28 pixel diameter in iTunes 4.9, and now they’re up to 30 pixels. With the relocation of the volume slider, there was room for this expansion without making that section of the header look too busy.
The more obvious changes occur in those buttons at the bottom of the iTunes window:
The top row in the image above is from iTunes 4.9; the bottom is iTunes 5. The new buttons have lost some of the roundess in the corners, and are more clearly outlined against the solid gradient background. I think they’re much cleaner looking, but the grady shading at the bottom of each seems just a bit too dark to my eye.
Resize Thumb: The final visual change I noticed is in the resize thumb at the bottom right of the window—it’s become a much smoother, more subtle button than it was before. The close-up below shows the changes; on the left side is the iTunes 4.9 thumb, which uses a near-black color for the darkest of the lines:
In iTunes 5, the darkest lines are now just dark gray, and they don’t leap out as strongly as did the old version. I’m guessing Apple was able to make this change because the background is now uniform, allowing the use a lighter shade that would still stand out enough to be visible. If you look at the full size images, you’ll see that the new thumb looks much smoother than did the old; I like it.
Rounded Corners: The last thing I’d like to bring up is something that Jon Gruber mentioned in his hilarious look at the new iTunes interface through the eyes of Brushed Metal. He mentions that the radius of the iTunes’ window corner has changed, and he’s completely right. Note: I originally thought the two versions were the same, but that was due to, um, operator error—I use SnapzPro for my screenshots, and I forgot that I had it set to apply a ‘rounded window’ border to all images. Hence, my new iTunes window received the old rounded look, courtesy of SnapzPro (I’ll have to see if they can add a new rounded form for the iTunes look, assuming it’s coming to other apps as well). In any event, the radius is notably different, as you can see here:
On the left is iTunes 4.9, with what looks to be a four-step rounded corner. On the right, iTunes 5 and a new two-step rounding. I’m not honestly sure which one I prefer, but it’s yet another example of interface randomness on Apple’s part! Good catch, Jon!
Conclusion: I personally really like the new iTunes interface, and hope this is a sign of the direction we’re headed with Apple’s applications. The smooth, darker background is easier on my eye than the metal stripes; the buttons have a cleaner look; and the functionality improvements in the display area are most welcomed. Of course, with seven different interface styles now in use, I’m not holding my breath for the day when we have but one or two!