Optimizing UI icons for faster recognition « Boxes and Arrows
-
Upload
imane-nour -
Category
Documents
-
view
14 -
download
1
Transcript of Optimizing UI icons for faster recognition « Boxes and Arrows
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 1/13
Optimizing UI icons for fasterrecognitionby Alla Kholmatova
32 Comments September 17th, 2013
What makes an icon a valuable addition to the interface, rather than a mere decorative element?
Intuitiveness, aesthetic value, memorability, intercultural perception? While an effective icon would
combine many of those characteristics, I’d like to focus on one measure–speed of recognition, or how
fast a specific icon can be discovered and identified.
In a simple leisure app, the difference in speed of recognition may be too subtle to have any noticeable
affect on the overall experience.
This may be different for a complex trading application: The requirements for iconography here are
more likely to prioritize speed, since every second spent on processing individual elements can have a
significant impact on the effectiveness of the overall interface.
Semiotic theory and structure of signs
User interface, like any language or other communication system, is a construct, made using series of
signs. Semiotics, a branch in linguistics that studies signs, defines a sign as being composed of two
elements–a signifier (the form which the sign takes) and a signified (the concept it represents).1 A sign
is a recognizable combination of a signifier with a particular signified.
The same signifier (form) could stand for a number of different signified (concepts), and multiple
signifiers could be used to represent the same concept.2 It is this unique pairing that forms a sign and
makes it meaningful in a particular context.
Rail crossing signs
For example, the concept of a railway crossing can be
represented in a number of different ways. At the same time,
numerous interpretations can be suggested for the railway
crossing road sign, by someone unfamiliar with the road sign
system.
Based on this relationship between a signifier and signified,
and their level of convention (symbolism), signs are classified
into three categories:
iconic: relate to the concept through resemblance
symbolic: relate to the concept through convention, and
indexical: relate to the object through causation3
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 2/13
Typically UI icons are symbolic or iconic in nature, and many fall somewhere in between.4
Symbolic signs are often arbitrary and represent a concept in somewhat abstract way (using to
represent ‘refresh’ function). Their meaning is usually difficult to guess and has to be learned.
Iconic signs, on the other hand, can represent concepts in a more literal way and their meaning can
often be guessed using common knowledge (such as to represent ‘call’ functionality). Both types
can adopt metaphors to enhance understanding.
Iconic versus symbolic
Some time ago I carried out a small icon intuitiveness test on Adobe InDesign and Quark XPress
toolbars.5 The test participants, who were using the applications for the first time, were asked to guess
the possible meaning of the icons.
I observed an interesting (although hardly surprising) pattern: When people were presented with
unfamiliar signs, they usually tried to interpret them as iconic–based on the objects they resemble–
and use existing common knowledge to understand them.
For example, the iconic ‘button’ sign in the InDesign toolbar was quickly understood and
interpreted by all participants correctly. On the other hand, the ‘Free transform tool’ was less
successful in terms of its communicative function. The latter is a symbolic sign with indexical features.
For designers, it is obvious that the icon is based on the graphical representation of the state that
indicates an object has been selected for transformation. However, the people new to the jargon of the
application tried to interpret it based on the elements of the sign they were already familiar with.
Suggested interpretations included ‘cut rectangular shapes,’ ‘resize,’ ‘select an object by choosing
points,’ and ‘select points.’
Naturally, interpreting more abstract (symbolic) icons took significantly longer than iconic signs.
Visual style and speed of recognition
If the icons have the same general shape and denote the same concept, what effect does their visual
appearance have on the process of interpretation?
The author of an article recently published on Medium claims that a particular style–line icons–are
harder for the brain to process than their solid style equivalents, and can ultimately lead to “cognitive
fatigue.”
Setting aside cognitive psychology and theories on how brains process shapes, I wanted to compare the
two styles of icons using the semiotic approach6 and some basic user testing.
This time, instead of guessing the meaning of icons, I was reading out the object names (e.g. Camera,
Mail) and timing how fast people pointed to an icon that represented that concept.
Two versions, line and filled, of the same icon set were compared.
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 3/13
Group A Group B
Filled Line Line Filled
64.2 28.2 72.6 31.2
63.0 27.6 61.8 26.4
71.4 35.46 60.6 27.6
Icon sets shown to participants.
The participants7 were divided into two groups; each group was given one of the icon styles, initially,
before trying the other style. The time taken to find and identify the icons is recorded in the table
below.
The icons were in the same position for both rounds of the test, so due to the increased familiarity, the
speed of recognition naturally increased for the second style, regardless which style it was.
On average, people who were shown the filled set first discovered the icons in 66.2 seconds, and those
who were shown the line set first discovered them in 65 seconds. In the second round, the filled set
was complete in 28.4 seconds on average, and the line set took about 30.4 seconds. The average
increase in speed for the second part of the test was approximately 36 seconds for both groups.
There was no noticeable difference in speed of recognition for the two styles. So we could suggest that,
if an icon is well designed and represents a particular recognizable shape clearly, its style doesn’t have a
significant effect on the speed of recognition.8 The more notable difference, however, was in how
individual signs relate to the concepts they represent–the relation of signifier to signified in particular
signs.
The icons that performed faster in both sets were iconic signs–‘calculator,’ ‘camera,’ ‘mail.’ On the
other hand, the icons that seemed to have required a short pause were symbolic: ‘download,’ ‘back,’
‘copy.’ Even the ‘delete’ icon caused a slight delay in participants’ response.
Interestingly, even though some icons were slightly slower to be recognized, they were not always
perceived as being harder to find. When interviewed afterwards, participants classified the ‘delete’ icon
as being very easy to find even though it took them slightly longer than some of the others. My guess
would be that the reason for it is psychological. We experience a certain satisfaction when discovering
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 4/13
the signs we learned well, such as a trash can for ‘delete,’ a floppy disk for ‘save,’ and the like. They are
like a secret code, and, feeling pleased with ourselves for learning them, we don’t notice that it took
slightly longer to recognize.
The table below summarizes the performance of the individual icons in both sets. The icons with a red
outline took slightly longer, on average, to recognize in both sets than the ones outlined in green.
Icons flagged with relative ease/difficulty ofidentification.
Other factors
Consistency in the use of terminology for the icon labels and functionality they represent also seemed
to impact the speed of recognition. For example, those who were asked to find a ‘clock’ completed the
task slightly faster than those who were trying to find a ‘recent or history’ function. In both cases, the
function was represented by the same ‘clock’ icon.
Another aspect that could influence speed is proximity of similar shapes, as well as proximity of icons
which represent related concepts. For example, both flag and folder icons (top right) are based on a
similar size rectangular shape, which may have caused a slight delay in response. Another example is
‘important’ (flag) and ‘favorites’ (star)–they represent similar concepts and could therefore be
mistaken for one another, particularly if placed close to each other.
Therefore, it was not the style of the icon set but rather the individual icons in both sets, their shapes,
and their position in relation to each other that made the most difference in the speed of recognition in
this test.
Guidelines for ‘faster’ icons
It is well known that icons with labels are more effective than icons alone, particularly for the learners
of the application. This is expected, since a text label is a direct link that serves to bridge the gap
between the signifier and signified.
However, sometimes, for whatever reason, you may need to use icons alone or use hover over tooltips
only. You may also need those icons to be discovered and recognized quickly. Here are the guidelines
when that’s the case.
When possible, choose iconic signs that relate to concepts through resemblance, rather than symbolic
signs. For example, the ‘calculator’ icon on the left is expected to be discovered and recognized faster
than the one on the right.9
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 5/13
For crucial concepts that must be
understood fast and also for abstract
concepts, a combination of word labels and
color is more effective than an icon. For
example, it’s this combination that allows
the ‘stop’ road sign to be recognized
quickly.
Placing icons that represent similar concepts close to each other–for example, ‘tasks,’ ‘inbox,’
‘notifications’–may slow down the recognition of each individual icon in the group.
Terminology used in the user interface should relate to the icon labels as closely as possible. For
example, if you are using a flag icon to represent ‘important,’ label it ‘flag as important’ rather than
‘mark as important.’
Above all, when testing the icons, the main focus should be not on the style but rather individual
shapes of the icons, how they relate to the concepts they represent, and how they work with each
other–visually and conceptually.
Footnotes
1 This is the original definition by a Swiss linguist Ferdinand de Saussure. Another well known sign
structure was suggested by Charles Peirce.
2In fact, the number of combinations is unlimited–which is known in linguistics as unlimited
semiosis.
3Although Peirce’s original classification of signs is much more elaborate.
4This classification is made when comparing the interface icons to each other. In a more general sense,
all UI icons are essentially iconic signs.
5The test was part of my BA dissertation based on a comparative semiotic analysis of the two interfaces.
6A semiotic approach views an interface as a medium of communication which operates through a
form of metalanguage. All elements are seen as encoded signs and all operations represent
communicative processes between the designer and the user of the system. The semiotic approach is
not an alternative but rather complementary to the user-centred approach. While the choice of signs in
the user-centred approach is mainly determined by empirical studies (the sign is considered to be
successful when it is recognised by a statistically significant number of users), semiotics aim to provide
a theoretical basis to explain the phenomenon of user-centeredness and direct the designer towards
the correct choice of signification systems amongst all of the possible signifiers. A book by C. de Souza
provides a great insight into the semiotic approach.
7 Six people took part in the test (thanks to my brave and adventurous colleagues). While the number
of participants was too low to make any definite conclusions, it helped to see the general pattern in
interpreting the icons.
8It may be worth mentioning that two of the participants found the full set “easier on the eye.” While
this could be the case, it could also be due to the their better familiarity with the solid style. Four other
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 6/13
participants did not notice the difference between the two styles, and only mentioned that one was
‘black’ while the other was ‘white’ which they didn’t see as notably different.
9Note: This is based on my assumptions and observations of testing similar icons; those particular
examples have not been verified by user testing.
References
Andersen, P. B. 1990. A Theory of Computer Semiotics. Cambridge: Cambridge University Press.
Barr, P. 2003. User-Interface Metaphors in Theory and Practice
http://www.pippinbarr.com/academic/Pippin_Barr_MSc_Thesis.pdf
de Souza, C. S., 2004. The Semiotic Engineering of Human-Computer Interaction. Cambridge: The
MIT Press.
Eco, U. 1978. A Theory of Semiotics. Bloomington: Indiana University Press.
Peirce’s Theory of Signs
http://plato.stanford.edu/entries/peirce-semiotics/
Peirce, Eco, and unlimited semiosis
http://courses.logos.it/EN/2_20.html
Peirce, C.S. 1998. The Essential Peirce. Volume 2. Indiana University Press.
Semiotics for beginners
http://www.aber.ac.uk/media/Documents/S4B/semiotic.html
Saussure, F. de. 1983. Course in General Linguistics. London: Duckworth.
Wiedenbeck, S., 1999. The use of icons and labels in an end user application program: an empirical
study of learning and retention.
http://portfolio.educ.kent.edu/daltone/cmc2/articles/jp_use%20of%20icon%20labels_wiedenbeck.pdf
Posted in Design Principles, Visual and Visible | 32 Comments »
32 Comments
Rodolfo Gonçalves
Steven Hoober
September 17, 2013 at 4:51 pmIt’s a great article, thx.
September 17, 2013 at 10:28 pmExcellent overview, well-referenced, thanks for links to read
more on the topics, and I like that you were able to include
numbers from your own research. I think a lot of us who are classically trained graphic designers know most of
the basics, but have forgotten the details. I will be referring to this a lot.
Nitpicks: 1) Stop sign is cropped on the sides. When used as a universally-recognized icon, it sorta messes with
it. 2) InDesign is a program, Quark is a manufacturer (Xpress is the program).
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 7/13
Sloan
Alla
UXUiOS
Alla
September 17, 2013 at 10:28 pmGreat article focused on sign and meaning, but I think it misses the
visual processing aspect of evaluating icons. Referencing Matt Queen’s
article on Icon Analysis really brings the full story of optimizing UI icons into focus:
http://boxesandarrows.com/icon-analysis/
September 18, 2013 at 5:34 pmSteven Hoober – thanks for pointing out those little things, now corrected.
Sloan – extremely thoughtful and informative piece by Matt Queen, thank you for referencing.
September 21, 2013 at 3:25 amAlla, loved this article. Would love to know two things in a follow up if
you ever get the chance:
1. Whether the size of the icon impacts recognition speed.
2. Whether the line-art vs. solid icon recognition results might skew different for different age groups; my specific
interest is whether older folks (and those with poor eyesight) would have a tougher time recognizing line art vs.
solid art.
In any case, look forward to reading more from you. Thanks for sharing your knowledge!
September 22, 2013 at 7:44 pmUXUiOS – thanks, these are great points to address in the future.
Last year I did some user testing comparing how people in the age group over 60 use tablets (both
Windows RT and iOS). The icon recognition was extremely slow–icons without labels were often overlooked or
misinterpreted. Generally people didn’t perceive them as actionable items when trying to accomplish a task, and,
in many cases, didn’t notice them.
Although we can’t make conclusions prior to some thorough research and user testing, my initial guess would be
that people who are less experienced in using modern systems may have equal difficulties recognising line and
solid icons.
An excellent article referenced in the previous comment examines in depth the process of image recognition
using M and P pathways–where the M pathway “contains channels sensitive to gross shape”, and the P pathway
“contains channels sensitive to color and detailed shape.”
In our case we compare the same monochrome icons, and the only difference is their visual treatment–line or
solid. The visual clues (the overall geometric shape and the fine details) that allow them be associated with a
particular object or concept should be the same for both styles.
However, in some icons the line or solid visual treatment may cause those visual clues to be altered–it would be
interesting to identify specific examples.
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 8/13
Hendrik-Jan Francke
Vince
Peter
James Jack
Will Parker
Arkadiy Mochulskiy
Symbolsime et conceptualisation des icones | Blog d'actus Picturapoesis
Distinguishing Between Ornamental and Functional Skeuomorphism | Siolon
September 24, 2013 at 10:52 am[…] http://boxesandarrows.com/optimizing-ui-icons-for-faster-recognition […]
September 24, 2013 at 12:23 pmThank you so much for the thoughtful article.
September 24, 2013 at 7:10 pm[…] I read a usability report recently on how quickly users still identified the
floppy disk as a “save action.” What was supposed to only have a temporary
significance has now crossed over into becoming a convention despite the fact a large majority of people using
computers today have never had to use a floppy disk. When designing these icons you have ask if the
relationship between the signifier and the signified is still appropriate. For more details see this Boxes and
Arrows post: Optimizing UI icons for faster recognition. […]
September 24, 2013 at 11:30 pmFascinating article and references. Thanks.
September 25, 2013 at 8:15 amGreat article! Recently I stumbled over a free service to actually test icons
on the web: http://user-weave.net/ – might be interesting in this context!
September 25, 2013 at 1:01 pmFantastic article, thank you!
September 25, 2013 at 6:16 pmIt’s clear that both groups’ average response time was halved in
the second trial; this indicates that they were carrying over
positional cues from the first trial.
You may have had significantly different results if the placement (and potentially, layouts) of the icons had been
different between the two trials.
September 26, 2013 at 9:57 amHi, Alla, great article. Can i translate your article to
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 9/13
Pierre LEBAILLY
Claudia Robiou
Jasa Pembuatan Website Toko Online
The User Experience Three. Handpicked 30/09/2013 - UXPin
Optimizing UI icons for faster recognition | UX.MWEPRIN.COM
Bedtime Reading #9 | Corey Docken
CSS 3 & HTML 5 Links und Infos » Collective #83
russian and post it on my blog (linking to your site, of course)?
September 26, 2013 at 4:38 pmHi and thanks for this very interristing document.
I would just want to say it could be interristing to speak about time life of our icon. Because
when you show a phone icon in your article almost young people didn ‘t see such a phone because they live with
smartphones. In this case we can say we keep this old phone form because it is easier and faster to be
identified as a phone rather a smartphone icon….so in reality it becomes a learnt icon atfer being a
pictogramme
September 29, 2013 at 5:58 pmGreat article. I have been wondering recently about the line
vs. fill perception as well as in rendering difference in both
(another subject entirely), and on perception across ages and cultural context. I have seen just from observation
that some of the icons need to be learned and naming the icon with text enables finding it faster and getting used
to it. The change in mobile devices operating systems, for example, is another area where icons are constantly
changed and relearned. Thank you for posting!
September 30, 2013 at 10:55 am[…] 2. Optimizing UI icons for faster recognition […]
September 30, 2013 at 4:11 pm[…] Boxes and Arrows […]
October 1, 2013 at 12:38 am[…] Optimizing UI icons for faster recognition […]
October 2, 2013 at 4:35 pmwoww, great artice. thanks for share.
October 3, 2013 at 8:24 pm[…] Read it […]
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 10/13
Ingrid
Matthew Smith
פיקסלגיק: קישורים להדרכות, חינמיים, השראה, תכנות פרונט אנד, עיצוב לסטארטאפים וחווית משתמש [-3
] | פיקסל פרפקט מגזין10-13
Collective #83 | InfoLogs
October 4, 2013 at 12:55 pm[…] מאמר מעולה ומבוסס מחקרים על איך לעצב ולהשתמש באייקונים נכון. […]
October 5, 2013 at 8:19 amWhile the understanding and application of semiotic theory here seems a bit
crude, it’s an interesting endeavour nonetheless.
I do find your calculator example a bit contradictory though.
“It is well known that icons with labels are more effective than icons alone…”
“When possible, choose iconic signs that relate to concepts through resemblance, rather than symbolic signs.”
I think one could argue that the mathematical symbols are almost like a label, telling us “math! calculator!” long
before a rectangle with other rectangles and squares cut out of it would.
So if icons with labels are more effective than icons alone it seems contradictory to say that adding symbolic
information (like words or mathematical symbols) to an icon is to be avoided.
October 5, 2013 at 11:43 pm[…] Read it […]
October 7, 2013 at 12:31 pmGood article and interesting points. The best of the article is
driving at the core differences between symbolic and iconic
pictographs to describe an action. This is important data to take into account in the development of an icon set.
I do have concerns with the method of the testing in your icons sets though:
1) To Will Parker’s point you’ve created a false association with the speed of the line icons by maintaining the
same testing group with associations with shapes already developed. I’d suggest these variables would give a
more full understanding of the issues:
* A wider range of people with varied interface experiences.
* People with different eyesight capabilities (my own eyes aren’t great for instance)
* Reviewing inverse color relationships (light on dark, dark on light) for icons.
* Reviewing line density.
* Reviewing color grouping (adding oriented actions, subtracting oriented actions, reviewing oriented actions,
etc)
2) To UXUiOS’s point, I’d love to see this test done on not only people of different ages (younger as well), but on
people with different eyesight.
I’m not advocating for one style over the other necessarily. Style is often a choice for the aesthetic of the
application in which an icon is being used, whether for wayfinding through an airport or wayfinding through a
digital application.
This is important research. Thanks for getting it going. I’d love to participate or help in the research if you
continue.
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 11/13
john
Alla Kholmatova
Alla Kholmatova
Front End Links — Week #1 | Francisco Deus — Frontend Designer & Developer
Links vom Rhein, 13. November 2013 | Hendryk Schäfer
October 7, 2013 at 12:50 pmwoww, great artice. thanks for share.
October 7, 2013 at 9:19 pmIngrid – thanks for reading the article and for sharing your
thoughts. My prediction for the calculator icon is based on the
assumption that it takes slightly longer to assign a specific (and correct) meaning to an arbitrary symbol than it
takes to recognise an object based on resemblance. Reading written words is different to assigning meaning to
abstract signs, such as math symbols. The word ‘Calculator’ for example would normally have only one meaning
for most people, in the context of a specific interface. On the other hand, the math symbols could create a much
larger number of interpretations, e.g. ‘Math functions’, ‘View Calculations’, ‘Trading’, ‘Count’, ‘Measurements’,
etc. While the meaning of this icon seems pretty obvious to us, the people who are less familiar with it could
suggest different interpretations. The signs that have a potential to generate a number of possible meanings
(often symbolic signs) may require additional time to make the connection between the signifier and the right
signified, among all the available choices.
Please note however that this prediction is based on my personal observations and assumptions – as
mentioned in the post, this specific icon has not been verified by user testing.
October 7, 2013 at 10:07 pmMatthew Smith – thank you, just to confirm, there were two
groups in the test – the first group was shown the filled set first,
while the second group saw the line set first – therefore neither of the sets should have had an advantage.
Apologies if this hasn’t been made very clear in the article.
Thank you for the suggestions – they will be extremely helpful when deciding on the direction for the future
research. So far my interest has been mainly on the process of assigning meaning to signs, however many other
factors, such as the ones you mentioned, may make a significant difference to the conclusions drawn from the
study. Identifying and addressing these factors would certainly be required to build a comprehensive analysis.
November 6, 2013 at 3:47 pm[…] Optimizing UI icons for faster recognition […]
November 13, 2013 at 6:39 am[…] Optimizing UI icons for faster recognition « Boxes and Arrows – Was macht
Icons schnell entzifferbar? Hier gibt es ein paar Hinweise. […]
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 12/13
Name (required)
Mail (will not be published) (required)
Post Reply
C4B
User-Interface Metaphors in Theory and Practice | The life of a Swedish designer working
in Germany
November 14, 2013 at 5:41 pmThank you so much for such a great overview
November 15, 2013 at 8:09 am[…] link was found here, and there are even more links to other related
information on the […]
Leave a comment
is an interaction and visual UI designer working in London. Alla studied design and linguistic theory in Saint-Petersburg, before coming to
London and completing a degree in Media Arts. Having previously worked on interactive learning systems at Saffron Interactive, and the
market analysis & trading software at Thomson Reuters, she now helps to design a new line of HR applications. Connect @craftui.
Alla Kholmatova
Most-commented Stories
105 Comments
63 Comments
58 Comments
HTML’s Time is Over. Let’s Move On.
The Lazy IA’s Guide to Making Sitemaps
Blasting the Myth of the Fold
24/11/13 Optimizing UI icons for faster recognition « Boxes and Arrows
boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/ 13/13
55 Comments
Welcome to Boxes and Arrows
Support our sponsors!
Become a sponsor
Stories
People
Jobs
About
Login
Copyright © 2013 Boxes and Arrows - All Rights Reserved