Are Hollow Icons Really Harder To Recognize Than Solid Icons? A Research Study - Viget

Are Hollow Icons Really Harder to Recognize Than Solid Icon...
ARTICLES
Are H
https://www.viget.com/articles/are-hollow-icons-really-harder-to...
Get our weekly article digest
SUBSCRIBE
Are Hollow Icons

Really Harder to
Recognize Than Solid
Icons? A Research
Study
1 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
on June 16, 2014
Data from over 1,000 test participants

paint a nuanced picture about the
effect of icon style on usability.
Last summersoftware designer Aubrey Johnson published a post

onMediumwith a specific critique of Apples brand new mobile operating
system,iOS7. Johnson suggested thatApples new hollow icons, being more
visually complex than solid icons, create cognitive fatigue for users that will
eventually lead them to tire of theinterface and stop using it. The timely,
bite-sized post was shared and discussed widely, with some
designersaffirming itas sensibleadviceand otherscriticizing it
asoverblown,oversimplified,andlacking valid evidence.
2 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
An example of solid and hollow icons in the tab bar of an app in Apples iOS7. The selected
icon, Top Charts, uses a filled-in "solid" style. The unselected icons use an outlined "hollow"
style.
As a graduate student in human-computer interaction and a UX intern at

Viget, I saw an interesting opportunity to test Johnson's claim with evidence
from real users. To find a definitive answer to the question of whether hollow
iconsrequire more cognitive effort for users, I createda web appthat
measures users speed and accuracy in selecting icons with different visual
styles. By studying the data from more than a thousand test participants, I
found that hollow icons are not necessarily less usable than their solid
counterparts. However, the results are actually a bit more complicated.
3 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
First of all, it's important to note that this discussion is focused on a particular
type of icon:the flat, single-color icons known astab bar iconsor simplybar
icons. These are the icons that you usually see in a row of four or five at the
bottom of the screen in mobile apps. Because bar icons serve as navigation
to other sections of the app, its important to indicate which section is
currently active by highlighting its icon in some way. With the release of iOS7,
Apple began showing these states by using two complementary icon styles:
a solid version to show an active/selected state and a hollow version to show
an inactive/unselected state.To my knowledge, Apple is currently the only
major software maker to use two styles of the same base icon for this
purpose.
I shouldbriefly acknowledge that the distinction between a solid andhollow
style isloosely defined. A single iconcan have both solid and hollow
characteristics. For this reason,I hand-pickeda set of icons for my study that
showeda fairly unambiguous difference between solid and hollow versions.
Each of these icons also represents a concrete object and use a literal label,
which limitsthe amount of cognitive effort test participants needto match
aname with its icon.
4 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
The 20 icons used in the test, borrowed from iOS, Android, and Windows Phone icon sets
available online. The Speech Bubble icon is borrowed directly from Johnson's post.
The Test
With the help of some indispensable technical guidance from VigetsNate
Hunzaker, I built a Rails app to administer an unmoderated icon recognition
test on the Web. Its easier just totake the test yourselfthan for me to explain
it, but heres my attempt at a brief description:
Before the test, participants areasked to familiarize themselves withthe 20
labeled icons. Then, participants are led through 24 icon recognition trialsin
5 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
select the matching icon as quickly and accurately as possible from a circular
array of 19 other distractor icons. Each trial uses one of the 20 icons as its
target, and the first four trials are considered warm-ups, which are excluded
from data analysis. The test apprandomly determines the sequence of target
icons, the position of each icon in the array, and whether all icons are shown
in a solid or hollow style. The test takes about five minutes to complete.
Go ahead and take the test yourself aticon-test.netfor a better idea of how it
works. I've been told that it's actually kind of fun!
Results
Over a 10-day data collection period, 1,260 tests were completed, for a total
of more than25,000 individual icon recognition trials. The demographics
skewed towards young (18-40), tech-savvy Apple users. The mean selection
time was almost exactly three seconds, with a standard deviation of 1.5
seconds.
Averaged across all 20 icons, hollow icons were selected about 0.1 second
slower than solid icons, which would seem to support Johnsons assertion
that hollow icons require more cognitive effort to recognize than solid icons
(if onlya very small amount more). However, the pictureisnt yet complete.
6 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
variable in addition to icon style: icon color. Each trial in the test actually
showed icons in one of four style-color combinations: solid black-on-white,
hollow black-on-white, solid white-on-black, or hollow white-on-black. (Side
note: the question of whether or not black and white should be considered
colors sparked a lively debate in the designers' chat room at Viget.)
The four style-color combinations used in the test. (The black circles are used for presentation
in this article. For the test, white-on-black icons were shown against a continuous black
background.)
Breaking the data into these four groups allowed me to use a really
cool-sounding statistical technique called a 2-way ANOVA to take a closer
look at icon selection speeds. Using this technique, I discovered a more
nuanced result:hollow, white-on-black icons were selected about 0.17
secondslower than icons of the other three style-color combinations, with no
7 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
combinations.In other words, for black-on-white icons, whether the icon was
shown in a solid or hollow style had effectively no impact on selection speed.
Similarly, for solid icons, whether the icon was shown in black or white had no
impact. However, when a hollow style was combined with a white-on-black
color scheme, selection times increased by a small amount.
The difference in average selection times for icons of each style-color combination. Only
hollow, white-on-black icons were significantly different. (The Eye icon is a stand-in for an
average of all 20 icons.)
This isa pretty tiny effect, but data from more than 1,000 users shows that it
does exist. A reasonable takeaway is that if we consider solid black icons as
something of a default aesthetic, adding layers of stylization has a
8 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
But theres one more wrinkle to this conclusion. To get an even more detailed
look at the data, I examined each of the 20 icons individually foreffects of
style and color. What I found was an inconsistency that belies the clean results
presented above. Almost half of the icons (9 of 20) showed no effect of icon
style at all, meaning solid and hollow styles were recognized just as quickly.
Among the eleven icons that did show the effect of style, three actually
performed better in a hollow style. In fact, the Speech Bubble icon showed a
completely reversed effect from the global average: the solid black version
was selected slower than all the other versions. This makes sense when you
think about how most speech bubbles we encounter are either shown in
white or in an outline style (or both). A solid black speech bubble doesnt
have either of those archetypal characteristics to aid in quick recognition.
9 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
participants ability to correctly select the prompted icon, except for one icon,
the Lock, which was slightly more likely to be misidentified when shown in
black on white. Im not sure why this is, but the Lock icon was an outlier by
multiple metrics: it had the highest likelihood of being misidentified and the
slowest selection speed of all 20 icons, by a pretty wide margin.
Conclusion
Johnsons warning against using hollow icons in user interfaces just isn't
supported by evidence from real users. For one thing, an icons style doesnt
exist in isolation, but interacts with other attributes like color to create
compounding effects on usability. Furthermore, less than half of the icons in
my set of 20 performed better in a solid style than a hollow style.A different
set of icons would likely result in adifferent overall result.
In any case, the small differences in recognition speed that I observed are not
likely to cause any lasting fatigue for users.Researchhas shownthat users
begin to map the meaning of icons to theirpositions in the interface, so its
not like users have to reinterpret each icon during every use.It is also
important to consider that a two-style approach may have an accessibility
benefit over using color alone to show an icons state, since it gives people
with color blindnessadditional visual feedback. Of course, the first image in
10 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
labelingto reinforce usability.

My ultimate conclusionis one that most designers probably felt intuitively
upon encountering the solid/hollow debate: designing icons to be both
semantically clear and visually attractive is a complex exercise that doesnt
lend itself to simple binary rules. In fact, a closer look atApples Human
Interface Guidelines, which layout its recommendations forsolid/hollow icon
design,acknowledgethatsome icons simply wont work well in both styles.
Finally,I hope that this studyhighlights the importance of using real evidence
to back up UI design decisions. Designers of all types need to think critically
about best practices and back up their recommendations with solid (pun not
intended, but embraced) research.
The full research paper is available here. Thanks again to Nate Hunzaker for his
help in developing the testing app. Thanks alsoto Alla Kholmatova, who
conducted anearlier informal study on this topic as part ofa terrific article on
icon design.
11 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
Curt is a user experience designer in our Falls Church, VA, HQ. He is a curious,
adaptable researcher for clients including POLITICO and Massachusetts
General Hospital.
More posts by Curt
59 COMMENTS
12 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
READ NEXT
ALL DESIGN & CONTENT ARTICLES
READ NEXT
ALL DESIGN & CONTENT ARTICLES
13 of 14
8/2/16, 10:06 PM
ARTICLES
Are H
SUBSCRIBE
Work with us.

Have a project or a napkin sketch idea?We'd love to
talk with you and see if we're a good fit. Drop us a line.
C O N TAC T U S
hello@viget.com
703.891.0670
Washington DC Metro
Durham, NC
Boulder, CO
The Viget Newsletter

A curated periodical featuring
thoughts, opinions, and tools for
building a better digital world.
CHECK IT OUT
1999 2016 Viget Labs, LLC. Terms : Privacy : Sayviget
14 of 14
8/2/16, 10:06 PM

Are Hollow Icons Really Harder To Recognize Than Solid Icons? A Research Study - Viget

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Are Hollow Icons Really Harder To Recognize Than Solid Icons? A Research Study - Viget

Hochgeladen von

Copyright:

Verfügbare Formate

Are Hollow Icons Really Harder to Recognize Than Solid Icon...

Get our weekly article digest

Are Hollow Icons