Hollow Icons

Curt Arledge ran a user test to find out whether hollow icons perform any different to solid icons. Hollow icons are an icon aesthetic popularized by iOS7 — icons that are composed of thin lines rather than filled in shapes. It was previously theorized that this icon style required more cognitive processing, and thus would perform worse than typical solid icons.

Arledge found no significant variation between the icon styles. One combination performed worse than others: white hollow icons on a black background. Others performed similarly, irrespective of whether the icon was on a white or black background. What seemed to matter most is not the style itself but how meaningful the design of the icon itself is. For example, a filled in speech bubble is less recognizable than a hollow one because a speech bubble is something that is often depicted as an outline. On the other hand, an outline doesn’t add anything to the icon of a cloud, so a solid shape performed better in that case. Arledge also found that the lock icon performed the worst. Looking at the lock icon used in the test one could guess why: the thing has no keyhole, and so looks just as much as a shopping bag as it does a lock. Adding a keyhole would likely provide enough of a clue to dispel the confusion. The takeaway here is that the style doesn’t really matter — at least not enough to make a significant difference. What matters is how well the icon represents its object. If the icon is good, then it will work whether or not it is implemented as a solid shape or as an outline.

author picture Written by Dmitry Fadeyev
Published on June 23, 2014