Archivo para la categoría ‘Diseño de Información’

Sitio web de la Biblioteca Franciscana

Escrito por Tzek el 07/12/11
Clasificado en: Diseño de Información, Diseño de Interacción, Diseño de Interfaces, Diseño Web, HCI, Métodos y proceso de diseño, Profesión, Tecnología, tutoriales, XML/CSS

Ahora que la web puede accederse desde una PC, una laptop, un SmartPhone o una tableta, se nos presenta una paradoja a los diseñadores: debemos creer en la estructura semántica del contenido de las páginas, pero también hay que cuidar más que nunca la presentación de la información considerando tanto al usuario como el dispositivo a usar.  Últimamente me ha llamado la atención estos sitios que aprovechan las ventajas del CSS para ajustar sus layouts dependiendo de su resolución, así que aproveché experimentar con un proyecto de rediseño web que tenía  pendiente: La Biblioteca Franciscana.

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

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

Escrito por Tzek el 14/11/11
Clasificado en: Diseño de Información, Diseño de Interacción, Diseño de Interfaces, HCI, Métodos y proceso de diseño, Profesión, Tecnología, Tertulias

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! :)

Feliz día del diseño 2011

Escrito por Tzek el 27/04/11
Clasificado en: Diseño de Información, Diseño de Interfaces, Diseño Gráfico, Diseño Web, Diseño y Matemáticas, Diseño y Sociedad, HCI, Profesión, Tertulias

A mis colegas y amigos dentro del ámbito del diseño: mucha suerte, mucho amor y mucho diseño. Feliz día. :)

 

De la comunicación en una organización

Escrito por Tzek el 20/01/11
Clasificado en: Diseño de Información, Diseño y Sociedad, Profesión, Reflexión, Tertulias

Al estar involucrado en cuestiones de calidad y diagnóstico del clima organizacional en mi trabajo actual, he confirmado que la comunicación juega un papel muy importante en la salud organizacional. En sí, mucha de la "neurosis organizacional" se "calma" si existe una comunicación efectiva.

Dentro de cada área en una organización se realizan actividades, procesos o bien, proyectos. Justo cuando se "ejecuta" (partiendo de una actividad o tarea), se genera información. Esta información puede registrarse formalmente o no, aunque siempre resulta útil para repetir la misma actividad, ejecutar un proceso en general o proponer un proyecto similar. Lo interesante está, que al ser una organización, dicha información también puede fungir como "input" para que otras áreas a su vez ejecuten sus tareas, procesos o armen proyectos. Cuando se alcanza la eficiencia aplicando toda la información generada, cada área ( y podría decirse al final que la organización misma) va generando su conocimiento: el know-how.

Sin embargo, la información no siempre fluye entre las áreas de una organización (o individuos dentro de una misma área). Quizá sea por nuestra naturaleza egoísta, porque no sabemos cómo registrar formalmente la información y gestionar el conocimiento con alguna herramienta, porque puede "dar evidencia" de nuestras fallas en la ejecución (que deberíamos llamar "áreas de oportunidad") o simplemente por desidia. Lo malo dentro de una organización, a mi parecer, es que al final todo proceso o proyecto derivará en resultados que deberán ser evaluados para determinar cómo va dicha organización. En ese momento, lo anterior no parece no importar y los mismos miembros de la organización podrían manifestar que la falta de comunicación provoca que no se pueda "realizar bien" el trabajo.

Complejo. Bueno, todas las organizaciones están conformadas por personas. Quizá sea por eso.

Saludos.

Rediseño de un formulario web

Escrito por Tzek el 03/11/10
Clasificado en: Diseño de Información, Diseño de Interacción, Diseño de Interfaces, Diseño Web, Métodos y proceso de diseño, Profesión, XML/CSS

En el diseño de información, los formularios pueden ser complicados de resolver porque a pesar de parecer aburridos, se necesitan tomar buenas decisiones sobre cómo podría darse el flujo de lectura, el entendimiento de los campos, atender a cuestiones de legibilidad, definir jerarquías visuales, en algunas ocasiones el manejo de color y elementos gráficos, y en general preveer un buen flujo de trabajo (es decir, la "interacción" con el formulario).

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:

Formulario de búsqueda avanzada del catálogo de marcas de fuego de la UDLAP - BUAP antes de su rediseño

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:

Formulario de búsqueda avanzada del catálogo de marcas de fuego de la UDLAP - BUAP después de su rediseño

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

Si el diseño fuera un pastel de primera comunión

Escrito por Tzek el 24/09/10
Clasificado en: Diseño de Información, Diseño de Interacción, Diseño Gráfico, Diseño Web, Diseño y Sociedad, Profesión, Reflexión, Tertulias

Este post es anecdótico sin duda. En una ciudad cercana a donde vivo, hay un mercado muy popular para ir a comer lo típico: cecina. Justo mientras comía en un puesto, una familia estaba sentada junto a mi. La mamá estaba platicando sobre una situación que había pasado con el pastel de la primera comunión de su ahijado.

cecina

En la celebración de la primera comunión es común encontrar un pastel con cubierta blanca o en tonos marfil, típicamente adornado con algún motivo relacionado: una hostia, una cruz, unas uvas o bien, un cáliz de consagración. La señora comentó que tuvo un roce con el pastelero porque cuando llegó a "apartar" el pastel (dejar el anticipo y realizar su encargo), ella había sido muy específica de que el pastel tenía que ser de chocolate porque a su ahijado le gusta el chocolate. Así de simple.

Luego comentó que el pastelero le dijo: "Eso no se puede hacer". A lo que ella respondió: "¿No se puede o no quiere?". Como respuesta, el pastelero le preguntó que cómo era posible hacer un pastel de primera comunión que no fuera blanco, ¡todos los pasteles de primera comunión son blancos! Escuché que ella le respondió: "El pan y la cubierta pueden ser de chocolate y los adornos hechos a base de merengue blanco". Bueno, en realidad la señora se expresó con otras palabras, pero ese fue el punto: de que sí se podía.

Me quedé pensando entonces cómo está situación se da en un contexto de diseño. Podríamos pensar que este asunto sin duda está bien relacionado con el diseño de servicios, pero enfocándonos más en el diseño de lo visual (en proyectos de diseño gráfico, de información e incluso de interacción), ¿cuál sería el símil de esta historia? En realidad sólo dejo la pregunta al aire, aunque me quedé con un par de reflexiones y preguntas:

El pastelero pensando en él y en su negocio en general, debería ser tanto un buen pastelero como versátil: un pastel de chocolate le debería quedar tan sabroso como un pastel sabor vainilla. Para este caso, no escuché que se tratara de una persona que sólo hiciera pasteles de primera comunión. Considero que son varios factores a analizar, quizá cuestionarnos sobre el nivel de especialización del pastelero, su experiencia o la forma personal metodológica con la que enfrenta un problema y proyecta una solución. Quizá este asunto pueda verse también desde el punto de vista de la innovación, creatividad o incluso, de la mercadotecnia.

Hasta donde sé, en ningún lugar está acuñado en piedra que los pasteles de primera comunión sean blancos o que los pasteles de niña sean color rosa. Sin embargo es una convención de fuerte carga simbólica tanto en los colores como en las figuras. Aunque es verdad que esto no está relacionada con cubrir la necesidad del ahijado. Vamos, el niño quería su pastel de chocolate por algo. ¿O el pastel es realmente para satisfacer (al menos en cumplir con las convenciones dentro de este tema) a los invitados? En todo proyecto, no sólo está el cliente, sino también el usuario y otras personas involucradas; eso hace muy interesante y particular la toma de decisiones dados diversos factores.

En este round pastelero, ¿el experto (el pastelero) debió imponer racional o apasionadamente su punto de vista o hizo bien en aceptar al final las órdenes de su cliente? ¿Fue descabellada la cliente en hacer semejante solicitud con tal de satisfacer el antojo de su ahijado? Y si tomamos en cuenta que lo importante es el rito religioso y su simbolismo, ¿no debería al menos un sacerdote dar sus recomendaciones? Cómo tomaría la mamá e invitados un pastel obscuro en un evento como éste, aunque al final acaben disfrutando e incluso repitiendo rebanada en caso de que el pastel estuviera sabroso?

Bueno, ya estoy exagerando… en realidad esta anécdota, la cual no impidió que disfrutara mis tacos de cecina, sólo causó la curiosidad de preguntarme: ¿qué implicaciones se tendrían si se tratara de un proyecto de diseño?

Saludos. :)

De arquitectura de información, wireframes y discusión entre expertos

Escrito por Tzek el 16/08/10
Clasificado en: Diseño de Información, Diseño de Interacción, Diseño de Interfaces, Diseño Web, Métodos y proceso de diseño, Profesión, Reflexión, Tertulias

Este post expresa una experiencia similar a la descrita en "El prototipo como herramienta de discusión/diseño", solo que en esta ocasión decidí acudir al wireframe como parte de las herramientas de discusión para que entienda qué debo diseñar de un sitio web, no sólo de su contenido, sino también cómo resulta válida su arquitectura.

Fui invitado a participar en un proyecto sobre un catálogo en línea de un tema del que desconocía todo. En este caso, la gestión de dicho catálogo es posible gracias a un sistema en el que trabaja una colega Ingeniera en Sistemas. En realidad mi participación original era sólo para elaborar un front page, lo cual desde mi punto de vista ya no se estila. Comenté en su momento que el home debe ser más que una carátula con un vínculo hacia un catálogo (lo cual a mi juicio rompe con la consistencia navegacional). Debería ser un punto de partida a la tarea principal del usuario (i.e. navegar el catálogo) o hacia otras tareas que requieran (como en este caso) el consumo de información textual nada más. Pues bien, aunque mi participación no involucra algo complejo como la gestión misma del catálogo, en parte confieso que es un esfuerzo para hacerme más divertido el trabajo.

Boceto de propuesta de home en vez de una carátula simple.

Entonces, en vez hacer un prototipo de baja fidelidad (i.e. el mockup a la photoshop), después de oir en juntas y con mi colega cómo funcionaría el catálogo, idear una arquitectura realmente simple (adecuada en este proyecto) y realizar un boceto que después se convertiría en un wireframe.

Close-up del wireframe

Estos han sido algunos puntos derivados de esta experiencia:

El papel todo aguanta. Los cambios son fáciles de "realizar" durante la discusión en las juntas. Basta con "rayar" directamente sobre el papel.

Resultado de los primeros cambios discutidos en junta.

Discusión sobre contenidos y navegación. Que se tenga sólo un wireframe frío sí evita que las discusiones se vayan a aspectos gráficos como los colores o la estética.

Aprender sobre el tema escuchando. Dado que la mayoría del equipo son los expertos sobre el tema, suelen expresarse con la terminología adecuada y también tener una idea muy marcada de cómo les gustaría que se diera el proyecto. Es conveniente escuchar y preguntar de vez en cuando, al menos para cuestionar la decisiones, tomando en cuenta que lo importante es "si le funciona esa idea/decisión al usuario".

Wireframes impresos para discutir la arquitectura y contenido de las secciones, más allá el home.

Una arquitectura orgánica se puede generar a partir una discusión de expertos. En casos donde la navegación parece sencilla, con wireframe en la mano, se puede ir determinando el esquema de navegación global y local mediante discusión. Esto provoca que los mismos expertos realicen el labeling. Aún más, te permite replantear en la cabeza, como diseñador, el acomodo "visual" de la misma información, conforme se va escuchando lo discutido en las juntas.

"Mapa de navegación" final.

Ya falta entonces, armar el look and feel para la interfaz, comenzar a ensamblar las páginas estáticas y la integración con las páginas dinámicas generadas a partir del sistema seleccionado. Veamos cómo sale. Saludos :)

Concurso Estudiantil de Diseño de HCI

Escrito por Tzek el 05/08/10
Clasificado en: Desde la web, Diseño de Información, Diseño de Interacción, Diseño de Interfaces, Diseño y Sociedad, HCI, Métodos y proceso de diseño, Tecnología, Tertulias

Ha salido la convocatoria del concurso de diseño de HCI del 3er Taller Mexicano de Interacción Humano-Computadora, MexIHC. Pongo en este post la convocatoria con mucho gusto y expectativa. Interesante ahora que hay además de gente de sistemas computacionales, informática y  tecnologías de información relacionada con estos temas, se encuentran estudiantes de diseño, y si por ahí hay gente de psicología, comunicación o antropología que le entre, entonces podría ser un concurso muy interesante. ¡Mucha suerte a los participantes!

Por favor, difundan la convocatoria a estudiantes o jefes de departamento que puedan estar interesados.

Llamada a Concurso Estudiantil de Desarrollo de Sistemas Interactivos basados en el Conocimiento para el Ciudadano.

MexIHC 2010

Introducción.
MexIHC 2010 intenta ser un foro de vinculación e intercambio de ideas entre estudiantes e investigadores, académicos y profesionistas, instituciones y grupos de interés. Este año se realizará por tercera ocasión incluyendo una nueva actividad como es el concurso estudiantil.

Objetivo del Concurso Estudiantil.
Esta es la primera edición del concurso estudiantil dentro de MexIHC. El propósito del concurso es reconocer y apoyar a los estudiantes con interés en el desarrollo de sistemas interactivos donde la incidencia del área de IHC representa un elemento importante dentro del contexto del mismo. El concurso consiste en realizar una propuesta de solución al problema de diseño planteado, como se plantea a continuación:

Problema de Diseño.
En la actualidad, en México, los ciudadanos nos enfrentamos a situaciones en las que debemos acceder a través de sistemas de información, dispositivos y mapas a la información en busca de una ruta adecuada, sitios turísticos, hospitales, restaurantes, etc. Sin embargo, el acceso a esta información puede ser difícil o imposible para ciertos sectores de nuestra población, como son los sectores vulnerables como indígenas y personas con capacidades diferentes.  Un ejemplo es el transporte público, en donde los mapas que encontramos pueden ser confusos ya que contienen mucha información que no para todos es relevante o útil.  De esta manera, el reto tiene por objetivo el diseño de un objeto, interface, sistema o servicio que ayude a ciudadanos con alguna capacidad diferente o de poblaciones vulnerables, a encontrar y visualizar la información de manera adecuada de acuerdo a sus necesidades tomando en cuenta conocimientos previos tanto del usuario como de la situación.

Dinámica de la Competencia.
El formato es similar al utilizado en la competencia estudiantil de la conferencia del grupo de interés en Interacción Humano Computadora de la Association for Computer Machinery (ACM SIG CHI). El concurso constará  de dos etapas.

1. Los equipos enviarán por correo electrónico un documento (PDF) con Resumen Extendido (máximo de 6 páginas, siguiendo el formato de ACM), describiendo su solución de diseño. Un comité evaluará los resúmenes y seleccionará cinco propuestas para asistir al taller.

2. Los equipos seleccionados serán invitados a MexIHC 2010 y realizarán una presentación oral de su diseño ante el Jurado del Concurso Estudiantil y de participantes del taller. Basado en criterios establecidos (detallados más adelante), los jueces calificarán y determinarán al ganador.

De la primera fase:
Los elementos recomendables a incluir en el Resumen Extendido son los siguientes:

  • Descripción de la propuesta de solución, incluyendo la metodología y proceso de diseño utilizado.
  • Material gráfico (imágenes, diagramas, esquemas, etc) para ilustrar la solución de diseño.
  • Referencias de los principios y teoría de diseño donde corresponda.
  • Alcance de la solución.
  • Agradecimientos correspondientes para soporte o asesoría recibida (supervisores, personal docente, expertos de dominio, soluciones existentes, usuarios, etc.)
  • Los envíos podrán ser escritos en Español o Inglés, deben incluir el título, información de autores así como afiliaciones. Favor de asegurarse que el documento enviado no contiene material propietario o confidencial y no citar publicaciones confidenciales o propietarias.

De la segunda fase:
Los equipos seleccionados para presentar su trabajo en el Taller presentarán su proceso de diseño y solución a través de una presentación al Jurado Calificador. Las presentaciones estarán limitadas a 10 minutos más 5 minutos de preguntas por parte del jurado. La presentación debe incluir:

  • El proceso de diseño que se utilizó.
  • Descripción concreta de la propuesta de solución.
  • Referencias a los principios de diseño y teoría correspondientes.
  • Alcance de la solución.

Criterios de Evaluación.
Cada Resumen Extendido será evaluado por miembros del comité de programa y profesionales expertos en usabilidad.

Para la primera fase, se evaluarán:

  • Uso de etnografía e investigación contextual.
  • Análisis o metodología utilizada para la solución del problema de diseño.
  • Relevancia de la solución para el problema.
  • Originalidad de la solución.
  • Calidad en el proceso de diseño.
  • Calidad de los argumentos para la solución propuesta.
  • Costo de la solución.
  • Claridad de la escritura.

Para la segunda fase se evaluará:

  • Claridad y organización de la presentación oral.
  • Claridad y relevancia del material utilizado para la presentación (diapositivas, videos, etc.)
  • Calidad de los argumentos utilizados para justificar la solución presentada tiene las características adecuadas para ser considerada como tal.

Sobre los equipos y participantes.
• Para poder participar en la competencia, los participantes deben demostrar a través de un documento oficial que son estudiantes inscritos al curso académico actual y que no son empleados de la industria relacionada con IHC. Cada equipo enviará la documentación correspondiente escaneada junto con el documento de la propuesta de solución.

• El número de integrantes del equipo podrá ser entre 2 y 4 estudiantes. No existe límite en la cantidad de equipos participantes para cualquier Universidad. Los estudiantes pueden ser de licenciatura o maestría. Se recomienda generar equipos multidisciplinarios.

Premios.
A todos los equipos seleccionados se les entregará un diploma de participación. Se premiará en efectivo a los dos primeros lugares.

Primer Lugar: $10, 000. 00  (pesos mexicanos)

Segundo Lugar: $5, 000.00  (pesos mexicanos)

Apoyo a equipos seleccionados.
Los equipos seleccionados para presentar sus trabajos durante el Taller serán apoyados con la exención de la cuota de inscripción para los integrantes. Adicionalmente el comité destinará a los equipos seleccionados una cantidad para gastos de transporte.

Fechas Importantes.

Envíos de Trabajos: 18 de Septiembre de 2010

Notificación de Aceptación: 15 de Octubre de 2010

Recepción de trabajos en:

http://www.easychair.org/conferences/?conf=mexihc2010concursoestudiantil

Responsables (Chairs) del Concurso.

•  Mario Moreno Rocha, Universidad Tecnológica de la Mixteca. mmoreno@mixteco.utm.mx

• Edgar Cambranes Martínez, Universidad Autónoma de Yucatán. edgar.cambranes@uady.mx

Comité  del Concurso.

• Dra. María del Rocío Abascal Mena. Universidad Autónoma Metropolitana – Cuajimalpa. mabascal@correo.cua.uam.mx

• Dr. Erick López Ornelas. Universidad Autónoma Metropolitana – Cuajimalpa. elopez@correo.cua.uam.mx

• Dr. Pedro Damián Reyes. Universidad de Colima. damian@ucol.mx

• Dr. Sergio Zepeda Hernández. Universidad Autónoma Metropolitana – Cuajimalpa. jzepeda@correo.cua.uam.mx

Exposición tipográfica

Escrito por Tzek el 23/07/10
Clasificado en: Diseño de Información, Diseño Gráfico, Diseño y Sociedad, Profesión, Reflexión

Aunque de niño estuve rodeado de tipos móviles, realmente no me fijaba tanto en las caras de los tipos, sino más bien, me quedé con la idea de que el arreglo y composición del texto completo era importante porque observaba que había una forma ordenada para hacerlo. Quizá por eso al principio comulgaba muy bien con estas ideas del grafismo suizo. Sin embargo, después de ser expuesto a comprender la tipografía a un nivel quizá un poco más detallado, me he vuelto primero loco y luego más tolerante a la variedad de formas en los mensajes de texto, intentando cuestionarme cómo la tipografía, ya sea a nivel macro o micro, sí influye en la proyección del mensaje tanto como un todo, así como su convivencia con otros mensajes dentro de un entorno.

Asistí recientemente a un evento que me hizo recordar este asunto sobre la importancia de la tipografía en los mensajes gráficos y sobre cómo el usuario/lector/audiencia se encuentra expuesto a veces a tanta diversidad que me pregunto cuánto hace nuestro cerebro para evitar la ansiedad de una saturación de forma y contenido.

Desde mi lugar en esa ocasión veía algo más o menos así:

Jornadas Bibliotecarias de la BUAP

Mientras escuchaba la charla que muestra la fotografía de arriba me quedé pensando sobre este asunto de la exposición tipográfica. A continuación está un acercamiento:

jornadas02

Si no me equivoco por ahí está Copperplate, Calibri, Verdana y Arial (no veo bien si es Helvetica). Así, bajita la mano hay tres "tipos de letra". En la presentación hay dos "tamaños" (para "Muestra" y el resto para el texto en la tabla). Ahí mismo hay tres pesos distintos (el de "Muestra", el de los encabezados de la tabla y el resto). Y en la manta, sólo en el logotipo hay dos fuentes diferentes y tres tamaños. En adición, se pueden distinguir en la manta al menos seis tamaños diferentes en los pesos (que creo en mi un conflicto sobre qué es importante y qué es secundario). Y en ambos casos (presentación y manta), se añade la variable del color.

La razón por la que me dejó pensando es porque no podía evitar ver la presentación y la manta como un grupo. Es que hay algo en la manta, certero sin duda, que hace que te enganche visualmente: el rostro. Al final "carita mata texto" (en el tono del dicho popular mexicano) porque debido a que tendemos mucho a fijarnos en las partes de un rostro como ojos y boca, el de la manta está funcionando como una gran ancla visual, lo cual, perjudica en este caso poner atención a la presentación.

No es cuestión de si este diseño "está bonito" o "no está bonito", si está bien o está mal. La vida no puede ser aburrida y  poner todo en Helvetica y en tonos neutros con tal de evitar la "contaminación visual", y como consecuencia de ser creado por el hombre, el egocentrismo se extiende en lo que creamos, incluyendo los mensajes visuales y textuales (sobretodo si tiene que ver con presencia y lucro como con las marcas). Sin embargo, sí creo que como diseñadores, sabiendo que todos estamos tan expuestos a este bombardeo visual, de mucho en mucho, debemos cuidar detalles como una buena selección tipográfica, jerarquizar y colorear de formar que los textos tengan su impacto cuando se deba pero que no sean tan entrometidos cuando no se les esté prestando atención.

Saludos.

Tema de tesis de licenciatura en diseño

Escrito por Tzek el 24/06/10
Clasificado en: Diseño de Información, Diseño de Interacción, Diseño de Interfaces, Diseño Gráfico, Diseño Web, Métodos y proceso de diseño, Profesión, Reflexión, Tertulias, tutoriales

Un estudiante de los últimos semestres de una licenciatura en diseño gráfico me contactó para charlar sobre cuál podría ser su tema de tesis. En muchas universidades mexicanas, la "tesis" ha sido la forma tradicional de titulación, aunque actualmente ya existen otras opciones. Pues bien, encontrar el "tema" en cualquier licenciatura siempre ha sido un problema cuasi existencial para los estudiantes. En cuanto a diseño, un post ameno y que aborda el tema son los "Consejos para tu tesis" por los Alquimistas del Diseño.

Podríamos discutir placenteramente sobre qué es una tesis o no, y sobretodo, qué es una tesis en diseño a nivel licenciatura. Aunque no es el punto de este post, sí quiero expresar que en muchos casos, no realizamos una tesis tal cual sino un documento sobre el desarrollo de un proyecto. Independientemente de que los egresados de diseño elaboraron tesis o tesinas, siempre está el asunto del tema.

Este estudiante me comentó que además de ser un proyecto de titulación en equipo de tres, estaban muy interesados en Guerrilla Marketing y/o BTL, y que el problema era que no sabían qué "tema social" trabajar. Mi sugerencia fue la siguiente:

  1. No pensar en el problema. En vez de pensar en el problema, notar que social involucra casi todo, prácticamente donde el hombre "ha metido mano". Le sugerí que mejor hicieran una lista de temas (mediante una lluvia de ideas).
  2. De esta lista seleccionar uno o dos temas. No más.
  3. Para cada tema, ahora sí, discutir y exponer una serie de  problemas o necesidades.
  4. Seleccionar un problema.

En teoría, a partir de este problema debería generarse un marco contextual que explique sobre el problema: qué es, por qué surge, qué consecuencias ha tenido, con qué se relaciona, etc.

Después viene la recopilación de la información sobre la "herramienta". Por ejemplo, en este caso el BTL sería la "herramienta" para atacar el problema seleccionado; entonces hay que colocar en el documento la información necesaria que muestre el qué y el cómo: qué es el BTL, cómo se generó, dónde aplica, cuál es la situación actual, sus ventajas, desventajas, casos exitosos y ejemplos concretos, cómo se evalúa, etc.

Así, con una parte de la información que sumerge al lector en el problema y otra que da base al proceso de diseño, se podría proponer algo que apoye o sea una posible solución, para después evaluarla y reportar resultados. De toda la experiencia (lo reflexionado sobre el problema y el desarrollo, así como los resultados) se llegarían a las conclusiones.

En realidad es tanto emocionante como complicado (a nivel personal) seleccionar el tema. Ya sea a nivel proyecto o pensando en proponer una teoría, uno espera siempre hacer la tesis. No queda más que llevar las cosas con tranquilidad, y como me mencionó un colega: hay que leer (mucho).

Saludos y suerte a quienes andan en ese proceso.