Tzek Blog de Diseño

Felicidades a los profes y guías formativos en su día. A mis amigos y compañeros.

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.

elBarbón! de NiceFuckingGraphics ha publicado su Top 100 Blogs de Diseño. Para checar, curiosar y tenerla a la mano, lista para book-markear…

URL: http://nicefuckinggraphics.blogspot.com/2008/04/top-100-blogs-de-diseo-en-espaol.html

Actualización al 29 de abril de 2008:

Gracias pero declino a este reconocimiento, aunque aprecio mucho la consideración sincera de Libre Trazo. Como documentación y referencia de por qué ha sucedido esto y en qué contexto, he decidido no borrar este post o alguno de los comentarios (por favor, checarlos). Total, no tengo nada que ocultar.

—–

Post original:

Libre Trazo Colectivo me ha concedido el premio “Brillante Weblog” que anda circulando en la blógsfera. Muchas gracias por seleccionarme según por la buena calidad del blog.

Por respeto, he suprimido la imagen que originalmente iba aquí.

Este premio es un reconocimiento viral en la red, según pude rastrear, originado en La Bohemia Blog, el cual según dice: 

“…tomo una nueva iniciativa y diseño un nuevo premio dedicado a webs y blogs que resalten por su brillantez tanto en temática como en diseño. Y con el mismo propósito de promocionar entre todos una vez más la blogosfera  mundial.”

Entonces, las bases o condiciones para otorgar este premio son:

1º.- Al recibir el PREMIO, se ha de escribir un post mostrando el premio y se ha de citar el nombre del blog o web que te lo regala y enlazarlo al post de ese blog o web que te nombra ganador. 

2º.- Elegir un mínimo de 7 blogs (pueden ser más) que creas que brillan por su temática y/o su diseño. Escribir sus nombres y los enlaces a ellos. Avisarles de que han sido premiados con el PREMIO “BRILLANTE WEBLOG”. 

3º.- Opcional. Exhibir el PREMIO con orgullo en tu blog haciendo enlace al post que tú escribes sobre él. 

Entonces, para mi, los 7 blogs que se llevan el premio a la brillantez serían al menos (porque estoy seguro que hay mucho más):

Por cierto, en este post la imagen del premio, la he redibujado, aunque el banner oficial es el que aparece a continuación. Espero sea una aportación, aunque pequeña, en favor del premio.

Saludos y de nuevo, gracias por el detalle.

Felicidades a todos los diseñadores gráficos, infodiseñadores y comunicadores gráficos en el día internacional de la gráfica.

Gracias a todos los diseñadores con los que he tenido la oportunidad de dialogar, discutir y compartir conocimiento y experiencias. Más que una fuente de inspiración son ciertamente una marca de reflexión y aprendizaje.

Mi postal para Disoñador Gráfico (arriba) para conmemorar este día es una idea muy simple: el ojo como interfaz entre el diseño gráfico y la mente, cuya reproducción convencional de lo primero es impresa (usando CYMK) o en pantalla (usando RGB).

En el New York Times salió publicada una nota sobre la nueva identidad para We Can Solve It.

Esta identidad es de esa que buscar poner una sonrisa mediante un juego o retruécano visual. Un we (nosotros) que se transforma en un me (yo), es decir, aquellos que deben participar en la solución al calentamiento global. Diseñado por Brian Collins.

La idea es muy simple y efectiva, y aunque refleja un carácter modernista, la tipográfia (nótese) en la e, trata de ser cálida, hecho que sí se nota.