Curso de Diseño de Interacción (día 2)

Día muy interesante. El profe (Carlos Úbeda) es tocayo mío de carrera, no sé si eso habrá influido 🙂 Hemos visto los fundamentos del diseño de interacción, me ha recordado un poco al libro “designing for interaction”. Esta vez sí que tengo la presentación así que podré ser más exacto.

Diseño como resolución de problemas

Pusimos de manifiesto la gran cantidad de posibles definiciones que existen para el diseño. Los que estábamos en la sala tampoco nos pusimos muy de acuerdo. El ejemplo del exprimidor de braun y el de Alessi creo cierto debate.

¿Qué tienen en común todas las definiciones de diseño? Ya que no podemos definirlo a ver si podemos acotarlo. El resultado: Creatividad para resolver problemas. Volvemos al proceso de diseño comentado el primer día.

La resolución de problemas por razonamiento puede ser deductiva, inductiva o abductiva (faltan cosas, hay que suponer). Cuando se diseña hay que dejarse guiar por el instinto, las piezas del puzzle no están claras al principio, van surgiendo conforme buscamos la mejor solución.

La naturaleza del diseñador, que plantea soluciones desde el principio, permite obtener requerimientos lo más temprano posible.

Cuánto menos entran en juego las personas, menos de diseño tiene la resolución de un problema.

Diseñar interacciones

Carlos definió con sucesivos refinamientos a qué se dedica él como diseñador de interacción: “Me dedico al diseño de interacción, pero de cosas así, electrónicas y digitales, de informática, sobre todo para Internet básicamente centrado en web”.

Fases del diseño de interacción

Diseñar es:

  • aplicar estilo
  • definir funcionalidad
  • plantear soluciones

Cómo se diseña: “Se piensa en el resultado final. Se analiza pensando. Se abocetan flujos e interfaces. Se prototipan. Cuanto más definimos, más nos comprometmos. Se piensa en cuando está vacío, el estado inicial”.

Aquí vimos una imagen de un prototipo en papel de un reproductor de vídeo que me recordó muchísimo a algunas que hice nada más entrar a la empresa en que trabajo. Estábamos rediseñando también un reproductor de vídeo; prometía, aunque nunca llegamos a hacerlo (no completamente), pero desde luego sirvió para entender mejor la aplicación, vimos problemas en la versión existente y pudimos comparar alternativas fácilmente. Todo ventajas.

Carlos nos hizo notar que, cada vez más, todas las personas implicadas en un proyecto se preocupan por el diseño de interacción. El usuario es cada vez más importante. El diseño de interacción no es tanto una profesión como un rol.

Dentro de un proyecto tecnológico, el diseño de interacción estaría después de la ideación y antes del diseño visual (por motivos de coste y destrezas diferentes).

Principios del diseño de interacción (elementos + principios)

Comenzando por los elementos básicos (línea, color, plano, volumen, textura y tono) y siguiendo por los diferentes principios:

  • Estructurales. Nos sirven para agrupar y ordenar la información.
    • Son cierre, semejanza, proximidad, continuidad. Psicología de la Gestalt.
    • Se consiguen mediante jerarquía, priorización, agrupaciones y bloques.
  • De presentación. Nos ayudan a comprender el contenido.
    • Ley de Hick (7 +- 2 alternativas), principio de pareto, simplicidad y visibilidad.
    • Hay que buscar facilidad, claridad y definir las acciones principales.
  • De interacción. Nos ayudan a utilizar un producto.
    • Ley de Fitts, affordances, feedback y tratamiento de errores.

Hay un libro muy bueno para gente que no tiene bases de diseño llamado “The Non-Designer’s Design Book”. En él todo gira entorno a cuatro principios: proximidad, alineación, repetición y contraste.

Técnicas de diseño de interacción

Digamos que lo anterior era la ortografía. Hacen falta más cosas. Un proyecto tecnológico se puede centrar en uno o más de los siguientes elementos: usuario, negocio y tecnología. Para que funcione tiene que fijarse en los tres, sino mal.

Un rol que puede tomar el diseñador de interacción: arquitecto de información. Se encarga de:

  1. Identificar
  2. Agrupar, clasificar, reducir
  3. Estructurar
    1. Criterios: alfabético, cronológico, geográfico, por categorías, por tareas, por audiencia, metafórico, híbrido…
    2. Formas: jerarquía, base de datos, hipertextual e híbridas.

Por otro lado, se habló de la navegación: flujo, contexto y tipos de sistemas (piramidal, wizard, menú, pestañas) y también de formularios (estos dan bastante juego).

Como herramientas, se habló de diagramas de flujo y de wireframes. Carlos nos comentó la convención que él utiliza para dibujar los diagramas y los wireframes. Muy útil.

Práctica

Por la tarde tocaba parte práctica y continuamos con la web de renfe. Concretamente con el proceso de compra de billetes. El objetivo era rediseñar dicho proceso a partir de la evaluación heurística realizada el primer día. Trabajamos en grupos de tres y a mí me tocó con la gente de activa diseño. Son majismos 😉

En primer lugar, hicimos un diagrama de flujo que nos ayudó a entender el proceso y qué partes se podían eliminar/simplificar. Nos dimos cuenta de que había multitud de posibilidades a tener en cuenta, así que decidimos centrarnos en los casos más habituales. Carlos confirmó que era una forma correcta de trabajar, comenzar a alto nivel e ir añadiendo complejidad. A veces hay que cambiar cosas, pero es más fácil así.

A cada pantalla le íbamos anotando, junto a su círculo correspondiente, los problemas que detectábamos.

Después pasamos a proponer nuestras mejoras en el proceso. Para ello utilizamos paper prototyping en lugar de hacer wireframes directamente. Esto fue clave (gran idea Justo ;-). Nos permitió poder visualizar muchas opciones con un coste bajísimo. Parece mentira, pero hasta que no ves las cosas no te das cuenta de si pueden funcionar.

 

Y esto fue todo. Hasta el próximo día!

Un comentario en “Curso de Diseño de Interacción (día 2)”

¿Opiniones, comentarios, críticas? :)