How should Apple review CoverFlow and introduce 3D icons

CoverFlow was a revolutionary new feature which first appeared in iTunes 7 in 2007. It was a very usable feature and it gave us the ability to visually browse through our albums, songs. Although it was only spectacular when you had your songs tags properly filled with the artist info, and also you had the cover for the song included in the song file.
For music CoverFlow was ideal. Cd cases are almost two dimensional, they don’t have depth, so it is easy to display them in CoverFlow without distortion.

But then Apple extended the CoverFlow view to the whole system with the introduction of Leopard at the end of 2007. Also in Leopard the native size of icons are 512 x 512 pixels to enable us to view CoverFlow in bigger sizes. Now here comes the BIG PROBLEM. This won’t be boring! Read on!

Apple has a document entitled Human Interface Guidelines (HIG). In this document they describe how an icon should look like. Now some quotes from the icon perspectives section:

The angles and shadows used for depicting various kinds of icons are intended to reflect how the objects would appear in reality. All interface elements have a common light source from directly above. The various perspectives are achieved by changing the position of an imaginary camera capturing the icon.

Perspective for application icons

Application icons look like they are sitting on a desk in front of you.

Now I will discuss the Application icons, but almost the same applies to the Utility icons.
As you can see in the above image, we are watching the icon from a top view, as the are sitting on a desk. The vanishing point of this perspective is at the top of the image far above. Also if the icon shows a 3D object then it is crafted to fit in this perspective, and its lines represent the directions of the perspective.

But take a look at the Coverflow view:

textedit.png

As you can see in CoverFlow, the viewer sees the scene from a much lower point. From just above the reflecting surface. The vanishing point of the Textedit icon is still at the far top of the scene, while the side icons’ vanishing point is probably behind the icons. To show you the perspective of these side icons I’ve created an image:

False perspective

Although this perspective is not properly drawn because the vanishing point of the left side folders and the vanishing point of the right side folders are not in the same location. Additionally, every forthcoming icon has another vanishing point. This is a false perspective, and it feels strange when you look at it. As if it’s an optical illusion.
The problem gets bigger when we want to watch 3D icons in CoverFlow:

Hard Drive

You can see that the icon is crafted following the HIG’s guides. But in CoverFlow the Hard Drive’s icons look strange, as if it’s stood up from behind. It is because the icon’s perspective and the CoverFlow’s perspectivic view are not the same.
Now even worse, when a Hard Drive’s icon is in side view, it is totally distorted.

Hard Drives totally distorted

The hard drive should look like a bit turned, but it is the same flat perspectivic image very distorted. This is a very good example of first drawing a 3D object into a flat thing then try to display that flat image in 3D. This is a big mistake.
Some applications’ icons are look even more strange, for example the icon of Chess:

Chess

The icons of macs have a bit better perspective, as they are probably designed to fit in the CoverFlow:

Newer icons are better in perspective

But if they are in side view they also lose their good look with the horrible distortion.

Another mistake is the reflection of the icons on the shiny surface of the CoverFlow scene. In the above picture you can see a good example of this phenomenon. Instead of a real reflection the icon is just simply mirrored with a bit opacity applied to the reflection.

These mistakes can only be corrected in tho ways:
The first way is a bit easier than the second. Every 3D icon has to include three views: left side view, front view and right side view. When an icon is in the left side position it should show its left side view with the correct perspective, when it is the focused icon in the center it should display its front view, and when it is at the right side position it should display its right side view again with the correct perspective.

The harder way is to create 3D models (!) of the icons, and rotate them as they move from place to place. This will definiately improve the apperarance of the user interface but it also needs better graphics hardware. And of course hard work to “redraw” every single icon into a 3D model. Also the name would be a bit comical as we cannot talk about icons when they are models. So maybe we can start to think how we should call the 3D icons.
Also with 3D models the reflection can be drawn properly.

The perspective of the CoverFlow view is very similar to the perspective of the Dock, so this essay should apply to the Dock icons also.

Dock

I’ve created a sketch about how to do this whole perspectivic things properly, suggestions welcome! Apple might implement these things in the next generation of OS X. I hope they will note this writing and find useful points in it.

My concept ot the realistic, true perspectivic Coverflow

András Bognár
24. March 2008.

Ps. If you enjoyed this post, please support me to be able to continue this blog with useful and exciting entries. You can donate via PayPal. All donations very appreciated!

, , , , , , , , , , , , , ,
Andris | 2008. március 26. 18:52 | apple, dev, grafika | Trackback

2 hozzászólás

  • 3D Icons would be nice, but as the step from 32×32 to 128×128 and to 512×512, it would be a tough one especially for small developers.
    But I suppose it’s the only thing that would make Coverflow and the 3D Dock look right, and would create more jobs in the icon design market 😛

    Zydeco | 2008. március 26. 20:23
  • Apple should release an icon model creator app, which can import the most popular 3d formats 😀
    Or the other solution which is easier…

    Andris | 2008. március 26. 20:27