DIA 15 / 2017

Iconos en interfaces

Partimos de la siguiente premisa: cualquier acción que se presente al usuario en una interfaz debería estar etiquetada con un texto descriptivo en el correspondiente idioma para evitar cualquier tipo de confusión acerca de su uso.
Y dicho esto, mejor vamos a bajarnos del unicornio y volver al mundo real, ¿ok?


Buscando el equilibrio

En el mundo real, cuando tienes que enfrentarte al diseño visual y de interacción de una aplicación móvil, tenemos que ponderar entre el número de “taps” para acceder a una determinada característica y la cantidad de elementos por pantalla que queremos mostrar.

El panel de control en los coches contiene un conjunto de iconos que definen el funcionamiento, indican diversos estados del vehículo e incluso alertan en caso de emergencias.

El problema reside en que muchas veces son valoraciones subjetivas las que determinan dicho equilibrio: puede ser tan válido el concepto de queremos evitar taps extras así que vamos a poner todas las acciones juntas…” como el enfoque de no vamos a marear al usuario presentándole multitud de opciones a la vez.

En muchos casos se busca un término medio en el que la cantidad  de opciones que se presentan al usuario en pantalla no están definidas de la manera ideal, renunciando al etiquetado de las mismas. Una solución de compromiso en la que nosotros los diseñadores, delegamos la información y naturaleza de las  acciones a representaciones simbólicas abreviadas a modo de iconos que el usuario entiende, o debería entender.

Además de la economía de taps en interfaces móviles, tenemos también otra restricción importante: la localización. Si nuestra app va a estar localizada en múltiples idiomas, debemos considerar el espacio que va a ocupar las cadenas de texto que componen las acciones en pantalla, especialmente en idiomas con mayor cantidad de caracteres por palabra… y sí, me refiero a ti, idioma germano.

Por poner un ejemplo, imaginemos la interfaz de un reproductor de audio. En muy pocas ocasiones veremos en dicho reproductor las etiquetas “play”, “stop”, “pause”, etc… al lado de los pictogramas que disparan dichas acciones.

Hay varias razones para no etiquetar las acciones de un reproductor de audio:

  • Por un lado, el espacio disponible para etiquetar la acción de “play” quedará reducido de manera importante al localizar la aplicación al castellano “reproducir”.
  • Por otra parte, esa interfaz sin etiquetas se muestra más clara visualmente al usuario, donde sólo se le presentan los iconos como acciones sin nada más, sin sobrecargar la pantalla (iconos + etiquetas) y evitando el estrés visual.
  • Por último, y más importante, una vez que el usuario ha aprendido mediante la práctica la finalidad de dichas acciones, la etiqueta proporciona una información redundante, que no aporta nada al usuario con un mínimo de experiencia en el uso de dicha interfaz.

Y esta mínima experiencia permite que todo usuario entienda el significado de los iconos de un reproductor de audio, independientemente de su idioma, o incluso del contexto de dicha interfaz. Y no es que estemos hablando de conocimiento innato, sino que se ha adquirido mediante lo que se conoce como

La curva de aprendizaje

Que define el proceso de éxito desde que se plantea una funcionalidad hasta que se ejecuta sin lugar a equívoco.

El mundo de los videojuegos es una fuente maravillosa de la que aprender acerca de tutoriales, ayudas en pantalla y curvas de aprendizaje.

Plantear una curva de aprendizaje que funcione es complicado: se tiene que valorar muy bien la cantidad de información a asimilar por parte del usuario para que no nos resulte aburrida o nos parezca totalmente abrumadora y nos haga abandonar.

Sin embargo, últimamente hay una tendencia por la cual se quiere simplificar al máximo la fricción en curvas de aprendizaje basándonos en la premisa de evitar estresar a toda costa al usuario en el uso de nuestra aplicación. Obviamente no es un planteamiento equivocado, pero tampoco asumamos que el usuario es tonto.

Me explico: todo tipo de interfaces, tanto nuevas como las ya instaladas en la psique colectiva, requieren de un proceso de aprendizaje. Y eso está bien.

Porque si no existieran esos aprendizajes, no seríamos capaces de usar la cámara de fotos (salvo en el modo automático), no habríamos sabido cómo programar el vídeo (ejemplo viejuno donde los haya) o incluso no sabríamos cuál es el programa de la lavadora que toca poner este fin de semana (la iconografía de las lavadoras no es que sea muy clara que digamos).

Así que todas las interfaces, por sencillas que sean, requieren de una curva de aprendizaje, aunque sea mínima, donde al usuario  se le guía en el apabullante reto de usar la interfaz. Y sí, lo sé, una interfaz es como un chiste…, pero en el mundo digital en el que nos encontramos, queremos que nuestros usuarios hagan algo más que llamar por teléfono.

Por cierto, imaginad cómo se enfrenta un usuario de iOS “de toda la vida” cuando tras ver el iPhone X decide cambiar a  Android. ¿Qué narices son esos 3 botones en la base de la pantalla…? ¿Una especie de mando incompleto de la Play? ¿Y qué acciones disparan dichos iconos?

Si son casi omnipresentes, digo yo que serán importantes y tendremos que aprender a usarlos, ¿verdad?

El Contexto

Así que para simplificar la vida del usuario en el uso de interfaces digitales, mediante el uso de iconos, trasladamos una serie de acciones y características que resulten intuitivas, que no necesiten de etiquetas explicativas y que sean definitorias en sí mismas.

Curiosamente, el icono elegido por Facebook para salir de pantalla completa al reproducir un video es casi idéntico al logo de la Luftwaffe.

Debido a ello todos entendemos que el icono para representar la parte de teléfono que tienen nuestros pequeños ordenadores de bolsillo sea un auricular similar a los teléfonos que había en casa de nuestros padres.

La parte curiosa es cómo las nuevas generaciones de usuarios adoptan ese pictograma y lo aceptan como algo establecido aunque, probablemente sólo unos pocos  adolescentes hayan podido ver un teléfono con cable. O el ejemplo del disco de 3.5 pulgadas para definir la acción de “guardar” el documento.

Sin embargo, lo más interesante se encuentra en cómo elegir un pictograma para representar acciones o características que no han existido hasta ahora. O que no tienen una equivalencia en el mundo real.

¿Cómo traslado al conocimiento colectivo los conceptos de WIFI, Bluetooth? O acciones complejas como lanzar un vídeo de un dispositivo a otro, enviar archivos entre dispositivos, cambiar el modo en el que el vídeo se reproduce para que ocupe toda la pantalla…

Pues no queda otra que crear, descubrir y explorar un lenguaje que evoluciona constantemente. Diferentes empresas y sus equipos de diseño han planteado una serie de ideas a modo de pictogramas que poco a poco se van implantado en el conocimiento colectivo, al igual que hace unos cuantos años lo hicieron los pictogramas relacionados con la reproducción de audio.

Sin embargo, como sucede con todos los lenguajes, todavía necesitamos establecer unos patrones formales, unas reglas definidas y un enfoque consensuado sobre cómo representar todas las nuevas características y acciones que componen las interfaces actuales. Con el aliciente de que tratamos de dar voz a un conjunto de procesos que se incrementan a paso de gigante debido a su naturaleza.
¡Chúpate esa, Shakespeare!

Conclusiones

¡Enhorabuena! Si has leído hasta aquí habrás visto que este artículo no era otro más en la larga lista de artículos de diseñadores que no se enteran de lo horrible que es el uso del icono hamburguesa para indicar el menú de un sitio web o de una app… O a lo mejor sí.

En cualquier caso, si te vas a enfadar por ver cómo se ofusca la navegación bajo el arcano e incomprensible icono de las 3 líneas, te sugiero que no eches un vistazo a estos otros iconos:

Iconos en interfaces - 3

Ya hemos visto que categorizar la información de una app, definir las acciones y presentarlas en pantallas de manera sencilla para el usuario requiere de iconos, nos gusten o no.

No voy a volver a enumerar el por qué de estas prácticas, pero recordemos que tenemos que confiar en la capacidad del usuario para aprender a usar nuestra interfaz, aunque le cueste un poquito al principio.

Empleando otra frase manida, el diseño no finaliza nunca. Debemos seguir iterando para mejorarlo, con lo que nuestra tarea es guiar al usuario en el uso de nuestra interfaz, y que la haga suya, modificándola en el proceso según el input que obtengamos, ya sea durante la fase de testing o  mediante el feedback del usuario una vez que la app está operativa.

Y por último, no seamos tan radicales en este tipo de argumentaciones, y me incluyo el primero. Al fin y al cabo es cierto que la verdura es lo más sano que hay, pero en ocasiones una rica hamburguesa te alegra la cena.

Luis Herrero
Luis Herrero

Resulta que ahora lo que hago se denomina diseño visual y se engloba en el área de UX, aunque en realidad sigo moviendo pixeles, como ya hacía el siglo pasado, y realizando nuevas cosas día a día mientras intento no olvidar lo aprendido.