Skip to content

And then there were seven…

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:

  1. Old School Metal
  2. Aqua
  3. Smooth Metal 1
  4. Smooth Metal 2
  5. Pro Interface
  6. 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:

Small old iTunesSmall new itunes

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.

iTunes backgroundsNo 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:

Info window 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 dotMovable 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:

Color differences

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:

iTunes Buttons

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:

iTunes thumb drag

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:

iTunes new rounded corner

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!

Tags:

32 thoughts on “And then there were seven…”

  1. "Also of note is the fact that the Browse button has vanished"

    It's still there when you select the Library as a source; it is replaced by the Burn Disc button when you select a playlist. It was this way in iTunes 4, too.

  2. Also, the way Apple indicates that the divider can be moved is with the the vertical resize control next to the Source header.

    I overlapped the iTunes 5 window and a Safari window and zoomed in with Universal Access. I can see the iTunes window behind the corner of the Safari window but not the other way around. When I did this with iTunes 4, I could not. I can see more desktop picture behind the Safari window corners than behind the iTunes 5 window corners. I'm wondering how the Photoshop thing worked out... Maybe it really is an illusion, though I don't know how I confused metal gray with bright blue from my desktop.

  3. Thanks for the great article.

    I think the thin line between columns looks fantastic. I see that above the line in the column header there's a grab handle indicated by vertical lines...

    My tiny gripe is that if the playlists don't fill their panel then the panel is totally clean, but on the browser side - if the songs don't fill their panel, you still see an empty gutter where the schroll bar would go. It's the same glitch you see in, say, TextEdit compared with Safari.

  4. Thanks a lot for article I like interface glitches of OS X:)

    Browse buttom also appears when you click folder of playlists (those folders are nice new feature BTW).

    iTunes 5 made me sick for the first few minutes but I acctually like it now. But anyway the same as with Mail 2 - I hate to see yet another interface in Apple's own application. It't the Windows way (with no offense, just my personal oppinion). I don't care if the interface changes from time to time, but Apple isn't changing things, they're just creating new windows and behaviors.

  5. Regarding the rounded corners, I messed up. I totally forgot that I had Snapz Pro set to take a "rounded corner" screenshot. Hence, I got the same curve in both apps. I'll have a revised version up shortly.

    Nice catch, and sorry for the incorrect posting...

    -rob.

  6. Not so fast…
    Your comparison of old and new window corners are bogus, since your iTunes 5 screenshot is also broken. I guess it was created with SnapzPro X's automatic modes which happily fakes a window border for you. Isn't it neat to have a screenshot utility which doesn't actually take a picture of what's on your screen but fakes it's own?

  7. Regarding #6: I realized that soon after reading PCheese's comments; it took me a second to understand why I was seeing different things. I've posted a revised version, admitting the error and including an image that clearly shows it...

    And yea, Snapz' ability to make "non real" screenshots can be a pain at times. At others, though, like when working on a book with hundreds of screenshots, it's a huge timesaver.

    I also re-took the iTunes "big" screenshot, so it now properly shows the new corners as well.

    -rob.

  8. It seems that some, perhaps most, people have a problem with the number different "skins" that OS X applications can use, and I don't understand why. That Apple is able to take artistic liberties with the cosmetic appearance of their applications while maintaining a very high level of usability is an achievement. Variety is the spice of life, after all. Even Microsoft now understands that such a kind of superficial consistency does little to affect _real_ usability.

    I think the dominance and longevity of the iPod has as much to do with iTunes as anything else. Apple couldn't have fooled so many people for so long if iTunes didn't have such an intuitive user interface. And if you think iTunes sticks out on a Mac, try it on the platform on which it is most used. It's like a fish out of water on Windows, but still the best at what it does. iTunes on Windows is what led me to buy an iPod, and then an iBook.

    iTunes is a unique application that performs a unique function. Why shouldn't it have a unique appearance?

  9. Rob, I am amazed at your ability to see such subtle differences between the old vs. new iTunes. On my 12" PowerBook screen, I barely see the difference between the Mail and iTunes colors (besides if the only way they can be distinguished is if they are side by side makes them, in my opinion, the same color). Also a 2 pixel difference in the radius of the fast forward and rewind buttons? I would never notice that unless, again, iTunes 5 was right next to iTunes 4.9.

    Thanks for the nice article.
    jeremit0

  10. The new style of the iTunes interface just looks out of place in Apple programs. Every other window has smooth curves which give an elegent relaxing look. The smooth curves are inviting and make the user feel like the application is easy to use, just by looking at it. It is subtle, but can be quite powerful. Now this is not to say people will shy away from iTunes just because it is boxy, but it certainly does not look as good. The other thing is that the search bar is still the oval shape that it always is, and now looks out of place as compared to all of the other buttons in iTunes. I live in a college residence hall and I have not run into anyone who has reacted positively to it. I just hope that this mundane boxy look is not one Apple plans on incorporating into future designs, and is isolated solely to iTunes.

  11. No one else has mentioned one huge benefit of having windows with different themes/colouring: It makes picking out the correct window in expose _much_ easier.

  12. Hey, good point. This is probably my biggest complaint about Tiger Mail, it has no drawer, making it 10x harder to pick out than Panther Mail.

  13. How come no one seems to have mentioned the missing button at the bottom 'the view video full screen', evident in 4.8 and .9. I must admit that I am often reluctant to jump in immediately and upgrade, especially in the light of how often ones playlists go missing or don't show up in the new version ? I don't really need the upgrade but I'll probably have to in the light of how the Quicktime upgrade is apparently tied to the iTunes upgrade

  14. When you select a video, you still get the full-screen button; it seems they've just completely hidden it now when it's not needed.

    -rob.

  15. Gut instinct tells me that the changes in the metal interface sprang largely from developing iTunes and Quicktime to be crossplatform (Mac + PC) but still as visually similar as possible, that the squarish window elements and overall layout space refinements were geared towards making windows users a little more comfortable in the environment of the Apple software as well as making it easier for developers to deal with the Windows APIs. In other words, making these apps still Mac-like, but a little less Mac-centric. Which makes it really intriguing that the first application to dramatically show these sorts of changes was Mail.

  16. Not only the colored side panel is different. Check out the thin movable column indicator in Mail. I think it's much nicer with greyish than black as in iTunes.

  17. Another change is that iTunes 5 cannot be made to fill the screen vertically. Try dragging it to full screen and you'll see a band several pixels high of desktop showing through below the iTunes window.

  18. I, too, really like the new iTunes interface. I think Apple did a good job making some subtle changes (the height of the top section, the buttons, etc.) as well as other more obvious changes (getting rid of the wasted metal side window borders, which just ate up a bunch of pixels). I also like the way it is similar to Mail, though I agree with Rob that too many interfaces spoil the broth.

    As to comment 17: I agree that this is a real pain; on my 14" iBook, iTunes won't fill either vertically or horizontally; on my 20" iMac, I don't use the full width, but those few pixels at the bottom are wasted.

    Rob, you didn't mention the search bar - this is clearly a superb interface element. While I see it in Mail when searching, I leave it visible all the time in iTunes because it lets me switch to different content in my library (music, audiobooks or podcasts) with a click. Brilliant use of a simple interface element.

  19. Pingback: ibjorn.se » Blog Archive » GUI: iTunes 5

  20. The first detail that sprang out for me was the bottom part of the window.. Can you see how the bottom "metal" part is slighly bent inwards, a probably unique interface feature in OS X.

    I'm not saying it's bad, but it's strange. On the whole, I like the new iTunes interface (though I haven't tried it yet)

  21. According to a friend of mine at Apple, the iTunes team have alledgedly designed the new look all by themselves, which would explain some of the inconsistensies between apps.

  22. Regarding #17: My guess for why that is relates to iTunes being cross-platform. I believe that's the amount of space (or close to it) that the "auto hide" taskbar takes up - a little strip of clickable taskbar is still shown so users know it's there.

  23. What about the "faceplate" of the information display area? As your pictures clearly show, the old one appeared flat. The new one is shadowed
    to appear rounded from top to bottom. While I like the 3D look, there is something about the color choices that makes it look like cheap plastic rather than, say, glass. Not really a usability change, although IMHO it makes the top display line easier to see due to contrast and the second a bit more difficult because the shadow line runs right through the middle of it.

  24. I think the faceplate difference is an optical illusion -- the only real difference I see is that the top line color is much darker in 5.0. The top-to-bottom gradient is identical (this is the "Source" header area we're talking about, right?). I took screenshots of each of them, put them side by side in PS, and zoomed in ... the gradient is the same.

    Or is it something else you're discussing and I'm completely missing the point? :)

    -rob.

  25. Sorry, wasn't reading nor thinking well, it seems :). Got it, the two-tone shading in the info window. Personally, I think it looks a bit strange, but apparently not strange enough for me to notice the first time!

    -rob.

  26. I am smitten with the new style queue's in both itunes5 and mail on tiger

    note the pale blue spine on the left in each
    ... next note the top bar in itunes it says
    "source"

    see those three verticle lines there...
    between those and the gradients and silver
    i constantly am reminded of the Luxury 4x4
    RangeRover -- have a look
    http://www.motorpoint.com.au/images/range_rover_hse_5.jpg

    class begets class

    refined defines

    i dont have a range rover, but they are masterfully designed and if you ever saw
    the specifications compared to others in their segment ...

    like the mac .. they are a cut above

  27. Gee, you guys have a lot of time on your hands for critiquing the look of a _tool_.

    The new Milwaukee Hammer Drill is just completely stupid looking. I mean come-ON. They changed the red metal to be red plastic. I can barely stand to look at the thing when I'm drilling through concrete. Truth be told, I'm embarassed by the new trigger which is 1 mm shorter.

    I'm just so conflicted because even though I think this new company direction of Ruby Red instead of Rose Red is second worse only to the holocaust, I'll still buy every product that Milwaukee makes.. regardless of how much I bitch about it on online forums.

Comments are closed.