« Back

Disagreements between a disrespectful icon and a reflexive label

Company Blogs April 26, 2013 By Juan Hidalgo Reina Staff

In Liferay we are engaged in redefining some UX concepts, and this has allowed us to experience at first hand, the controversy that is still latent, between the fundamental languages ​​(image and writing).

We are working several months on new patterns of interaction, a new visual redesign, and the use of new methodologies associated with the way in which we explore and discover how to improve user experience (UX) in Liferay. For that reason, Jorge Ferrer (VP Engineering), Nate Cavanaugh (Director UI) and I as UX Designer, were discussing (all 3 had the same criteria) about what was the best way to tackle an important part of the future redesign (icons).

This motivated the search for information, studies and mockups. And we arrived to a post of my idolized Joshua Porter (@bokardo) and its response to an article of other cracks such as (Layervault). These readings are really interesting, and I recommend reading it, as a preface to this article. This text is not about to release to a set of behavior policies, but rather to find historical roots that can adhere to the resulting metrics of our tests, from a very personal perspective.


Icon versus Tag: A discussion with thousands of years.

When we design GUI, we often find ourselves at a crossroads that hampers us from time immemorial. And when I refer to "time immemorial", I am not referring to when Sir Tim Berners Lee invented "The Web", I mean hundreds and thousands of years ago.


There are indications that the man began representing forms 40,000 years ago, that is, during the last glaciation. However, the first writing system originated in late 4.000 BC.These origins are based on protoescrituras systems, which still take several hundred of years to establish itself as "makers" of context. The great Joan Costa defines us this temporary difference brilliantly ".... there is thus a considerable temporal distance between the birth of the fixed image and written thought".


Since the 2,000 characters of Sumerian pictographic writing to the 22 signs of the Phoenician alphabet, have taken steps toward widespread acceptance of the image on the sign. We must not forget that the feeling of pleasure and even pure visual enjoyment, is the feeling that best describes what we perceive when viewing an image. Something completely different to the evocative or decoder instinct of the almost subliminal union of characters that generate a memory, for thought and a whole more figurative.


Already in the 20TH century (1970) the first icons were designed, developed by Xerox PARC, initially designed in the hope that users could more easily use computers. But it was David Canfield Smith (employee of Xerox) who defined the term icon when they referred to this type of graphics.


Later operating systems from companies like Microsoft or Apple, popularized and standardized the use of icons in the GUI.

The associative relationship between the formula text or image, or text + image, is based on the historical differences between the fundamental graphical languages ​​(the image and the written). We have always enjoyed and studied the antagonistic relationship of Art and Literature, illustration or painting and writing. After all, there has always been that special "rivalry" between what is associated with the perceptions associated with the images or the subliminal processing or decoding of a succession of characters which themselves are meaningless and that together are linked to memories, sensations and perceptions or concepts.


For a long time the relationship between the iconic and the written has been responsability of the graphic artists and is represented in the functional term language bi-media (image-text). Graphic design is not but the linguistic and functional representation of the fusion of creativity, interactions, sensations and associations between fundamental languages ​​(the image and the written).


Right now we find ourselves in an era dominated by the textual visual components. We study analyses based on behaviors, interactions of the users, their needs and even the ambiguous value of credible and even respectable. The use of iconic graphics, burdening the important role that combines writing, bankruptcy false “Status Quo” that balances the need and what we want to design. No, do not fall into the temptation to indicate that the user,will learn already, already know, or that when you know to use the tool within a time, understood the meaning of that icon or action. We assume that an icon is just for seeing, can not explain or argue what is its mission, is inherent in its context, and is an orphan of birth for lack of message.


Sure there are already people are looking for in their retrospective memory some cases that protect these lines, reflections on icons that are used to working, GMAIL? great, are very very good, but until someone says three times Nielsen, Nielsen, Nielsen..., reflect from a point of view based on theoretical procedure, or rather historical-theoretical procedures, which sounds as more bombastic.


We forget too much of some of the criteria we defined in our self-taught teaching at the beginning of time: credibility and the shortest possible learning time. The learning curve of a product, is directly proportional to the ease of use of a product, the greater the learning curve, the lesser will be the indicative of positive experience in the. It is true that learning always curve as indicative as we proceed to UX studies on behaviors of relationships with interfaces, but is something we tend to ignore when it comes to some of our projects as a UX Designer, but need over and over again when we criticize (sorry, "Analyze") products in which other professionals have worked.


Talking about GOOGLE and its UX.

At the end of 2011, Google decided to give another turn of the screw to its interface. They laid for icons instead of textual information. That generated plenty of opinions in a very different way, Representatives of the usability thought about trespassing the thin line between the iconic and textual to the iconic and almost abstract. In my opinion, there are some icons in a first view (it is a long time ago from this change) that shock my preconceived ideas frontally (habits of use, we could call them).


In the following image, we could appreciate the icons’ bar active, after selecting a mail. We can appreciate how the tooltip generated, is integrated in the design perfectly, and in my point of view, it does not generate too much noise. However, the opinions against this, made Google to add an option to change “Icons or Text”.


In the following image, we could appreciate the icons’ bar active, after selecting a mail. We can appreciate how the tooltip generated, is integrated in the design perfectly, and in my point of view, it does not generate too much noise. However, the opinions against this, made Google to add an option to change “Icons or Text”.

Was it a good decision? No, in my opinion. Personally and over any type of comment based on conjectures, I think it was more accurate offer the possibility to the user to change between “Icons, Icon with Text and Text”.



The icons have been used from the beginning of the computers’ creation (Xerox PARC), to identify different actions abstractly, to minimize the weight, to reduce the need to read, they need less space, and they get something really needed in the actual chaos of associated conventions to the different terminologies of each language: they do more international the interfaces.


For instance: “Erase” must be the same here in Madrid, than in Nairobi, in Los Angeles, or at least it must be so... In order to standard an icon, first of all, we should permit their classification. According to Blattner 1989, we can list or classify them in Representatives, Abstracts and Semi-Abstracts.


  • Representatives: Simple objects and very familiar and habitual operations to the users. For instance, the rubber icon, is constituted as a standard de facto for erasing, implying an usual action. 
  • Abstract: Geometric figures or graphic symbols. For instance: the use of “?” symbol implies association with questions, help, faqs, etc... 
  • Semi-abstract: It is the classification between the pictorial representation and the abstract symbol. For instance: the icon with a sign (+), implies the creation or addition for a new document.


A bit of History and research: Leclerc and the experimental studies.

Leclerc realized around mid 19th century, a leaflet in which he shows with some guidelines how to reduce the costs in the documents’ print, for that he gave some indications based in the way to read the words. He argued saying the users can read and give sense to a word only reading its upper level, he told it could be reduced shorten the word in its base in percentage over 50%. This generated a reduction in paper and ink, and its saving in the statal money. The knowledge of this “leaflet” and its considerations allowed me to transform that prove in a good evaluative tool for icons and labels. If an user or target of users could get considerable metrics in this experiment, it gave me a lot of motives to document the policy to implement.


I remember the first time I used this test: It was due to a project for a learning software. The customer wanted to work with icons with an awful readability, for that we wanted to assure the users understood the meaning of all of them. The use of that family of icons carried as restriction that we must not add any textual label.


I prepared some tests, based in a real test for 100 users (divided in 4 groups with 25 for every test), and we showed them a list of icons over which we had some doubts, with reductions between 30% and 60% of the original size, and to the last group I gave them the same reductions but adding the labels (only one word) and its appropriate reduction.

* In this image is used glyphicons.com to represent the icons for the tests. The icons (context) here represented are the original and the values Yes and No show the results for the people that identify in a right way the meaning of the icon in all the variants. To give the study a real dimension, we decided to divide 100 users in 4 groups with 25 each one, and require their opinions about them.


What do we discover? 

If we pay attention to the last line (previous image), we can appreciate how despite the small size of the icon, and the section of the label, they brought the higher and more positive metrics in the test.

  • The user guess more than he reads. 
    He glimpses the meaning of a word only reading the upper side of it. It is a fast read based on a fixation and its correspondent characters’ decodification. The observation of the patterns of visualization of the users (we didn’t have the infrastructure for tests of Eyetracking), showed us that in certain users the fixations happened between the icon (part of i) and the text. We also conclude as we prove in other studies, theories and books about this theme (Joan Costa), that in the case of not decoding a character in a word, the user obviates it and uses the previous and posterior chain to discover it (guess it).
  • Best an Icon with label 
    The add of label and icon gets values close to 100% in positive results.
  • The size is important, very important for the users. 
    The same icon a bit smaller and unlabeled proportionality generates a negative acknowledgment to the small size.
  • Incorrect Classification 
    We failed in how we thought we must classify some of the test’s icons. Something universal the time has given me, is that the preclassifcations we come in our owns (learning), generally or, best said, strangely correspond with the daily reality.


Gran finale..... 

Usually, the icons are recognized faster, despite previous experiment by Leclerc. The use of the icons generates the user needs to pay less attention to that task and can concentrate cognitively in the task that really hopes to get in that interface over (main task).


The reason is that, as we argued previously, the cognitive action of decoding the characters (reading the writing) is firstly boring, and although it could provoke us a pleasure feeling, this feeling increases when we talk about images, pictos, …


Of course, if the icon or image does not need a resolution of its meaning implying important parts of cognitive decoding.

The icons can generate an effect (with the use) of creation of standard in fact in the user, that helps him to minimize the learning curve and generates a list of “notes” in his memory in a long term.

Other interpretations and byzantine discussions exist, that could bring “more wood” to these points...

  • The icons need less space to represent an action. In several times, the writing action can contain different words.
  • In early stages of an interface using icons without labels work really bad.
  • The users not accustomed to use a product, use to be predisposed to need icon + label.
  • Although in some products is used a component of “scalability” or “Progressive reduction”, I tend to think that we can only carry out this action when we use icons established as standard.
  • Increasingly, the users are more familiarized with the use of graphics interfaces, and overall, deleting any textual indication. This does not mean to establish like a commandment, but it is true that time invested in decoding icons in a certain APP, will be proportionally inverse to the later cognitive charge need to decode a similar icon when he changes to a similar application.



* BEHAVIOUR & INFORMATION TECHNOLOGY, 1999, VOL. 18, NO. 2, 68 ± 82 The use of icons and labels SUSAN WIEDENBECK Faculty of Computer Science, Dalhousie University, Halifax, Nova Scotia, Canada B3J 2X4

* Diseñar para los ojos I.S.B.N. 978-84-611-8137-7 JOAN COSTA

No comments yet. Be the first.