Tentándole (interacción)

Me gustan los periódicos digitales. Me encantan y creo que cuando uno se mete un poco a fondo a analizar lo que hay detrás de sus interfaces es realmente sorprendente lo que se puede aprender sobre sus arquitecturas de información y sobre el tremendo trabajo SEO que hay debajo de muchos de ellos del cual, normalmente, es dificil ser consciente.

Curiosísimo el módulo que presenta el Wall Street Journal. Cuando el usuario entra en un artículo de una sección se observa en la parte superior, inmediatamente debajo de la cabecera una minigalería con las noticias destacadas de la sección. Cada minimódulo de noticia dentro de la misma consta de: pequeña foto escalada de la foto principal de la noticia que funciona como enlace al artículo final, título, que es asimismo un enlace a la noticia, número de la noticia destacada y número total de noticias destacadas en la minigalería (que no número total de noticias en la sección correspondiente -¿en base a qué seleccionarán las noticias más populares? ¿aquellas más leídas por los usuarios? ¿las que seleccione manualmente el editor? ¿las más votadas? ¿enviadas? ¿?).

Wall Street Journal. Minigalería de noticias destacadas en subsección

La noticia que se está visualizando de la minigalería tiene el fondo blanco para centrar la atención (indicación de qué está viendo el usuario) mientras que las demás presentan un fondo con una sutil variación en gris para distinguirlas de la anterior. Cuando el usuario hace clic en una noticia no consecutiva a la que se está visualizando se recarga la minigalería y se posiciona en primer lugar. La forma en ángulo de “Top stories in [nombre de sección]” y el ángulo en la parte inferior del rectángulo refuerza la idea de movimiento y de que esa y no otra es la noticia seleccionada por el usuario y la que está visualizando. Los controles azules para realizar scroll horizontal situados uno al lado del otro en lugar de a los extremos de la minigalería, como suele ser usual, y posicionados a la derecha del todo de la pantalla al mismo margen o borde del periódico mejoran la usabilidad al facilitar el scroll tanto hacia adelante como hacia atrás y al reducir el desplazamiento del cursor una vez el usuario lo ha posicionado en su área (normalmente para los diestros el cursor suele permanecer en el área derecha de la pantalla más que en la izquierda con lo cual y desde hace ya algún tiempo, se observa una fuerte tendencia en todos los nuevos diseños de webs e incluso en algunas aplicaciones de software a posicionar componentes esenciales o que deban tener una gran importancia desde un punto de vista de ejecución de interacción por parte del usuario en las esquinas superiores derechas o en la mitad superior derecha de la pantalla, un área que está ganando por momentos relevancia entre los diseñadores de interacción).

Con este componente se mejora el SEO, la navegación por la sección y se hace “emerger” la información de la misma incitando al usuario a seguir navegando. En definitiva, un componente francamente elegante. Me gusta. Lástima no haberlo visto antes.

Se me ocurre que, variándolo, es perfectamente extrapolable a otros webs, por ejemplo, tiendas de comercio electrónico, librerías, mercados online, etc.

En el lenguaje visual uno de los recursos con el que se puede jugar para crear atención y que se puede aprovechar para alterar el mensaje transmitido al usuario es la elipsis.

Por tal se entiende la eliminación explícita de algún elemento de la imagen que transforma su significado.

Revisando mis feeds he ido a dar con un post de Infografistas.com que comenta un mapa elaborado por Jonas Dagson sobre un mapa de “Save the children” en el que se muestran los países en los que está prohibido azotar a los niños. Tan sólo 24 en todo el mundo.

Este mapa es un estupendo ejemplo de aplicación de la elipsis. El problema en este caso particular no es qué información mostrar, sino qué información no mostrar. Borrando tinta el significado del mensaje se transmite al usuario de una manera extraordinariamente clara y directa:

La carga semántica del mensaje es alterada para realzar lo que se quiere transmitir. En lugar de mostrar todos los países (mapamundi completo) y colorear aquellos en los que está prohibido azotar a los niños, lo cual puede transmitir una carga semántica negativa (todos estos países son distintos de la “normalidad o generalidad”), es decir, en lugar de mostrar todo el contexto, se suprime dicho contexto a propósito para lograr potenciar la singularidad. Se borran todos los países en los que sí se puede azotar a los niños sin temor a ser multado o castigado y se muestran tan sólo aquellos que tiene legislación que lo prohíbe reforzando el mensaje de denuncia en pro de los derechos infantiles y mostrando la “soledad” de dichos países.

No obstante el diseño puede ser mejorado con muy muy poco esfuerzo. Y es que en este caso se está aplicando la metáfora del mapamundi demasiado a rajatabla ya que aproximadamente el 85% de la tinta del gráfico no transmite significado. Y puesto que no transmite significado es ruido visual destinado a embellecer el diseño.

Si se hace uso de la elipsis como figura de retórica visual lo mejor es hacerlo de manera completa y aprovechar el espacio en blanco como potente separador visual de cualquier otro elemento y creador de un contexto muy particular: la nada y en medio de ella, la singularidad.

En el gráfico rediseñado se borra todo aquello que no transmite significado dejando sólo lo que sí lo tiene. Exactamente el recurso que utiliza intensivamente Tufte a lo largo de sus libros cuando habla constamente de “borrar tinta” para hacer emerger la información y el conocimiento implícito en ella a través del diseño visual.

Un gráfico brillante el de Jonas Dagson. Para compararlos mejor podéis descargaros ambas imágenes en una sola más grande, a través del enlace de abajo, abrirla en el navegador y utilizar F11 para verla a pantalla completa:

Contrapuesto al mismo, la portada de El País Semanal de hoy ofrece otro bello ejemplo de uso de la elipsis como figura retórica visual.

“En busca del oro negro: El elixir que mueve el mundo” es el título del artículo cuya fotografía encabeza la portada. Sobre un fondo de color negro dos manos de color carne brillantes unidas, sostienen en sus palmas el preciado elemento del siglo XXI.

El negro es el color que nos envuelve al caer la noche, que nos priva de la visión, de la luz, el color de la muerte, que nos acaricia, el color que nos rodea en el cine eliminando cualquier otro estímulo externo, diluyendo el exterior y provocando una experiencia inmersiva que nos sumerge en la película… el color de Coliris…

o en este caso, el del fondo de la imagen de la portada de El País.

El negro del petróleo en el hueco de las palmas y el fondo igualmente negro elegido a propósito conforma la elipsis potenciando el mensaje transmitido y dotándole de una fuerte carga connotativa: Las manos surgen como figura contra el fondo negro “agujereadas” por el petróleo que queremos beber, que nos da… ¿la muerte? en contraposición al translucido del agua que nos aporta la vida y que tomamos cuando bebemos de una fuente, un manantial o el grifo. En la imagen el petróleo que queremos retener gotea por el agujero de las manos inevitablemente y se nos escapa sin que podamos hacer nada para evitarlo dejando nuestras manos aceitosas.

Igual que el mapa anterior, una bella imagen en la que se utiliza la elipsis, recurso potente al alcance de cualquier diseñador gráfico que con un poco de creatividad puede ser usado para crear fuertes puntos focales de atención.

Automatic translation of the text to english

Inauguro sección nueva en el blog -“Controles y componentes de interfaz”- dedicada a aquellos controles que me voy encontrando día a día y que me llaman la atención por considerarlos buenas prácticas de diseño, soluciones innovadoras o ingeniosas o simplemente llamativas por cualquier razón.

Como siempre, a quien tenga curiosidad por aprender diseño de interacción y de interfaces le recomiendo que se dé una vuelta por mi cuenta de Flickr donde puede encontrar los que postee, más o menos categorizados, y alguno que otro comentado.

En concreto, acabo de ver el pequeño buscador de la derecha, arriba, de Yahoo News y me ha llamado la atención la solución que ha dado el diseñador de interacción y la solución gráfica propuesta toda vez que el componente en cuestión tenía que ajustarse al tamaño de la columna derecha con la limitación de espacio que ello supone (el espacio, esa extraña materia… cuando no hay con qué llenarlo, porque no hay con qué llenarlo, y cuando hay demasiado con qué llenarlo, porqué hay demasiado, el ABC de Diseño de Información de nuestro día a día vamos).

Para no hacer más pequeño el botón de “News search” mete el combo desplegable para restringir la consulta a los distintos universos de búsqueda (All News, Yahoo News Only, News Photos, Video/Audio) debajo del box, alineado a la esquina derecha. El diseñador gráfico, además, redondea su esquina para conseguir un efecto estético más agradable y de unidad. Y es que, no es lo mismo una esquina o un trayecto redondeado que uno recto. Psicológicamente percibimos mejor los trayectos continuos y curvos a los rectos, y el resultado, además, es mucho más vistoso.

En cuanto al enlace de búsqueda avanzada, “Advance” pues no es que haya mucho espacio para ponerlo, pero puesto ahí, tiene el problema que al estar situado a la derecha del todo y justo debajo del botón de buscar puede suceder que el usuario, sin querer, pulse sobre el mismo en lugar de sobre el botón y termine en la página de búsqueda avanzada.

¿Soluciones?

Pues no es que haya muchas, una de ellas es mover el combo con los filtros y posicionarlo ligeramente después del inicio de la esquina inferior izquierda del box de búsqueda. Podríamos alinearlo exactamente con el comienzo respetando la intención del diseñador de interacción que haya hecho esto, o la interpretación del diseñador gráfico en aras de la estética, pero perderíamos algo valioso. Esa sutil diferencia, o la mínima diferencia perceptible, (que diría Tufte y Eduardo Manchón) hace que, si separamos un poco del borde el combo de los filtros, en lugar de percibirse como una forma continua con un comienzo irregular, recto por arriba y redondeado por abajo, se perciba como una pestaña y por ende, como un control con el que el usuario está mucho más familiarizado y cuyo modelo de interacción es mucho más fácil de entender, ergo con una usabilidad mayor, que es precisamente lo buscado.

Por último, podemos estrechar un poco el combo de los universos de búsqueda sin que se vea muy afectada la usabilidad cuando lo desplegamos ya que tenemos una buena cantidad de aire a la derecha de las palabras (sí, lo perdemos un poco y a mí también me gusta que las cosas respiren, cuanto más mejor) pero a cambio, aumentaríamos la distancia entre la pestaña y el enlace de búsqueda avanzada (Advanced) que situaríamos alineado con la esquina inferior derecha del box de búsqueda.

Buscador de Yahoo rediseñado con eje visual en el centro

Tomando como referencia el eje vertical del componente vemos que la imagen parece pivotar sobre el enlace de “Advance” ligeramente hacia la parte delantera ya que hay mayor cantidad de tinta en la parte inferior de la imagen respecto a su eje horizontal, que en la parte superior (me recuerda un poco a una escopeta, no puedo evitarlo) pero bueno, se puede aceptar como solución de diseño, dado que ganamos algo muy importante, que es liberar la zona en torno al botón que ejecuta la búsqueda “News Search” que es un punto de interacción crítico de este componente en particular.

Curioso el control y las implicaciones de su diseño.

El otro día estaba haciendo un prototipo y necesitaba el icono de un carro de la compra, navegando terminé en la Home de El Corte Inglés en donde me llamó la atención el detalle de la cesta/carro:

En la página de la “cesta de la compra” se observa lo mismo:

En Amazon utilizan la metáfora del Carrito de la compra:

En Macys utilizan la metáfora de la Bolsa de la compra:

Lo correcto sería utilizar una sóla metáfora, o cesta o carro, tanto para el nombre de la sección, como para el icono y la iconografía e imagen gráfica utilizada en el resto de la tienda. En caso contrario icono y signo no se corresponden y se puede confundir al usuario.

Si damos preferencia al icono habría que renombrar la sección y llamarla “Carro de la compra” o si en base a tests de usuarios se observa que resulta más claro “Cesta de la compra” utilizar el icono de una cesta o bolsa. En este caso yo me inclinaría más por utilizar la metáfora del carro dado que “El Corte Inglés” es una gran superficie, entidad que solemos asociar más con carro de la compra que con cesta. Las cestas creo, las asociamos más con pequeñas superficies.

De todas formas es curioso, pensándolo con detenimiento, en El Corte Inglés no utilizamos el carro excepto si estamos en la planta del supermercado. Pregunta: ¿Con qué identificáis más el carro de la compra y con qué la cesta?

¿Opiniones?

Por cierto, en esta casa, las críticas siempre son constructivas y para aprender, las destructivas no me interesan. La crítica es legítima, buena y saludable, pero siempre razonada y constructiva. Quien haya trabajado en consultoría sabe lo que hay detrás de cualquier proyecto. El trabajo de los compañeros siempre merece un respeto y lo más interesante que uno puede hacer es pararse delante de una interfaz e intentar deducir por qué se hacen las cosas o por qué se toman determinadas decisiones de diseño o de implementación de interacción. Es como más se aprende.

Márcate un viral en tu blog y a ver si conseguimos de una vez por todas que la gente de Adobe añada un autoguardar a Photoshop.

“Si, como leen. Este es un llamado a la gente de Adobe para que ponga de una vez por todas un “Autoguardar/AutoSave” opcional en las próximas versiones, no solo de Photoshop como dice el título, sino en todos los productos de la empresa. A quien no le ha pasado “colgarse” con una composición y que de repente aparezca el $&%~€~€¬@~#@|# “amoroso” cartelito de: “Ha ocurrido un error… bla bla bla. Depurar, cerrar y la mar en coche”. O algún pantallazo azul típico de Windows. Con esto se darán cuenta que me pasó por enésima vez justo en este momento, en donde tenía un trabajo en un 80% finalizado. Y si, escriban comentarios diciéndome: “Estúpido”, “Tanto tiempo utilizando el programa y no te acostumbras a guardar parcialmente los trabajos”, etc… Los acepto. Pero la verdad es que cuando estoy inspirado y las cosas salen de buenas a primeras bien, me entusiasmo y le pego derecho. Sé que la gente de Adobe recibe bien los mensajes de los usuarios e intenta implementarlos en versiones posteriores. Es por eso que le pido a todo blogger que utilice programas de esta empresa (y los que no también si es su deseo ayudar) que realice un artículo con el título “Llamado a la solidaridad, Photoshop CS4 con autoguardar” para que haga eco en la web y agreguen esta opción tan útil para todos nosotros. Ojalá encuentre repercución (no es obligatorio poner la fuente ya que no busco enlaces, sino justicia) y podamos hacernos oir.”

Vía: Diego Mattei Blog > Análisis Gráfico