Saltar navegación
Contacto: (+34) 670 230 483

Usted está en: Inicio > Blog > La cárcel de la información y la liberación de los iconos

La cárcel de la información y la liberación de los iconos

Escrito por A. Fidalgo el 19 Jun 2012

Ojeando en una librería Envisioning Information, me detuve por casualidad en una página en la que Tufte comenta los problemas de visualización de un gráfico en el que se explican las señales que ayudan a las tripulaciones de los aviones en el aterrizaje.

marshalling_signals_original_small.png

Ver imagen

Comenta Tufte que la matriz, las cajas en las que están encajadas las figuras humanas se convierten en una “prisión de información”. El grosor y el color de las líneas de la matriz, de los barrotes, dificulta la visibilidad del contenido, formando como una barrera que entorpece pasar de una viñeta a otra, complicando el flujo de lectura. Además, el espacio blanco dejado en el medio de las cajas genera el efecto 1+1=3, aumentando de forma exponencial la complejidad del diseño, como comentamos aquí hace un tiempo.

La rejilla, la silueta y el texto, comenta el autor, compiten por nuestra atención, más allá de la relevancia que tengan en el mensaje a transmitir. Para resolver esto, Tufte propone un diseño alternativo.

marshalling_signals_Tufte_small.png

Ver imagen

La casi desaparición de la prisión, reduciendo el grosor y el color de las líneas, libera al protagonista y sus movimientos. El borde pasa a un segundo término y permite concentrarse en lo importante.

Además, el autor introduce otros cambios:

  • La silueta humana reduce su contraste con el fondo, pasa de negro a gris, lo que hace destacar más la paleta y su posición, mensaje importante y diferencial a comunicar.
  • El color de la paleta o bastón luminoso, amarillo, la hace sobresalir, la separa de los otros elementos similares
  • Se eliminan componentes, como los haces del bastón luminoso, para facilitar su comprensión y eliminar confusión
  • Se utiliza otro color, muy vivo, el rojo, para indicar la dirección de los movimientos
  • La tipografía usada es más legible, principalmente en el título, al aumentar el contraste con su fondo


Al ver esta imagen inferior recordé el diseño de unos iconos para un cajero que hicimos hace unos años.

Comenzamos definiendo los iconos teniendo en cuenta principios de economía, minimización y simplificación de las formas y de los elementos, unificando también los elementos (manos, cajas, flechas de dirección...) para mantener la coherencia.

iconos_iniciales.jpg

Pero nos dimos cuenta que los elementos eran demasiado similares, que tenían igual peso visual incluso los elementos comunes a los iconos, como la ranura o la mano, que no aportaban casi información al significado del icono.

Reconsideramos el uso del color:

  • Se utilizaron los colores para organizar los distintos tipos de datos, creando capas de los tres elementos mediante la repetición del mismo color: la mano, ejecutora de la acción, los objetos sobre los que actúa la mano (como sobre, tarjeta...) y la flecha indicadora de dirección.
  • Elementos constantes y no diferenciales en los diferentes iconos, como las ranuras o las manos, pasaron a un segundo plano mediante la utilización del color gris.
  • El color negro se empleó para enfatizar el elemento principal al que el usuario debía prestar atención en la interacción, es decir, el sobre, la tarjeta, etc.
  • El uso del color de la flecha para dirigir la atención hacia el mensaje diferencial entre los iconos que utilizaban el mismo objeto de interacción, es decir, para destacar la dirección de la acción del usuario, introducir o extraer algo.


Se refinaron, pues, los colores y las líneas para centrar al usuario en los aspectos esenciales y crear jerarquías entre los elementos.

iconos_finales.jpg

Como regla general definimos 3 niveles de jerarquía en cada uno de los iconos:

  1. Ejecutor de la acción (mano) y escenario donde se realiza (ranura, lector…).
  2. Objeto sobre el que se realiza la acción (sobre, billete, tarjeta…)
  3. Indicador de acción o dirección (flecha).

iconos_jerarquia_visual.jpg

Ni que decir tiene que acabé comprando el libro.

Etiquetas:




Últimos tweets de Usolab

  • Ups, parece que ahora mismo no podemos mostrar nuestros tweets.

Proyectos propios

Bankimia

Bankimia es un comparador de productos financieros.

Actualmente ofrece información sobre hipotecas, depósitos bancarios, cuentas y préstamos de 42 bancos y cajas.