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

Desencuentros entre un irreverente icono y una reflexiva etiqueta

Company Blogs April 26, 2013 By Juan Hidalgo Reina Staff

En Liferay nos encontramos inmersos en la redefinición de algunos conceptos UX, y ello nos ha permitido comprobar de primera mano, la controversia que aún se mantiene latente, entre los lenguajes fundamentales (imagen y escritura).

Llevamos varios meses trabajando en nuevos patrones de interacción, en un nuevo rediseño visual, y en la utilización de nuevas metodologías asociadas a la forma en la que exploramos y descubrimos cómo mejorar la Experiencia de Usuario (UX) en Liferay. Por ello, Jorge Ferrer (VP Engineering), Nate Cavanaugh (Director UI) y yo como Diseñador UX estuvimos discutiendo (los 3 teníamos el mismo criterio) sobre cual era la mejor forma de afrontar una parte importante del futuro rediseño (los iconos).

Esto fue motivo de búsqueda de información, de estudios y mockups Así llegamos a un post de Joshua Porter (@bokardo) y sus respuestas a artículos de otros cracks (Layervault). Estas lecturas son realmente interesantes, y os recomiendo su lectura, como prefacio a este artículo. Este texto no trata de dar luz a una serie de políticas de comportamiento, sino más bien encontrar una raíz histórica a la que poder adherir las métricas resultantes de nuestros tests, desde un punto de vista muy personal.


Icono versus Etiqueta: Una discusión con miles de años.

Cuando diseñamos GUI, a menudo nos encontramos en una encrucijada que nos lastra desde tiempos inmemoriales. Y cuando me refiero a “tiempos inmemoriales”, no hago referencia a cuando Sir Tim Berners Lee inventó “The Web”, quiero decir a varios cientos y miles de años atrás.


Existen indicios de que el hombre empezó la representación de formas hace como unos 40.000 años de antigüedad, es decir, durante la última glaciación. Sin embargo, los primeros sistema de escritura se originaron a finales del 4.000 a.C. Dichos orígenes se basan en sistemas de protoescrituras, los cuales tardaron varios cientos de años más en consolidarse como “hacedores” de contexto. Esta diferencia temporal nos la define magistralmente el genial Joan Costa “....hay pues una considerable distancia temporal entre el nacimiento de la imagen fija y el pensamiento escrito”.


Desde los 2.000 caracteres de la escritura pictográfica Suméria a los 22 signos del alfabeto fenicio, se han dado pasos hacia una aceptación generalizada de la imagen sobre el signo. No debemos olvidar que el sentimiento de placer e incluso de puro disfrute visual, es la sensación que mejor describe lo que percibimos cuando visualizamos una imagen. Algo totalmente distinto al instinto evocador o decodificador de la unión casi subliminal de caracteres que generan un recuerdo, en favor del pensamiento y un todo más figurativo.


Ya en el siglo XX (1970) fueron diseñados los primeros iconos, desarrollados por Xerox PARC, inicialmente se diseñaron con la esperanza de que a los usuarios les resultase más fácil el uso de los ordenadores. Pero fue David Canfield Smith (empleado de Xerox) quien definió el término icono cuando se referían a ese tipo de grafismos.


Posteriormente los sistemas operativos de empresas como Microsoft o Apple, popularizaron y estandarizaron el uso de los iconos en las GUI.

La relación asociativa entre la formula de texto o imagen, o texto+imagen, se fundamenta en las diferencias históricas entre los lenguajes gráficos fundamentales (la imagen y lo escrito). Siempre hemos estudiado y disfrutado de la relación de dependencia antagonista del Arte y la Literatura, ilustración o pintura y escritura. A fin de cuentas siempre ha existido esa especial “rivalidad” entre lo estrictamente asociado a las percepciones asociadas a las imágenes o la transformación subliminal o decodificación de una sucesión de caracteres que de por sí carecen de significado y que en conjunto se ligan a recuerdos, sensaciones y percepciones o conceptos.


Durante mucho tiempo la relación entre lo icónico y lo escrito ha sido competencia de grafistas y tiene su representación en el término funcional, Lenguaje Bimedia (imagen-texto). El diseño gráfico, no es sino la representación lingüística y funcional de la fusión de la creatividad, interacciones, sensaciones y asociaciones entre los lenguajes fundamentales (la imagen y lo escrito).


Ahora mismo nos encontramos inmersos en una época en la que predominan los componentes visuales a los textuales. Estudiamos análisis basados en comportamientos, interacciones con la conducta de los usuarios, sus necesidades e incluso el ambiguo valor de lo creíble e incluso respetable. La utilización del grafismo icónico, lastrando el importante papel que conjuga la escritura, quiebra el falso “Status Quo” que equilibra la necesidad real de los usuarios y lo que nosotros como diseñadores queremos diseñar. No, no caigamos en la tentación de indicar, que el usuario, ya aprenderá, ya se enterara, o que cuando sepa utilizar la herramienta dentro de un tiempo, entenderá el significado de ese icono o acción. Partamos de la base que un icono solo se ve, no puede explicar ni argumentar cuál es su cometido, es inherente de su contexto, y es huérfano de nacimiento por ausencia de mensaje.


Seguro que a estas alturas, ya hay gente que está buscando en su memoria retrospectiva algunos casos que amparen estas líneas, sino reflexiones sobre iconos con los que está acostumbrado a trabajar, GMAIL? genial, son muy muy buenos, pero antes de que alguien diga tres veces Nielsen, Nielsen, Nielsen......., reflexionemos desde un punto de vista basado en procedimiento teóricos, o mejor dicho en procedimientos histórico-teóricos, que suena como más rimbombante.


Nos olvidamos en demasía de algunos de los criterios que nos definieron en nuestra autodidacta enseñanza al principio de los tiempos: credibilidad y el menor tiempo posible de aprendizaje. Dicha curva de aprendizaje de un producto, es directamente proporcional a la facilidad de uso de un producto, mientras mayor sea la curva de aprendizaje, menor será el indicativo de experiencia positiva en el. Es cierto que la curva de aprendizaje siempre aparece como indicativo cuando procedemos a estudios de UX en comportamientos de relaciones con interfaces, pero es algo que solemos obviar cuando se trata de algunos de nuestros proyectos como UX Designers, pero que requerimos hasta la saciedad cuando criticamos (perdón, “analizamos”) los productos en los que otros profesionales han trabajado.


Hablando de GOOGLE

A finales de 2011, Gmail decidió darle una vuelta de tuerca a su interfaz. Apostó por iconos en lugar de información textual. Eso generó un aluvión de de opiniones de lo más variado, abanderados de la usabilidad que veían como se traspasaba la delgada línea entre lo icónico y textual a lo icónico y casi abstracto. A decir verdad, existen algunos iconos que a primera vista (pasado bastante tiempo de su cambio) me chocaron frontalmente, sobre mis ideas preconcebidas (hábitos de uso, que podría llamarse).


En la siguiente imagen se aprecia la barra de iconos activa, tras las selección de un mail. podemos apreciar como el tooltip que se genera, se integra perfectamente en el diseño, y a mi modo de ver no genera demasiado ruido. Sin embargo la cantidad de opiniones en contra, motivo a Google a poner una opción de conmutar “Icons or Text”.


Fue una buena decisión? a mi modo de ver, No. Personalmente y por encima de cualquier tipo de comentario basado en simples conjeturas, creo que hubiera sido más acertado otorgar la posibilidad al usuario de conmutar entre: “Icons, Icon with Text and Text”.



Los iconos han sido utilizados desde el principio de la creación de los ordenadores (Xerox PARC), para identificar abstractamente determinadas acciones, para minimizar el peso, para reducir la necesidad de lectura, necesitan menos espacio, en incluso consiguen algo realmente necesario en el caos actual de convenciones asociadas a las diferentes terminologías de cada idioma: hace los interfaces más internacionales.


Por ejemplo: “Borrar” debería ser igual aquí en Madrid, que en Nairobi, que en Los Angeles, o al menos deberia ser asi......

Para poder estandarizar un icono, primero deberíamos poderlos clasificar. Según (Blattner 1989) podemos catalogarlos o clasificarlos en Representativos, Abstractos y Semi - Abstractos.

  • Representativos: Objetos simples y operaciones muy familiares y habituales a los usuarios. Por ejemplo: el icono de una goma de borrar, esta constituido como estandar de Facto de Borrar, implicando una acción común.
  • Abstracto: Figuras geométricas o símbolos gráficos. Por ejemplo: La utilización del carácter “?” implica asociación con preguntas, ayuda, faqs, etc....
  • Semi-abstracto: Es la clasificación entre la representación pictórica y el símbolo abstracto. Por ejemplo: el icono con un signo (+), que implica creación o adición de un nuevo documento.


Leclerc y los estudios experimentales

El conocimiento de este “folleto” y sus consideraciones me permitió transformar dicha prueba en una buena herramienta evaluativa para iconos y etiquetas. Si un usuario o un target de usuarios podian conseguir métricas considerables en este experimento, me daba un buen zurrón de motivos para documentar la política a implementar.


Recuerdo que la primera vez que utilice dicha prueba fue a raíz de un proyecto para un software de enseñanza. Los iconos con los que el cliente quería que trabajasemos, poseían una legibilidad penosa, por ello quisimos asegurarnos que los usuarios comprendian el significado de todos ellos. La utilización de esa familia de iconos llevaba como restricción que no debiamos añadirle ninguna etiqueta textual.


Preparé una serie de pruebas, basadas sobre una muestra real de 100 usuarios (divididos en 4 grupos de 25 para cada tira), a los que les mostraba una serie de iconos sobre los que albergábamos algunas dudas, con reducciones de entre un 30% a un 60% del tamaño original, y al último grupo le daba las mismas reducciones pero agregandole las etiquetas (1 sola palabra) y su correspondiente reducción.

* En esta imagen se utiliza glyphicons.com para representar los iconos motivo de las pruebas. Los iconos (contexto) aquí representados si son los originales y los valores Yes y No indican los resultados de las personas que identificaron correctamente el signficado del icono en todas su variantes. Para que el estudio tuviese una dimensión real, decidimos dividir los 100 usuarios en 4 grupos de 25 cada uno, y requerirles su opinión sobre ellos.


¿Que descubrimos?

Si nos fijamos en la última línea (imagen anterior) podemos apreciar cómo a pesar del reducido tamaño del icono, y el seccionamiento de la etiqueta, se produjeron las métricas más altas y positivas de toda la prueba.

  • El usuario adivina más que lee. 
    Vislumbra el significado de una palabra con solo leer la parte superior de una palabra, es una lectura rápida basada en una fijación y en su correspondiente decodificación de caracteres. La observación de los patrones de visualización de los usuarios (no disponiamos de infraestructura para test de Eyetracking), nos indicó que en determinados usuarios las fijaciones se sucedían entre el icono (parte de él) y el texto. También llegamos a la conclusión al igual que comprobamos en otros estudios, teorías y libros sobre el tema (Joan Costa), que en caso de no poder descifrar un carácter en una palabra, el usuario la obvia y utiliza la cadena anterior y la posterior para descubrirla (adivinarla).
  • Icono mejor con etiqueta
    La suma de etiqueta e icono consigue valores cercanos 100% de resultados positivos.
  • El tamaño es importante, muy importante para los usuarios.
    La reducción de un icono sin etiqueta implica una relación directamente proporcional de reconocimiento negativo al tamaño original.
  • Incorrecta Clasificación
    Nos equivocamos en como pensábamos que debíamos clasificar algunos de los iconos con los que experimentabamos. Algo universal que el tiempo me ha regalado, es que las preclasificaciones con las que venimos de serie (enseñanza), generalmente o mejor dicho raramente se corresponde con la realidad diaria. Reference

En etapas iniciales de uso de un interfaz los iconos sin etiquetas funcionan realmente mal.


Gran finale.....

Generalmente los iconos generalmente se reconocen con mayor rapidez, a pesar del anterior experimento Leclerc. La utilización de iconos genera que el usuario necesita prestar menos atención a dicha tarea y pueda concentrarse cognitivamente en la tarea que realmente espera conseguir en ese paso del interfaz (tarea principal).


La razón es que tal y como sumarizamos anteriormente, la acción cognitiva del desciframiento de caracteres (lectura de la escritura) es a priori tediosa, y aunque nos pueda producir cierto sentimiento de placer, este sentimiento se acrecienta cuando hablamos de imágenes, pictos.....


Por supuesto siempre y cuando el icono o imagen no necesiten de una resolución de su significado que impliquen altas dosis de desciframiento cognitivo.

Los iconos pueden generar un efecto (con la utilización) de creación de estándar de facto en el usuario, que le ayuden a minimizar la curva de aprendizaje y les genere una serie de “apuntes” en su memoria a largo plazo.

Existen otras interpretaciones y discusiones bizantinas que podrían dar más “madera” a estos puntos.....

  • Los iconos necesitan de un menor espacio a la hora de representar una acción. En innumerables ocasiones la acción escrita puede contener varias palabras. .
  • En etapas iniciales de uso de un interfaz los iconos sin etiquetas funcionan realmente mal.
  • Los usuarios que no están acostumbrados a utilizar un producto, suelen tener más predisposición a necesitar icono+etiqueta.
  • Si bien en determinados productos se utiliza un componente de “escalabilidad” o “Progressive reduction”, me inclino a pensar que solo podemos llevar a cabo esta acción cuando se trata de iconos establecidos como estándar.
  • Los usuarios cada vez están más familiarizados con la utilización de interfaces gráficas, y sobre todo eliminando toda indicación textual. Esto no significa que se establezca como un mandamiento, pero si es cierto que el tiempo invertido en descifrar iconos de una determinada APP, será proporcionalmente inversa a la posterior carga cognitiva necesaria para descifrar un icono similar cuando cambie a otra aplicación similar.



* 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

Predictable or theoretical dimension of the experiences, (UX) relationships (2/2)

Company Blogs April 3, 2013 By Juan Hidalgo Reina Staff

In which way we approach the continuous improvement of UX in Liferay?. It is always under the perspective of a continuous evaluation..

This so “formative” methodology is the direct consequence of our strong commitment to improve everyday in generating positive sensations and empowerment the idea that when we design and think about something, we must open our mind to new possibilities and translate the test’s feedbacks and the users’ comments, in an impacting treasure in themselves.

Everyday, lots of applications are incorporated, new patterns of use, new ways of interactions, and from all of them, we have to develop a plan of actions, that impact frequently in the user experience with Liferay.


Analyze, evaluate, design, test, develop new functionalities is the daily task more important realized from the UX department. For them, we can detail in commandments format, in an informal way, some behaviours that always rule our jobs:

  • Investigate new patterns.
  • Analyze comprehensively functionalities and behaviours.
  • Learn from our mistakes and transform them in positive experiences.
  • Less is more, if the user and his needs not being damned.
  • Never take for granted anything: the user does not have the technical knowledge of our product’s developers.
  • The user is the one determining the product’s success or fail.
  • The unsuccess product’s cemetery is full of beautiful interfaces and marvellous buttons.
  • We must identify and analyze our audience’s needs.
  • UX is the union of everything. It is the glue that assembles and binds the different components: if the glue is bad, some elements will fall.
  • Improve our product the user’s quality of life in his need and context.
  • Question all the functionalities and associated behaviours.
  • We can always improve our product.
  • Be receptive and never reject any feedback. We always can offer new and best sensations to the user taking into account that is indispensable. We must decide in know how to see, know how to understand and, over all, know how to listen and study our users.  


In a more descriptive way, the continuous prospection and evaluation is generated realising constant evaluations as heuristics as experts, and the evaluations with users using techniques like focus group, etc. An indispensable part of the competence and our team’s experience is to know how to coordinate and program the type of test and evaluation techniques as the ideals for every part of the process and for what functionalities are needed for those checks.


All the sensations are analyzed constantly (test with or without users) and passed on in later applications or improvements, in order to influence positively in the user’s behaviours associated with the product. Those sensations could be influenced by the context of the use, cultural characteristics, etc...


Between all the possible action points we have to analyze, the main is the relationship between the difficulty of the use of the product, the underlying complexity between the objective of what the product must do and what the user gets and how gets it; that is the final purpose of any type of study.


Those relationships must be defined, establishing dimensions between all the involved factors:

Ethically: that product must satisfy the user’s needs, at least the initial needs that made him to decide for that product and not any other. But, even more, it must satisfy something that from Liferay we have as purpose and daily dogma: design, develop and offer a product that improve the user’s quality life. It is hard, but not impossible.


Relatively: Only the products adapting to the users’ real needs, with a target or prefixed audience, can generate a satisfactory User Experience. A product is not created due to an irreal need, it must always establish a relationship between all the tasks that develops, the tasks offering, and the studied needs that the audience requires. That dimension establishes that if there are loose ends not solved (needs) is impossible that the user gets his purposes, so the product is not useful.


Empirically: All the feelings, all the patterns of use and behaviours, can be analyzed and measured: Effectiveness, Efficiency, learning curve, satisfaction, association between mark and product, barriers and obstacles’ analysis that some groups can find when they use the product, or, for instance, how the user reminds the use of the product when he has not used for a while, etc.


Action / Reaction
Regardless of the type of study, of the format of evaluation or even the prospection and cataloging metrics obtained from them, we must never study or analyze the different areas in a separate way, without taking into account, like a common point, the dogmatic triangle that rules every type of strategy to improve the User Experience. Personally, I always use a definition of the concept of what is the UX by Andrew Dillon in 2001:’.

UX is the synthesizing of the most essentials behaviours associated to an user, to their interactions and senses obtained. Action, Result and Emotion.
“What the user realizes, what the product generates or returns about what the user asks, and the sense the user obtains of that
action / reaction”.


Must the companies worry about UX?
YES, in all, UX is a way to an ending; it is not only to create positive experiences to get the happiness of someone. We want to drive, advice, give a sense to our product, and, even, generate senses that influence in the users to provoke they decide for our product.


Let’s see from a perspective of a website: when the user gets in it, he gets and provokes different interactions that generate a possible positive conversion between potential user and potential consumer of our product. I like it? I don’t like it? These sensations have a sudden impact in social networks: this product is very good, I recommend it... Thousands of potential consumers receive the tweet or publication depending on the experience and achievements obtained by that user, generating and influencing in the perception of the user reading straightly.


Great! Our sensation and our achievements in that product have been “spread “ automatically to a similar audience target or, in our best wishes, in other targets not studied nor analyzed. The user experience is more important than what we imagine at the beginning, more than the people can imagine. That user experience in similar environments, for instance, with similar products in functionalities, and even with similar interaction patterns, generate a type of habitual interaction, replacing the usual “first explain and after show”. Nowadays, when someone needs to explain, it means he has failed in all the aspects including in the UX.


Let’s see a real example, widespread in internet: “The 300 millions dollars’ button”.

This story is widespread in internet, and looking at the origin of some of the people who wrote it, it is so truly, that my only doubt is if there is other company apart the one we are thinking about.


It´s based in how a simple modification of a buy form in a website generated incomes for more than 300 millions dollars per year. Almost 45% more of potential buyers consummate their petitions and passed from consult and look to buy.


In this site, it was necessary to be registered before buying; however, if the customers came back, different scenes appear: they wanted to finish their buy, they forgot they were previously registered, or, for instance, they forgot the data they have used to register. How do they solve this lost of potential buyers? Easy and fast.


The UX designers decide to remove the register button in the buy process, and they put another (it is sure we remember it) with the legend “Continue” and the following text (You don’t need to create an account to realize your buy in our website. Click in “Continue” to pay your product....).


Results: 45% of conversion from potential buyers in collected sales, with an increase in annual billing of 300 millions dollars.


To my understanding, I think the effort in the analysis and ROI of that investigation of the process of conversion and buy by the UX responsible, was very profitable.


Could we assure 100% that our great product, website, etc has a marvellous UX? We could always improve something, and that could mean important profits that up to this moment we are not getting. Does it worth? ALWAYS.

User Experience (UX), descriptions and relationships (1/2)

Company Blogs March 13, 2013 By Juan Hidalgo Reina Staff

Defining UX is an abstraction exercise, a deep thought about all the agents touching upon the product’s value (apart of the typology of this product) by the users. Interactions, sensations, values, evaluations and scenes have become the new path of yellow paving stones over which the projects walk. At the end, all of us desire that our products get it safely to Oz’s marvellous world (oz = ounce of gold).



Thousands of UX designers, IT managers, Project of Product Manager, Developers or gurus with thousands of followers will offer explanations as different among them as similar in their backgrounds. User’s Experience (UX), Information Architecture (IA), Interaction Design (IxD), User’s Interface (UI)..., too many acronyms and technical terms to explain something we live daily. The user’s experience goes with us, when we go shopping, sending a SMS, checking our mail, marking a box of a form of the Income Statement.


What is UX?
First of all, I want to say that everytime you talk about a concept, there is a father, someone who firstly established some definitions, and, although there are different tendencies and many opinions, UX’s father was Donald Norman, co-founder with Jakob Nielsen of ‘Nielsen Norman Group’.


Peter Morville proposes a context of rigorous analysis and, from my own point of view, very usable and useful, when we talk about websites, for instance, and all the aspects concerning UX. It is true that, except some qualifications about “Findable” could be applied to any product.

Useful, Usable, Desirable, Findable, Accessible, Credible and Valuable

UI (user interface) and UX (user experience) is not the same. 
No, we must answer this question with a resounding NO. I think the best definition to clarify what is each one is the following: UI is a car’s design, its colour, its shape, dashboard design, aspect of the headlights, tires’ appearance, the industrial design made ​​of parts,  etc.....

And UX is to drive that car.


A great UI (User Interface  =  visual aspect) helps notoriously to the UX of a product, but, if it is bad, it could ruin it totally too. Of course, if the car’s aspect is fine, we have positive feelings that generate an influence in our behaviour with the product.

The following  infographics shows clearly what is each part.


What type of experiences support the UX?.
Let’s wait for a moment and have a look around us: I am sure we could see some scenes in which some positive or negative “feelings” could influence us.

All those things the user could touch (the package of the products, for instance), listen (melodies and commercial sounds in malls), smell (the fresh products in a shop or a florist), see (close to the maximum sale items, with signs offering), etc...

Even the accessibility is associated to these impacts (the packages offer the description in Braille, or),  for instance, in airports it is usually described in a “accessible” way how to reach to the selected area; or in florist with labels and prices for each type of flower; but it is better if we put close to each sign a flower, so the user could smell it or even touch it, so he could associate his perceptions to the product the user could not perceive visually (Russ Unger and Carolyn Chandler).

And, of course, it includes some aspects with which the user cannot interact (at least, in the way we imagine), for instance with a coherent taxonomy and it has become a "de facto" standard in its field.

It is not helpful to define a magnificent and very original taxonomy for a client that develops “screws”, if we don’t investigate and see in which taxonomy the users usually to move in that field.

We cannot rename the category “Screws” as “Metallic elements for fixing” or using a singular abbreviation like “Scre”. Surely (we could analyze it), there will be some users that could guess correctly its content, but there will be other users that pass by due to the ignorance with this new content’s category.

Another example about how we can identify the UX is a daily scene: we go to a florist and looking at the shop window, we see jars with fresh flowers, recently watered with an unsurpassable aspect, beautiful glass jars cleaned and even we could see how the illuminated sign is in perfect light conditions. Great, good senses input, confidence feeling and good vibrations about the quality of the products.

As soon as we come in, someone from the end cries loudly with a hard and rough voice, even rude in his pitch: “what do you want???”. Well, we feel a little bit uncomfortable; it sounds a shrill music, disturbing us. But the most negative feeling is the aspect of abandon and disorganization that exists. Even the smell does not correspond with the initial feeling in front of the shop window: we smell flowers but not fresh ones; and we notice the lack of style and “plastic pots” thrown everywhere over the floor, joined with the dust fallen from the exposition plants (plants in an awful state of putrefaction).

There is a queue of people waiting to be attended, with only one employee, while other two employees are talking between them about personal matters, ignoring the long wait that some customers are saying. In a moment, the employee starts a discussion with the first customer: this is over all I could admit as a customer and, definitively, I go away of this shop without buying anything.

This is an usual story, a bit exaggerated, but it shows definitively that the add of experiences, positives and negatives, influence our perception of a product. In a similar way, the same senses could influence the behaviour and even the decision of other users towards the same product.


NEXT ENTRY: Predictable or theoretical dimension of the experiences, (UX) relationships (2/2)

Showing 4 results.