Desencuentros entre un irreverente icono y una reflexiva etiqueta

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”.

 

Clasificaciones

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.

 

References

* 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