Are hollow icons really harder to recognize than solid icons?

Editor's note: Since the release of iOS 7, I do not know that the students found wood there, many apps (QQ, micro-letter, micro-BO, etc.) have been replaced with a hollow icon, but the hollow icon will not bring cognitive fatigue to the user, has been the conclusion of the wood, there are now students deliberately wrote an app, made 1260 icon recognition test, Come to a precise conclusion, the conclusion is what, to learn!

Last summer, designer Aubrey Johnson published a critical iOS7 article in medium. Jonhson points out that Apple's new hollow icon is more visually complex than a solid icon, giving users cognitive fatigue, which makes them tired of using the interface visually. This article was soon widely shared and discussed, and some designers thought it was sensible advice, but there were some judgments that exaggerated the facts, too simplistic and lacked effective evidence.

The following is an example of the solid and hollow icons above the iOS7 tab. The selected icon uses a solid icon. Icons that are not selected use a hollow icon.

As an intern in Viget and user experience, I saw an interesting opportunity to validate and test Johson's elaboration. To find out whether a hollow icon brings more cognitive burdens to the user, I developed a WEB app that measures the speed and accuracy of the user's choice of different visual style icons. From the study of more than 1000 test participants, I found that hollow icons are not necessarily less than solid icons. However, the results are still somewhat complicated.

　　Icon

First of all, this discussion is focused on a particular type of icon: a well-known tab or a flat monochrome icon for easy navigation, you usually see a line of four or five icons at the bottom of the phone's app screen, because the bottom bar icons are generally part of the navigation application, It is important to point out which part is active at present in a highlighted way. With the introduction of iOS7, Apple began to show these states in two complementary icon styles: a solid icon to display active or selected states and hollow icons to show inactive or unchecked status. As far as I know, Apple is the only software developer with a basic icon in two different styles.

The 20 icons used to test are borrowed from the icons available on iOS, Android, and Windows phone online.

The Speech bubble icon is borrowed directly from Johnson's article.

　　Test

Under the guidance of Nate Hunzaker in Viget, I wrote an app to test it. Your own test will be easier to understand than my explanation, I try to describe it as simply as possible.

I admit that the definition of the difference between a solid and a hollow style is ambiguous and loosely defined. An icon can have both solid and hollow styles. To do this, I chose a series of icons to study, showing a fairly clear distinction between solid and hollow versions. Each icon also represents a specific object and uses a text label, which avoids too much cognitive burden on the person participating in the test, and only needs to use its icon to match the name.

　　Results

More than 10 days of data collection, completed 1260 icon recognition test, more than 25,000 icon recognition experiment, age to 18-40 of Apple users. This indicates that the selection time is almost three seconds and the standard deviation is 1.5 seconds.

With an average of 20 icons, the selection of the hollow icon is 0.1 seconds slower than the solid icon, which seems to support a more cognitive burden for the Johnson on the hollow icon than the solid icon.

I haven't mentioned it yet, in fact, my research in the icon style also contains another aesthetic: icon color. Each experiment is actually an icon that is embodied in four different types of color styles:

Solid black on white ground

Hollow Black on White bottom

Solid white on the black Bottom

Hollow White on the black Bottom

Used in experiments to combine four colors (black circles are used in this article for demonstration.) As a result of experiments, white on the black icon on a continuous black background display)

Divide the data into four groups (which I call bidirectional Anova) for a more in-depth analysis of the icon selection speed. With this technique I found more subtle results: the white on the black icon combined with the other three color styles was about 1.7 seconds slower. In other words, on the black icon on the white. Whether the icon has a solid or hollow has no significant effect on the selection speed.

Similarly, for a solid icon, whether to use black on white color has no effect. However, when a hollow style combines white on the black color scheme, the number of choices will be more.

The average number of choices for each color style is different. Only white on the black bottom of the icon shows the difference (the eye icon represents the average of 20 icons).

This has only a relatively small impact, but it does show up in data from more than 1000 users. A reasonable guess is this: if we think that the black icon is a default aesthetic, plus the hierarchical style in use there is a sense of activation. This looks pretty intuitive.

But there are some who are not satisfied with the conclusion. To get more details out of the data, I did my own research on the style and color effects of each of the 20 icons. I find that the contradictions are not the same as the results shown above. Almost half of the icons (9) show the style of the icons without any effect, meaning that the heart and the hollow icons are identified as fast as the hollow icons. It does show the style effect in the other 11 icons, and actually the three hollow icons perform better. In fact, the Speech bubble icon shows a completely opposite effect on the overall and average: a solid black version is slower than all other versions. But you think that most of the time we come across speech bubble icons can be easily explained when they are either white or in outline style (or both). A solid black speech icon does not have typical features that help you quickly identify it.

It is worth mentioning that the style and color of the icons do not have much effect on the ability of the participants to select the hint icon correctly, except for an icon-lock, which may be slightly recognizable when the lock is in a black white display. I'm not sure why, but the lock icon has an exception on multiple data metrics, it's the easiest icon to be mistaken for and the slowest icon to choose.

Johnson's warning that a hollow icon should not be used in the user interface and that there is no evidence of real user support. First of all, the style of an icon does not exist in isolation, it is related to the collocation of color. In any case, small differences do not affect the speed of recognition or cause visual fatigue. Most designers may design icons based on the hollow/solid theory, but the designed icons are visually complex motions and are not suitable for simple two-dollar rules.

In fact, a closer look at the Apple HMI Guide: https://developer.apple.coml, there are solid/hollow icon design recommendations, of course, there are some icons do not use these suggestions, students can learn.