Tzek Blog de Diseño

Los carteles siempre me han llamado la atención, aunque admito que cuestionaba su efectividad comunicativa. Chistosamente, desde hace más de un año que llegué al CIRIA (donde trabajo), he realizado muchos anuncios impresos en forma de “cartel” (o algo que se le parezca). Soy un neófito en esto del diseño de carteles, pero he descubierto que del “lado del diseñador” es una experiencia interesante: tanto te puede hacer sentir satisfecho, como puede llegar a frustrarte muy rápido. Escribo entonces, dos reflexiones al respecto.

El sabor visual institucional.

Cuando entré a trabajar, la identidad de la UDLAP había cambiado y con ella venían muchas normas gráficas que demostraban la influencia de Germán Montalvo, reconocido cartelista y artista gráfico mexicano. Ahí fue cuando “volteé” mi mirada hacia los carteles y sobre todo, como proceso de diseño.

Hay dos cosas que empezaron a mover mis engranes mohosos… la primera vez vi un cartel para una revista institucional cuya “ilustración” era la fotografía de una piedra que tenía atada plumas (bolígrafos) y lápices a una piedra… yo y mi cara de “what” en ese momento. El segundo ejemplo fue el cartel para un congreso de comunicación; la foto, un grano de maíz “palomero” con unos audífonos… ya iba captando: la metáfora iba a ser parte de la marca visual de la universidad.

De verdad que imitar no es copiar y que también es una buena forma de aprender. Y así fui haciendo mis pininos tanto en incorporar/explotar una identidad y sabor visual ya existentes, así como en esto de asociar ideas para ilustrar un concepto.

Checklist para ser congruente con el sabor visual durante el diseño de un cartel institucional.

a) Identificar al menos las tres directrices basicas:

• Tipografía
  • ¿Hay una tipografía oficial?
  • ¿Hay más de una?
  • ¿Cómo se maneja la jerarquía de información con la tipografía?
  • ¿Cuándo usar light, bold o regular? ¿Cuándo usar una familia u otra?
  • ¿Se usa la tipografía como elemento decorativo también? ¿En que casos? ¿De que manera?
• Fotografía/Ilustración
  • ¿Cómo se compone?
  • ¿Tiene algún trasfondo su composición? ¿Tiene un fin meramente estético?
  • ¿Por qué tienen que ser así las imágenes? ¿Qué buscan transmitir? ¿Son para emocionar o causar algo dentro los espectadores?
  • ¿Cómo se integra con la tipografía?
  • ¿Cómo influye en el layout?
• Color
  • ¿Cuáles y cómo usar los colores institucionales?
  • ¿Hay una paleta institucional para toda la producción gráfica? Y si no la hay, ¿es claro cuál es el camino a seguir para tomar decisiones aisladas? (lo mismo puede decirse de los gráficos o ilustraciones).
  • ¿Cómo se aplica en los textos decorativos e informativos?
  • ¿Cómo se aplica en las imágenes?
  • ¿Existen funciones específicas del color dentro de la institución? ¿En qué casos y por qué?

b) El discurso institucional

• ¿Qué se dice? 
• ¿Cómo se dice? ¿Con qué tono?
• ¿Con qué palabras?

c) La producción gráfica aislada

• ¿Qué hace el departamento jefe de diseño?
• ¿Qué hacen otros departamentos de la institución?
• ¿Cómo es el ambiente físico?

En el caso de la UDLAP, hasta el momento, el sabor institucional involucra el manejo tipográfico de Helvetica Neue, Bauer Bodoni y colores sólidos. En cuanto a la parte de las ilustraciones, el manejo de la metáfora continúa, aunque no estoy seguro si seguiremos en esa línea compleja-rebuscada-metafórica ahora que Montalvo ya no dirige el departamento de diseño en la universidad. Sin duda, este tipo de cartel es toda una “escuela”. Lo que me ha enseñado es que

1. En el diseño de carteles también se aplica lo de “simple no significa sin sustento”.
2. Un buen cartel tiene que ver con la asociación de ideas aparentemente disjuntas al concepto que se va a comunicar. 
3. Eso sí. Al hacer lo anterior uno puede divertirse mucho, o bien, frustrarse por no conseguir este “enlace”.

El concepto-concepto en el diseño de carteles

Justo por la oportunidad de experimentar haciendo carteles, creo que diseñar un cartel no es decorar, es comunicar una idea. Efectivamente un cartel te puede sorprender, emocionar, incomodar, apaciguar o deleitar. A esto lo llamo tener concepto-concepto.

El primer concepto del concepto-concepto tiene que ver con tomar el mensaje, la información, y entonces realizar esta asociación con ideas aparentemente ajenas. Cuando se logra la conexión, el mensaje se transforma. Un ejemplo de lo que podía ser el resultado, sería un cartel que causara alguna de las reacciones mencionadas. Definitivamente no es fácil.

Más o menos creo que funciona así esto de obtener el primer concepto del concepto-concepto:

• Saber qué se tiene que decir con obviedad,
• pensar en el contexto (quien lo va a observar, dónde, de que modo),
• romper esa obviedad con un mensaje visual que vaya más allá del mensaje original (esto es, sorprender, emocionar, incomodar, etc.),
• asociar ideas dispares, “alocarse”, para hacer algo “creativo” (raro, no usual, metafórico, artístico).

Y el otro concepto del concepto-concepto, es en realidad la ejecución, lo que muchos confundimos con “diseño”. Esto es, tomar el mensaje y darle unos buenos “brochazos”. Es enfocarse directamente en cosas como:

• texturas y acabados,
• efectos,
• decorar bien.

Ejemplos típicos sería hacer un cartel verde para algo de ecología, manchas rojas para algo de muerte o poner una computadora para anunciar tecnología. Sin embargo, he descubierto que algunos de estos casos realmente dependen de factores externos al diseñador:

• No hay mucho tiempo para reflexionar sobre el concepto. A veces, tienes que sacar otros pendientes que te ocupan la mente o que te absorben el tiempo para la elaboración de un concepto y bocetaje. O bien, 
• importa más tener algo concreto, antes que tener algo que permita al diseñador experimentar.

Algo que confieso, es que según noto, es más probable que este tipo de carteles sea más fácilmente aceptado, a diferencia de llegar con algo “extraño”, lo cual es de antemano cuestionable. Sin embargo, también me ha pasado que para estos últimos, la gente está más involucrada con aportar algo.

Buscar al menos un punto medio

Entonces, si andamos medio secos en la mente, bloqueados, apurados o con el tiempo encima. ¿qué sería bueno hacer? Como dije, soy un neófito en esto de los carteles, pero más o menos he identificado que si no se puede transformar el mensaje, entonces sí hay que considerar que al menos el segundo concepto (del concepto-concepto) se conecte con el primero mediante el manejo de elementos del cartel que sí tengan bien establecido un significado dentro del contexto relacionado.

Como ejemplo, tomo una anécdota del trabajo, relacionada con un programa de evaluación de calidad en los servicios. Como siempre, había que hacerse difusión a la actividad. Por circunstancias diversas lo tenía que hacer pronto y se me atravesaban otros pendientes.

Con la ayuda de las personas que me lo encargaron, me dieron una orientación sobre qué pediría el cartel a los usuarios del CIRIA. Al final, esto quedó como

“Yo opino porque me importa”.

Si nos enfocáramos mucho en esta idea del concepto-concepto, este copy se tendría que transformar en algo así “esotérico” como una “balanza casera con un kilo de huevos encima” (chetos, como no se me ocurrió antes. plop). En este caso, la idea estuvo en determinar por qué era importante opinar y por qué participar. Una respuesta tiene que ver con la pertenencia, y esa pertenencia tiene que ver con la identidad de la universidad, y esa identidad se instancia en parte en su escudo. Así, los colores del escudo son una buena opción para reafirmar los valores intrínsecos en el cartel. La idea de opinar sí admito que es sencilla: opinar→hablar→globo de comic.

La segunda parte del concepto-concepto, la ejecución, fue emplear el color institucional de fondo en contraste con el globo para lograr el gancho visual y evidenciar que es algo interno.

Considero que fue algo sencillo pero eficiente. Me queda claro que los buenos carteles, además de comunicar, involucran otros aspectos y que no es fácil dominar el “cómo” hacerlo. Noto que la práctica es algo que te va “puliendo”, por lo que si estás interesado en diseño de carteles, entonces hay que hacer muchos A veces hay que ceder un poco por las circunstancias, pero si te apasiona diseñar carteles, es necesario no sólo buscar el punto medio sino también darle mucho concepto-concepto. En mi caso, definitivamente me falta mucho por recorrer y aprender.

Casi me voy de espaldas cuando leí el título que puso Elías en Isopixel: Razones por las que NO hacer un mockup con photoshop para un trabajo web. De la traducción libre que está en blog tomé los siguientes puntos:

1. Photoshop limita completamente el trabajo, no se pueden incluir enlaces, áreas “clicables” o menús. Con el papel pasa lo mismo. Lo ideal es [añadido por mi] primero hacer un planteamiento muy básico sobre el papel [/añadido por mi] y luego pasarlo a CSS/XHTML, donde representaremos lo que se hizo en papel más resto de funciones básicas como navegación, enlaces etc.

• Si estamos hablando de una maqueta o mockup, ya desde el papel y lápiz, es buena herramienta. La idea está en maquetar el sitio, hacer una disposición de los elementos, es el pensar cómo quedarían. Justo cómo ha mencionado un alumno de Javier Cañada dentro del programa Vostok. Lo que sí, viendo una maqueta como prototipo de baja fidelidad, en Photshop es posible concentrarse en los detalles visuales, esto es, enfocarse mucho en la forma. Aunque es tardado, su ventaja podría ser el dar una mayor calidad final en el prototipo a diferencia de tomar lápiz y papel. No hay que olvidar que en el prototipeo lo relevante es obtener, de ser posible, resultados sobre aspectos de usabilidad; ahí el photoshop es un arma de dos filos, es más fácil para este caso optar por lápiz y papel o un wireframe simple. No importa si se puede “cliquear”.

2. Photoshop proporciona muchas herramientas para conseguir detalles y justamente buscamos lo contrario, no queremos dar detalles concretos, solamente lo esencial. El programa nos distraerá en cosas que ahora no tocan hacer.

• Efectivamente, pero justo se repite mi apreciación en el primer punto. ¿Qué tipo de calidad se requiere en el prototipo y con qué propósito se está realizando? Un detalle curioso es que si el proyecto lo amerita, un prototipo simple con CSS no puede competir con uno visualmente más preciso (de preferencia con una versión más simple en papel o wireframe ya evaluada).

3. La fuente de un sitio forma parte imprescindible y es muy probable que necesites cambiarla varias veces. Photoshop hace más complicado este proceso: abrir el .psd, seleccionar la fuente del lugar concreto que queremos cambiar, cambiarla, exportar a .png .jpg para poder enseñar los cambios a, por ejemplo, un cliente etc. Además de queen photoshop las letras NUNCA se comportan igual que en la web, a pesar de darle la misma fuente con las mismas características en el programa se ve de una forma y en la web de otra [añadido por mi] (nunca entendí porque pasa esto) [/añadido por mi].

• Con respecto a la fuente, es claro que no todos los textos pueden ser arbitrarios, esto es, utilizar la fuente que quiera y luego pasarlo a imagen. Vale para ciertos encabezados y es obvio que hay que tomar en cuenta qué tanta sustitución con imagen habrá de hacerse en los textos y por qué sería conveniente tomar este tipo de decisiones. Para los textos “comunes”, esas cosas no se pueden probar mejor que con texto “en vivo”, que se está viendo en el browser y eso sí tiene que hacerse con CSS (referente a familia tipográfica, puntaje, interlineado y variantes).

4. Photoshop se enfoca en la producción y no en la productividad. En este primer paso se busca conseguir los puntos esenciales para crear un sitio accesible, claro etc. Luego nos preocuparemos de darle un aspecto “bonito”.

• Eso no lo voy a negar. Si se maqueta en photoshop, cuestiones accesibilidad, navegación y usabilidad tienen que tenerse en la cabeza “en segundo plano” (como en cómputo, un proceso corriendo ahí atrás) mientras se diseña. Esto implica que no importa tanto la herramienta (photoshop o lápiz de papel) sino la integración de los conocimientos sobre diseño visual, diseño web, diseño de información, arquitectura de información, accesibilidad y usabilidad. Insisto, ¿para qué va a servir el prototipo o maqueta en cuestión?

5. Perderemos tiempo en pasar el mockup de photoshop a css/html.

• Otra gran verdad. Llego a una conclusión rápida que este es un vicio, el cual tengo y esto casi seguro que tienen muchos que empezaron con esto de la web en los 90s cuando el ensamble de las interfaces venía en forma de tablas. Lo que creo que este punto puede ser evidente dependiendo de tu forma de “aprender web”; si desde el principio rompes con la maquetación en photoshop y te acostumbras a hacer “drafts” a partir de una lógica-de-ensamble vía CSS/HTML, entonces tu perspectiva/proceso sobre cómo ir diseñando, definitivamente cambia. La estructura mental para esta tarea cambia. Al comenzar a hacer la “integración” que menciono arriba con una maqueta hecha en photoshop, los tropiezos te enseñan a discernir cuáles áreas “no deben o tienen por qué tocarse”. Pero sí es interesante ver como el cambio en el paradigma de diseño web en cosas que a gente más reciente en estos rollos (post-liberación-de-las-tablas) hace que tengan soluciones creativas que pueden pasar por obvias para ellos.

6. Con html/css podremos seguir un flujo de trabajo mucho más productivo: Hacemos el cambio, guardamos y refrescamos.

• Esto está relacionado con el punto anterior. En ese sentido, estoy de acuerdo. Aunque una vez pasada la migración de photoshop, esas áreas “intocables” tienen que trabajarse siempre como se plantea en este punto.

7. Photoshop es poco práctico, aunque lo manejes desde hace mucho tiempo, es complicado hacer las cosas de forma simple.

• Si es el caso de un prototipo visualmente complejo, es tardado, pero no creo que ese sea el punto general de estos siete, sino identificar quién implica a quién, si photoshop luego CSS/XHTML o primero CSS/XHTML luego CSS. Sí son dos formas de pensar/diseñar diferentes. Y también hay que recordar el contexto, el usuario y el cliente. Mis comentarios van enfocados a sitios web “usables” por no decir cuasiplanos visualmente, no tanto a esos “interactivos” ganadores de premios y llenos de factores de diseño emocional y metáforas navegacionales rebuscadas. De una u otra forma, concuerdo en que hay que obtener un equilibrio.

Y la razón por la que casi me voy de espaldas, es porque, usualmente tengo que “concretar visualmente” una maqueta en photoshop, justo como estoy diseñando algo de web en estos días. Aunque, admito que en momentos de frustración, sobre todo por el trabajo “talachero” de pasar de PSD al ensamble CSS/XHTML donde a veces suele suceder que no queda justo como “habías pensado”. Un debate interesante el asunto.

PD. Ya está el foro de discusión en Isopixel al respecto.

Actualización.

CyberGus nos comparte también su opinión sobre este tema, con comentarios bien enfocados. 

Encontré está recopilación de métodos de visualización diseñada en forma de tabla periódica de elementos.

Una manera rápida y presentada en forma entretenida para tomar referencias de cómo hacer explicaciones visuales.

Muchos de los profesionales del diseño visual suelen enfocarse netamente en la construcción de imágenes para comunicar, llegando a diversos y excelentes trabajo de ilustración. Sin embargo, olvidan el poder de la tipografía como complemento y/o apoyo a sus trabajos o incluso (descartando las imágenes) como la única “forma” de transmitir el mensaje.

Al pensar “separadamente” en cuanto a tipografía e imagen (ilustración), es posible que se llegue al error de no transmitir el mensaje adecuado, viendo el producto de diseño como un todo y con un trasfondo (cultural, funcional y emocional). 

Supongamos que hemos llegado a la siguiente ilustración o imagen. La idea es anunciar la belleza interna de la mujer… muy al estilo de Dove.

¿Qué tipografía pondríamos para el copy “tus ojos, ventana a tu verdadera belleza”?

Ok, ok… no sómos tipógrafos, por lo que no podríamos empezar una tipografía desde cero. Va, no hay problema. Sin embargo es importante que al seleccionar una fuente tipográfica, analizar su anatomía, acercarnos y apreciar esos pequeños detalles en cada una de las letras. Aunque suene tan trillado, cada una de las familias tipográficas parece que sí tiene un carácter propio… ¿o no?

Monalisa de tosca belleza, sin gracia.

Una belleza con “gracia”, pero muy propia, algo “estirada”.

Ok. Te creo. Debes ser buena, pero busco algo más kinky.

Te gusta Hello Kitty, ¿verdad?

¡Deja de verme así! Me asustas…

Por cierto ¿de qué era el cartel?… Aaaah sí… Dove. Mmmm… ¿buen diseño o mal diseño? 

En más de una ocasión he presenciado algo que estoy seguro que a muchos-muchos nos ha pasado, tener una mac y conectarla a un cañón y darte cuenta que no se ve lo mismo en tu monitor que en la “pantalla” (o donde estés proyectando la señal)… le mueves al F7 y nada. Le cambias la resolución y nada. ¿Qué hacer?

Arriba está la ventana que me sale en la parte de Displays en las Preferencias del Sistema. Mac muy inteligentemente y por qué no decirlo, usablemente, no te muestra más de lo necesario. Desafortunadamente no tengo un cañón a la mano, pero bendito Google, directo desde Synaptic Burn, hay una pantalla que muestra como queda cuando le conectas un cañón.

Por cierto, el post de Synaptic Burn, trata prácticamente de este tema. Entonces para que puedas ver “lo mismo” tanto en el cañón como en el monitor de tu mac, solo debes de activar la casilla que dice “Mirror Displays”. ¡Listo!

Mac es amigable. Ok, puede ser. ¿Usable? Pues sí, si es amigable debe ser usable, ¿no es así? Pero que sucede en la vida real, o al menos de lo que he visto en congresos, presentaciones de clase y exámenes de grado…

Nadie lee la interfaz. No ven lo de “Mirror Displays”.

Entonces, ¿no que Mac es usable/amigable? o ¿simplemente esto es un error de usuario? Ante este caso, no es complicado deducir que

1. La pantalla pierde consistencia en el aumento de opciones. Aunque parezca tonto, pasar de “Display-Color” a “Display-Arragement-Color-Options” te “cambia la jugada”.

Ya sea que seamos un usuario nuevo en mac o que estemos histéricos porque presentamos la tesis en 10 minutos, nunca he presenciado a alguien que diga: a ver, uno por uno, cómo le hago para ver mi monitor… mmm… según recuerdo en Windows tiene que ver con la resolución… a ver, a ver… resolución, dónde esta.

Y curioso, un efecto de labeling es la posible confusión sobre lo que significa “Options” cuando las otras tres también son opciones. Ante este problema, será que la solución está en las “Opciones”…??? Es un razonamiento válido.

2. No es lo mismo disponer de un diseño centrado en la meta que uno centrado en la tarea y además, pensar en un diseño centrado en el usuario.

¿Cuántas personas recurren de un técnico cuando se enfrentan al problema del cañón? Es más fácil decir: hey, tu, el que usa mac. Ven, ayúdame.

Por otro lado, no he visto que alguien le mueva al “Arragement”, al “Color” o a las “Options”. Parece que la meta es “enchufar la lap y que se vea lo mismo en ambas salidas”, la tarea particular es “que se vea lo mismo en las dos pantallas”… las demás tareas o cosas que haga la sección de “Displays” parecen no importar. Entonces ¿por qué no dar énfasis a este hecho, si realmente hay un diseño centrado en el usuario amigable/usable?

Sería práctico que ya que la Mac se encarga del auto-detect de nuevos displays o salidas de video como el cañón, saque de paso un mensaje de este tipo.

O más aún, que aproveche una de sus características de interfaz de las preferencias de sistema, como puede ser la iluminación sobre la opción buscada.

El ejemplo anterior es un claro ejemplo de lo que en diseño se llama Designing the Calm Technology. Pasar lo más importante al “centro” y dejar lo demás en la “perifieria”. Tan simple solución de diseño como un sombreado que de el efecto de iluminación sobre lo importante.

¿Es o no es usable la interfaz de la Mac?

El asunto no ese. Mac posee una interfaz altamente usable/amigable con aparentes eye-candys que cuando nos fijamos en otros sistemas operativos, podemos ver que son visual cues más que adornitos. Aquí la cuestión es que la visión de los diseñadores no se ajusta a los usuarios en contextos como los mencionados arriba.

No es un problema de usabilidad, es un problema de cómo el usuario recibe el mensaje que manda el diseñador sobre cómo interactuar con el sistema… esto es, un problema de comunicabilidad, el cual proviene de una nueva teoría de Interacción Humano-Computadora (HCI) llamada Ingeniería Semiótica y que se enfoca en la semiosis. El diseñador, posterior al entendimiento del usuario, tiene una idea de que necesita este último para cumplir su tarea con éxito, en este caso que se vea lo mismo cuando se enchufa el cañón, y aunque no se puede meter uno a la cabeza del usuario, sí existen técnicas para detectar rupturas en la comunicabilidad y así mejorar la interfaz, que en este ejemplo ya funciona bien de por sí pero causa conflictos graves.

Entonces… no todo es usabilidad.

El buen diseño de señales para la navegación en espacios físicos (wayfinding) resulta relevante en lugares con mucho tráfico (de usuarios). El Aeropuerto Internacional de la Ciudad de México (AICM) es un buen ejemplo. Estas son algunas observaciones sobre las señales de este lugar las cuales podrían servir como referencias para cualquier sistema.

Tipografía legible y con buen cuerpo

En el caso del AICM parece ser Helvética en una versión bold (o al menos, seguro del peso 55 de la fuente). De cualquier forma, la tipografía parece tener dos ventajas aparentemente contradictorias: 1. por un lado, es gruesa de forma que se identifica claramente el rectángulo-manchón blanco asociado al texto (obviamente apoyado por el contraste) y 2. Tiene buen diseño de “espacio negativo” con lo cual se puede identificar considerablemente las letras relevantes para armar las frases en nuestra mente, no muy lejos pero sí con mucha anticipación.

Jerarquías visuales y Taxonomías

Una tarea importante de cualquier proyecto de señalización tiene que ver con la elaboración de taxonomías. En sí, es un trabajo involucrado con arquitectura de información, sólo que en espacios físicos. En el AICM lo más básico es derivar el concepto sala, aunque también pueden tenerse otros como salidas y puertas.

Cuando llega el momento de concretar estas taxonomías en o dentro de una señal, claramente hay elementos que son más importantes que otros. En lugares como el AICM esto tiene que ver con la tarea: resulta más relevante para alguien que va apresurado identificar cuál es su sala de espera que saber dónde está el extintor (sobretodo si no hay peligro de fuego). 

Aunque es cierto que una imagen dice más que mil palabras, el texto escrito, tiene un carácter más monosémico, es decir, no hay pierde. Por eso para las salas son empleadas letras como A, B, C, etc. y para cosas “más largas de decir” pero cuya tarea no involucra acciones rápidas (como en el caso del extintor) suelen transformarse en pictogramas.

Además, dentro de todo lo textual, lo más importante, en síntesis, va “más grande”. Por cierto, aquí es donde entra la decisión de cómo casarnos con cierta familia o familias tipográficas; en el caso del AICM, parece que todo está en romana y con el mismo peso, por lo que la jerarquía tiene que ver el tamaño.

Códigos de color y consistencia en layout

Las señales son congruentes en tamaños. Esto da, cual mensaje subliminal, un ancla al usuario de que pre-identifica que está viendo. Por ejemplo, en el AICM las señales “grandotas y pegadas a la pared” tienen que ver con puertas y/o accesos, mientras que las “rectangulares” tienen que ver con la dirección (dar información para moverse hacia un lugar específico). Esta consistencia, no sólo está relacionada con los tamaños sino también con el layout  de la señal misma. La regla básica en el AICM, y en general para la mayoría de los sistemas de señalización, es “información” a la izquierda y “flecha” a la derecha. 

Sin embargo, el proceso de diseño involucra mucho más. Anteriormente me habían pasado la fórmula del tamaño adecuado de una señal. Sería interesante comprobar si las del AICM cumplen con la norma mexicana. Por otro lado, está el manejo del aire o espacio negativo para aumentar o garantizar una buena legibilidad en la señal; las señales del AICM muestran siempre un margen el cual se convierte en una especie de marco, delimitando así la lectura individual de cada elemento. 

Como sucede en muchas señales, las del AICM manejan código de color. Parece una tarea trivial pero es dónde más rápido se pueden cometer errores. En el caso del AICM, el azul marino es el que más problema de contraste tiene sobre las señales de fondo negro pero se apega al estándar de señal para personas con capacidades especiales, sin embargo, la señal no es tan frecuente como las “amarillas” o “verdes” y se apoya de formas blancas causando así un alto contraste para lo importante (lo “de adentro”).

Las señales del AICM como parte de su layout manejan un filete arriba y abajo, estableciendo bloques de señales. Se respeta para cada unidad del bloque el “marco” antes mencionado. Los únicos elementos que no tienen filetes arriba y abajo son las flechas, las cuales en vez de marco, emplean un círculo blanco para romper visualmente con cualquier otro elemento dentro de la señal. Parece no importante, pero el que las fechas no tengan estos filetes hace se vayan a un primer plano, el cual es más notable en las señales “horizontales” y cuando uno está considerablemente lejos; el propósito de la señal en este sentido, es dar una escaneada rápida (sobretodo por los pictogramas) y luego anclar la vista en la flecha, muy útil  cuando se sabe lo que se está buscando y que se encuentra en esa área (por ejemplo, un baño).

Buena implementación

Las señales pueden estar muy bien diseñadas, sin embargo, en la implementación juegan otros factores que contribuyen al éxito de navegación de los usuarios, tales como la forma física de la señal misma, su posición e iluminación.

En cuanto a color, un poco contraste y mayor elegancia, parecen suceder sólo cuando el tamaño lo permite, tal y como sucede en las señales exteriores de la nueva terminal. En el caso de la señal de arriba, de 4×2 metros aproximadamente, el gris no resulta perjudicial como fondo. En la noche, la posición de la señal juega un papel importante ya que si el vinilo no resulta reflejante, ésta debe estar colocada de tal forma que sea iluminada por los carros que pasarán por ella a lo lejos.

En el caso de las señales interiores del AICM, el detalle está en dar a los usuarios (de baja estatura) un confort con el simple hecho de mostrarse inclinadas.

También está la contraparte de cuidar los “oops, no lo había planeado”. Si cuidamos los estándares de tamaño y dónde ponerlos, también hay que tener en cuenta que las señales tienen que ser flexibles porque dar información es más importante. Quizá los espacios cambien o información nueva aparezca, de forma que rompe con lo planeado en el sistema. En el AICM, se me hizo muy curioso notar la señal de la imagen de arriba para luego ir a otra puerta y ver la imagen de abajo.

¿Que habrá sido? Falta de planeación o un exagerado apego a las normas documentadas de forma que a los que implementan no les interesa o bien, no se les da la facultad de tomar decisiones que son necesarias.

Gracias a NOlo de los Alquimistas del Diseño por darnos a conocer esta joyita. El resultado de una tesis de maestría, el cual te explica y muestra ejemplos sobre patrones de diseño de información. Si alguna vez, te has puesto a pensar cómo visualizar datos o dar representación fácil de entender a tu información, éste es un buen recurso en línea.

Acceder en: http://niceone.org/infodesign.

Como diseñadores de información, interacción o de interfaces en general empleamos términos como usabilidad o accesibilidad. No dudo que demos importancia a estos aspectos y consideremos que sí los aplicamos como parte de nuestros diseños, ¿pero realmente son parte de nuestro proceso? ¿estamos sensibles a ellos? Por ejemplo, diseñamos sitios web “para nuestros ojos” como diría Costa, en este caso, nuestros ojos occidentales. ¿Qué pasaría si te pidieran el diseñar la misma información también para Arabia Saudita? ¿Sería diferente el proceso? ¿Seguro? ¿Podrías afirmar por qué?

El experimento va así: entrar al sitio de la KAUST, darle una escaneada rápida al homepage y de ahí identificar qué fue relevante para nuestros ojos. Ahora, buscar la opción “en árabe”. ¿cómo se siente ese cambio? Podemos regresar y repetir la operación un par de veces… ¿se siente raro? ¿no normal? ¿se te ha cruzado en la cabeza términos como “curioso” o “por qué hacen X o Y cosa? Página de inicio de KAUST, versión occidental:

Página de inicio de Kaust, versión árabe:

Acercamiento de esta página:

• Como diseñadores de identidad, ¿podrías decir por qué es relevante que primero se lea la marca en extenso y luego el imagotipo? ¿que no da igual poner KAUST y luego el nombre largo? Si observamos la versión en árabe, no crea mayo conflicto, al contrario, entiendes KAUST y te quedas entonces con esa marca en la cabeza, aunque no sepamos bien que significa.
• Lo mismo sucede con la foto de del profesor. Si estuviéramos diseñando un portal similar, ¿por qué es importante que aparezca la foto primero? ¿estamos conscientes de por qué tomamos ese tipo de decisiones?
• ¿El menú debe ir a la derecha o a la izquierda? En los sitios web actuales, fuera de nuestra “occidentalidad” de leer de izquierda a derecha y de arriba hacia abajo, encontramos menús del lado derecho o izquierdo. En este caso el “What’s KAUST?” es quien determina la prioridad de lectura de este chunk de información… ¿cuántas veces sabemos que priorizamos contenido en sitios web de forma adecuada? Si fuera un menú común y corriente, da igual que sea derecha o izquierda..?

Parece que pasar de español a árabe consiste en un “flipeo” del layout… Ok. Puede ser. Pero si vemos el sitio en árabe, ¿no es curioso como rompe con nuestra “normalidad” de cómo diseñar para occidente? 

Entre los ponentes del último See, una conferencia sobre visualización, estuvo Ben Fry, una combinación de computólogo y diseñador. Es primera vez que veo un stream de él. Su aportación en el diseño es la introducción del concepto Computational Information Design, resultado de su tesis doctoral en el Media Lab del MIT.

Nota: El video no puede incrustarse así que hay que ir directamente al sitio de See para verlo.

Liga: http://www.see-conference.org/#/en/Livestream/?stream=seeconference3_benfry

Ironman tiene todo para ser una gran película para sentarse a disfrutar con meeeedio kilo de palomitas y un mega vaso de coca-cola. La película está bien fantaseosa pero bueno, de Marvel en la pantalla grande, es una de las que más me ha gustado, incluso más que los X-Men.

Bajita la mano, esta película es una muestra informal de conceptos de diseño de información en interfaces gráficas de usuario (GUI) y su intersección con la disciplina Interacción Humano-Computadora (HCI, por sus siglas en inglés). Para comenzar está Jarvis, parece ser un agente inteligente, capaz de ser ordenado a cumplir tareas específicas tal como decidir qué elementos pintar de rojo en el traje de Ironman. Sin duda, sería el sueño de algunos expertos en la materia poder programar un agente tan complejo por dentro.

En realidad Jarvis no es sólo un agente, ya que no resuelve un problema a la vez, es un sistema multi-agente y más aún, es una especie de servicio ubicuo cuando está “activo” en el traje, que por cierto, éste último puede considerarse toda una wearable computer.

Jarvis posee una característica que lo hace “deseable”… su interfaz. ¡Ah, qué chulada! Para empezar es una interfaz de manipulación directa, lo cual quiere decir que el sistema le da retroalimentación a Stark sobre lo que “mueve”, tal y como sucede en bajo la metáfora de escritorio de Windows.

Sin embargo, con todo el dinero que tiene Ironman, este concepto es llevado a otro nivel, en un concepto estudiado en HCI: la realidad aumentada. En la película, Tony Stark toma su pluma-lapicero y sobre una proyección holográfica va señalando en el aire lo que desea tirar al “bote de basura” en su escritorio 3D.

En cuanto a la “parte visual” de Jarvis, ahí aplican principios de Edward Tufte en el diseño de información que aparecen en su libro Envisioning Information. Este Jarvis presenta a Stark mucha información, no sólo del funcionamiento general del traje sino también del clima y otros… En lo mostrado, existen information chunks que le permiten a Ironman ir viendo por pedacitos varias cosas que le importan, y más aún, el diseño de estos chunks tiene que ver con algo que Tufte llama micro-macro lecturas: Ironman no puede leer todo detalladamente porque tiene pocos segundos, por lo que para cada chunk, debería fijar su vista en lo más importante y por lo cual, su valor visual sería más grande, derivando en un mayor contraste (de forma, color y tipográfico).

También aparece en la película el concepto tufteano de capas y separación, como cuando Popps (interpretada por Gwyneth Paltrow) va navegando la computadora del villano y descubre el prototipo de traje-robot que está haciendo. En general, la película tiene mucho de este concepto con un buen manejo de color para identificar la información.

Un ejemplo, de las narrativas de espacio y tiempo que menciona Tufte, es cuando Ironman va “marcando” de un grupo de personas (villanos que están amenazando con matar a los rehenes que tienen en sus brazos) para luego disparar “balas autodirigidas”.

Pues bien, podría resultar algo muy geek, pero también interesante como “alimento visual” estarse fijando en esos “detallitos” que apoyan a la fantasía de la película. Parece que una GUI que impacta visualmente es sinónimo de avance tecnológico. La ventaja del cine, es que el salto hacia algo tecnológico superior es factible, pero eso no implica que en la vida real no hayan sucedido cambios, sino basta con mirar las interfaces de los aparatos del pasado (radios, automóviles, televisores, licuadoras y demás). Mientras tanto, y en forma continúa, disciplinas como la HCI siguen trazando el camino para alcanzar a la magia del cine.

PD. ¿Y qué dicen del diseño del traje? Super.