Tag Archives: Diseño de Interfaces

Acerca de la nueva Mac Pro de Apple

La nueva Mac Pro de Apple pronto saldrá al mercado. Lo que me dejado un grato sabor es el diseño web para su presentación. La interacción está basada en gestos, y además posee un buen diseño de información y unas buenas animaciones. Creo que es interesante ver cómo Apple se preocupa en "romper" con el paradigma de la interfaz web cada vez que presenta un nuevo producto, todo con el fin de hacerlo más atractivo.

web-macpro

A mi juicio, la nueva computadora es muy al estilo de "Star Wars", con un sabor a la Darth Vader o del Imperio. Tengo que decir que este diseño industrial no me resultó del todo convincente. Cuando la vi, pensé en un termo de café, un florero, en R2D2, en la sala del trono del Emperador, etc.

darth-vader

ThroneRoom

Creo que su forma se aleja un poco de conseguir diseñar la Computadora Invisible que Donald Norman mencionó alguna vez. Para mi, su material refleja frialdad y su forma dice "ponme en una esquina pero no olvides mi protagonismo". Sin embargo, hay que tener en cuenta que esta es una computadora Pro, así que es posible que sus usuarios se enamoren facilmente de su diseño industrial –porque tienen el perfil para esos gustos.

Altavoces Sonos Playbar. ¿Cuál es la diferencia ahora entre colgar en la pard un altavoz y una computadora?

Altavoces Sonos Playbar. ¿Cuál es la diferencia ahora entre colgar en la pard un altavoz y una computadora?

Lo que sí espero ver son especies de soportes para colgar la computadora en la pared, junto a una grande y genial pantalla también colgada. Lo anterior redefine para mi la percepción de lo que es una estación de trabajo para alguien que usa una computadora de manera profesional. De alguna forma, abre la posibilidad para otros aspectos de diseño, relacionados más con diseño de interiores y de mobiliario.

Sitio web de la Biblioteca Franciscana

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

Rediseño de un formulario web

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

La muerte de las affordances físicas

Quizá algunos recordemos el video con el MTV comenzó sus emisiones: "Video killed the Radio Star". Eso me recuerda que podríamos aplicar hasta cierto punto esa frase con los cambios sucedidos durante el tiempo, sobretodo en estas cuestiones de Diseño de Interacción y Tecnologías de Información. Por ejemplo: "Facebook/Twitter killed the Blog Star". En esta ocasión vino a mi mente "Touch killed the Affordance Star" ahora que me enterado del lanzamiento de la última versión del iPod Touch y iPod Nano.

En caso de que no estés familiarizado con el tema de affordances, quizá este post podría ser de apoyo.

No me considero un Mac Fan Boy (del todo), pero admito que para empezar, es sorprendente el avance tecnológico de esta compañía en el último par de años. De pasar de un disco duro portátil con el iPod (hasta su versión "Video"), ahora tenemos algo tan liviano, con alta calidad de imagen y que además permite comunicarnos viéndonos los rostros. Vamos, metafóricamente podríamos decir que es "tener Internet en el bolsillo". Aún no llegamos al ápice del concepto de la Computadora Invisible introducido por Mark Weiser, pero la realidad "ubicua" (computacionalmente hablando) de nuestro presente no deja de ser sorprendente después de todo.

ipod2010

Con respecto a la muerte de la affordance, es porque desde la salida del iPod Touch, y luego del iPhone, siempre he creído que una pantalla touch nunca remplazará las "ventajas interactivas" que tiene una interfaz con controles físicos, como sucede con los botones: su textura, forma, altura, reacción ante la presión, propiedades estéticas inherentes en el objeto, entre otras. Sin embargo, el touch es una realidad; en el caso de Apple, parece que la click wheel va de salida.

Lo touch no tiene su importancia en ser "lo que está in"; en realidad es algo intuitivo ya que desde chicos nos metemos los dedos en la nariz y en la boca, rascamos la tierra para descubrir qué "bichitos" andan caminando en ella, e incluso no dudamos embarrar la mesa con nuestra comida y expresarnos artísticamente (supuestamente, claro). Así que lo táctil es algo natural, algo sencillo de entender.

nano2010

Sin embargo, y eso lo podemos notar desde el principio de la aparición de estos aparatitos táctiles, que hay que compensar una cosa con otra: a falta de una demostración evidente de cómo interactuar con el producto debido a sus mismas características físicas, es necesario enriquecer la interacción de manera visual con evidentes cambios de estado visual a través del tiempo. Sin una obviedad gráfica en las interfaces del iPod/iPhone (por ejemplo, que los botones se vean como botones) y sin las respuestas visuales (como cuando se corren los paneles con cierta velocidad/fricción/sentido), estoy casi seguro que sentiríamos la interacción "estúpida" o "fría". La experiencia entonces está supeditada a estresar otros sentidos ajenos al toque, en este caso la vista.

ipad

La duda está en que si lo touch resulta igual o más intuitivo para interactuar con interfaces ricas o complejas en información (visual, textual o auditiva), entonces ¿cuántas cosas y hasta dónde exageraremos para que todo esté en pantallas táctiles? ¿Cómo este "avance" limita o "agacha" el desarrollo de otro tipo de interacciones más físicas o de interfaces intangibles como las construidas a través de voz? Es algo complejo según lo veo.

¿Qué vendrá entonces con los futuros iPod? ¿Se doblarán o estirarán como un display con comportamiento de plastilina? Espero llegue a ver los objetos con interfaces maleables/orgánicas como parte del día a día. Estaría genial.

* Imágenes tomadas de Apple.com con fines meramente de ilustrativos.

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

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

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

Del diseño y la innovación

Estoy casi seguro que la mayoría de nosotros tiene la imagen de un objeto/artefacto o situación "mejorada" cuando escucha la palabra innovación. Sin embargo, precisar qué es innovación podría resultar complicado y más aún, dar una respuesta cuando nos preguntan ¿cómo innovar?

diseno-e-innovacion

La RAE define innovación como:

Creación o modificación de un producto, y su introducción en un mercado.

Y tomando en cuenta que dicha academia tiene una definición del diseño como

Concepción original de un objeto u obra destinados a la producción en serie.

Entonces la relación entre el diseño y la innovación parece evidente. Diseñar es innovar e innovar implicar diseñar. Ajá. ¿Pero cómo?

El diseño como resultado de un proceso cognitivo para resolver un problema dentro de un contexto (aunque no sea así en todos los casos, desafortunadamente), está supeditado al conocimiento del diseñador mismo. Un conclusión rápida sería afirmar que la innovación se da a partir de una pluralidad de ideas.

Esto podría apoyar al punto de que "dos cabezas piensan mejor que una".

Sin embargo, la pluralidad se enfrenta a un problema inmediato: la comunicación de las ideas mismas. Si lográramos determinar los mejores medios y prácticas para la comunicación del diseño e innovación, aún está el pendiente de ¿cómo surgen esas ideas tomando en cuenta que cada cabeza es un mundo? ¿Cuáles podrían ser las variables a considerar dentro de un proceso de innovación? Es ahí donde entra la conformación una metodología asociada a procesos de innovación.

¿Qué involucra tener una metodología para innovar a través del diseño? En el diseño, ¿son los tan mencionados design research y design thinking?

Relacionado con esta cuestión, tuve la oportunidad de asistir a una charla y taller breve del Innovation Forum 09, llevado a cabo el 27 y 28 de noviembre en la UDLAP. El Dr. Fozzy Moritz, Director de SportKreativWerkstatt, ofreció la charla que tuvo por título: "Communication: What innovatorics is about".

fozzy

En la charla el Dr. Moritz platicó un poco sobre cómo su empresa, que se dedica a la innovación holística, aplica una metodología propia para proyectos de innovación. El punto a recalcar sobre dicha metodología es que la fase de "Generación creativa del concepto" se encuentra en sexta posición. Las etapas previas a ésta son las nombradas*  Energía y Motivación Dar comienzo al proyectoEstablecer el target vision (lo que la innovación pretende alcanzar) → La reflexión (una vez embebidos en el contexto) → Función principal (de hecho, según entendí serían las funciones/características potenciales consideraras para la innovación).

* Ya se, la traducción literal de los nombres resulta un poco extraña.

Después de terminar de contarnos sobre la metodología (incluyendo otras dos fases), el Dr. Moritz y otro miembro de la empresa, Christian Henneke, nos organizaron para realizar un pequeño pero interesante ejercicio: proponer algo relacionado con bicicletas tomando en cuenta las "restricciones de frontera"* y los potenciales de innovación**.

* En inglés "boundary conditions". Muy de ecuaciones diferenciales, ya sé. En sí, la restricciones dadas por el contexto.

** Aquello que facilita a la innovación.

mapa

El ejercicio consistió en listar qué podría considerarse restricciones y qué potenciales. De ahí, determinamos para cada uno cuáles podrían ser las consecuencias. Por ejemplo, si la "pavimentación" es una restricción, una consecuencia podría ser que las bicicletas no podrían llegar a todas partes. O bien, si "nuevos materiales" se considera como potencial, entonces la consecuencia sería la oportunidad de emplear material resistente a cambios climáticos pero amigable al ambiente.

Una vez teniendo ambas listas, podría entonces proponerse un producto, infraestructura o servicio innovador*. Al final, cada equipo pasó al frente a explicar su propuesta.

La resolución del equipo con quien estuve derivó en una bicicleta con ciertas características. Una idea que me latió mucho fue la propuesta de un miembro del equipo de que nuestra bicicleta tuviera un medidor de distancias de forma que a mayores recorridos, menor cantidad de impuestos pagaríamos.

* El hecho de contemplar infraestructura y servicio además de producto se me hace muy pertinente. Sobretodo al tomar en cuenta que actualmente es vital y redituable la innovación en las tecnologías de información y comunicación.

Aunque este ejercicio fue corto, me reafirmó la idea de que el conocimiento del contexto es relevante para la innovación. En adición, que si la creatividad puede ser considerada como el resultado de ideas aparentemente disjuntas para la solución de un problema, la innovación es la inmersión de este resultado dentro del contexto, mayormente en forma masiva, de forma que influye directamente en la percepción del problema.

Dado que los diseñadores tendemos a ser "inmediatos" con nuestras soluciones, la innovación parece indicarnos que necesitamos frenarnos un poco, pararnos "arriba de un banco" y contemplar el contexto del problema. Estoy convencido de que un enfoque metodológico no limita para nada el proceso creativo, al contrario, debería enriquecerlo. Dependiendo de la magnitud o complejidad de un proyecto, es posible caracterizar tanto a los usuarios como el contexto. Aún más, comunicar todo lo identificable no sólo podría marcarnos el camino (aunque sea "internamente", lo cual es muy aplicable a proyectos pequeños) sino a expresar necesidades y resultados esperados en términos de interés para el cliente (por ejemplo, como ciertas variables afectan el retorno de inversión, lo cual sería muy bueno en situaciones de proyectos grandes o muy formales).

Semana de Arte y Diseño 2009 en la Unarte

El miércoles 15 de octubre tuve el gusto de participar en la Semana de Arte y Diseño de la Unarte Universidad del Arte, un instituto pequeño pero con un ambiente cálido y buen nivel de camaradería.

Semana de Arte y Diseño de la Unarte Universidad del Arte

La decoración de las paredes es muy particular, lo cual le brinda un carácter propio a este centro de estudios. Esos efectos ópticos me parecen geniales. ;)

Unarte

Salones para diseño de moda y arquitectura

Cafetería de la Unarte

Interior de la cafetería de la Unarte

Debido a otros compromisos, me perdí el resto de las charlas. Ya no tuve la oportunidad de escuchar a Tina Diez  y Ricardo Huitrón, dos colegas exaUDLAPs, pero estuve presente en la charla con Germán Montalvo, quien fue muy ameno en su plática y nos mostro una cantidad considerable de trabajo comentándonos para cada caso cuál había sido el proceso. Germán es bien conocido por su trabajo en cartel, aunque en esta charla nos mostró trabajo de editorial, cerámica/talavera e incluso muebles.

Las fotos las tomé con el celular. Una disculpa por la calidad de las fotos.

Germán Montalvo en la Unarte

Prototipo para la Guirnalda de Plata, presea del auditorio nacional.

Prototipo para la Guirnalda de Plata, presea del auditorio nacional.

Libro sobre Warhol

Libro sobre Warhol.

Plato de talavera.

Plato de talavera.

Portada de la revista Design Issues.

Portada de la revista Design Issues.

Agenda.

Agenda.

Ilustración de pájaros antropomorfos.

Ilustración de pájaros antropomorfos.

Broche con las mismas ilustraciones del libro.

Broche con las mismas ilustraciones del libro.

Germán hizo un par de comentarios que me parecieron muy acertados:

  • El diseño debe provenir de la realidad.
  • La gente desconoce que existe un proceso*.

* refiriéndose a proyectos de diseño.

Un servidor platicó sobre qué es arquitectura de información, ya que siendo futuros egresados en diseño estratégico, esta disciplina si al menos no se puede siempre implementar con todo el formalismo, sí es necesaria porque no sólo propone en términos del usuario, sino ejercita esa "manera de pensar" en forma estructural, muy conveniente cuando se tienen que solucionar problemas donde existe una gran cantidad de información o bien, una marcada carencia de esta.

Por mi parte quiero agradecer a Hilda Gabarrón (a.k.a. Higa) por la invitación y a los cuates estudiantes de la Uniarte por sus comentarios, retroalimentación y buena vibra.

Archivo visual de trabajos

Ahora que me han estado solicitando un archivo de los trabajos de difusión en el CIRIA UDLAP, consideré más práctico hacerlo en línea que guardar copias impresas ya que:

  1. La gente puede acceder a la muestra de trabajos y quizá opinar.
  2. Puedo descargar una copia para alguna presentación.

La muestra de imágenes está en la cuenta de flickr del CIRIA y cuya liga al set es:

http://www.flickr.com/photos/ciria_udlap/sets/72157622453148894/

También aproveché para poner en línea un par de presentaciones en SlideShare, por lo práctico de acceder a ellas si es necesario y para ir conformando un archivo de presentaciones.

Aunque es muy propio conformar portafolios en alojamientos propios, aprovecharse de las plataformas relacionadas con las redes sociales resulta no sólo cómodo, sino también bastante práctico. Sería importante reconsiderar ya dejar todo un portafolio bajo un CMS con incrustaciones de otros elementos alojados en las redes sociales. En fin…

El valor de una laptop

He visto en la televisión un nuevo comercial para laptops HP (motivo de este post, pero desafortunadamente no lo pude encontrar). El tagline del comercial "Cargar bytes no kilos" remarca la idea de tener una computadora poderosa pero pequeña y sobretodo liviana. Esto me deja pensando en cómo ha cambiado el valor simbólico de una laptop o notebook.

Quienes crecimos en los ochentas quizá vimos las caricaturas del Inspector Gadget. Recodarán que este inspector, con un montón de aparatejos bajo el sombrero, no daba una y gracias a su sobrina Penny, salía victorioso en los casos.

Yo era lo que ahora se puede declarar como "fan"* del libro de Penny. Este dispositivo que aparentaba ser un libro común y corriente, en realidad era una computadora portátil donde Penny obtenía toda la información para ayudar a su despistado tío. ¡Qué maravilloso tener algo con mucha información, que quepa en tu mochila y que tenga una pantalla! Tal vez suene tonto en la actualidad, pero en los 80s era muy raro saber o ver "en vivo" una laptop o notebook.

* Muy a la facebook

pennybook

La mejor sensación que generaba en mi el concepto de un aparato así era  justo la posibilidad de tocar y manipular un dispositivo computacional pero en forma de "cuaderno". Ver una lap me daba evidencia del "avance tecnológico". Aunque a principios de los 90s, al menos en México, las PC no eran tan baratas como hoy en día (que hasta en el supermercado las encuentras) y era muy tentador tener un lap y llevarla a todas partes, ¿No era genial eso?

old_laptop

Para todos los que nacieron pasados la mitad de los 80s, la laptop es algo común y financieramente más asequible. Tener una laptop de pasó de ser algo "especial" a algo que podría considerarse incluso como "necesario". ¿No han escuchado de niños que ya para entrar a secundaria "necesitan" una laptop? Claro, con "conexión a Internet". ¿Si no cómo harían sus tareas? ¡Obvio! (para sus padres y abuelos, lo anterior se cuestiona).

kids-and-laptops

¿Necesitamos realmente una laptop sofisticada? Los que estudian diseño y comunicación quizá sí, por la cantidad de datos almacenados y la cantidad de memoria RAM que consumen los programas de edición gráfica y de video. Claro, un estudiante regular, prácticamente sobrevive con una lap que tenga Office y una conexión decente para conectarse a Facebook y así ver las múltiples fotos de las últimas fiestas.

Entonces la laptop toma un nuevo sentido, se vuelve un símbolo de personalidad. La lap intenta reflejar "mis gustos", "lo que estudio", "que tan conocedor de la tecnología soy", etc. Ahora bien, igual que ha sucedido con el celular, lo importante es vender ese "reflejo de la personalidad": ¿Quién soy? ¿Qué hago? ¿Cómo soy?. Como ejemplo, los videos de HP que se apoyaron en personalidades de diferentes ámbitos.

Para mi resulta curioso analizar "qué se vende" y como el diseño industrial, los componentes del aparato y las posibilidades de los sistemas operativos se ven influenciados por lo que la gente "podría demostrar". Ya no se venden las laptops netamente como un dispositivo de procesamiento. Se vende: actitud, diversión, status, glamour, ligereza, moda, masculinidad, ritmo de vida, conciencia social y ecológica, etc.

¿Qué haría Penny con una Mac Book Air o con una Vaio Mobile Type P? Sin duda, ya hubieran atrapado al Dr. Garra desde hace mucho gracias a la banda ancha móvil y la wikipedia. ¡Ah! Y creo que también hubiera puesto muchas fotos tagueadas en el flickr  de todos los lugares que ha conocido al socorrer al Inspector Gadget.  :)