Tentándole (interacció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.

Post actualizado:

Es curioso el tratamiento gráfico y visual informativo que los dos grandes periódicos nacionales están haciendo de las elecciones estadounidenses y en concreto de Obama.

Analizando las fotos que publican en sus correspondientes home El Mundo y El País, además de la posición de Obama respecto al eje central de la página llama la atención el distinto encuadre escogido en cada periódico.

En El Mundo Obama aparece a la derecha del eje central, más lejano frente a las banderas que toman mayor relevancia ante su figura, especialmente en la zona izquierda. En El País, además de estar ligeramente desplazado hacia la izquierda respecto al eje central de la imagen, el campo de atención se centra en el candidato que aparece mucho mayor, enfocando toda la atención en el rostro y por ende, resaltando sus cualidades humanas. Esta, es una estrategia y un principio de diseño común de marketing, especialmente en las páginas de call-centers o de “Contacta” en los sitios web en las que se pueden observar imagenes o capturas de primeros planos de rostros de mujeres sonrientes. Cuando el encuadre se enfoca en un primer plano sobre el rostro de una persona se resaltan los atributos intelectuales -inteligencia- emocionales y humanos frente a los físicos. Un encuadre de cuerpo completo es una aproximación contraria, centramos la atención en los aspectos y atributos meramente físicos. Sobre este principio de diseño se puede consultar la p. 72 de “Universal Principles of Design” en donde se pueden encontrar, además, todo un elenco de claves para interpretar mejor ambas fotografías.

En la home del 012 de la Comunidad de Madrid se puede observar un ejemplo. Aparece el rostro de la teleoperadora sonriendo en primer plano. Se busca la proximidad, acentuar la faceta emocional, la amigabilidad y la inteligencia de la persona frente a lo físico.

Por último, en las dos fotografías el candidato mira hacia la derecha (¿de un electorado imaginario?) sonriendo con los labios entrecerrados, la palma de la mano abierta, extendida en un gesto de contención, de apaciguamento o petición de tranquilidad o quizá de despedida.

En cuanto a los mapas que hemos estado viendo a lo largo de todas las elecciones en los medios de comunicación de medio mundo creo que no son ni mucho menos el mejor gráfico a utilizar si realmente lo que se desea es informar. En este caso concreto se ha supeditado la estética a la objetividad. El problema es que son gráficos que ven millones y millones de personas con lo cual creo que, al menos, los periódicos deberían ser más responsables a la hora de elegir este tipo de representaciones y cuestionarse su uso a pesar de que se utilicen en otros medios reputados (ABCNews, NYTimes… por citar tan sólo dos ejemplos, los españoles son copias directas de los que han estado utilizando los periódicos estadounidenses). Ello es debido entre otras cosas a tres tipos de distorsiones (Atlas of Ciberspace. Capítulo 1. p. 4. PDF - 1.5 Mb): la presentación, la falacia ecológica y la omisión. En estos mapas se emplea un código de dos colores (azul - demócratas, rojo - republicanos) para mostrar las tendencias de voto en cada estado. Es una muy pobre representación, y muy poco objetiva, de las tendencias reales del electorado dado que las superficies de cada estado no son directamente proporcionales a los datos estadísticos y su aportación al conjunto global. Las fronteras naturales y la superficie de los estados poco tienen que ver con la proporcionalidad de, por ejemplo, gráficas estadísticas en las que las áreas sí son directamente proporcionales a las cantidades que representan.

Por ello, si se desea dar una visión realmente objetiva, el gráfico de los estados (muy bonito, muy gráfico y muy visual estéticamente hablando) se debe acompañar de otro tipo de representación gráfica estadística que sí ofrezca una representación verdadera de la tendencia global, por ejemplo, en el caso de ABCNews, la barra o tira superior con el número total de senadores para ambos partidos coloreada proporcionalmente de azul o rojo, barra que también puede verse más o menos similar en el NYTimes y con ligeras variantes, en el resto de periódicos internacionales.

El problema que surge, no obstante, del hecho de tener dos tipos de representaciones visuales para un mismo fin cuando realmente comunican cosas distintas, es evidente, se crea una disonancia cognitiva que confunde al usuario. El mapa dice una cosa en base a la mayor cantidad de tinta roja o azul presente en el gráfico, y la barra otra, disonancia que se acentúa más aún, si en lugar de utilizar para los estados dudosos en intención de voto un color neutro como el gris, se utiliza un clareado del color correspondiente como sucede en el mapa de El Mundo. Una cosa es comunicar qué vota o votará mayoritariamente cada estado a lo largo del tiempo y otra inferir del mapa quién va a ganar las elecciones en base al número de votos (y de senadores) obtenidos. Juntas ambas representaciones confunden y conducen a equívoco. Lo más óptimo si se quiere decir quien tiene más posibilidades en cada momento de ganar las elecciones de acuerdo a las encuestas sería optar por un buen gráfico estadístico y obviar el mapa.

Mapas de los estados de las elecciones de EE.UU de ABCNews.com. Nótese que para una representación objetiva de las tendencias de los votantes el mapa ha de estar acompañado de otro tipo de representación estadística gráfica. En este caso, al igual que sucede en El País y en El Mundo, de la tira o barra con la distribución de senadores y código de colores correspondiente.

En la parte superior, mapa de las elecciones presidenciales de El Mundo, debajo, mapa de El País.

El Diseño de Información y la Visualización de Información es importante. Muy importante. Muchas veces se obvia y es una materia que creo, debería impartirse en las aulas universitarias porque las personas tienen derecho a conocer.

Como Diseñadores de Información tenemos una obligación profesional para con ellos, y más en el caso de los medios de comunicación de masas.

Actualización:

Home de El Mundo y El País a las 12.00h.

Nota final:

En este blog y en este post se habla de Diseño de Información, no se hace ningún tipo de consideración ni juicio político aunque la evidencia analizada del diseño la muestre (lo cual por supuesto, revelarla, es la intención buscada). El día que quiera manifestar este tipo de puntos de vista u otros personales empezaré otro blog ad-hoc para ello. En este blog se procura enseñar diseño; AI e interacción y se comparte conocimiento, el mío y por supuesto, el vuestro con vuestros comentarios.

Impresionante el diseño de Christina Van Vleck en el que sumariza la atención dedicada por diversos periódicos norteamericanos a través de la visualización del espacio de portada durante dos meses, a la guerra de Irak, el conflicto de Afganistan y su peso frente a las noticias locales, nacionales e internacionales.

Toda una lección de diseño de información con fuerte inspiración en muchos de los principios enunciados por Tufte, comparación a través de pequeños múltiples, evolución en una línea temporal, etc.

Un bello diseño.

No dejéis de visitar su web. Merece la pena ver el resto de diseños.

Hace un rato estaba haciéndoles una sugerencia de mejora a Idealista a través del formulario que tienen disponible en sus Labs. Me encanta la pantalla de feedback que ofrecen utilizando el humor “a lo Arguiñano”:

Pantalla de feedback de las sugerencias de mejora en los Labs de Idealista.
Haz clic sobre la imagen para verla a tamaño real

Las palabras que por asociación me provoca la experiencia de uso son “cercanía” (a quién no le cae bien Arguiñano) amigabilidad (provocada por la sonrisa del emoticono) y “casero” (yo he hecho la sugerencia y puedo ser parte de una pequeña mejora de su web).

Así da gusto hacer sugerencias

Y observando la pantalla, ahí va otra, ya puestos quizá complementaría el mensaje devuelto por:

o algo similar. Es una respuesta que provoca un estímulo aun más positivo en el usuario y que puede contribuir a elevar algo más los ratios de sugerencias.

En cuanto al diseño me gusta también el uso que se hace de las diferentes anchuras de las líneas horizontales en la parte inferior mostrando esa tendencia casi obsesiva de Idealista por el cuidado del detalle del diseño de la interfaz al mínimo píxel, el uso de tramas y el código de 2 colores -gris y verde- para marcar visualmente los bloques de información de la parte inferior y establecer la jerarquía informativa de los elementos de la página.

Los dos bloques formados por la línea verde de mayor anchura parten la pantalla en dos grandes bloques visuales, superior e inferior, mientras que el uso del gris en las dos líneas restantes así como su menor anchura, establecen visualmente a su vez, otros dos subloques informativos dentro de los principales.

Por último, frente a la solidez de la línea verde:

la trama de puntos de las dos líneas grises:

conecta los elementos de la parte inferior y superior de los subloques informativos dejando fluir la mirada entre ambas regiones. Separa, pero conecta, no divide igual que si la línea fuera sólida.

Sutil, potente y que como el resto de Idealista da aire de flotar al establecer una jerarquía informativa sin utilizar cajas que marquen áreas espaciales cerradas (como sucede en el 90% de las ocasiones en la mayor parte de los webs) o reduciendo su uso en gran medida, y que relaciona en última instancia todos los elementos de la página dejando fluir la mirada por los recovecos.

Un buen diseño.

Espectacular el sitio y la visualización interactiva del pasado debate del día 7 entre los candidatos a la Casa Blanca. En la imagen, la distribución de tiempo consumida por los tres intervenientes: Obama, McCain y el moderador, así como el tiempo (bandas grises de la parte superior) dedicado a cada tema.

Se marca la hora de inicio del debate, los minutos, el tema tratado en cada momento y la persona que habla. Una lástima no poder ver la perspectiva entera que sería lo óptimo para comprender la actualidad y lo que preocupa a los ciudadanos de EE.UU. Asimismo habría añadido una barra de scroll horizontal en la parte inferior para facilitar el desplazamiento y una pequeña miniatura de la línea entera que marcase la parte de la misma que se está visualizando en todo momento en pantalla.

Pulsando sobre uno de los temas o uno de los intervenientes y en “Ver todo” se puede acceder a la distribución de palabras clave y la frecuencia con que fueron pronunciadas por cada candidato durante el debate. Se observan cosas tan llamativas como por ejemplo, que las palabras más pronunciadas por McCain fueron America, Americanos, unido, y amigos, mientras que las de Obama fueron sistema sanitario (health - care), comprender, energía, billón, impuesto y presidente.

Al lado del “mapa” de palabras clave, la visualización en gráficas de la frecuencia de las 10 palabras clave más utilizadas.

Sorprendente las cosas que se pueden inferir tan sólo de esta visualización y la espectacular forma de plegar la información de un debate de casi dos horas en un espacio gráfico tan pequeño permitiendo obtener una comprensión del mismo imposible de conseguir de otra forma.

Vía: Information Aesthetics