Tag Archives: Métodos y proceso de diseño

Concurso de Diseño de Interacción en CLIHC 2011

Desde que participé como estudiante voluntario en 2005, el Congreso Latinoamericano de Interacción Humano-Computadora —conocido como CLIHC— me ha permitido conocer sobre el trabajo académico y profesional relacionado con el área. Pero este año he tenido una oportunidad interesante: ser coach en el Concurso de Diseño de Interacción apoyando al equipo de la UDLAP, quien resultó ganador del primer lugar a nivel licenciatura este 28 de octubre en Porto de Galinhas, Brasil. El equipo lo conformó  Alan Andrade , Thaís Corona, Beatriz Martínez , Jorge D. López y Rafael de la Rosa, estudiantes de la Lic. en Tecnologías de Información y de Ing. en Sistemas.

 Alan Andrade , Thaís Corona, Beatriz Martínez , Jorge D. López y Rafael de la Rosa

El reto del concurso era diseñar una aplicación turística para ciudades donde ocurrirá un mega-evento, pero que al final pueda seguir siendo útil y provechosa para los locales y nuevos turistas. Fue así como presentaron InTour: una aplicación que no sólo es pensada para el turista individual, sino que fomenta la integración familiar y generacional a través de una vacaciones bien planificadas, tanto en presupuesto como en actividades. Dichas actividades son "manifestadas" por la ciudad misma —gobierno, empresas u ONGs, para demostrarle a los visitantes del mega-evento lo "viva que está la ciudad"— con opciones para armar un plan flexible dependiendo de la distancia, transporte, tópico, clima o dinero asignado para el día.

InTour: Aplicación móvil diseñada por el equipo UDLAP para el  Concurso de Diseño de Interacción en CLIHC 2011

El proceso de diseño involucró investigación secundaria y entrevistas a usuarios con el perfil de usuario potencial. Se diseñaron Personas, se hizo lluvia de ideas y se elaboraron bocetos —parte que a mi siempre me parece muy entretenida. Cuando se pulieron los detalles, verificando cómo se cumplían las metas de las Personas, se elaboró el prototipo cuya usabilidad fue evaluada.

Algo que disfrute mucho y que fue parte del proceso, fue cuestionar a los muchachos sobre cómo se presenta la información, qué comunica de un solo golpe en cada pantalla, cómo sí influye la visualización en la interacción y temas similares. Espero haber dejado en ellos que el diseño visual para IHC no es solamente que se vea bonito, sino que es parte "del show".

Extiendo mis felicitaciones al equipo UDLAP: se decidieron, lo intentaron y completaron la misión. Y es que en México desde el 2010 se ha fomentado este tipo de concurso y por si no saben, México, y en particular el equipo de la UTM de Oaxaca, se ha llevado el primer lugar en foros importantes. Así que el hecho de que la UDLAP se una a este conjunto de jóvenes entusiastas y ganadores, no solo me da mucho gusto por el triunfo, sino que señala que en el ámbito universitario hay un mayor interés por desarrollar el Diseño de Interacción y la Interacción Humano-Computadora. Si la academia se pone en paralelo con lo que está sucediendo a nivel profesional desde hace un par de años —como la creación de startups y grupos de interés, entonces algo bueno sucederá o dirá de nuestro país, ¿no creen?

Más información en la nota del concurso en el Blog de la UDLAP.

Gracias a Thaís, Jorge, Rafa, Alan y Betty por haber estado dispuestos a idear, charlar, discutir, criticar y diseñar juntos. ¡Felicidades! :)

Notas del Congreso Internacional de Diseño de Información 2009

Este congreso bianual llamado también CIDI (por sus siglas en portugués) y organizado por la Sociedad Brasileña de Diseño de Información (SBDI), se celebró del 9 al 10 de septiembre con sede en la Pontificia Universidad Católica de Rio de Janeiro (PUC-Rio).

cidi006

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?

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

El Dr. Yuri explicando la importancia del Mind Gap.

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.

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.

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.

CIDI 2009

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.

karen01

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 artesanal.

Recursos relacionados con la tradición retórica.

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.

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.

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.

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).

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.

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:

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

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.

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.

mauro01

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

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".

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.

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.

CONGIC 09

CONGIC 09

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.

CONGIC 09

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.

CONGIC 09

CONGIC 09

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.

cidi011

La separación frente-fondo

Un producto de diseño visual, por su naturaleza, "aplasta" dentro de un área delimitada los elementos que lo constituyen, viviendo éstos "en capas". En forma burda, podemos distinguir al menos dos: un frente y un fondo. Si nuestro ojo está mejor educado podemos descomponer el frente en dos o más capas también, sin embargo lo que sí es un problema de diseño es cuando no se pueden distinguir al menos estas dos capas, ya que no se puede "leer" o extraer el significado de lo está al frente o bien, entender si el fondo es despreciable.

Esta separación se hace más importante cuando los productos poseen un carácter informativo con el fin de tomar decisiones o bien, involucran realizar una tarea. Ejemplos de éstos son sitios web, interfaces gráficas en teléfonos celulares, cajeros automáticos, señales en las autopistas, entre otros. En algunos casos el tiempo en el que el usuario puede separar el frente del fondo resulta relevante; por ejemplo, ¿qué implica si en una autopista a 120 km/h un conductor no puede entender lo que dice una señal porque la información pertinente no se distingue del fondo? 

La separación del frente y del fondo depende de dos factores básicos:

  1. La estructura visual de lo que constituirá el frente. Esta estructura implica que la información tiene una buena distribución y una buena jerarquización; es decir, se pueden identificar los pedazos o chunks de información.
  2. El contraste visual entre el frente y fondo.

Poco contraste entre el contenido informativo y el fondo

Manejo del fondo de un sitio web

Mejor contraste con el fondo

En algo "más" sencillo como un sitio web, puede cometerse el error de colocar la información "directamente" sobre una imagen de fondo (que puede repetirse o no) y a veces, aunque haya una estructura visual, el contraste entre el frente y fondo no es suficiente y todo queda "ruidoso".

Variaciones del mismo fondo que ayudan a identificar el contraste que separa el fondo de un frente de información ya visualmente estructurada.

La separación entre el frente y el fondo podría ser equivalente a tener una letra escrita en una hoja de papel. No importa la tinta empleada o el tipo de papel; para ser leída, es importante que se pueda distinguir la letra, entonces se cuida la forma de la letra misma así como el papel en el que se escribe. Contrariamente, una letra garigoleada (con mucho adorno) sobre un papel excesivamente texturizado podría dificultar la lectura.