Tag Archives: Diseño de Interacción

Diseño de Interacción Sustentable

Del 2 al 5 de octubre de 2013, fue celebrado el V Seminario Internacional de Investigación del Diseño Sustentable, al cual fui invitado para platicar sobre Diseño de Interacción y Sustentabilidad. Teniendo la fortuna de tener a uno de los expertos (y de los primeros en hablar del tema)  –Eli Blevis– en la Universidad de Indiana, bajo su guía elaboré una ponencia que presenta tres perspectivas sobre el Diseño de Interacción y Sustentabilidad, y así platicar cuáles son las implicaciones para México.

Introducción

Aunque es limitado describir toda la charla, la estructura fue más o menos en este sentido: primero platicamos sobre qué es diseño de interacción; por qué diseño de interacción no es diseño industrial, no es diseño gráfico, no es diseño de información, y al mismo tiempo involucra conocimientos de todos los anteriores. Platicamos de cómo el diseño de interacción está involucrado con un sistema y cómo este sistema influye en la experiencia del usuario. Como primer punto, pusimos en la mesa la pregunta sobre una posible conexión entre experiencia de usosustentabilidad.

Luego, para seguir platicando sobre diseño de interacción, comentamos el caso del cajero automático y cuestionamos cómo el perfil de usuario es importante. Enseguida, cuestionamos cómo la tecnología, si no se piensa en forma inclusiva, puede restringir el acceso a servicios para ciertos perfiles de usuarios, que dentro de una perspectiva de sustentabilidad social, deberían ser considerados como usuarios potenciales. En este tenor, platicamos como el reconocer y entender los modelos mentales  de los usuarios es relevante para ser incluyente.

Como la plática era introductoria sobre el diseño de interacción, señalamos el valor de saber hacer tanto síntesis como análisis dentro de la disciplina. Además, pusimos en la mesa la pregunta de ¿Cuáles son las competencias de diseño que un diseñador de interacción enfocado en sustentabilidad debería tener? Estos conjuntos de competencias están  detalladamente descritos en la teoría de diseño generada por Erik Stolterman, con quien tengo la fortuna de trabajar en la Universidad de Indiana.

Perspectivas de Interacción Humano-Computadora y Sustentabilidad

Luego, platicamos sobre tres perspectivas de Interacción Humano-Computadora (HCI) y sustentabilidad.  En particular, nos referimos a estos tres artículos:

Blevis (2007). Sustainable Interaction Design: Invention & Disposal, Renewal & Reuse.

Dourish (2010). HCI and Environmental Sustainability: The Politics of Design and the Design of Politics.

Tomlinson et al. (2013). Collapse Informatics and Practice: Theory, Method, and Design.

Diseño de interacción sustentable: invención y desecho, renovación y reuso

En el primer trabajo, Eli Blevis (2007) creó una rúbrica con el cual podemos reflexionar sobre sustentabilidad cuando diseñamos, tomando en cuenta el material empleado en nuestros diseños, sin importar si es físico o digital. En este sentido, comentamos brevemente el caso del iPhone para el caso de material físico, y platicamos sobre imágenes y tweets para el caso digital. En particular aquí quiero enfatizar que me llama mucho la atención pensar en sustentabilidad y material digital. Creo que podría haber una oportunidad de investigación en ese sentido: en el mundo digital también generamos, desechamos, usamos, reusamos heredamos; sería interesante determinar cómo estas actividades pueden informar el diseño de tecnología.

slides-img00.062

HCI y sustentabilidad ambiental: las políticas del diseño y el diseño de políticas

Luego, el trabajo de Paul Dourish (2010) nos permitió platicar sobre políticas y sustentabilidad. En particular, de cómo grupos aparentemente heterogéneos pueden alinearse, bajo la perspectiva de un esencialismo estratégico, y así lograr un impacto a quienes generan políticas relacionadas con la sustentabilidad. Dourish, argumenta que mucho del trabajo (a nivel investigación y diseño) relacionado con sustentabilidad implica acciones individuales y que esto resulta más complicado para lograr un impacto de arriba hacia abajo –donde la generación de políticas juega un papel primordial.

slides-img001.068

En la charla, señalamos que el trabajo de Dourish (2010) nos da la oportunidad de reflexionar sobre el contexto mexicano. Tomando el ejemplo del cajero automático y de cuestionarnos la equidad en términos de alfabetización informática e informacional, extrapolamos la idea con diferentes servicios que podrían beneficiar a la sociedad para lograr dicha alineación. La razón por la que enfatizamos en esto es porque consideramos que sustentabilidad incluye también sustentabilidad social: Políticas e instituciones que tienen un efecto de integrar diversos grupos y prácticas culturales de modo justo e igualitario (UNESCO). 

* De manera muy personal veo la sustentabilidad en México como un asunto descuidado. El trabajo de Dourish, y el trabajo de uno de mis colegas en la Universidad de Indiana, me hacen reconocer el valor del diseño de interacción y la Tecnologías de Información para lograr la alineación mencionada por Dourish y la relevancia políticas que beneficien a la sociedad. Es sabido que la estabilidad de México está en un estado crítico, tanto a nivel económico como social. En este sentido, México quisiera remarcar la falta de una perspectiva sustentable en la sociedad mexicana. Al menos, en la mayoría de nosotros. 

Informática de Colapso y la Práctica: Teoría, Método y Diseño

Del trabajo de Tomlinson y colegas, entre ellos Eli Blevis y Yue Pan, platicamos sobre el colapso y la idea de cómo hay personas que se preparan para éste. Comentamos que de acuerdo con estos autores, debemos de fijarnos en cómo gente hace cambios sobre cómo hacer ciertas cosas y que a esas personas debemos prestar atención si pensamos en términos de sustentabilidad. En este sentido, platicamos sobre los ejemplos que Tomlinson y colegas mencionan en su investigación, y el papel de los tecnofuturistas para hacer esta conexión entre Interacción Humano-Computadora y una sociedad que piensa en el (posible o actual) colapso –relacionado con la sustentabilidad de una sociedad.

slide003.077

Conclusiones

A partir de lo que platicamos del trabajo de expertos, nos hicimos la pregunta de qué significa esto para México: ¿qué implica pensar en términos de sustentabilidad social, esencialismo estratégico, informática de colapso, y enfocarnos en prácticas reflexivas? Comentamos entonces que este tipo de investigaciones nos resulta útiles porque nos da un marco de trabajo para dirigir posibles acciones de diseño de interacción en México.

img004.080

Conocer sobre los tecnofuturistas y entender que piensa el resto del mundo sobre el colapso, podemos mirar sobre cómo funcionan las cosas en México y quiénes están realizando un cambio en sus prácticas del día a díacómo y cuál es su impacto. A esto se le suma la necesidad de una docencia del diseño de interacción en México que reconozca la relevancia de la sustentabilidad en la sociedad mexicana; incluyendo sus implicaciones sociales y económicas. ¿Cuáles son las habilidades, mentalidad, herramientas, y conocimiento que un diseñador de interacción sustentable debe incorporar durante su formación?

img005.081

Por otra parte, debemos prestar atención a cómo grupos se alinean y logran impacto en sus países, para después entender y posiblemente apoyar los casos mexicano; entender cómo la investigación y práctica del diseño puede apoyar causas que beneficien y promuevan la equidad dentro de la sociedad mexicana.

Estas fueron las conclusiones de la charla:

  • Existe un área de oportunidad en México para el estudio de la sustentabilidad y su relación con el diseño de interacción, diseño de experiencia o interacción-humano computadora.
  • La formación de un diseñador de interacción involucra diversas áreas de conocimiento. La capacidad de tener tanto un pensamiento de diseño como un pensamiento sistemático resultan relevantes en el diseñador de interacción.
  • Para nuestro país debemos determinar cuáles son las competencias diseñísticas (mentalidad, conocimientos, habilidades y herramientas) fundamentales para formar diseñadores de interacción sensibles a los procesos creativos tecnofuturistas y prácticas reflexivas, comprometidos con la alineación de la sociedad mexicana, y capaces de proveer soluciones interactivas que promuevan o apoyen la sustentabilidad social.

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

De la Educación en Diseño de Interacción

Hace un par de post ya, escribí algunos pensamientos sobre el diseño de interacción; sobre cuál era mi percepción sobre la disciplina en aquel entonces. Creo que este hecho no ha cambiado mucho en el sentido que no se reconoce el valor del diseño como disciplina (su madurez, aportación en el conocimiento colectivo y la posibilidad de conseguir una buena capitalización del mismo); aún más, no se reconoce como el diseño per se puede tomarse como un eje disciplinar natural en algunas formaciones académicas (me refiero a títulos en ingeniería y ciencias, no sólo a títulos en las "disciplinas proyectuales").

Lo anterior podemos tomarlo como una metáfora de un cono, recorriéndolo de dentro hacia afuera, donde las lineas que van del interior a una de las orillas –donde están "paradas" las disciplinas y su conocimiento construido– muestran el "camino del diseño" (algo así como un design-driven approach). Aunque también podemos tomar una visión contraria: en forma de embudo. Esto es, caminar de fuera hacia dentro, donde lo que queda hasta abajo –y saldría por el embudo– es el diseño derivado de una formación académica especializada.

Con respecto a este último enfoque, considero que esta visión de embudo aplica muy bien para la formación a nivel licenciatura de un Diseñador de Interacción. Don Norman en su artículo ¿Por qué la educación en diseño de cambiar? comenta que:

"Las nuevas áreas (refiriéndose a la formación en diseño) son más como ciencias sociales y del comportamiento aplicadas, y que requieren un entendimiento de la cognición y emoción humana, sistemas sensoriales y de motricidad, y el suficiente conocimiento del método científico, estadística y diseño experimental en la medida que los diseñadores puedan validar, legitimar las pruebas de sus ideas antes de liberarlas…"

Justo este artículo me recordó un correo electrónico que había compartido con un par de colegas en junio de 2010 sobre ¿qué materias podrían ser útiles en un plan de estudios de licenciatura para Diseño de Interacción? – bajo esta visión de embudo– y que quisiera compartir ahora con ustedes (al final del post).De antemano, ofrezco una disculpa por algún error de redacción u ortografía; no quise cambiar nada del correo para no tergiversarlo. Dado el artículo de Norman, considero que faltó de la lista materias como las siguientes: Metodología de la Investigación, Probabilidad, Inferencia Estadística, Diseño de Experimentos, Modelos Probabilísticos, Psicología Cognitiva, Psicología y Emociones, entre otras.

De cualquier forma, el asunto fuerte en este caso es la formación del diseñador de interacción. Es decir, podríamos preguntarnos: ¿cómo en las escuelas se está pensando formar adecuadamente a un diseñador de interacción?, ¿cómo formar a un estudiante con las herramientas para solucionar problemas de interacción en diferentes contextos de uso y con una ejecución adecuada, limpia, profesional?, ¿cómo lograr la integración de este tipo de diseñadores en equipos de trabajo multidisciplinarios? y por último, ¿cómo esa formación derivará en los futuros profesionales y teóricos que concreticen los pilares del conocimiento en Diseño de Interacción?

----- Materias descritas en el correo original – O.S.T. Junio 2010 -------

Fundamentos ==========================================
* Algoritmia.
Teoría: programación estructurada, condicionales, ciclos, recursividad, etc.
Práctica: Diseñar y programar ejercicios relacionados.
Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación estructurada.
* Dibujo
Teoría: Línea, forma, proporción, etc.
Práctica: Representaciones del mundo real.
Objetivo: Adquirir un estándar de calidad en representación visual.
* Introducción al Diseño de Interacción
Teoría: Qué es Diseño de Interacción, Interfaz, Tarea, Usuario, Contexto de Uso, Relación con otras disciplinas, objetivos de un producto de diseño.
Práctica: Elaboración de maquetas físicas, carteles académicos, intervención en espacio (todo análogo, nada electrónico).
Objetivo: Conceptualizar soluciones para resolver problemas del entorno.
* Taller de Diseño Industrial.
Teoría: Volumen, materiales, forma, ergonomía, sustentabilidad, etc.
Práctica: Diseñar y realizar prototipos físicos de herramientas y aparatos como controles de videojuegos, palancas de carro, páneles de control. Evaluación de las propuestas con usuarios.
Objetivo: Entender sobre usuarios y sus necesidades de uso.
* Creatividad
Teoría: Introducción al proceso creativo.
Práctica: Maquetar ideas creativas de problemas de diseño espurios.
Objetivo: Que el alumno tenga inteligencia emocional, un pensamiento creativo y romper paradigmas.
* Investigación Cuantitativa.
Teoría: Metodología de la investigación, estadística.
Práctica: Armar un proyecto de investigación sencillo con recopilación y análisis de datos cuatitativos.
Objetivo: Aprender y aplicar metodología de investigación en la elaboración de proyectos de diseño.
* Investigación Cualitativa.
Teoría: Métodos y procesos de investigación en las ciencias sociales.
Práctica: Trabajo de campo, elaboración de etnografías, observación, entrevistas, etc.
Objetivo: Aprender a cómo levantar requerimientos y necesidades de los usuarios a partir de una investigación cualitativa.
* Diseño visual.
Teoría: Forma, color, composición.
Práctica: Elaboración de mensajes visuales.
Objetivo: Adquirir un pensamiento visual y saber comunicarlo.
* Tipografía y Texto.
Teoría: Fuentes, famila tipográfica, kerning, tracking, composición de textos.
Objetivo: Saber componer un texto adecuadamente para medios impresos.
* Diseño para pantalla.
Teoría: Tipografía para pantalla, color para pantalla, composición en pantalla.
Objetivo: Realizar composiciones de texto e imágenes del estilo de interfaces gráficas de usuario y para lectura en pantalla.
Formación ==========================================
* Programación Orientada a Objetos.
Teoría: clase, objeto, métodos, funciones, etc.
Práctica: Diseñar y programar ejercicios relacionados
Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación OO.
* Diseño de Información.
Teoría: Comunicación, mensaje, introducción a la visualización, introducción a la usabildiad, esquemática, legilidad de mensajes visuales, etc.
Práctica: Diseñar mensajes que muestren la relación enter las variables de un fenómeno, códigos sonoros, diseño instruccional.
Objetivo: Saber cómo diseñar visual, física y auditivamente con fines utilitarios.
* Arquitectura de Información
Teoría: Qué es arquitectura, ejemplos de arquitectura en diseño impreso, arquitectura para medios digitales, sistemas de navegación, sistemas de búsqueda, sistemas de etiquetado, análisis de contenido, tesauros, introducción al modelo entidad-relación y XML para bases de datos, etc.
Práctica: Elaboración de Personas, Card-Sorting, Free listing, Mapas y modelos mentales, Elaboración de Wireframes, Elaboración de escenarios.
Objetivo: Estructurar el pensamiento de una aplicación más allá de pensar visualmente.
* Diseño de Interacción Humano Computadora
Teoría: Qué es HCI, sketching e ideación (Bill Buxton), paradigmas de interacción, estilos de interacción e interfaces (gráficas, tangible, móvil, robótica, táctil, agentes inteligentes, etc), ergonomía de interfaces.
Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.
Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.
* Diseño de Interacción Humano Computadora II
Teoría: Continuar con los temas de estilos de interacción en intefaces (visualización de datos, interfaces hápticas, etc).
Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.
Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.
* Evaluación de Interfaces
Teoría: Pruebas de usabilidad, Ingeniería Semiótica, Grupos Focales.
Práctica: Aplicar una prueba de usabilidad, protocolos y métodos para aplicarse en pruebas de usabilidad, pruebas de comunicabilidad (de la Ingeniería Semiótica), realizar un focus group.
Objetivo: Saber llevar a cabo una evaluación, cómo podría ser documentada, cómo recopilar datos y analizarlos, hacer reporte para propuestas de mejoras.
Web ==========================================
* Diseño web
Teoría: Aprender conceptos de Internet, entender qué es web semántica, qué es separar contenido de presentación, usabilidad para web, prototipeo en papel de sitios web, arquitectura de inforamción para web, etc.
Práctica: XHTML y CSS.
Objetivo: Crear un sitio web estático con buena retícula y arquitectura de información.
* Aplicaciones Web I
Teoría: Interacción en web, diseño de formas/formularios.
Práctica: JavaScript, AJAX y librerías para web interactiva (JQuery, Mootools, etc).
Objetivo: Crear sitios interactivos y con validaciones en formularios, menúes, etc.
* Aplicaciones Web II
Teoría: Conceptos de Base de Datos, Scripting en servidores, servicos web, etc.
Práctica: PHP, MySQL, desarrollo en .net.
Objetivo: Crear un sitio web dinámico.
* Aplicaciones Móviles
Teoría: Diseño de interacción para móviles.
Práctica: XHTML, CSS, JavaScript, AJAX, JQuery, PHP, MySQL, e introdución a plataformas de desarrollo para móviles como Java ME y Objective-C.
Objetivo: Realizar una aplicación web para móviles de forma que se den cuenta que no es lo mismo para pantalla.
Videojuegos ==========================================
* Diseño Videojuegos para la Red
Teoría: Diseño de videojuegos, aplicación de los videojuegos en entretenimiento, capacitación, investigación y ciencia, industria.
Práctica: Aplicar animación, diseño de interacción humano computadora y programación orientada a objetos en el proyecto.
Objetivo: Elaborar un juego de video basado en un browser.
* Diseño de Videojuegos para Consola
Teoría: Lenguaje de programación para una consola.
Práctica: Conocer y aprender lo básico de un lenguaje nativo de una consola.
Objetivo: Lograr ejecutar (quizá mendiante un emulador) lo que se vería en un juego de consola de cierta marca.
* Diseño de Videojuegos para Móviles
Teoría: Repaso de un lenguaje de programación nativo para un móvil (Java ME u Objective-C).
Práctica: Programar y diseñar para una plataforma móvil.
Objetivo:Poner en práctica lo aprendido de programación y elaborar un prototipo de juego para móvil no basado en browser.
Interacción física ==========================================
* Elaboración de prototipos electrónicos.
Teoría: Introducción al cómputo físico.
Práctica: Elaborar prototipos físicos (con Arduino o alguna plataforma similar).
Objetivo: Fomentar el pensamiento creativo a través de la elaboración de prototipos físicos interactivos.
* Interacción física.
Teoría: Complentar conceptos de cómputo físico e interacción tangible.
Práctica:  Elaborar prototipos físicos y aplicar diseño industrial.
Objetivo: Elaborar un prototipo de cómputo que resuelva un problema del mundo real.

Fundamentos ==========================================

* Algoritmia

Teoría: programación estructurada, condicionales, ciclos, recursividad, etc.

Práctica: Diseñar y programar ejercicios relacionados.

Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación estructurada.

________________________________________________

* Dibujo

Teoría: Línea, forma, proporción, etc.

Práctica: Representaciones del mundo real.

Objetivo: Adquirir un estándar de calidad en representación visual.

________________________________________________

* Introducción al Diseño de Interacción

Teoría: Qué es Diseño de Interacción, Interfaz, Tarea, Usuario, Contexto de Uso, Relación con otras disciplinas, objetivos de un producto de diseño.

Práctica: Elaboración de maquetas físicas, carteles académicos, intervención en espacio (todo análogo, nada electrónico).

Objetivo: Conceptualizar soluciones para resolver problemas del entorno.

________________________________________________

* Taller de Diseño Industrial

Teoría: Volumen, materiales, forma, ergonomía, sustentabilidad, etc.

Práctica: Diseñar y realizar prototipos físicos de herramientas y aparatos como controles de videojuegos, palancas de carro, páneles de control. Evaluación de las propuestas con usuarios.

Objetivo: Entender sobre usuarios y sus necesidades de uso.

________________________________________________

* Creatividad

Teoría: Introducción al proceso creativo.

Práctica: Maquetar ideas creativas de problemas de diseño espurios.

Objetivo: Que el alumno tenga inteligencia emocional, un pensamiento creativo y romper paradigmas.

________________________________________________

* Investigación Cuantitativa

Teoría: Metodología de la investigación, estadística.

Práctica: Armar un proyecto de investigación sencillo con recopilación y análisis de datos cuatitativos.

Objetivo: Aprender y aplicar metodología de investigación en la elaboración de proyectos de diseño.

________________________________________________

* Investigación Cualitativa.

Teoría: Métodos y procesos de investigación en las ciencias sociales.

Práctica: Trabajo de campo, elaboración de etnografías, observación, entrevistas, etc.

Objetivo: Aprender a cómo levantar requerimientos y necesidades de los usuarios a partir de una investigación cualitativa.

________________________________________________

* Diseño visual

Teoría: Forma, color, composición.

Práctica: Elaboración de mensajes visuales.

Objetivo: Adquirir un pensamiento visual y saber comunicarlo.

________________________________________________

* Tipografía y Texto

Teoría: Fuentes, famila tipográfica, kerning, tracking, composición de textos.

Objetivo: Saber componer un texto adecuadamente para medios impresos.

________________________________________________

* Diseño para pantalla.

Teoría: Tipografía para pantalla, color para pantalla, composición en pantalla.

Objetivo: Realizar composiciones de texto e imágenes del estilo de interfaces gráficas de usuario y para lectura en pantalla.

Formación ==========================================

* Programación Orientada a Objetos

Teoría: clase, objeto, métodos, funciones, etc.

Práctica: Diseñar y programar ejercicios relacionados

Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación OO.

________________________________________________

* Diseño de Información

Teoría: Comunicación, mensaje, introducción a la visualización, introducción a la usabildiad, esquemática, legilidad de mensajes visuales, etc.

Práctica: Diseñar mensajes que muestren la relación enter las variables de un fenómeno, códigos sonoros, diseño instruccional.

Objetivo: Saber cómo diseñar visual, física y auditivamente con fines utilitarios.

________________________________________________

* Arquitectura de Información

Teoría: Qué es arquitectura, ejemplos de arquitectura en diseño impreso, arquitectura para medios digitales, sistemas de navegación, sistemas de búsqueda, sistemas de etiquetado, análisis de contenido, tesauros, introducción al modelo entidad-relación y XML para bases de datos, etc.

Práctica: Elaboración de Personas, Card-Sorting, Free listing, Mapas y modelos mentales, Elaboración de Wireframes, Elaboración de escenarios.

Objetivo: Estructurar el pensamiento de una aplicación más allá de pensar visualmente.

________________________________________________

* Diseño de Interacción Humano Computadora

Teoría: Qué es HCI, sketching e ideación (Bill Buxton), paradigmas de interacción, estilos de interacción e interfaces (gráficas, tangible, móvil, robótica, táctil, agentes inteligentes, etc), ergonomía de interfaces.

Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.

Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.

________________________________________________

* Diseño de Interacción Humano Computadora II

Teoría: Continuar con los temas de estilos de interacción en intefaces (visualización de datos, interfaces hápticas, etc).

Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.

Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.

________________________________________________

* Evaluación de Interfaces

Teoría: Pruebas de usabilidad, Ingeniería Semiótica, Grupos Focales.

Práctica: Aplicar una prueba de usabilidad, protocolos y métodos para aplicarse en pruebas de usabilidad, pruebas de comunicabilidad (de la Ingeniería Semiótica), realizar un focus group.

Objetivo: Saber llevar a cabo una evaluación, cómo podría ser documentada, cómo recopilar datos y analizarlos, hacer reporte para propuestas de mejoras.

Web ==========================================

* Diseño web

Teoría: Aprender conceptos de Internet, entender qué es web semántica, qué es separar contenido de presentación, usabilidad para web, prototipeo en papel de sitios web, arquitectura de inforamción para web, etc.

Práctica: XHTML y CSS.

Objetivo: Crear un sitio web estático con buena retícula y arquitectura de información.

________________________________________________

* Aplicaciones Web I

Teoría: Interacción en web, diseño de formas/formularios.

Práctica: JavaScript, AJAX y librerías para web interactiva (JQuery, Mootools, etc).

Objetivo: Crear sitios interactivos y con validaciones en formularios, menúes, etc.

________________________________________________

* Aplicaciones Web II

Teoría: Conceptos de Base de Datos, Scripting en servidores, servicos web, etc.

Práctica: PHP, MySQL, desarrollo en .net.

Objetivo: Crear un sitio web dinámico.

________________________________________________

* Aplicaciones Móviles

Teoría: Diseño de interacción para móviles.

Práctica: XHTML, CSS, JavaScript, AJAX, JQuery, PHP, MySQL, e introdución a plataformas de desarrollo para móviles como Java ME y Objective-C.

Objetivo: Realizar una aplicación web para móviles de forma que se den cuenta que no es lo mismo para pantalla.

Videojuegos ==========================================

* Diseño Videojuegos para la Red

Teoría: Diseño de videojuegos, aplicación de los videojuegos en entretenimiento, capacitación, investigación y ciencia, industria.

Práctica: Aplicar animación, diseño de interacción humano computadora y programación orientada a objetos en el proyecto.

Objetivo: Elaborar un juego de video basado en un browser.

________________________________________________

* Diseño de Videojuegos para Consola

Teoría: Lenguaje de programación para una consola.

Práctica: Conocer y aprender lo básico de un lenguaje nativo de una consola.

Objetivo: Lograr ejecutar (quizá mendiante un emulador) lo que se vería en un juego de consola de cierta marca.

________________________________________________

* Diseño de Videojuegos para Móviles

Teoría: Repaso de un lenguaje de programación nativo para un móvil (Java ME u Objective-C).

Práctica: Programar y diseñar para una plataforma móvil.

Objetivo:Poner en práctica lo aprendido de programación y elaborar un prototipo de juego para móvil no basado en browser.

Interacción física ==========================================

* Elaboración de prototipos electrónicos

Teoría: Introducción al cómputo físico.

Práctica: Elaborar prototipos físicos (con Arduino o alguna plataforma similar).

Objetivo: Fomentar el pensamiento creativo a través de la elaboración de prototipos físicos interactivos.

________________________________________________

* Interacción física

Teoría: Complentar conceptos de cómputo físico e interacción tangible.

Práctica:  Elaborar prototipos físicos y aplicar diseño industrial.

Objetivo: Elaborar un prototipo de cómputo que resuelva un problema del mundo real.


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

Anécdotas sobre la experiencia de uso, usabilidad y el modelo mental del usuario

Un día mientras estaba en un aula de cómputo se acerco una profesora, alrededor de los 50, que me pidió permiso para usar la máquina que estaba junto a mi. Lo que deseaba era subir sus tareas a la plataforma educativa utilizada en un curso dentro de un diplomado de actualización tecnológica para docentes.

La profesora tenía que subir la tarea correspondiente para cada sección del curso. Me solicitó ayuda, accedí con gusto y juntos conectamos el USB, buscamos la liga para subir la tarea dentro de un mar de opciones para la primera sección (del curso), buscamos la carpeta con los archivos dentro de la USB y subimos el archivo; sin embargo, para el resto de las veces ella no pudo realizar la tarea por si sola, tuve que seguir asistiéndola. ¿Por qué?

En ese momento recordé que esto de la usabilidad parece algo tan tonto a veces. Tonto, hasta que uno se da cuenta de que los usuarios sí tienen problemas al interactuar con el producto. La profesora, al igual que sucede con personas cuya alfabetización informática es deficiente, caracteriza la interacción como una secuencia lineal cuasi-estricta que deben de seguir para completar la tarea. Por lo tanto, al no "aprender un paso", se pierden completamente.

Tengo la conjetura de que  alguien con mayor alfabetización tecnológica, sobretodo cuando se va volviendo experto, comienza a relacionar ideas. Por lo tanto, no intenta realmente aprenderse la secuencia de pasos para realizar la tarea, sino que estructura todo un modelo mental que involucra los conceptos (lo que se entiende por archivo, arrastrar, abrir, memoria, movimiento, etc.) así como los diferentes "caminos" con los que puede realizar la misma tarea, lo cual implicar el entendimiento de cómo moverse "en ese espacio" (en este ejemplo la plataforma educativa).

Algo evidente en esta experiencia fue notar que la usabilidad está ligada a la arquitectura de información. Habían muchas opciones y prácticamente la profesora sólo requería aquellas que le mostraran a) en que sección está subiendo la tarea y b) cómo subir la tarea. Entonces, lo complicado está en hacer una "reducción de puertas" por las que tiene pasar el usuario mientras va "navegando" en este espacio y más aún, que dichas puertas esten bien "marcadas". Sí note a la maestra hacer recorrido visual para las opciones que dispone la plataforma, pero también notaba una expresión de que no entendía bien a lo que se referían tantas palabras.

En días pasados, me llamaron para asistir a una investigadora que estaba transcribiendo, según vi, unas notas periodísticas sobre el tema de braceros y también estaba registrando algunos detalles importantes sobre dichas notas. Cuando llegué estaba algo exaltada porque no entendía porque el Word le ponía el párrafo que estaba tecleando en ese momento en rojo cuando ella lo único que quería era ponerlo en subrayado o negritas (no recuerdo bien). ¿Qué es lo que estaba pasando?

La verdad no tenía idea. Pero algo que se me ocurrió fue dar clic derecho para obtener opciones sobre ese párrafo. Entonces noté algo parecido a "aceptar inserción". Di clic y el texto cambió a negro. Supongo que el párrafo en rojo era para dar evidencia en el manejo de versiones entre lo que ya estaba guardado y lo nuevo.

Desde mi perspectiva, ambas mujeres me figuraban que usaban con sus respectivas herramientas en forma "mecánica". Por ejemplo, la primera profesora solo quería saber dónde estaba el archivo y en qué lugar debería de colocarlo, literalmente. Como cuando mueves un objeto dentro de un cuarto. En el caso de la investigadora, me imaginé que era una persona que usaba la máquina de escribir y luego con el desarrollo tecnológico tuvo que usar Word. Obviamente en la máquina no podías hacer inserciones nuevas sobre lo ya escrito.

Un punto que me llamó la atención con la investigadora, supongo que parte de su personalidad, es comentar cosas como "no se qué le apreté", "yo estaba trabajando y no se que pasó". De alguna manera lo relacioné con el caso de la primera profesora, donde el "no entender" es literalmente eso: no entender con qué estás interactuando.

Por ejemplo, dado el caso de la investigadora, mi conjetura es que el problema es la falta de correspondencia uno a uno entre el modelo de lo ya conocido (la máquina de escribir) y el modelo mental que involucra la nueva herramienta (la laptop más el Word). Obviamente el último es mucho más grande que el primero, y que al parecer está contenido (la idea de la máquina de escribir, teclear en una hoja sólo que ahora en la laptop).

Extender el modelo mental sobre el objeto antiguo para derivar en uno nuevo más complejo, puede ser complicado. La herramienta debe tener un diseño que brinde una buena curva de aprendizaje durante el proceso. Algo me dice que cuando no logramos bien esa curva, claro que podemos utilizar la nueva herramienta, pero nos quedamos utilizándola en esta forma "mecánica".

Después, con la misma usuaria, surgió otra emergencia: después de alcanzar alrededor de 200 hojas en su documento, había perdido toda la información, quedando solamente una hoja en todo el documento con lo último que tecleó. ¿Qué fue lo ocurrió?

Realmente es un misterio. Yo medio hice un par de cosas, incluyendo el "deshacer" para ver si aparecía su texto original y checar sí habían copias, pero nada. Luego solicitamos la ayuda de un ingeniero en sistemas, el cual trató de conducirla a través de preguntas que entendí que eran para dar evidencia del "error de usuario". Pero nada. Platicando con él, llegamos a la conclusión de que al no encontrarse corrupto el archivo, quizá no se fijo de que estaba tecleando sobre un documento nuevo y por no entender la diferencia entre un "save" o "save as", o bien quizá por el estrés, no se dio cuenta y sobre-escribió su archivo. :(

Una última historia. Un día, cierto diseñador de información, con formación también en cómputo, y que además le gusta platicar y discutir sobre el diseño de interacción, estaba mandando un mail en el móvil de Apple. Por error, hizo "tap" en enviar el mail y entonces no supo como cancelar la acción. Aunque se regresó al menú inicial para ver si aparecía el "outbox", no consiguió nada. Después de otro par de "taps" para checar qué estaba pasando, el correo salió con la mitad de texto. Tuvo entonces que mandar otro correo con el texto faltante.

Sí, a mi me pasó. ;) De hecho, en el ciente de MacOS cuando no quería descargar los correos o bloquear la salida de uno, me iba rápidamente a checar la ventana de actividades y le daba "alto" a ese proceso. En el teléfono no pude localizar la "tachita" para detener el envío, y tampoco me "salió" el outbox para entrar ahí y de nuevo buscar una "tachita" para cancelar. Quise hacer un mapeo entre el modelo que tiene el cliente de correo para computadoras de escritorio con el cliente para móviles. Y no dudo que exista una forma de "parar" el correo, sólo que no "entendí" cómo descubrir esa forma.

En resumen, podríamos decir que las interfaces pueden tornarse realmente complejas pero que esa complejidad no va siempre a la par con la curva de aprendizaje de usuario para utilizar la nueva herramienta, no tanto por su falta de capacidad (los usuarios no son estúpidos) sino por falta de alfabetización informática y/o tecnológica quizá, o bien, porque simplemente no se esfuerzan (porque no les interesa, su tarea base siempre está muy clara y es lo más sencilla, no importa cuán sofisticada sea la herramienta con sus "extras") en sacarle más "jugo" a las mejoras, en parte porque todos queremos una vida sencilla dentro de lo complicada que nos la hacemos. Y claro, el entendimiento, semiosis o conformación de un modelo mental del espacio de interacción, o como quieran llamarlo, entre lo que trae en la cabeza el diseñador para ofrecer una solución a lo que tiene un usuario, definitivamente no es lo mismo. Bien dicen: cada cabeza es un mundo.

Todo un reto, ¿no creen? ¿Hasta dónde eres como diseñador de interacción una guía montessori o un dictator con tus propuestas?

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