Mi solución es bastante artesanal y no tiene nada de sofisticada. Aunque hay artículos bastante completos sobre el tema, yo había leído alguna vez que tenía que ver con el viewport, y entre los resultados de mi búsqueda di con el uso del parámetro media y los CSS Media Queries. En los siguientes recursos está cómo emplear diferentes hojas de estilo dependiendo del medio:

http://css-tricks.com/6206-resolution-specific-stylesheets/

http://css-tricks.com/6731-css-media-queries/

http://www.w3.org/TR/css3-mediaqueries/

http://reference.sitepoint.com/css/mediaqueries

http://www.css3.info/preview/media-queries/

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.thecssninja.com/css/iphone-orientation-css

En cuanto al diseño web, siempre tuve una preferencia por layouts fijos por tener un mayor control del espacio en ventana y por tomar en cuenta la resolución estándar de un usuario potencial. Nunca me había preocupado porque la información quedara bien acomodada en diferentes resoluciones; es un reto interesante conservar la estética reticular y mantener un flujo de lectura adecuado para cada resolución. Este tipo de soluciones requiere que tengamos una actitud algo quisquillosa y obsesiva, así como trabajar cada layout hasta quedar satisfechos.

Justo por el cambio de "paradigma" de fijo a adaptable, y ante una especie de "bloqueo ante la hoja en blanco", no quedaba conforme en (regresar a) maquetar primero en algún software de diseño, así que lo trabajé directo en pantalla. Un pro de esta decisión es que vas viendo "en tiempo real" como quedan las cosas en diferentes navegadores y resoluciones. Un contra es que podemos perder el control fácilmente —sobretodo si dejamos el proyecto un día o dos. Es importante hacer anotaciones en papel y documentar en las hojas de estilo para que recordemos por qué tomamos ciertas decisiones. En este proyecto, me resultaron —a mi juicio— muchas hojas de estilo y fui redundante en ciertas reglas, dejándolas en cada hoja porque no sabía como iba a verse "el final" en todas las resoluciones; algo así como "un cambio por aquí y luego ajusto por acá".

Con un layout fijo no considero útil que tengamos muchas hojas de estilo, pero dadas las múltiples resoluciones, parece ser necesario un mayor número de "enlaces". Un colega me sugirió hacer importaciones, pero al final descarté esta opción porque según hojeé, afecta el rendimiento:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Otro punto importante es verificar la compatibilidad de los CSS Media Queries. Originalmente estaba muy feliz —tipo the Oatmeal— porque IE se comportaba decente; pero por no leer, me llevo la sorpresa de que fuera de IE 9, simplemente no funcionan:

http://caniuse.com/css-mediaqueries

Ante esta situación, decidí dejarle un layout fijo a todos aquellos usuarios que tuvieran de IE 8 para abajo y tomando como resolución estándar 1024 px de ancho.

Luego está el asunto del iPhone y del iPad. Hay que poner una línea de código que indique qué va a pasar cuando el navegador sea Safari. Esta línea asocia la variable "ancho" empleada en el CSS Media Query con el "ancho" del iPad, iPod o iPhone —según sea el caso. Además, resulta que cuando pasamos de modo landscape a portrait, o viceversa, se hace un zoom medio raro y es posible que los textos se desplieguen de diferente tamaño a como los observamos en una computadora de escritorio. Para validar todo lo anterior está como referencia el siguiente recurso:

http://stackoverflow.com/questions/2977550/iphone-safari-css-rotation-bug

A mi me divirtió mucho esta idea de presentar el mejor layout dado el ancho del iPod, iPhone o iPad. Sin embargo, siendo sinceros y "usables", la desventaja de jugar con diferentes acomodos de la información es que rompemos con la navegación (browsing) del usuario. Cuando alguno de estos dispositivos se rota 90 grados, debido a este re-acomodo, el usuario pierde vista la información de su interés. Lo anterior es más evidente en el caso del iPod/iPhone. Cognitivamente, lo que hacemos es "resetear"  el flujo de interacción; definitivamente algo no bueno para ningún usuario. En este proyecto, la mayoría de la información es estática y aquella que podría cambiar o agregarse durante el año, estará ubicada en la parte superior de las páginas correspondientes.

Una colega me señaló que estos ajustes automáticos no siempre convenían si trabajamos en una computadora de escritorio  —o en una laptop con pantalla grande — porque quizá el re-acomodo de la información podría perjudicarnos cuando llevemos a cabo una tarea más compleja, donde trabajemos con la información proveniente de diversas ventanas. Se me hizo un punto válido; por ejemplo, yo mismo he copiado y pegado información de una página web a Word o Excel. En este tipo de situaciones, debería de haber una opción para "fijar" el layout.

Por último, no olviden visitar http://ciria.udlap.mx/franciscana/ para enterarse de qué conferencias y exposiciones habrá en dicha biblioteca. Saludos

En un proyecto reciente, me topé con un formulario web para búsquedas avanzadas. El texto en el formulario ya estaba previamente aprobado. En este caso, mi asignación fue realizar un posible ajuste visual al contenido del formulario.

El formulario original:

El formulario en realidad son dos: uno tiene que ver con la búsqueda por "Procedencia" y/o "Institución" y el otro con la búsqueda avanzada por "Identificador de la marca". Sin duda, una forma directa de resolver esta situación es a través de una "división visual" que rompiera la lectura tan vertical que se tenía originalmente.

La parte de "Procedencia" y/o "Institución" resulta complicada por si misma: ¿cómo sabes qué campo es más importante?, ¿se llena uno? ¿se llenan ambos? Al final se decidió que el usuario, en su curva de aprendizaje, aprendiera a trabajar esta sección sin "ayudas visuales" adicionales — como poner una leyenda al estilo: "A ver mi estimado usuario, o llenas uno o llenas los dos, etc".

De la parte de "Buscar en", "Tipología" y "Ordenar resultados por", me surgió la duda si debía cada sección acomodarse horizontalmente. Eso daría una dinámica de trabajo de ir bajando un renglón/bloque a la vez. Sin embargo, esa opción no podría ser adecuada porque al menos en "Buscar en", las 8 opciones la convierten en impráctica. El cambio que sí se realizó fue que las opciones por defecto en "Búscar en", "Tipología" y "Ordenar resultados por" sean más evidentes para el usuario poniéndolas de primero.

Este es el resultado del formulario:

Aunque los cambios realmente no son drásticos, puede observarse que con un acomodo más reticulado y manejo del aire compositivo en adición a las cuestiones planteadas arriba, el formulario se ve más consistente y quizá sea más usable. Afirmación, que por su naturaleza, sólo se puede validar a través de una prueba de usabilidad

La experiencia fue muy gratificante; en las charlas se trataron temas como visualización de información, tipografía, cartografía, diseño de instrucciones, diseño de interfaces, entre otras. Estas son algunas imágenes y anotaciones de un par de charlas del evento.

Visualización de Información con el Dr. Yuri Engelhardt.

En esta conferencia de apertura, el Dr. Engelhardt comenzó comentando que existen dos puntos de enfoque o estudio con respecto a las gráficas:

1. La gramática de las gráficas - relacionada con la creación de las mismas. Lo importante es determinar y entender cuáles son los "bloques" con os que se construyen las gráficas.
2. El conocimiento de las gráficas - relacionada con el uso de las gráficas. Darnos cuenta dónde, cómo y cuándo son efectivas las gráficas para generar conocimiento o tomar decisiones.

¿Cómo es la gramática de las gráficas?

El Dr. Yuri explicando la importancia del Gapminder.

El explicó que la visualización y el manejo de gráficas es importante porque:

• Estamos limitados por nuestra memoria a corto plazo,
• son una extensión de nuestro espacio mental de trabajo y
• nos permiten utilizar la visión para pensar.

Gráfica que explica el consumo de carne en comparación con la tala de árboles.

Y que también las gráficas son mejores que el texto en el sentido que:

• Nos permiten hacer "búsquedas" visuales,
• hacer comparaciones visuales,
• notar visualmente cambios o desviaciones (en los datos) y
• nos permiten encontrar patrones visuales.

Cita de Brinton, proveniente de un libro de visualización que ha influido en el trabajo del Dr. Yuri.

Desde su perspectiva social, la educación visual es importante, y debe procurarse desde la infancia. Comentó que cree que los datos que nos permiten generar información visual a través de las gráficas permite a la sociedad a mejorarse a si misma debido a que puede asimilar mucha información (sobre lo que sucede en su contexto) de forma que va dándose cuenta de qué está sucediendo en su "historia" durante el tiempo.

Diseño de información en transición por Karen Shriver.

La plática de la Dra. Shriver estuvo muy interesante porque nos platicó de qué significa ser un experto en el diseño de información; es decir, al ser esta una disciplina transitoria de la comunicación gráfica y escritura técnica, qué habilidades debería generar un profesional en el medio para lograr un expertise.

Comenzó comentando que un factor importante, que a su vez es un reto en la disciplina, es que no existen teorías, modelos o un perspectiva de cómo uno se vuelve un experto en el diseño de información.

Recursos relacionados con la tradición artesanal.

Recursos relacionados con la tradición retórica.

De ahí, nos mencionó que existen prácticamente tres tradiciones que influyen en el diseño de información:

• La artesanal - en donde se nos indican guías y reglas que debemos seguir, y en la que también suele darse mucho peso a las habilidades técnicas (sobretodo en cuántos paquetes de software sabemos para ser llamados un "diseñadores"). Indicó que esto deriva en que muchas personas tengan una visión corta acerca de la disciplina.
• La romántica - cuando consideramos que hay gente que nace con el talento. Mencionó que en salones de clase, esto induce a que el educador (en diseño) tome un papel pasivo enfocándose en tan sólo proveer del ambiente o contexto adecuado para estas personas talentosas. Ante este hecho, comentó que esta perspectiva no es satisfactoria, porque la formación (enseñar, corregir, contrastar y aprender) es importante para volverse un experto.
• La retórica - donde se piensa en términos de la audiencia. Explicó cuál ha sido la evolución (es decir, las consideraciones que determinan la manera de diseñar) de esta tradición y que en la actualidad seguimos enfocados en la experiencia del usuario que es el resultado de la suma de emoción y cognición.

Explicación de la Dra. Shriver de cómo han evolucionado los modelos de la audiencia según la tradición retórica.

Convertirse en un experto depende del contexto, pero mencionó que existen ciertas formas de alcanzar esta meta, tales como:

• Auto-estudio.
• Trabajando con mentores.
• Interactuando con grupos.
• Retroalimentación del mundo real.

Definición de qué significa ser un experto en diseño de información según la Dra. Shriver.

También nos indicó que los expertos atacan los problemas de una forma novedosa; por lo que no es lo mismo ser un experto que tener experiencia, lo cual podría implicar la repetición de las mismas fórmulas aunque sea en forma eficiente. Además, nos explicó que los diseñadores de información expertos, como cualquier experto en general, busca patrones para evaluar la calidad de un trabajo. Dichos patrones son variados e incluyen aspectos

• lingüísticos,
• estructurales,
• patrones de género,
• espaciales,
• patrones gráficos y
• patrones tipográficos.

Ejemplo de diseño de información que brindó la Dra. Shriver. Este es el texto informativo original para solicitar un permiso al municipio.

Este es el texto resuelto en cuanto a diseño: no sólo se consideró el layout y jerarquías, sino también la escritura técnica. (D.R. Shriver, 2009).

La Dra. Shriver es autora de un libro llamado "Dynamics in Document Design"; que por cierto, he tenido alguna vez la oportunidad de hojear durante la maestría, y que me pareció muy buena referencia para un diseñador de información. Disfruté mucho haber tenido la oportunidad de escucharla en vivo.

Cierre de la conferencia magistral por Karen Shriver en el CIDI 09.

Cómo la tecnología ha afectado la práctica de la visualización de datos según Isabel Meirelles.

Esta fue una charla muy descriptiva e interesante. La Mtra. Meirelles presentó, analizó y discutió la relación entre la visualización y la tecnología a través de diversos casos que podemos encontrar actualmente. Entre ellas:

• Visualization Lab - New York Times. También mencionó el proyecto de visualización llamado "Cómo diferentes grupos gastan su día".
• Many Eyes - IBM. Donde uno sube conjuntos de datos o bien toma un conjunto de datos, hace visualizaciones y luego se llevan a cabo discusiones sobre éstas (una mezcla de Web 2.0 con visualización de datos).
• Spatial Information Design Lab - Universidad de Columbia. En particular el Million Dollar Blocks.

La Mtra. Isabel Meirelles explicando las tendencias actuales para la visualización.

Una visualización de Minard que desconocía y que me pareció muy ilustrativa.

Sistemas de información ambientales por Mauro Pinheiro.

Mauro, colega y buen amigo, nos platicó sobre el cómputo ubicuo o penetrante (pervasive computing como se le conoce en inglés), idea en la que cualquier artefacto tiene capacidades para procesar datos y transmitir información de forma que la tecnología sea parte de nuestro entorno. Nos explicó como este enfoque es consecuencia del paradigma de diseño llamado Calm Technology propuesto por Mark Weiser y presentó diversas aplicaciones tecnológicas con motivo de reflexionar sobre cómo explorar áreas de oportunidad en este campo.

Ejemplo de ubicuidad de la información - caso globo.com de Brasil.

Explicación sobre el paradigma de Calm Technology conformado por el "centro" y la "periferia".

Cuestiones relacionadas con el diseño de información con respecto al cómputo ubicuo de acuerdo con Mauro Pinheiro.

CONGIC: Congreso de iniciación científica en el diseño de información.

Paralelo al CIDI se llevo a cabo un congreso estudiantil de diseño de información llamado CONGIC. A mi parecer, esta actividad se me hace bastante loable ya que da la oportunidad a los estudiantes no sólo de explorar el diseño de información a través de la investigación, sino que brinda un foro para ellos, donde pueden tomar experiencias para presentar y discutir sus ideas ante colegas y público de otras disciplinas. Tuve la oportunidad de escuchar tres de estas charlas estudiantiles.

Una de ellas trató sobre un modelo analítico con consideraciones semióticas aplicado a proyectos tipográficos.

También estuve presente en otra donde se explicó (aunque entendí muy poco por el acento del portugués de la ponente) cómo se involucró a usuarios reales de un material educativo para aprender geometría descriptiva.

Y por último, una charla sobre cómo diseñar materiales de instrucciones, en este caso para el ensamblaje de un ventilador. Un proyecto de diseño de información aplicado a la vida real, donde se evaluó la usabilidad del producto de diseño.

En conclusión…

Esta versión del CIDI fue interesante porque su eje fue "el campo de acción del diseño de información" lo cual derivó que participara gente que no provenía solamente del área de "diseño". A mi juicio, este congreso es una manifestación de la madurez del diseño de información en Brasil y reconoce la importancia de la investigación/gestión de proyectos relacionados con la disciplina.