Having that 3d “look” vs 3d effects

After finishing a good twitter rant on the subject, I felt a need to write a bit about the updated UI for iTunes 09 (figure 1), specifically the new look of the Toolbar compared to iTunes 08 (figure 2).

Figure 1: iTunes 09 Toolbar

It looks to me like the new iTunes UI is leaning towards a stronger 3d representation of the objects (buttons, slidebars, etc.). I call this “the 3d look”; trying to look as if it were a still of something in the real world, or as close to real as you can get. Here are just a few of the changes:

• The track controls have a strong reflected light.
• The “trench” that the volume control slider slots in has been filled in.
• The track display has a strong gloss, as well as a strong reflected light.
• The search field has a strong inner shadow, giving it a concaved feed.

Figure 2: iTunes 08 Toolbar

The iTunes 08 UI objects had a strong but selective 3d representation of the objects. I call these “3d effects”; using 3d techniques to add texture and depth, but selectively. For example:

• The track controls had a strong border providing good contrast.
• The “trench” for the volume control slider, and the slider itself have strong contrast.
• The 3d effects on the track display are minimal and do not conflict with the content within.
• The search field is solid white, provided clear recognition

While the visual enhancements to iTunes 09 may make it look more “real” than its predecessor, for application UI it seems to be a step back. Why? The objects in the UI start to blend the UI together.

3d “look” vs 3d effects

In the real world we have the ability of depth perception, created by the fact that your eyes see an object at different angles. Even though a red box might be nailed to a red wall, shadows and depth perception allow me to perceive the red box as an object in front of the wall. You can test this out on your own by setting an object on a table and stepping a few feet away from it. Walk towards the object and pick it up. Now back away again, cover one eye with your other hand and try it again. You will notice that you make a conscience effort to calculate your distance from the table, and to calculate the moment when your hand is close enough to grasp the object.

In a 2d environment this can be somewhat translated to the visual recognition of objects (buttons, fields, etc.) and the ability to quickly identify an object from its surroundings. This is achieved by designing objects with different colors, tones and effects (borders, shadows, highlights, 3d, etc.) to separate them. When you give an object in your UI a 3d look, you try to make it look as close to real as you can. When you give an object in your UI a 3d effect you use the same techniques to add texture and depth, but selectively. In addition to this you may add certain effects that are not found in nature; a light highlight around the edges of button gives a sharp contrast but is not the results of the same light source that gives that button a bevel. 3d effects work for UI because they respect the object and its need to contrast with the surroundings. A 3d look tries its best to make the object look “real” but in doing so you loose the visual separation of the object and thus your UI starts to blend together.

Now I’m being a bit harsh in my analysis of the new iTunes UI, and the difference is slight in this case, but I felt the urge to write this article and put my theory up for public scrutiny. Do you agree? Am I being over analytical? Let me know.