(The icon on the left is suited for 16x16 size. The icon in right is the same icon, just suited for larger scales)
I think this scheme is supported by FreeDesktop.org's Icon Theme Specifications and other icon theme's used on Linux desktops (like Tango) use the same scheme.
Glad he got into (and linked to the excellent article about) font hinting, because that is of course the solution. A simple vector format is not enough, you need to define what parts should scale how, which are rigid, which are elastic.
I don't think higher resolution displays actually help, because the real limitation becomes the human eye. Though the new display could use the 'old' normal sized icons as small ones, your eye couldn't distinguish some of the details that worked before.
Anyways, it is an interesting problem and one that I don't envy designers for.
Scaling artifacts occur because at smaller sizes the quantitization of the unit pixel overwhelms the details of the image. When I was a system programmer at the Image Processing Institute at USC (you know the source of that Lena picture :-) this was characterized as the frequency response of the display. So if you were to take a horizontal line across the pixels, and then plot their intensity vertically along a line (so x becomes the position in the line, and y is the intensity of the pixel at position x) then you can then do an FFT across those pixels and see the distortion in the visual signal from the source material to the displayed material.
Now the part that gets confounded in articles like this one is that the UX designer doesn't really want a 16 pixel icon, what they want is an icon that has a certain size with respect to the whole screen. Working backwards, lets say the icon ended up being 16 x 16 on a 1024 x 600 screen which had 72 pixels per inch. The icon is about 1/4" on a side (.22" but you get the picture). Now on a screen that that has 240 pixels per inch, that icon at 16 x 16 pixels is only .06" or nearly impossible to see, but if you keep it at 1/4" you get 60 x 60 pixels to work with.
So lets bring two things together, you do 'hinting' because the artifacts that are created by the quantitizing effect of pixelation cause you to lose information. As screen resolutions get denser the information lost goes down (less quantization, or more signal bandwidth is available) so once your signal loss from a straight mathematical shrink is acceptable in all required sizes your done.
Bottom line is that this won't be an issue when the minimum icon size is being rendered into a field of 128 x 128 pixels or more. Might take one more generation of screens.
The second thing is that while a designer can poke pixels to get an icon that looks good, so can the computer. One of the things you can do is compute the frequency 'footprint' of the image, then change the render until the render foot print is as close as you can get to the original. HP did this for their ink jet printer half-toning algorithm. In a 16 x 16 pixel space you could almost exaustively search it on a modern machine.
If you read the closing paragraphs of the article, you will see that I do talk about the physical size of the final representation of the pixel-based icon. However, just because you can use more pixels on higher-resolution displays, it does not mean that you can just take a highly detailed vector artwork and display it.
Being able to display very intricate details for each icon is not necessarily the end goal. The end goal is to preserve the clarity, which is why smaller icons (physically, not pixelwise) should have smaller amount of detail compared to larger ones.
In your example, a 128x128px icon that occupies the same physical size on an extra-high DPI screen as a 16x16px icon on a lower-end screen can (mathematically) have 8 times as much detail along each axis. Just because this is possible to do without losing the signal quality on the level of individual pixels, does not mean that it is desirable from the UX / UI perspective.
So when you go from thinking about pixel size to thinking about physical size, you're going in the right direction, but you're not going far enough. The relevant metric is more like "the angle subtended at the user's eyes", kinda like how the "CSS pixel" unit works.
Now, given that it's almost impossible for software on the device to know how far away the user is, trying to design up front for that metric (angle subtended by the icon) is also almost impossible.
And even if you did know both the pixel density and the distance to the display, that still doesn't take into account the fact that users will vary in their visual acuity. The right design choice for a 20-year-old user holding the display close to their face is going to be dramatically different from the right choice for a 70-year-old holding the display at arms length.
You can't really design well for all those possibilities up front. The right answer has to involve allowing the user to adjust the "zoom level" to their liking. And that level of flexibility means that automated approaches (possibly something like freetype's autohinting, extended to work in color) are probably going to be a better approach than manual pixel tweaking.
There are two problems you are conflating. One is that low-resolution icons have visual artifacts, and therefore manual pixel hinting is valuable. In general though, this problem only crops up for very small icons, say smaller than 32x32. But as screen resolutions increase, this problem will get easier.
The other problem is that at small sizes, we want icons to be less detailed and therefore more recognizable. A quarter-inch icon two feet from the eyes should have very little detail. This is a problem that vector graphics are very suited for. One can specify a low-detail icon that should be used when the real size of the icon is below some threshold, no matter whether that screen space is 64x64 or 20x20. In a world where the screen resolution of an icon that size can vary by more than a factor of two, using pixels is the wrong approach.
Cool! Do you have a link/paper/book?
Are exemplar uses of the FFT to analyze the signature and content of an image. Since a lot of work on this was done in the 80's I would expect some good summaries in the current texts on image processing.
Pixel art is a very different medium from what they’re used to, and there are specific techniques that they haven’t learned, largely because they don’t even know such techniques exist. They don’t know how (or when) to antialias or dither by hand. They don’t know what banding is and why to avoid it, nor what selective outlining (“selout”) is and why they need it. They especially don’t know how to correctly choose a good, limited palette. All of these things taken together make for designers at best reinventing tools and techniques, and at worst making icons that suck.
But what can you do? Pixel art isn’t a popular medium, so the wealth of knowledge out there goes to waste. It’s such a pity.
I suggest you check out Pixeljoint—coincidentally it’s down today for a server upgrade, but the community offers excellent feedback for new artists, and the tutorial section has links to some great resources. Pixelation is a great community with many experienced artists from the pixel world and demoscene. You’ll also find a couple of tutorials on an older site of mine, Studio Purloux. One is a general tutorial by my good friend Kevin Chaloux, an outstanding and highly regarded pixel artist; the other is my own introduction to manual antialiasing. That should be enough to get you started.
For icon designers out there, I'm curious how many are already aware of this distinction and are designing icons accordingly?
I know I personally cannot tell the difference between the example comparisons in the post. Not sure my users would. I'll probably a/b test it with them at some point to be sure. Until then, my impression is that vectors are a net positive.
The difference is irritating and clearly noticeable for e.g. the "Documents" icon if you compare it to the "Go" menu. And it's not because the big versions are bitmaps, it was mostly the missing outline and lack of contrast.
(I still find them much faster than the monochrome versions (and with a smile) :))
The Finder's "Go" menu is really a good example of tiny, clear icons.
Oddly the .ico format allows different versions for different resolutions, unlike most ther formats.
1. native support for optional manual hinting vector icons
2. native support for optional auto-hinting vector icons
Auto hinting is not the ultimate solution, but it can get you part way there, just like with fonts.
Even without auto-hinting, it still boggles my mind that "desktop" vector formats don't seem to support hinting at all: I recently discovered there is no possibility of hinting in SVG, therefore SVG fonts (fonts described using SVG shapes) can not be hinted at all, that's completely insane.
This is an area Apple is perfectly, ideally positioned to execute and lead on.
I wonder if one could implement vector icons as fonts in order to properly hint them.
That's exactly what is happening these days with custom font embedding having become practical (in web pages): http://somerandomdude.com/2010/05/04/font-embedding-icons/ (that was in 2010, but this thing is really gaining traction these days following the release of "Font Awesome" for Twitter's Bootstrap)
In desktop OS, that is in fact a very old technique, that's why the Marlett font exists in Windows .
It does have a significant inconvenient though: the icon can only have one color for the glyph and one for the background. This provides a crisp look but lowers the expressivity of the icons. On the other hand, if the color scheme changes for some reason (or can vary from one page to an other), it is very easy to match the icons's color scheme to that of the application.
I suspect that there would be a whole host of other issues (rending of baseline location varying by a pixel, etc.).
The article makes the bulk of the case for pixel optimization while discussing very small icons, and that's true, but it's a red herring. Interfaces should never rely on users being able to identify or interact with icons that are 16x16 pixels. At 64px, all of the icons seen in the article can be auto scaled successfully (in gimp, cubic transform): http://imgur.com/a/DOAyW
What we really need is to stop building hardware that demands 16x16 pixel elements, and to stop building interfaces that provide them. With high dpi screens, even character hinting becomes silly (or even without high dpi, I disable hinting on my 22" 1920x1080 screen because I like consistent letter spacing).
Pixel optimization experts may still have a place in the future, but it's likely in the same boat as audiophiles and $1000 HDMI cables.
I think an orthogonal challenge is convincing cross-functional peers that visual execution and all of the design details have a huge affect on the user experience, the product, and therefore the business. In my experience, it's rarely a straight-forward or painless debate.
As far as I know there's still a lack in tooling though, so you might have to write some "code".
Is there nothing like "Hinting for SVG" or an SVG equivalent to "Multiple Master" fonts (https://en.wikipedia.org/wiki/Multiple_master_fonts)?
Some of the examples he shows are much worse than reality. You can have outlines that don't increase in width for larger sizes.