Qué sucede con el amarillo. Paul Van Slembrouck

Si os interesa el tema y queréis profundizar sobre ello otras dos lecturas imprescindibles son:

• Information Visualization: Perception for design. Colin Ware (el libro entero es una delicia, uno de los libros para tener como cabecera, merece la pena comprarlo)
• Biopsicología. John P. J. Pinel (igualmente, Pinel explica de manera sintética, brillante y deliciosa parte del funcionamiento del sistema visual humano en el capítulo 7)

Mejor que lo veáis por vosotros mismos después de leer el post en el que Alliban presenta el proyecto.

Proyecto Cell

• El gráfico que planteaba y el razonamiento aplicado no son correctos.
  
• En cuanto a la columna de “Por cada voto de PSOE o PP ¿Cuantos votos más tiene que conseguir un partido para obtener un escaño? NO se puede hacer la media de los votos de dos partidos y compararlos con cada uno de los demás. En su caso habría que comparar entre partido a partido y aun así, dicho cociente no es correcto dado que no tendría en cuenta el condicionamiento de la propia Ley d’Hont ni de las circunscripciones electorales en las que se presenta cada uno.
• Por otro lado las líneas que reflejan el esfuerzo que le cuesta a cada partido obtener un escaño entre la segunda y tercera columnas en el gráfico que planteaba, falsean la realidad dado que a igual número de escaños, hay algunos partidos que están antes que otros en la lista simplemente por su ordenación alfabética, con lo cual la pendiente de la línea y su posición no reflejan fielmente la realidad. Dichos partidos deberían estar a la misma altura en la lista y las líneas partir del mismo punto para que fuera correcta la representación.

–0–

Hoy El País ha publicado un gráfico en el que se representa lo que le cuesta a los partidos políticos conseguir un escaño respecto a los dos principales partidos políticos: PSOE y PP. Sobre el mismo podrían decirse muchas cosas, tan sólo destacar algunas:

• En cuanto a los votos las magnitudes no se representan correctamente por la gran diferencia de cifras, así las barras de votantes de PSOE y PP aparecen cortadas, la proporción visual entre las barras del número de votos y las cifras no representa la realidad.
• No se pueden comparar con facilidad las cantidades númericas de votos, escaños y del coste en número de votos de un escaño para cada partido.
• No muestra visualmente la distribución de escaños del parlamento español con lo cual cuesta realizar una abstracción.
• La elección de las circunferencias para representar el coste de un escaño no es la opción más acertada dado que cuesta más comparar entre superficies circulares que entre, por ejemplo, barras o entre los mismos números. No ordena los números con lo cual no se muestra con claridad a qué partidos políticos les cuesta más obtener un escaño en el Parlamento ni en qué proporción respecto a los dos principales partidos políticos. Por otra parte superpone las circunferencias con lo que dicha comparación, asimismo, no es posible.

El gráfico ayuda a aportar una idea de la problemática que subyace en cuanto a la desigualdad de la representatividad de los partidos políticos en el parlamento español y en cuanto a la diferencia de lo que cuesta a cada partido político obtener un escaño en el parlamento por la aplicación de la Ley d’Hont.

La siguiente es una posible reinterpretación rápida del gráfico de El País (4 horas de trabajo, algo más serio llevaría bastante más tiempo). Prescinde de gráficos a excepción del utilizado para mostrar el reparto proporcional de escaños del Parlamento y responde a la principal pregunta de cuantos votos más le cuesta a cada partido político obtener un escaño en el parlamento respecto al PSOE y al PP y, adicionalmente, a otras tres más:

• A quién han votado más los ciudadanos.
• Qué partidos políticos han tenido más escaños: Cual es la distribución de los escaños en función del número de votos.
• A qué partidos les cuesta más conseguir un voto respecto a los dos principales PSOE y PP, y en qué proporción.

Utiliza cuatro tonos de colores para crear las correspondientes capas de información:

• Negro, blanco y gris para las capas de los textos, datos y gráfico.
• Tres tonos: rojo, azul y verde para las tres principales fuerzas políticas -PSOE, PP e IU-. El uso de las líneas para relacionar datos entre la segunda y la tercera columnas refleja la pendiente o esfuerzo que le cuesta a cada partido obtener un escaño en el parlamento. En la última tabla se prescinde de líneas dejando tan sólo la información. A partir de ella cada persona puede realizar sus propias deducciones respecto a la información mostrada.

Ver el gráfico ampliado en Flickr

Hace poco estaba prototipando una interfaz que permitía al usuario gestionar las etiquetas asociadas a una imagen. Concretamente estaba pensada y diseñada para que el usuario pudiese llevar a cabo dos tareas:

• Borrar una etiqueta concreta
• Visualizar las imágenes asociadas a una etiqueta para, con posterioridad, añadir más etiquetas a dichas imágenes o realizar otras operaciones sobre ellas.

Después de un rato salieron dos opciones:

Alternativa A:

Alternativa B:

En la alternativa A las etiquetas se agrupan alfabéticamente por la primera letra. El objetivo es facilitar la búsqueda de una etiqueta concreta para lo que se recurre a una doble solución:

• Por un lado se utiliza el espacio en blanco para introducir una separación visual entre letras que sea lo suficientemente significativa para que rápidamente se perciba la “ruptura” de cada bloque,
• Por otro, se añaden las letras del alfabeto en mayúsculas, agrupando en conjuntos las etiquetas que empiezan por la misma. Con ello se pretende crear un punto focal sobre las letras mayúsculas de inicio de cada bloque para facilitar la búsqueda de las etiquetas una vez localizado rápidamente el grupo.

En la alternativa B por el contrario se eliminan las letras mayúsculas agrupadoras y se usa el espacio en blanco como único recurso para separar los conjuntos de etiquetas.

Aunque lo mejor para un escaneado más rápido y una lectura óptima es tener una sola columna con la relación de todas las etiquetas, se optó por distribuirlas en tres paralelas con el fin de evitar un excesivo scroll vertical.

El caso es que después de estar un rato mirándolas se me planteó la pregunta de cual de las dos opciones sería la mejor por usabilidad.

¿?

ATENCIÓN, LOCUS DE ATENCIÓN E IMPLICACIONES PARA LA USABILIDAD DE LAS INTERFACES

En su libro The Humane Interface (me encanta este libro y lo voy a seguir utilizando como fuente de inspiración para futuros posts) Jef Raskin reflexiona sobre dos conceptos que vienen al caso, la atención y el Locus de Atención.

En cuanto a la atención Fernández-Abascal, Dolores Martín y Domínguez Sánchez (1) (2009, p. 52) la definen como:

• Un estado de concentración en algo.
• Capacidad de procesamiento que puede distribuirse o compartirse en el tiempo entre las diversas tareas y estímulos que exigen atención.

Ahondando en la definición, Tejero (2) menciona que:

“La atención puede definirse como el mecanismo cognitivo mediante el que ejercemos control voluntario sobre nuestra actividad perceptiva, cognitiva y conductual, entendiendo por ello que activa/inhibe y organiza las diferentes operaciones mentales requeridas para llegar a obtener el objetivo que pretendemos y cuya intervención es necesaria cuando y en la medida en que estas operaciones no pueden desarrollarse automáticamente”.

Los procesos en los que media nuestra atención son procesos conscientes. La atención nos permite centrarnos en parte de la información que recibimos a través de nuestros órganos sensoriales y controla y orienta nuestra actividad de forma consciente para conseguir un objetivo concreto. Por el contrario hay ocasiones en que las tareas las llevamos a cabo guiadas por un hábito, las hacemos de forma automática o insconciente.

No obstante, ambos procesos, no se dan plenamente por separado sino que puede haber un cierto grado de interacción entre los mismos.

Un buen ejemplo es el el de escribir en el ordenador. Si hemos aprendido mecanografía ejecutamos esta acción de manera inconsciente. Una vez que posamos las manos sobre el teclado no sómos conscientes de dónde se encuentran posicionadas las teclas que corresponden a los caracteres del alfabeto. Cuando pensamos en una palabra nuestros dedos se mueven de manera automática presionando las que hagan falta y como resultado aparece la palabra en pantalla. El proceso de escribir está guiado por nuestro hábito adquirido a través de un proceso de aprendizaje. Y si el hábito está mal adquirido, los errores tenderán a repetirse.

Por el contrario,si tuviésemos que pensar en los caracteres que conforman una palabra determinada, por ejemplo -g-a-z-p-a-c-h-o- y decidiéramos escribirlos uno a uno, en el proceso entraría en juego nuestra consciencia: En tal caso las operaciones serían:

• ¿Cuál es el primer carácter de la palabra que estamos escribiendo? –> la “g”
• ¿Dónde está la tecla que se corresponde con el carácter “g”– > en la parte central del teclado, la localizamos –> y la presionamos continuando la tarea con el resto de caracteres en un proceso recursivo hasta completar la palabra.

Raskin sumariza las diferencias entre los procesos cognitivos conscientes e inconscientes de la siguiente forma (3):

Por último, en cuanto al concepto de Locus de atención comenta que (4):

“Uso el término locus porque significa un lugar, o en el sitio. El término foco, que a veces se utiliza de forma similar, se puede entender como un verbo, por lo que transmite una falsa impresión sobre cómo trabaja la atención. Cuando uno está despierto y consciente, el Locus de Atención es una característica, un rasgo de, o un objeto en el mundo físico, o una idea sobre la que está pensando activamente y con atención”

¿Cómo influye la atención y el locus de atención en el desempeño de las tareas que acometemos cuando interactuamos con el ordenador?

Volvamos a la interfaces planteadas al principio del post.

Considerando el ejemplo A, cuando el usuario busca una etiqueta específica como por ejemplo “invertebrado” el locus de atención se centra en la búsqueda de palabras que empiecen por “i”. Este proceso lo ejecutamos en un primer momento de manera inconsciente. La separación de las etiquetas en grupos usando el espacio en blanco no interfiere con la tarea, no añade “ruido”, ni visual, ni cognitivo, sino más bien lo contrario, aporta una pista sutil y que, de manera insconsciente, nos ayuda a diferenciar unos grupos de otros rápidamente.

El problema se presenta cuando la persona se topa con la letra mayúscula que abre cada grupo de etiquetas. -¿?- -¿Qué es esto…?- piensa. En ese momento se rompe el proceso inconsciente al encontrarse el usuario con algo inesperado que le lleva a tener que razonar e interpretar lo que está viendo. A partir de ahí el proceso requiere de su consciencia y atención:

• ¿Una letra mayúscula? ¿? –> ha de interpretar que las letras mayúsculas agrupan conjuntos de etiquetas que empiezan por las mismas.
• A continuación pasa a preguntarse por qué letra empieza la etiqueta buscada –> por “i” –> pasa a buscar el grupo de la “I” mayúscula –>una vez que lo ha localizado –>
• ¿Qué etiqueta estaba buscando y cuál es el siguiente carácter de la misma? –> “invertebrados” –> busca la palabra invertebrados en el conjunto de etiquetas identificado.

El diseño con letras mayúsculas para separar los grupos de etiquetas rompre nuestro locus de atención e interfiere directamente con la acción que se está llevando a cabo.

La altenativa de diseño B es más óptima dado que se juega con los espacios en blanco y no se incluyen terceros elementos como las letras mayúsculas que desencadenen un proceso de razonamiento consciente. La mirada fluye de manera natural por el listado, los espacios en blanco organizan las letras marcando los diferentes conjuntos de etiquetas y el locus de atención no se rompe, siendo el proceso mucho más rápido. La interfaz es más óptima.

REPENSAR LA INTERACCIÓN Y LAS METÁFORAS DE LOS SISTEMAS OPERATIVOS: DECONSTRUIRLOS

Las metáforas que utilizamos para dar forma a, y modelar los espacios de información, y los procesos de interacción de los actuales sistemas operativos requieren de un importante esfuerzo por parte del usuario para comprenderlos o llevarlos a cabo.

Las interrupciones son parte inherente de cualquier actividad. No obstante podemos optimizar los flujos de interacción de los actuales sistemas operativos para disminuir el esfuerzo cognitivo necesario para realizar las tareas que ejecutamos con ellos.

Si quiero modificar una imagen que estoy viendo en el navegador antes, tengo que llamar a una aplicación para llevar a cabo dicha actividad rompiéndose nuestro locus de atención ¿Por qué tenemos que usar una “aplicación” para editar una imagen si mi tarea es modificar una imagen, no lanzar una aplicación? ¿? A continuación tengo que pensar qué aplicación he de utilizar para ello. Ésta podría ser por citar una Photoshop. La siguiente tarea para conseguir nuestro objetivo sería dilucidar cómo lanzarla ¿Tendría que acudir al escritorio o al menú de inicio? En el menú de inicio, en Windows ¿debería buscarla en el box de búsqueda o ir a la lista de “Todos los programas” para localizarla. Si opto por esta última opción… ¿bajo qué carpeta -grupo de programas- la encontraría? ¿Carpeta? ¿? ¿Por qué usamos la metáfora de una carpeta del mundo real para representar algo que guarda una “aplicación” utilizando la misma metáfora para agrupar aplicaciones y documentos? ¿? Cuando he localizado la carpeta con la aplicación tengo que hacer clic en el icono que la abre, esperar a que se abra lo cual lleva un tiempo variable de ¿15 – 40 segundos…? ¿más? con la consiguiente distracción del usuario hasta que se abre. A continuación he de abrir la imagen que previamente debería haber salvado en el disco duro haciendo clic con el botón derecho del ratón sobre la misma en el navegador, de seleccionar la “carpeta” donde guardarla, y de pulsar el botón “Guardar” del correspondiente cuadro de diálogo.

El proceso y el tiempo que media desde que el usuario decide modificar la imagen que está viendo en el navegador hasta que empieza a editarla puede ser de… ¿3 minutos? ¿5? El proceso de modificar la imagen que estamos viendo en un navegador se termina subdividiendo en multitud de tareas con constantes interrupciones para llevar a cabo toda la serie de pasos intermedios que finalmente nos permitan dar cumplimiento a lo que queremos.

Opciones del menú secundario que se abre al pulsar el botón derecho del ratón sobre el icono de una imagen en el escritorio de Windows 7. Un total de 27 tareas posibles sin contar las que hay detrás de los submenús como el de la opción “Abrir con” de la captura de la imagen. El usuario tiene que hacer el ejercicio de identificar cuál es la tarea adecuada para modifica la imagen: “Abrir” “Edita con Fireworks” “Editar” “Abrir con” > “Adobe Fireworks CS4″, “Adobe Photoshop CS4″,  “Microsoft Picture Manager”, “Paint”, “Snagit Editor” ¿Cuál elijo y a qué coste cognitivo? ¿?

De todas las opciones que se me ofrecen sólo me interesa una: la editar.

¿Cómo podemos diseñar interfaces más optimizadas? ¿Interfaces más orientadas al modelo mental de las personas y no condicionadas por las limitaciones impuestas por el software o el Sistema Operativo?

Una posible solución es lo que Donald Norman denomina”Informática basada en actividades” (Activity-Based Computing, ABC) (5) :

“La idea básica es sencilla: tener a mano todo el material necesario para una tarea, con poco o ningún esfuerzo mental”

Sencillo de explicar, muy difícil hacerlo realidad…

Al menos hasta hoy día sólo se ha conseguido en parte, y sólo ahora comienzan a verse interfaces más centradas en las personas que en la propia tecnología.

Captura de pantalla del “Control por voz” del iPhone
Ahora… ¡¡podemos hablar con nuestros móviles para decirles lo que queremos que hagan…!! Ya iba siendo hora de que por fin podamos comunicarnos por voz con un dispositivo pensado para hablar por voz con otras personas… y aún así… ¿por qué se rotula la pantalla como “Control por voz”?
¿Por qué no mejor algo como… ¿Qué quieres hacer?? ¿? … La complejidad se carga en la tecnología, no en la interfaz.
También se puede prescindir del botón de “Cancelar” dado que ya tenemos el propio del teléfono para volver a la “Home” o “escritorio”.

Todavía hoy estamos anclados por el paradigma de las interfaces de unas máquinas y unos lenguajes de programación conceptualizados hace tres décadas y unos modelos de negocio empresariales orientados a maximizar la obtención de beneficios económicos antes que el beneficio para las personas, ejemplo del cual, por citar tan sólo uno, es el actual modelo de aplicaciones que se ha desarrollado para los nuevos móviles “inteligentes”, una oportunidad de oro perdida para centrar de verdad la informática en donde tiene que estar centrada, en las personas, no en la forma de hacer dinero.

Norman (6) establece una jerarquía en los procesos que está conformada por (desde la más alta a las más bajas):

• Actividades: conjunto de tareas dirigidas a unos objetivos concretos -poner al día las cuentas de casa- -llamar a un amigo- son dos posibles ejemplos de actividades.
• Tareas: aquellos pasos que seguimos para llevar a cabo los objetivos subordinados de las actividades.
• Acciones: conjunto de operaciones que llevamos a cabo para ejecutar una tarea, por ejemplo, una operación al escribir una palabra puede ser teclear un carácter y la acción, escribir la palabra.

La Interfaz Humana (prefiero éste término al de Sistema Operativo, ajeno a las personas) ha de estar centrada en las actividades, no en las tareas. No en tener que pensar en qué programas o aplicaciones “estancas” necesito para llevarlas cabo.

No en algo llamado Mozilla Thunderbird sino en escribir un mensaje y en mandárselo a mi hermana.

Aza Raskin explica muy bien un nuevo modelo de negocio que podría convertirse en una alternativa al de la informática actual (que está basado en aplicaciones y programas, algo que entra en constante conflicto con nuestro modelo mental que tenemos como personas que somos) y que es igualmente viable desde un punto de vista económico y más centrado en las personas.

Un ejemplo de ello es la evolución que están sufriendo los navegadores. El navegador se está transformando en una capa que está envolviendo a los sistemas operativos convirtiéndolos en interfaces “más humanas” orientadas a responder nuestras actividades cotidianas:

• las necesidades de interrelación social -redes sociales –> Facebook, Tuenti-
• las necesidades de comunicación –> Twitter, Skype, Google Voice, GMail, Hotmail…-
• las de productividad -búsqueda y localización de información –> Google, Bing-
• para servirnos como memoria –>almacenamiento en la nube –> Google Docs, Dropbox-
• y para la recuperación, gestión y aprovechamiento de la información –> Google, Bing, Google Docs…

Y lo están empezando a hacer de forma bastante más eficaz que los sistemas operativos. Integrando todo ello en una interfaz deconstruida que se centraliza en un campo de entrada de texto que está dejando de ser “barra de navegación” para convertirse en “barra de interacción”:

La AwesomeBar HD permite seleccionar un comando para, a continuación, escribir la necesidad de información.
Pulsando a continuación retorno se ejecuta la acción (por ejemplo, se presenta la página de resultados de Amazon
con los títulos de los libros que coinciden con las palabras escritas

El binomio Web-navegador está reemplazando a los sistemas operativos por algo más cercano a nosotros y ha de seguir evolucionando.

Un posible camino para ello y hacia una interfaz más humana puede ser el proyecto en el que está trabajando MozillaLabs –> AwesomeBar HD que no es sino una pequeña adaptación de algo mucho más potente, Ubiquity, una metainterfaz que se sitúa por encima del sistema operativo y que se integra plenamente en el navegador. La comunicación tanto con la AwesomeBar HD como con Ubiquity se da mediante palabras escritas y comandos muy específicos aunque el día de mañana quizá podra darse también a través de la voz y en un lenguaje natural. Una interfaz como Ubiquity permitiría simplificar el proceso de editar una imagen para que fuese algo así como seleccionarla en el navegador, hacer clic en la barra de navegación, escribir “modificar”, y lanzar la interfaz en la misma ventana para llevar a cabo la acción. Compararlo con el anterior proceso descrito…

Desde un punto de vista cognitivo mucho mejor.

La AwesomeBar HD da continuidad al proyecto Ubiquity, un éxito tan rotundo y algo tan innovador e importante que posiblemente lo estarán desarrollando internamente. La AwesomeBar HD no es más que un vistazo a lo que veremos a medio plazo.

Google podría hacer algo similar y la verdad, es que es sorprendente que todavía no lo hayan hecho, evolucionar su interfaz para pasar de un buscador a un asistente personal que guíe al usuario en su interacción con la Web. Medio trabajo ya lo tienen hecho, la pregunta que deberían plantearse los ingenieros de Google es la de cómo podrían unificar las funcionalidades de los diferentes box de búsqueda-interacción de los distintos servicios que ofrecen: Gmail, Google Docs, Google Calendar, Google Translate… en el box del buscador principal.

Recuperar la idea del sistema operativo, ubicuo, multimodal y humano, vamos

Quizá mañana, Mozilla, Google, Microsoft o Apple vuelvan a sorprendernos.

Seguro que sí.

–O–

BIBLIOGRAFÍA:

1. Fernández Abascal, Enrique G.; Martín Díaz, María Dolores; Domínguez Sánchez; Javier. Procesos psicológicos. Madrid : Ediciones Pirámide, p. 52. ISBN 978-84-368-1605-1
2. – Ibid. p. 36.
3. Raskin, Jef. The Humane Interface: New directions for designing interactive systems. Boston : Addison Wesley, p. 16, ISBN: 0-201-37937-6
4. – Ibid. p. 17.
5. Norman, Donald. El ordenador invisible. Paidós : Barcelona, p. 101. ISBN 84-493-1089-X
6. –Ibid, p. 102.

Un buen ejemplo de Diseño de Información ya que:

• Utilizan “pequeños múltiples” para estudiar cada una de las fases del salto. Por “pequeños múltiples” se entiende un conjunto de imágenes presentadas secuencialmente unas al lado de las otras que permiten detectar patrones, variaciones y cambios significativos en un instante o período temporal concreto mediante la comparación de cada una de ellas respecto a las demás. En palabras de Tufte (Envisioning Information, p. 67):

“En el corazón del razonamiento cuantitativo hay una pregunta simple: ¿Comparado con qué? Los diseños de múltiples pequeños, análisis multivariados y de datos, ofrecen una respuesta directa mediante la aplicación de las comparaciones visuales de los cambios, de las diferencias entre los objetos en el ámbito de las alternativas.”

• En el conjunto de múltiples pequeños los científicos utilizan una doble representación para extraer la información:
  • Por un lado usan fotografías reales de una pulga saltando. La fotografía es una reproducción muy fiel y aproximada de la realidad. Por mucho detalle que tenga, un dibujo no es capaz de transmitir la misma cantidad de información que una fotografía  real del objeto o animal, ni el mismo tipo de información que otro tipo de representación visual,
  • Junto a la fotografía dibujan un esquema de las patas de la pulga formado por líneas conectadas por puntos que reproducen sus articulaciones. Deconstruyen así la realidad simplificándola y centrando la atención en el aspecto que desean analizar: el proceso del salto.

Analizando los múltiples pequeños con algo más de detalle llama además la atención su alta densidad informativa:

• En cada uno aparece el tiempo en milisegundos, hasta que comienza y desde que comienza el salto, en la esquina superior izquierda.
• En el primero aparecen los nombres de cada una de las partes de la pata de la pulga (tarso, tibía, femur, etc) junto a la correspondiente línea que la representa.
• En el primero, además del esquema superior con las líneas negras, este aparece nuevamente duplicado en color amarillo y superpuesto directamente sobre el propio cuerpo de la pulga para destacar la anatomía de la pata directamente sobre la foto.
• En los múltiples pequeños, primero, segundo, cuarto y octavo aparece el ángulo del cuerpo de la pulga respecto a la horizontal del suelo en ese momento.
• En el último múltiple pequeño de la esquina inferior derecha se presenta la escala de la pulga.

Mediante el uso del doble recurso de objeto real (imagen) y representación esquemática de la estructura de las patas en cada instante logran comunicar visualmente, de manera extraordinaria, una altísima cantidad de información en un mínimo espacio. En definitiva, un estupendo ejemplo de Diseño de Información de aquellos de los que gusta Edward R. Tufte.

¿Qué más cosas podemos hacer como Diseñadores de Información para facilitar y complementar la comunicación visual y ayudar a los científicos a analizar el proceso del salto?

Una primera acción puede ser separar las fotografías reales de los esquemas de la estructura de las patas y centrarnos en estos últimos:

Alineamos los múltiples pequeños tomando como referencia el punto gris (de partida) de la esquina inferior izquierda de cada uno. Este punto permite hacerse una idea de la distancia recorrida en cada instante del salto:

Quitamos las líneas grises que nos sirven de referencia para alinear ya que cuanta menos “tinta” innecesaria que no aporta ningún valor extra haya en el gráfico, mejor será la visualización de información. Nótese  además como en el último múltiple pequeño de la secuencia, dada la gran distancia que salta la pulga respecto al punto de origen, tenemos que alinearlo no en relación al múltiple pequeño de al lado que le tocaría, sino al siguiente de más abajo (dos líneas grises en lugar de una). Ello da una idea intuitiva adicional al observador acerca de la gran distancia que recorre la pulga saltando en un milisegundo:

En éste conjunto de múltiples pequeños se ha optado por individualizar la capa de información de la estructura de la pata  y no se ha añadido ningún otro elemento informativo más. No obstante si se desea, se pueden incorporar capas informativas adicionales tales como por ejemplo, la del tiempo:

Tanto el tiempo como el punto gris de referencia para medir la distancia se consideran elementos informativos secundarios por lo que se utiliza un color gris claro para su representación. Con ello se logra que aparezcan más atenuados con el fin de pasar más desapercibidos respecto a la capa que se considera elemento informativo principal: los esquemas de la estructura de la pata de la pulga que van en negro puro.

Asimismo se  ha optado por conservar el tiempo en milisegundos expresado en números en lugar de recurrir a algún otro tipo de solución visual gráfica que transmitiese la idea de transcurrir del tiempo (por ejemplo, las manillas de un reloj que pasasen desde la izquierda -tiempo negativo en -40 ms- hacia la derecha -tiempo positivo, + 2ms-). La razón es que en este caso particular los números transmiten de manera más directa e inequívoca el tiempo transcurrido en cada momento dado que los períodos temporales con los que se trabaja son muy pequeños y dado que el número es otro tipo de elemento visual diferente a una línea que transmite un significado distinto: el de cantidad. La línea por el contrario representa (en este caso concreto) un objeto: una parte de un insecto. Desde un punto de vista del Diseño de Información, números y líneas son otras dos capas de información más diferenciadas que están presentes en el gráfico. Por último, otra más si atendemos a una división por formas, son los círculos, diferentes de líneas y números. Su análisis por separado aporta igualmente otro tipo de información interesante sobre la posición de las articulaciones de la pata en cada instante:

La imagen original está en blanco y negro y la representación esquemática en tonos de gris. Un potente recurso adicional que tenemos a nuestro alcance para individualizar los elementos de las patas y compararlos visualmente con mayor facilidad es el uso del color. Para ello asignamos uno para cada parte de la pata con lo que emergen con mayor claridad nuevas comparaciones e información que está implícita en el gráfico pero oculta hasta el momento:

Con color o sin él, trabajar con una parte y eliminar el resto nos permite comparar elementos individuales posibilitando llegar a un grado de análisis más profundo de ser necesario:

En Diseño de Información y en superficies planas como el papel jugamos con dos dimensiones. Cuando algo no cabe a lo alto se puede disponer a lo ancho o si no hay espacio suficiente, combinar ambas disposiciones. En el caso que nos ocupa en el conjunto original, los múltiples pequeños se han dispuesto en dos columnas verticales paralelas de 6 y 4 módulos siendo el patrón de lectura una “N” invertida.

Si el objetivo perseguido o en el que se quisiera incidir fuese poder estudiar la diferencia en cuanto a la distancia horizontal recorrida en cada momento antes y después del salto, una representación vertical sería más óptima ya que todos los múltiples pequeños quedarían alineados a la izquierda respecto al punto gris que sería la referencia para establecer la distancia en cada instante:

No obstante y por el gran espacio en vertical que ocupa, esta representación tiene la desventaja de que no nos permite apreciar el conjunto entero de un sólo vistazo al no caber en pantalla. Las soluciones posibles para este problema son: a) optar por una distribución espacial mixta de los mismos (en el eje X e Y) como se ha hecho en la imagen original utilizando 2 columnas verticales, una al lado de la otra, de 6 y 4 múltiples o b) escalar el tamaño hasta que quepa en el área de visualización (pantalla) o de representación (papel). Para ello deberíamos reducir la imagen hasta una altura de 500 píxeles. La desventaja a cambio de obtener la visión global del conjunto es la perdida de detalle respecto a la representación original -vista completa/análisis particular vs vista reducida/análisis global- (nótese como en el caso de la vista global habría que remarcar más el punto gris poniéndolo en negro puro o aumentando artificialmente su tamaño para que se perciba correctamente, dado que al escalarlo prácticamente no se aprecia):

El escalado es una estrategia que se utiliza en las interfaces de zoom inmersivo. En Visualización de Información nos permite mostrar altísimas cantidades de información dando lugar a visualizaciones bellísimas que pueden poner de manifiesto patrones informativos ocultos que nos ayuden a extraer conocimiento como por ejemplo en…

ésta espectacular visualización del catálogo de Amazon

(leeros el post entero que merece la pena)

Frente a la alineación en vertical de los múltiples pequeños, la alineación en horizontal ofrece una sensación más natural tanto de movimiento como del transcurrir del tiempo al coincidir con nuestro sentido de lectura de izquierda a derecha. Además, mientras que la representación en vertical nos servía para juzgar de manera más óptima la distancia recorrida en el eje X, la representación horizontal nos permite hacer lo propio en cuanto al eje Y (la altura):

Ver imagen ampliada en Flickr

Por último, cuando nos encontramos en un medio líquido como la pantalla de un ordenador o tablet podemos agregar una dimensión extra respecto al papel -un eje Z- para simular la interacción del movimiento de manera mucho más efectiva que mediando el papel. Para ello, “apilamos” unas imagenes encima de las otras y las presentamos secuencialmente. Para descargar el documento pulsar sobre el enlace de más abajo de “Representación esquemática y a continuación seleccionar en Google Docs dentro del menú archivo > Descargar original o utilizar la combinación de teclas Ctrl+S.

Representación esquemática animada de las patas de la pulga en el salto (PDF)

Cuando lo tengáis salvado en vuestro ordenador abrirlo con Adobe Reader y previsualizarlo a pantalla completa (menú Ver > Modo Pantalla Completa o combinación de teclas Ctrl+L). Utilizando a continuación las teclas de Avanzar – Retroceder página podemos simular el movimiento y obtener otro tipo de comparación visual que no da ninguna de las anteriores representaciones planas y estáticas.

Y es que la pantalla y el ordenador nos permiten escapar de la “Tierra plana” del papel.

Bola extra:
Para los que hayáis visto la película Up de Pixar, en los créditos del final, cuando está pasando las páginas del cuaderno de fotos, hay un curioso y llamativo pequeño gran homenaje a Edward R. Tufte. En una esas páginas aparece un conjunto de 3 múltiples pequeños en los que se ve al perro de la película saltando a imagen y semejanza del que aparece en la portada del conocido libro de Tufte “Beatiful Evidence” :)

Bola extra 2:
Y aunque es más difícil de percibir, también en los créditos del final, en los que se van deslizando de arriba a abajo, aparece otro pequeño y algo más oculto mensaje que la gente de Pixar le manda a su compañía madre: Y es que cuando están acabando los créditos en un momento dado se ve el nombre de Walt Disney y a su lado, aparece una pequeña “medalla de explorador” tejida en hilo amarillo/anaranjado (en el lado derecho de la pantalla) en cuyo interior puede verse un bonito hongo nuclear. Casualidad o no, lo que no se puede negar es que en Pixar sentido del humor tienen :)

De cara a usabilidad, tiene implicaciones a tener en cuenta.

A continuación mirad fíjamente la imagen de un poco más abajo durante un minuto. Luego desplazad ligeramente la vista a la parte inferior, a la superior, a izquierda y a derecha, parándoos en cada zona unos 30 segundos. Veréis aparecer correspondientemente bandas horizontales completas de color verde, azul, y verticales de color naranja. El color se define en función de la longitud de onda y de la intensidad de la luz que se refleja sobre los objetos. El ojo humano tiene diferentes sensibilidades a la hora de captar unos u otros colores. En esa imagen se puede ver una demostración práctica de cómo la mezcla de diferentes longitudes de onda y su interpretación por el cerebro generan unas u otras percepciones. Una espectacular demostración de cómo percibe el sistema visual humano nuestra realidad y de cómo se pueden crear capas de información, y por ende jerarquizar información, basándose en el uso de colores, cuyo uso meditado impacta en la usabilidad de una interfaz.

Me encanta el rediseño del logotipo de Spanair:

Dicen que es un avión cruzando el mundo aunque los propios empleados de la aerolínea comentan lo que ven, una sonrisa:

Algunos sostienen que se parece al logotipo de Sony Ericsson:

Aunque  yo me decanto más por el de Pepsi:

Parecido que otros asimismo establecen y sumarizan comentando de donde deriva el de Spanair:

Derivacion del logotipo de Spanair. De izquierda a derecha: Logotipo de Boeing + logotipo de Pepsi + logotipo de Expedia

Y es que el círculo es uno de los recursos más poderosos que como diseñadores tenemos a nuestro alcance para focalizar y atraer nuestra atención ya que en la naturaleza, pocas formas hay puramente circulares que podamos percibir cotidianamente, salvo aquella por excelencia de la que dependemos, nuestro astro rey:

…y que sirven junto a una correcta elección de los colores y estudio de las formas para construir marcas potentes que en momentos decisivos transmitan confianza y llamen a la acción para empujar al cambio:

Desde luego que toques de diseño emocional incorpora el logotipo de Spanair, ya que además de la sonrisa tiene un cierto toque retro que nos recuerda a algunos grandes iconos de nuestra juventud (y que marcaron en su momento todo un hito tecnológico):

Parecido que emerge y se hace evidente si invertimos sus colores utilizando alguna herramienta como Photoshop:

(Fijaros en el logotipo original en el detalle de cómo acentúan con un sutil degradado a naranjas más fuertes en donde estaría el comienzo de la boca y a claros en la versión negativa del logotipo)

Y es que aunque nuestra mente consciente no lo perciba, nuestro subconsciente es muy bueno detectando los patrones y mensajes que se ocultan detrás de las formas, recurso extraordinariamente potente que bien utilizado puede dar mucho juego y en cuyos principios se sustenta aquello que llamamos Arte (si no os habéis dado una vuelta por él, os recomiendo visitar el Museo Thyssen Bornemisza, y si no vivís en Madrid, echarle un vistazo a su exposición virtual de arte moderno).

Usados consciente e intencionadamente estos recursos de diseño  nos permiten hacer cosas realmente interesantes:

¿Qué valores quieres transmitir Google con sus terminales Android en contraposición al elitismo de los iPhones?

¿Es un androide rebelde? ¿Enfadado? …

¿y qué valores transmiten si invertimos los colores de la imagen y los espacios positivos pasan a ser negativos y los negativos positivos?

El efecto que provoca es el opuesto, amigabilidad, cercanía, calidez incluso un cierto aire de sumisión, observación, expectación…  ¿curiosidad?

El círculo es un poderoso atractor de la atención. Los bordes redondeados transmiten calidez y cercanía (de ahí que nos gusten tanto a los Diseñadores de Interacción y gráficos y que les gusten tan poco a los maquetadores por el trabajo que les dan hasta que llegue CSS3).

Si quieres crear un punto focal de atención en tu web usa los círculos

Si quieres que tu marca sea interesante, usa los círculos

Combinándolos con otros recursos semióticos de Diseño de Información (proporciones aúreas, superposición de elementos circulares en capas para crear movimiento, linealidad en torno a ejes espaciales en 3 dimensiones…) los resultados pueden ser francamente espectaculares ayudando a crear marcas tan potentes a nivel mundial como la de Pepsi.

Briefing creativo de cómo se gestó el diseño del logotipo de Pepsi (PDF) (vía blog de Alex Faaborg)

Rediseñando el logotipo de Firefox (vía blog de Alex Faaborg)

Simplicidad, armonía, equilibrio, calidez, cercanía, complicidad, ritmo, dinamismo, movimiento, credibilidad…

…en resumen y concluyendo, me encanta el logotipo y la nueva marca de Spanair.

Enhorabuena.



Abajo os pongo unas capturas de cómo lucen las interfaces de los navegadores principales hoy día para que veáis cómo aparece (o no) la barra de estado:

• Minefield de Mozilla (la alpha de Firefox 4) muestra la barra de estado como siempre en la parte inferior.
• Opera también la tiene aunque presenta un curioso diseño visual, cuando el cursor del ratón se pone encima de un enlace, se muestra la URL en la parte inferior pero en una capa gráficamente integrada y al mismo nivel jerárquico desde un punto de vista de Diseño de Información que el resto de las utilidades en la esquina inferior izquierda.
• Chrome no muestra la barra de estado pero cuando el cursor se pone sobre un enlace, se enseña su URL en la parte inferior, en una capa emergente de color azul, en la esquina inferior izquierda . De la URL sólo se muestran los 59 primeros caracteres incluidos el http:// seguidos de puntos suspensivos.
• Safari opta por la solución más radical (y en mi opinión la peor) no muestra ninguna barra de estado.

Me gustaría conocer vuestros puntos de vista y opiniones:

• ¿Barra de estado sí / barra de estado no? ¿por qué?
• Estos días estoy trabajando sobre SEO y URLs amigables en el trabajo y me estoy dando cuenta de que todavía hay que hacer mucho, mucho trabajo desde un punto de vista de los usuarios para mejorar las actuales URLs. Seguimos con un sistema de nombres y direcciones artificioso, extraño y ajeno para una persona normal, con una nomenclatura durísima (http, : , // , ftp …  -¿pero qué demonios es eso?-) heredada ni más ni menos que de hace 16 años. La pregunta es ¿Qué se puede hacer para mejorar las URLs y ayudar a los usuarios a formarse un constructo mental del espacio de información (sitio web) por el que están navegando? ¿Qué deberíamos hacer con el http:// ftp:// y otras “rarezas tecnológicas” del pleistoceno carentes de significado para las personas?

Fijaros además en las capturas de abajo en como se construye la jerarquía informativa de la interfaz del navegador en base a la jerarquía semántica del documento que, a la postre, es lo que le importa al usuario dado que la interfaz del browser realmente es cuando menos, secundaria:

• En el área de las pestañas o tabs, se muestra sólo parte del título del documento (página web) que está visualizando el usuario con el problema evidente asociado: se está sacrificando espacio en aras a ganar píxeles verticales para representar una mayor cantidad de contenido. ¿Cómo resolvemos este problema de no poder visualizar el título completo del documento cuando es la entidad semántica de mayor nivel que sumariza idealmente el mismo?
• Dado que el título no se visualiza por completo por el pequeño espacio horizontal disponible en cada pestaña, en el box de la barra de navegación que puede (y que debería) funcionar como línea de comando e interfaz adaptativa se muestra la URL del documento que no transmite de manera satisfactoria en un gran número de ocasiones (todas aquellas en las que no es amigable y aun con URLs amigables tenemos problemas):
  • De qué trata el documento.
  • La estructura del espacio de información o sitio web (muestra tan sólo una rama jerárquica en la que está clasificado, categorizado o facetado el documento, pero nada más). Llegados a este punto una mejora importante que se podría implementar en futuras evoluciones de la interfaces de los navegadores para ayudar a los usuarios a navegar, es deplegar de alguna manera un mapa o representación visual del sitio que idealmente… ¿se podría construir en base a los sitemaps.xml?
  • Una semántica comprensible para una persona. Las URLs no están codificadas en un lenguaje amigable al utilizar signos y nomenclaturas ajenas al código lingüístico que hablamos, escribimos y utilizamos, nuestra lengua madre, castellano o la que sea. En las URLs no se habla el lenguaje de los humanos, se habla usualmente el lenguaje de las máquinas :-( lo cual es un gran fallo desde el punto de vista de la usabilidad y un área en la que hay trabajar para subsanar este problema.
• Al estar situada la barra de estado en la parte inferior del navegador se está separando espacialmente y rompiendo la relación semántica que existe entre el enlace inserto en el documento y sobre el que se posiciona en un momento dado el cursor del ratón, y su URL que se muestra en la barra de estado en la parte inferior.

Firefox Minefield- Tooltip que se muestra cuando el cursor se posiciona sobre un enlace. Nótese como se visualiza el título especificado en el atributo title del enlace y cómo está espacialmente separado el tooltip de la URL que aparece en la barra de estado en la parte inferior rompiéndose la relación semántica entre ambos.

• Como propuesta de posible mejora para los navegadores se podría testear si la URL debería enseñarse como un tooltip. Si existe un title como atributo en el enlace entonces deberían mostrarse ambos, título y URL para ofrecer toda la información posible al usuario sobre el documento que se encuentra detrás del enlace y ayudarle a decidir si desea o le interesa hacer clic para visualizarlo o no. En cuanto al problema de la longitud de la URL podría considerarse si en lugar de enseñar toda se podría poner algún límite en el número de caracteres que se visualizarían a priori mostrando tan sólo parte más relevante (¿el nombre de la página junto al último directorio – subdirectorio de la misma?) o plantear algún tipo de capa que se desplegase a demanda del usuario de manera más o menos similar a como sucede con la barra de utilidades contextual de Word 2007:

Word 2007. Aspecto del cursor cuando está sobre una palabra

Word 2007. Aspecto de la barra de utilidades cuando se ha seleccionado una palabra. Nótese como se muestra de manera sútil y prácticamente transparente la barra contextual de utilidades con las que el usuario puede formatear el texto como mejor le parezca.

Word 2007. Barra de utilidades contextual que aparece cuando el usuario mueve el cursor hacia el contorno semitransparente (ver captura anterior) que la representa. De la misma forma para no mostrar toda la URL en el tooltip junto al title que se visualizaría cuando el usuario posicionase el cursor del ratón sobre un enlace, se podría considerar la posibilidad de mostrar tan sólo parte de la URL inicialmente y, a demanda del usuario con algún gesto sobre un área del tooltip, desplegar la URL completa si fuera necesario.

Hay mucho campo de investigación aquí y mucho espacio para las mejoras.

La pregunta es relevante ¿mostramos la barra de estado? ¿Sí? ¿No? ¿Que os parece la propuesta de Jennifer Boriss?

Os dejo con las capturas de los navegadores para que veáis como muestran actualmente las barras de estado (y las URLs):

Barra de estado en la parte inferior de la Minefield (Alpha) de Firefox 3.7

Barra de estado en la parte inferior en Chrome. Aparece sobre una pequeña capa azul cuando el usuario posiciona el cursor sobre un enlace y muestra hasta 59 caracteres de la URL incluidos el http://

Opera. Barra de estado en la parte inferior. Cuando el usuario posiciona el cursor sobre un enlace se amplia la pequeña capa con las utilidades de la esquina inferior izquierda permitiendo visualizar la URL

Confieso que tenía franca curiosidad por ver cómo resolvían el tema en cuanto al diseño gráfico de los laterales de la barra de tabs. Mirar una captura de la nightly de hoy (16 de junio de 2010) de Firefox 4 para Windows 7 en la que los bordes por donde aparecen y desaparecen las tabs aparecen planos y sin una línea que los remarque:

Echarle un vistazo ahora a la maqueta del diseño gráfico de la interfaz que han publicado para Mac, concretamente a los puntos que marcan las flechas amarillas, los laterales de la “barra de tabs” por las que aparecen y desaparecen éstas (nota: a pesar de que se ven mal las imágenes en el blog porque aparecen por debajo del texto de la columna derecha, no he querido reducirlas para que se aprecien correctamente los detalles. Para ver bien cada imagen lo único que tenéis que hacer es posicionaros encima de ella, dar botón derecho del ratón y seleccionar la opción “Ver imagen” para verla a pantalla completa en el navegador sin que os moleste la barra lateral del blog):

Os pongo a continuación la maqueta sin las flechas amarillas para que podáis apreciar mejor el diseño gráfico de los bordes de la barra por los que aparecen y desaparecen las tabs:

Fijaros en cómo jerarquizan los elementos de la interfaz de mayor a menor importancia situándolos en diferentes capas de profundidad mediante el uso de las sombras para crear un efecto de oclusión (unos elementos delante de otros). Concretamente pueden distinguirse 4 capas de información o de elementos de la interfaz:

1. La capa de color amarilla: Tab activa que contiene los principales elementos de la interfaz del navegador:
   • Los botones de adelante y atrás para realizar las correspondientes operaciones a través del historial de páginas visualizadas.
   • La barra de navegación o “barra maravillosa” junto a los botones de recargar/parar que ahora han fusionado en uno, situados al final.
   • El box de búsqueda para ejecutar consultas contra los buscadores, que inexplicablemente, versión tras versión, siguen sin fusionarlo con la barra de navegación mientras que en Chrome ya sólo tenemos una única barra de navegación en la interfaz principal. ¿Las causas? ¿? supongo que será cuestión de dinero o que tengan especificado por contrato con los buscadores el hecho de que siga separada o no lo sé pero desde luego, debería tender a desaparecer y fusionarse con la barra de navegación principal en aras de mejorar la usabilidad y simplificar la interfaz principal. El referente en este aspecto es, como comento, Chrome.
   • El botón de los marcadores que posicionan en último lugar, a la derecha, otorgándole gran importancia de acuerdo al estudio que hicieron del uso de los menús y que se sumariza en el mapa de calor que generaron a partir de los datos obtenidos de los usuarios que tenían instalada su herramienta de testeo remoto Test Pilot (para más información, no dejéis de leer el post de Alex Faaborg al respecto). En el mapa de calor podéis observar cómo el menú bookmark y sus opciones son las más usadas (se indican mediante el color rojo). ¿Por qué posicionándolo en ese lugar le están otorgando una relevancia especial, en mi opinión por varias razones:
     • La mitad derecha de la pantalla es aquella en la que para los diestros, normalmente se suele encontrar con mayor frecuencia posicionado el cursor del ratón. Esta afirmación está basada en mi mera percepción por lo que debéis tomarla con pinzas (como todo lo que digo, por supuesto) hasta que no haya estudios formales que la corroboren.
     • Por tanto, es más rápidamente alcanzable por el cursor del ratón al tener que recorrer el mismo por término medio una distancia menor desde la posición original en la que se encuentre.
     • Está posicionado al final de la barra muy cerca del borde derecho de la pantalla. Cualquier cosa que esté situada cerca de los bordes de la pantalla va a poder ser alcanzada con mucha mayor rapidez por el cursor del ratón ya que el borde actúa como guía visual, límite, barrera y freno del cursor en su desplazamiento. El movimiento tiene que ser menos preciso y por tanto se ejecuta con mayor rapidez hasta alcanzar el objetivo -el botón del marcador-.
     • Esta situado en el lugar en el que termina el escaneado visual de la parte superior de la interfaz -la cabecera global del navegador- lo que significa un refuerzo cognitivo de su posición en nuestra memoria de corto plazo.
2. La capa de color rojo correspondiente al botón de la home, situada en segundo plano por detrás de la amarilla. Contiene el botón para volver a nuestra Home Tab o página que tengamos configurada por defecto en las preferencias. Se aprecia que está en una capa diferente de la amarilla por el borde inferior contínuo, negro, que lo separa de la misma (o la parte correspondiente del borde superior de la capa amarilla).
3. La capa marrón en la que están situados los controles de cerrar, minimizar y maximizar. El título de la tab activa centrado, los controles de desplazar a izquierda y derecha la barra de tabs, el control de nueva tab (el “+” situado a la derecha) y el control que despliega el menú con la lista de los títulos de las tabs abiertas en la barra de tabs. Todos estos controles están agrupados en la misma capa y aquí viene lo interesante porque… ¿cómo han resuelto el problema de la jerarquización de la capa de la barra de tabs respecto a las demás a través del diseño gráfico…¿?…pues aplicando una sombra en el lateral de la barra de tabs (lo que marcaba en la maqueta superior con las flechas amarillas). Ello crea el efecto de un bolsillo de un pantalón o de una página en la que con un cúter hiciéramos un corte y por el mismo pasásemos una tira de papel que pudierámos deslizar a uno u otro lado según nos conveniese. Vamos, exactamente el mismo efecto que aplicaba el equipo de UX de Monster para crear puntos focales de atención en su página, y concretamente, en cuanto a cómo diseñaban las tabs que daban acceso a los apartados de “Información personal”, “Experiencia”, “Formación”, y “Objetivos profesionales” (podéis leerlo bajando por el post, como al quinto pantallazo aproximadamente).Una solución de diseño gráfico la del equipo de UX de Firefox francamente inteligente.
4. La capa gris de la barra de tabs propiamente dicha que, con su diseño gráfico, se “introduce” y emerge de la capa marrón.
   

Por concluir, la jerarquización de los elementos de una interfaz no sólo se consigue mediante un buen uso de los colores (y remito nuevamente al post de Monster en el que hablaba de ello). Otro gran recurso además, que tenemos a nuestro alcance son las sombras que ayudan a crear un efecto de oclusión o superposición de los elementos de la interfaz y por ende, de capas de información.

Me encanta Firefox. En su equipo de diseño se respira y se vive la Experiencia de Usuario en mayúsculas. Y lo mejor, es que hay mucho de su trabajo cotidiano que hacen público para uso, disfrute y aprendizaje, de todos.

El caso, es que me ha llamado la atención cómo han diseñado el menú de navegación principal. No es un diseño muy ortodoxo que se diga ya que añaden iconografía a cada sección junto al correspondiente rótulo.

Así, los iconos predominan visualmente frente a los nombres de cada sección convirtiéndose en puntos focales de atención, dificultando la legibilidad de los rótulos e impactando en la usabilidad.

Diseño del menú de navegación con iconos y rótulos:

Sólo iconos:

Sólo rótulos:

En el caso de los menús de navegación de un sitio web no creo que sea buena idea añadir los iconos por la problemática intrínseca que tienen. Y menos en el sitio web de un aeropuerto internacional.

Por ejemplo, el avión de la primera sección sí se asocia a vuelos, pero también a aeropuertos, con lo cual la interpretación ya es cuando menos ambigua. El coche cuesta distinguirlo como coche por ser tan cuadrado en lugar de utilizar formas más redondas. Esta línea gráfica supone una menor usabilidad al reconocerse el coche con mayor dificultad. El tercer icono sí se interpreta más como llegadas y salidas, aunque también puede indicar tránsito o viajeros en tránsito (haciendo escalas). El de la cuarta sección no sé por qué, pero lo asocio a una bolsa bursátil o, por su forma, al monumento de Lincoln:

Lincoln memorial - Monumento a Lincoln. Imagen de Wikimedia Commons

El quinto se interpreta bien, tiendas y comida (restaurantes) y los dos últimos no los entiendo (el concepto que me evoca el último es el de radio) y el icono del mapa, puede ser cualquier cosa menos un mapa. ¿El perfil de la terminal del aeropuerto quizá? ¿?

Entre otros problemas que presentan los iconos pueden apuntarse:

• Hay iconos que más o menos pueden ser indicativos de la información que hay en la sección, pero para otros, su interpretación puede variar de cultura a cultura, e incluso de individuo a individuo en base a sus experiencias y vivencias personales. Cada uno visualizamos el conocimiento y el lenguaje de forma, y con formas gráficas diferentes. Y aunque como individuos con estructuras cognitivas similares podemos deducir e identificar patrones universales que nos permiten reconocer más o menos las mismas formas, precisamente por esas diferencias, interpretar un icono y darle un significado correcto puede costarnos más o menos a cada uno (si  logramos darle el significado correcto, circunstancia que a veces no no es posible).
• Por ello, a, a menudo los iconos requieren de ayudas textuales (tooltips que aparecen al posicionar el cursor del ratón encima del icono, o directamente, rótulos asociados al mismo) para poder comprenderse sin dificultades. En tal caso, la pregunta que se plantea es ¿por qué utilizar iconos en lugar de texto? ¿Por qué y cuando utilizar ambos?
• Los diseñadores gráficos pueden encontrarse con serias dificultades para representar y sintetizar conceptos abstractos complejos mediante una imagen que no es más que una metáfora, y más, a través de un icono con un tamaño, diseño o color determinados -, dificultades que son extensibles a los usuarios a la hora de comprenderlos.
• No es lo mismo una aplicación que un sitio web. En una aplicación, predominan los “verbos ” en las barras de herramientas. Las tareas que permite acometer la aplicación al usuario (por ejemplo, en un procesador de texto, entre otras tareas podemos: poner en negrita un texto, en cursiva, centrarlo, disminuir o aumentar su fuente, encontrar y reemplazar texto, etc). En una aplicación se diseña más una ARQUITECTURA DE INTERACCIÓN (el término es mío, no es una incorrección) que una Arquitectura de Información. Los espacios que se diseñan, aunque similares, son diferentes. Al igual que se definen espacios de información en cualquier sitio web, en una aplicación definimos espacios de interacción. E igualmente que hacemos como entregable, el mapa de un sitio web, deberíamos hacer entregables que sean mapas de interacción, que expliciten el modelo de interacción que subyace en la interfaz de la aplicación.  En un sitio web, la navegación se construye en base a una organización y jerarquización de su información (un espacio de información), y dado que hablamos principalmente de contenidos y no de acciones (verbos) o tareas, el lenguaje textual puede funcionar mejor en ellos, antes que los iconos.
• Añadiendo iconos junto a los rótulos en la navegación del sitio del aeropuerto, aparte de empeorar la legibilidad de los rótulos, los iconos interfieren directamente con nuestra capacidad cognitiva para abstraer la estructura de información del sitio y poder hacernos un mapa mental de las secciones. Los iconos en este caso son superfluos, ocupan un espacio innecesario y no añaden un valor determinante a la interfaz que justifique su presencia.

¿Cuando está justificado el uso de los iconos? ¿Cuando conviene utilizarlos? ¿Sólos, o con texto?

La respuesta, como suele serlo en cuanto a cuestiones de usabilidad se refiere, es depende de la circunstancia y el contexto.

Los iconos, por su tamaño, permiten un extraordinario grado de plegado de información y una vez que se aprende su código (a qué corresponde cada icono, al fin y al cabo familiarizarnos con la iconografía y funcionalidad de cualquier aplicación es aprender un código y un lenguaje visual, específico para la misma) pueden facilitar la búsqueda visual de una función en una aplicación y en una interfaz que utilicemos de manera intensiva y cotidiana:

Ribbon de Microsoft Visio. Al utilizar de manera cotidiana la aplicación y ser consistentes los iconos principales con las funcionalidades asociadas a lo largo de todas las aplicaciones de la suite (Word, Excel, Power Point, etc) terminamos por aprender parte del código iconográfico de las mismas con lo cual visualmente resulta mucho más rápido localizar las funcionalidades.

Si tuviéramos que expresar con palabras por ejemplo, las funcionalides del grupo de “Fuente” de la pestaña “Inicio” de la Ribbon de Word 2007 quedaría algo similar a:

Nótense tres cosas:

• El texto de las funcionalidades de un sólo grupo (a pesar de que aquí no está en la misma escala en la captura de la imagen que en el prototipo en blanco y negro) ya permite darnos cuenta de que ocupa mucho mayor espacio que los iconos gráficos. La densidad informativa de la interfaz que se comunica por píxel de pantalla es mucho mayor. Al fin y al cabo con la Ribbon se ha hecho un ejercicio de deconstrucción. Estadísticamente se han determinado qué funcionalidades de los menús eran las más usadas y se han explicitado directamente en la interfaz, con apoyo, en su caso, de rótulos textuales al lado de los iconos, cuando la interpretación de éstos no era directamente explícita. Con ello se han logrado suprimir las jerarquías de interacción presentes en los menús desplegables, ahorrando tiempo al usuario tanto para acceder a los comandos buscados, como para, en algunos casos, ver directamente el resultado de la acción del menú antes de aplicarlo, dado que al posicionar el cursor encima del icono esto ya provoca un feedback y un cambio inmediato en el texto inferior seleccionado.
• A pesar de que el texto suprime ambiguedades a veces es difícil expresar de forma precisa y con la concisión posible a través de una o dos palabras, la acción que se ejecutará cuando se haga clic sobre él.
• Dado que requiere de su lectura, el texto conlleva una mucho mayor cantidad de tiempo para leerlo y decidir qué funcionalidad estamos buscando, que si se utilizan iconos. Visualmente el texto cuesta más de escanear.

Cuadro de diálogo para la personalización de la Ribbon en Microsoft Word 2007. Si se conoce la forma correspondiente del icono de la funcionalidad que se está buscando es mucho más rápido hacer un escaneado visual de los iconos que se están viendo, que ir leyendo uno a uno sus nombres textuales.

• En una interacción continua en un dilatado período de tiempo (por ejemplo, 8 horas como las que cotidianamente nos pasamos delante del ordenador en una jornada laboral típica) la suma de los tiempos de las microinteracciones es francamente importante y significativa, al igual que el esfuerzo cognitivo que tenemos que hacer para llevar a cabo las tareas con mayor o menor eficacia con la aplicación. Esto en definitiva, es de lo que trata la usabilidad, de optimizar la eficacia y la eficiencia de una aplicación para alcanzar unos objetivos específicos en un contexto de uso específico. Y uno de los modelos clásicos para evaluar una interfaz en términos de eficacia y eficiencia es el conocido como GOMS (por Goals = Metas, Operators = Operadores, Methods = Métodos, y Selection rules = Reglas de selección) desarrollado por Card, Moran y Newell. Este modelo permite medir de forma cuantitativa, el rendimiento y el coste en términos de esfuerzo cognitivo y tiempo, de una interfaz frente a otra (al respecto puede consultarse el capítulo 4  “Cuantificación” del libro de Jef Raskin: “The Humane Interface”). Dicho modelo parte del hecho de que el tiempo que lleva a un sistema usuario-ordenador el ejecutar una tarea, es la suma de los tiempos de los gestos elementales que hay que llevar a cabo para ejecutar la tarea.  Estos se sintetizan en una serie de tiempos típicos característicos que son:
  • K = 0,2 sec. Keying (tecleado): El tiempo que lleva al usuario pulsar una tecla en el teclado.
  • P = 1,1 sec. Pointing (apuntar): El tiempo que lleva a ul usuario posicionar el cursor en un lugar específico de la pantalla.
  • H 0 0,4 sec. Homing (mover la mano): El tiempo que lleva a un usuario desplazar la mano desde el teclado hasta el Dispositivo Gráfico de Interfaz, tal como un ratón, o desde éste hasta el teclado.
  • M = 1,35 sec. Mentally preparing (preparación mental): El tiempo que lleva a un usuario prepararse mentalmente para el siguiente paso después de una microacción.
  • R Responding (respuesta): El tiempo que un usuario ha de esperar para que el ordenador responda a su input.
• Conforme a estos parámetros puede medirse la eficacia y la eficiencia de utilizar sólo iconos, sólo texto o ambos elementos en la interfaz de una aplicación. A bote pronto, en el caso de usar sólo texto, lleva más tiempo su lectura y comprensión, que el visualizar un icono del cual ya se conoce la funcionalidad que desempeña. Por otro lado, el texto al ocupar mayor espacio, conlleva un menor tiempo para ser alcanzado por el cursor, y menor precisión para ser pulsado que un icono pequeño.

En cuanto a usabilidad se refiere, hay que medir el coste de lo que representa tomar una decisión de diseño de la interfaz u otra. O, como mínimo y dada la imposibilidad que tenemos en muchas ocasiones de testarlo o medirlo en laboratorio, ser al menos conscientes de ello y de cómo las decisiones que se toman impactan en el rendimiento de la aplicación o del sitio web.

Barra de funcionalidades de Zoho Mail. Utilizan iconos y rótulos

Barra de funcionalidades del cliente de correo Thunderbird. En este caso conviven iconos y rótulos ¿són lo suficientemente significativos y se entienden sin problemas los iconos? ¿El de "responder" y "responder todos"? Nótese que los botones de archivar y basura no llevan icono, y que el icono de la funcionalidad "eliminar" se asocia al de cerrar las ventanas de Windows lo que produce una disonancia cognitiva e impacta en la usabilidad

Barra de funcionalidades de GMail. En este caso Google opta por no usar iconos junto a los rótulos

En cuanto a la World Wide Web, y dado que en cada sitio web solemos estar de forma muy puntual, e interactuando con su interfaz durante tiempos muy reducidos, no es la mejor idea construir y utilizar un código iconográfico propio que conviva con los rótulos de las secciones, en la navegación principal, ni para facilitar la misma, ni para realzar el diseño desde un punto de vista gráfico.

Por cierto, un último detalle más en cuanto a la barra de navegación del aeropuerto, la pestaña “top” de la derecha es un elemento 100% superfluo 2.0).

¿Opiniones? ¿En qué contextos consideráis que los iconos juegan un papel importante y son recomendables y en qué ocasiones no? ¿Más ejemplos que conozcáis?