La Imagen y Estética deben ser paralelas

Cuatro capturas de pantallas desde
 http://www.zengarden.com
El contenido es el mismo, por lo que éstas pantallas
muestran como con hojas de estilos de HTML (CSS)
se pueden lograr efectos muy diferentes en la
 presentación de contenidos.

Hace un par de semanas retomamos la conversación de Arquitectura de Información en el tema de la Imagen y la Estética. Planteamos el carácter que este área de trabajo tiene para el Arquitecto de Información y discutimos como no se trata sólo de lograr el deleite ante lo bello, como un atributo complementario a lo bueno y lo funcional, sino que más allá de eso, se trata de lograr que la estética contribuya a la funcionalidad, a la navegación, a la usabilidad de la solución de gestión de información que se diseña y desarrolla. Hoy queremos insistir en el carácter paralelo que debe tener el trabajo estético dentro de la Arquitectura de Información. Cómo y por qué hay que lograr que éste sea desarrollado con bastante (y mejor si total) independencia del trabajo de estructuración de contenidos, despliegue funcional, establecimiento de la navegación y seguridad informacional.

Cuando comenzó la Web, en los inicios de los 90, este conocimiento no se tenía muy claro y todavía mezclábamos estructura, con contenidos y atributos estéticos y de imagen. Eran muchas menos las posibilidades para los diseñadores y era mucho lo que tenía que hacerse a través de programación.

Las hojas de estilo de HTML (CSS) fueron el gran salto que permitió avanzar de una manera clara y lograr que la Imagen y Estética de una página Web pudiera establecerse en forma completamente independiente de su contenido (Ver en Aprendizajes y formatos un poco más acerca de esta historia). En efecto, gracias a los estilos de HTML hoy podemos desarrollar la Imagen y estética en forma paralela al trabajo en las otras dimensaiones de la Arquitectura de Información: Estructura, Funcionalidad, Navegación, Usuarios y Seguridad (Ver: Las cinco dimensiones de la Arquitectura de Información). Desarrollo en paralelo significa aquí la posibilidad de avanzar en caminos que corren uno al lado del otro, sin entrecruzarse, y por tanto, sin que uno obstaculice o frene el avance en el otro.

Los estilos de HTML permiten cambiar muchos elementos estéticos: fondos, color, alineación, decoración y espaciado de textos. Familia, estilo, peso y tamaño de fonts.  Características de presentación de imágenes, enlaces, listas y tablas.

El mismo contenido Web puede lucir completamente diferente si lo presentamos con hojas de estilo diferentes. Gracias a estas hojas de estilo los Gerentes y los Arquitectos de Información pueden trabajar con diseñadores Web los elementos estéticos mientras (en paralelo) avanzan en las otras dimensiones del desarrollo de la solución de gestión, por ejemplo, la funcionalidad y la navegación.

En las imágenes mostramos un ejemplo que desde hace algunos años hizo clásica la ilustración de cómo se podía lograr un resultado muy diferente en la presentación del contenido de una página Web a través del cambio de la línea que en el documento HTML especifica la hoja de estilo CSS que debe usarse al presentar el contenido: http://www.zengarden.com. La primera página es el contenido sin estilos y las siguientes tres muestran el mismo contenido con hojas de estilos diferentes.

Obviamente, desarrollar una aplicación o resolver un problema de gestión de la información no es algo tan simple como diseñar una página Web. Si se permite la metáfora: no es lo mismo pintar bien una pared que diseñar bien una buena casa, si bien la construcción de una buena casa, hecha a partir de un buen diseño, requiere el saber cómo pintar las paredes para que éstas luzcan bien.

Generalizando el concepto de estilos CSS en la familia de páginas Web que integran un sitio dinámicamente construido, y separando en una base de información los contenidos de los aspectos estructurales, de seguridad, de funcionalidad y de navegación, se tienen todas las piezas de un lego del cual se pueden cambiar muchos elementos para lograr resultados específicos en las salidas, sin tener que programar y con gran independencia del trabajo en las distintas áreas. Así debe manejarse la estética de un sitio Web. Eso es lo que significa el trabajo paralelo. Lo absolutamente contrario es entregar los contenidos a un diseñador y esperar que nos resuelva la construcción de las páginas Web, práctica que lamentablemente todavía se realiza en muchos sitios.

El diseño de la Imagen y Estética

Las Torres Petronas en Malasia: Al comenzar a diseñar la imagen de
un sitio Web los Arquitectos de Información tienen que hacerse
preguntas análogas a las que se hacen en una oficina de Arquitectos
cuando se comienza el diseño de una nueva edificación icónica

Al hablar del diseño de la Imagen y estética como la quinta dimensión en el trabajo de Arquitectura de Información la semana pasada expusimos cómo esta actividad cumple un rol que trasciende el disfrute complementario de la belleza que siempre hacemos, en cualquier área, una vez que están satisfechas todas nuestras necesidades previas. Señalamos que el trabajo en esta dimensión se integra en lo práctico, lo funcional y lo fácilmente navegable que una solución informacional puede o no ser para el usuario para el que fue desarrollada. Entramos hoy con más detalles para ilustrar los procesos típicos que deben realizarse a la hora de acometer el diseño de una solución informacional.

La primera consideración que hay que hacer cuando se diseña la Imagen y Estética de una aplicación o sistema de gestión de información tiene que ver con la diagramación de la salida. Recordemos que no está bien simplemente soltar una secuencia indiscriminada de textos y enlaces para que el usuario sobreviva entre ellas y encuentre lo siguiente que quiere leer o hacer, casi obligado a pasarse por todo el contenido presentado. No es así como trabajan los sitios Web exitosos. Antes bien, hay ciertos esquemas de diagramación que tienden a repetirse y que permiten que el usuario de una solución se ubique más o menos fácilmente en los contextos. La creatividad de los buenos diseñadores subyace dentro de estos parámetros. Si se trata de un diseño para un equipo de escritorio o de una laptop, normalmente la pantalla se divide en secciones con un encabezado y dos o más columnas. Típicamente con un pie. A veces con algunas secciones adicionales, claramente identificables (Ver Las áreas básicas de la salida).

En numerosos casos se usa un esquema de diagramación especial para la página inicial (Ver La página inicial) y un esquema (o varios, cuando es necesario) para las páginas interiores. Esto lo estudiamos con detalles cuando consideramos la tercera dimensión del trabajo de Arquitectura de Información: la Navegación (Ver). De lo que se trata a partir de la determinación del modelo de diagramación que se usará es el establecer unas normas o patrones gráficos que incluirán imágenes y selección de colores de fondo de cada una de las secciones integrantes de cada esquema y los tipos de letras principales que se usarán, con sus respectivos atributos y colores.

Un modo que muchas veces resulta apropiado es pensar que toda salida está compuesta de secciones y que cada sección está compuesta por celdas y cada celda informacional normalmente contiene un título, una imagen, un contenido y un enlace. Adicionalmente otros elementos como subtítulos y otros enlaces. Con esto en mente se definen los principales estilos de HTML que se usarán. En cuanto al tipo de contenido que se mostrará aplica el concepto de tipo de salida que también trabajamos en otras oportunidades (Ver En los tipos de salida, todos los sistemas se parecen). Estos tipos de salida pueden requerir la definición de estilos adicionales de HTML.

Trabajando de esta manera pueden diseñarse los aspectos gráficos y estéticos de una solución con bastante independencia de los contenidos específicos que en un momento dado se presentarán. Debe notarse que es un error atar el diseño estético a los contenidos específicos ya que por una parte, si un sitio Web trabaja bien, sus contenidos deben variar con mucha más frecuencia que su diseño gráfico y por la otra, un sitio Web bien diseñado debe poder cambiar su imagen y estética con total independencia de los contenidos.

Obviamente hay diferencias claras entre un sitio Web corporativo para los miembros de una empresa y un sitio abierto al amplio público. Entre un sitio para profesionales y un espacio digital para jóvenes. Sin embargo, hay elementos comunes. Por ejemplo, sin que hayan normas escritas en piedra, un sitio Web debe variar integralmente su imagen general al menos una vez al año y sus contenidos con una periodicidad claramente definida para general interés y seguridad a sus audiencias.

¿Por que considerar la estética?

Bahrain World Trade Center:
El diseño de las edificaciones modernas intenta
permanentemente fundir lo bello con lo práctico,
funcional y ecológico
(foto tomada de http://www.skyscrapercity.com)

La semana pasada retomamos la conversación de las cinco dimensiones de la Arquitectura de Información (Estructura, Funcionalidad, Navegación, Comunidades-Seguridad e Imagen-Estética) y en particular, hicimos una introducción a la quinta de estas dimensiones: La Imagen y Estética. Queremos hoy detenernos en la consideración de por qué es un deber del Arquitecto de Información el incorporar en sus análisis y diseños consideraciones estéticas. Esperamos mostrar que más allá de lo que muchos creen, el valor de este trabajo no reside meramente en el hacer los sitios Web más bonitos. En lugar de ello veremos que la estética tiene otras funciones sobre las que descansa su importancia para el Arquitecto y el Gerente de un servicio de Información.

Todos estamos claros que la belleza incluye ingredientes subjetivos y culturales. Que lo que nos parece bello a algunos no necesariamente le parecerá bello a otros. También que por A o por B hay elementos que pueden inspirar ciertas sensaciones de belleza a colectivos mayores o menores. Pero independientemente de esos detalles, la belleza está directamente vinculada con el confort, con el sentirse bien. Esto quiere decir que, a igualdad de condiciones funcionales, nos sentimos mejor en situaciones donde apreciamos que hay belleza.

No significa esto, desde luego, que la belleza sea un sustituto de la funcionalidad. La pura belleza no resuelve las necesidades y aunque estemos en presencia de algo muy bello, podemos estar muy incómodos, si estamos en una situación completamente infuncional y algunas de nuestras necesidades no están satisfechas.

Lo anterior podría ser suficiente para motivar a los Arquitectos de Información para diseñar con consideraciones estéticas, ya que con una razonable capacidad de resolver sus problemas funcionales de manejo de información, la gente se sentirá mejor si el sitio Web le resulta atractivo. Pero decirlo así es insuficiente y subestima el resultado al que debe aspirarse cuando se trabaja en la quinta dimensión de la Arquitectura de Información, y ese es el punto al que queremos ir.

Las pantallas de los sistemas modernos son gráficas y a color. Pueden ser pequeñas o grandes según el dispositivo que se use para consultar, pueden ser de interfaz de teclado o táctil, pero lo que es cierto es que bien sea un teléfono, una tablet, una laptop, la salida de un proyector sobre una pared, o la de un dispositivo de escritorio, los contenidos se presentarán en una pantalla susceptible de ser diagramada gráficamente y de presentar el mismo contenido con colores y ubicaciones variados según una cantidad de parámetros. Y según como lo hagamos, los pasos naturales para el usuario será más visibles o menos, más claros o menos claros, autoexplicativos o difíciles de encontrar.

Visto de esta forma entendemos que lo que podrían ser meras variables estéticas: fondos, imágenes, colores, tipos de letras, tamaños relativos, inclinaciones, disposición en el espacio, etc. terminan siendo colaboradores inseparables de la comunicación con el usuario, de la utilidad percibida, de la funcionalidad y la navegabilidad de una solución, es decir, determinantes claves de la experiencia del usuario, en un sentido práctico y utilitario.

La satisfacción de nuestras audiencias ante un diseño está, por tanto, ligada al trabajo realizado en la dimensión de Imagen y estética de una manera mucho más importante, crucial y definitoria, que el simple disfrute ante lo bello, complementario a una necesidad resuelta. Por eso esta dimensión (Ver Imagen y estética: la quinta dimensión de la Arquitectura de información), y la formación que conlleva para el Arquitecto de Información, es importante, y aún tendremos que entrar en más detalles…

Imagen y estética: la quinta dimensión de la Arquitectura de información

La Casa de la Opera de Sidney. Sin duda una maravilla arquitectónica:
Funcional y Estética. Una muestra excelente de como hoy no consideramos
suficiente la mera funcionalidad. Esto ocurre en la construcción civil, pero
 también en los sistemas de Información. Los Arquitectos de Información
deben trabajar también la quinta dimensión: Imagen y Estética

Recordemos que hace unos meses explicamos como la Arquitectura de Información era el resultado de un trabajo necesario que se hacía a través de cinco dimensiones: Estructura, Funcionalidad, Navegación, Comunidades (y seguridad) e Imagen (y Estética). Nos detuvimos algunas semanas en cada una de ellas. Pues bien, a partir de hoy queremos entrar en la conversación de la Imagen y Estética y describir, comprender y aquilatar esta quinta dimensión de la Arquitectura de Información.

Recordemos rápidamente por qué hemos usamos el concepto de dimensión y no simplemente de hablamos de variables: Queremos reflejar al mismo tiempo la complejidad, la infinitud y la autonomía con las que se trabaja en cada uno de estos espacios conceptuales.

En efecto, en cada una de estas dimensiones hacemos análisis especializados y tomamos en cuenta múltiples variables, consideraciones y definiciones estrechamente relacionadas, a sabiendas de que podemos intervenir en los aspectos vinculados ese espacio conceptual dentro del resultado final, sin tener que involucrarnos con los elementos más directamente enraizados en las otras dimensiones. Por ejemplo, podemos cambiar la estética sin afectar la seguridad, la seguridad sin cambiar la estructura, o la navegación sin afectar la funcionalidad o la estructura informacional. Por eso es que hablamos de dimensiones y definimos el trabajo transdisciplinario que se hace en Arquitectura de Información como un espacio de cinco dimensiones.

Cuando los sistemas de información eran soluciones con las que el usuario interactuaba a través de terminales de caracteres conectados a un computador central en una cierta localidad, poco sentido tenía hablar de Imagen y Estética. Simplemente las limitaciones del medio privaban y la conversación se centraba en la funcionalidad, por cierto, relativamente escasa en comparación con lo que se hace y se espera que haga en una solución automatizada de hoy en día.

Pero ese tiempo pasó hace décadas. Los terminales se hicieron gráficos, vinieron los computadores personales, estos se conectaron en redes, las redes se interconectaron a su vez, se estandarizaron a través de Internet y vino la Web, ofreciendo una manera de trabajar hipertextual con la capacidad de establecer enlaces de cualquier tipo de contenido con cualquier tipo de contenido, haciendo toda la información ubicua y presentando siempre todo a través de pantallas gráficas. Hasta los contenidos textuales terminaron siendo gráficos, con fonts y características comunicacionales en los que se colaban inevitablemente consideraciones estéticas.

A partir de la Web el mundo y las soluciones de información fueron otra cosa. La funcionalidad dejo dejó ser suficiente. Así como hoy día no basta que una casa sea funcional para que nos sintamos cómodos en ella y esperamos y necesitamos consideraciones estéticas e incluso artísticas al punto que nos resulta impensable el diseño arquitectónico sin ellas, así en cualquier de solución informatizada contemporánea esperamos y necesitamos (y con toda razón) aspectos que tiene que ver con la estética de la solución, con su apariencia, con sus colores, con su armonía, con su tamaño, con la diagramación de cada una de las pantallas de la salidas, con los íconos que se emplean.

Todo esto con la ventaja de poderlos trabajar con especialistas que manejan las variables de esta dimensión sin interferir en el trabajo de lo que se define, hace o construye en las otras dimensiones. Pero no se trata sólo de que la solución sea bonita. Hay detalles y complejidades. Hay que entrar en ellos para entender, de modo que sobre el tema volveremos.