Workshop de Diseño iterativo de Interfaces de Usuario: métodos y técnicas prácticas

Diseño iterativo y prototipado rápido en papel.

Por Eduardo Mercovich (edumerco@gaiasur.com.ar)

La última versión de este documento se puede encontrar en:
http://planeta.gaiasur.com.ar/infoteca/diseno-iterativo-y-prototipado-rapido.html.

1. Introducción a este Workshop

1.1. Acerca de este documento

Este documento contiene las notas del Workshop sobre Diseño de Interfaces de Usuario: métodos y técnicas prácticas, por Eduardo Mercovich, dado en SIGGRAPH ’99 en Buenos Aires, Argentina.

Este workshop es el segundo módulo de tres, que forman juntos una introducción y práctica al tema de Interfaces, Diseño y Usabilidad.

Estas notas no pretenden ser una referencia profunda ni una bibliografía extensa, sino evitar la toma de apuntes durante la ponencia, para que los asistentes puedan brindar su atención a los contenidos y a su discusión.

1.2. Acerca de este Workshop

Para ver los objetivos, audiencia y resumen del contenido de este workshop, vea por favor la presentación de los 3 módulos donde está esta información presentada en contexto.

1.3. Tabla de contenidos

  1. Introducción a este Workshop
    1. Acerca de este documento
    2. Acerca de este WorkShop
    3. Tabla de contenidos
  2. Contenidos del Workshop
    1. Revisión de conceptos de la ponencia
    2. Práctica
    3. Síntesis
  3. Apéndice: Cuestionario post-workshop

2. Contenidos del Workshop

2.3. Revisión de conceptos de la ponencia

Haremos un repaso rápido de los 3 conceptos básicos (analizados en la Ponencia "Diseño de Interfaces y Usabilidad: cómo hacer productos más útiles, eficientes y seductores") que aplicaremos a lo largo de este workshop:

Interfaz Llamamos interfaz a aquello que está entre nosotros y el sistema o herramienta. La interfaz es lo que nos permite conocer su estado, interactuar o accionar sobre el sistema y ver los resultados de nuestras acciones.
Usabilidad Definimos Usabilidad de un sistema o herramienta como una medida de su utilidad, facilidad de uso, facilidad de aprendizaje y apreciación para una tarea, un usuario y un entorno dado.
Diseño iterativo Llamamos diseño iterativo al ciclo de Diseño, Implementación, Medición y Análisis.
El output de cada etapa es el input de la que sigue, incluso el de la última. Los resultados de la etapa de análisis se toman para rediseñar la interfaz, implementarla nuevamente, medir, y así sucesivamente.

2.2. Práctica

Usuario, tarea y entorno

Pertenecemos al nuevo consorcio de trenes de Buenos Aires. La empresa ha detectado que en horas pico, en ciertas estaciones, no es suficiente con la atención personalizada (de humanos) en las ventanillas para la venta de boletos. Por lo tanto, se instalarán máquinas para el autoservicio de compra de boletos.

Nosotros somos los encargados de diseñar la interfaz de esta máquina.

El usuario es cualquier persona que usa el tren y asumimos que sabe leer. La tarea es obtener un boleto del valor correspondiente para la estación a la que el usuario viaja. Veremos más adelante los diferentes escenarios.

Para armar la máquina tenemos una pantalla grande, de aproximadamente 60 cm de ancho x 90 de alto y sensible al tacto, una impresora de boletos, una entrada para billetes y monedas, una salida para el vuelto y un lector de tarjetas.

El valor del boleto depende de la estación de destino, los transbordos, la cantidad de boletos y si esos boletos son ida o ida y vuelta.

Además, ciertos usuarios (escolares y jubilados), tienen un descuento especial. La empresa les da una tarjeta magnética que valida este hecho y que mediante un ID unívoco no permite ser utilizada dos veces en la misma transacción.

El usuario debe saber cuánto debe pagar y al final, obtener su/s boleto/s impreso/s.

El futuro es suyo señores, y señoras. :-)

Escenarios

  1. Un escolar desea sacar un boleto para ir a su escuela. Sabe cuál es su estación.
  2. Un joven adolescente desea sacar boletos para él y su chica, ida hasta una estación y vuelta desde otra.
  3. Una madre (o padre) con 3 hijos, uno en edad escolar, desea sacar boletos para viajar a lo de la abuela, dejar a los pequeños y seguir desde allí a dejar a su hijo en la escuela.

Los mitos

Todos tenemos ideas preconcebidas acerca de cómo los usuarios van a usar (o no podrán hacerlo) un sitio o sistema. Muchas veces estas ideas no están basadas en observaciones objetivas sino en sensaciones, comentarios, etc.

Estos preconceptos son llamados mitos. Afectan, y son a su vez afectados, por la percepción de los hechos de un test.

Antes de comenzar el test, cada uno escriba en una hoja (sin comentar con los demás) sus mitos. Al final, los compararemos con las observaciones.

Materiales y equipo

Para generar la máquina tienen papel, tijera, marcadores y cinta adhesiva. Con estos materiales harán el prototipo de la interfaz.

Uno de los integrantes del equipo hará de “computadora”, moviendo el prototipo de acuerdo a las acciones del usuario.

Dentro de cada grupo, debe haber representantes de:

Método de trabajo: diseño iterativo

Basándonos en estos datos, haremos el diseño de la interfaz, los prototipos en papel, una prueba con un usuario que pasará por los tres escenarios propuestos, y analizaremos los resultados y los posibles problemas.

Basándonos en estos hallazgos, rediseñaremos la interfaz, haremos los nuevos prototipos en papel –o modificaremos los que tenemos– y volveremos a probarlos tantas veces como nos permita el tiempo.

Ganará el equipo que tenga el mayor número de tareas cumplidas. Para esto, deberá hacer los ciclos rápidamente pero tratando de mejorar en cada ciclo todo lo posible.

Durante los tests, el grupo y su máquina tienen terminantemente prohibido hablar. Recuerden que la máquina no posee un sintetizador de voz y cualquier ayuda puede ocultar errores.

Consejos

Al terminar

Relean sus mitos y compárenlos con lo que vieron. ¿Qué tanto se acercaban a la realidad? ¿Hubo alguna sorpresa importante?

Piensen en las discusiones previas: ¿cuántas estaban basadas en mitos y se resolvieron simplemente mirando el test?

Analicen los cambios que tuvieron que hacer y los puntos en que los usuarios tuvieron problemas. ¿Hay algún patrón común? ¿Cuál fue la mayor dificultad?

2.3. Síntesis

Los prototipos de baja fidelidad en papel tienen pros y contras:

Pros
  • alta velocidad de generación y pruebas,
  • baratos,
  • poca inversión de recurso y esfuerzo,
  • no distraen con detalles.
Contras
  • no tienen el look exacto de la aplicación,
  • pueden ser difíciles de simular,
  • la velocidad de respuesta no es la real.

Como hemos visto, el diseño iterativo puede dar grandes beneficios si se lo aplica correctamente y en forma temprana dentro del ciclo de vida del producto, reduciendo tiempos de desarrollo y asegurando su usabilidad, que es un componente muy importante en su calidad total.

Con un equipo bien entrenado, pueden hacerse ciclos muy rápidos, que mejoren la interfaz en cada vuelta y logren avances importantes en poco tiempo y con poca inversión.

Por otro lado, el prototipado en papel tiene pros y contras. Es importante tener esto en mente y no caer en decisiones fáciles basadas en una sola técnica.

Les agradezco el tiempo invertido en este workshop y les ruego que llenen la encuesta para ayudarnos a mejorarlo en su próxima versión.

Muchas gracias. :-)

3. Apéndices

3.1. Cuestionario post–workshop

Su opinión nos interesa mucho. Gracias a ella, podremos ayudarlo mas y mejorar estos Workshops.
Si Usted recibió una copia en papel de este workshop, por favor use directamente el formulario que se encuentra en el documento en línea, en http://planeta.gaiasur.com.ar/infoteca/diseno-iterativo-y-prototipado-rapido.html#6.

Muchas gracias. :-)

Acerca del Workshop

¿Estuve presente en el workshop o lo encontró en nuestro sitio?
Elección de los temas tratados:
Profundidad de los temas tratados:
Aplicabilidad de los temas cubiertos en su tarea profesional:
En su opinión: ¿le ha resultado útil el workshop?
¿Que tema tratados le resultaron de especial interés y le parecería importante ampliar?
¿Que temas no tratados le parecen importantes y deberían agregarse?

Acerca del dictado (sólo si asistió personalmente)

Nivel de conocimientos del disertante:
Aplicación de su experiencia profesional a la conferencia:
Velocidad de la exposición:
Profundidad de la exposición:
Algún mensaje o recomendación en particular para el disertante:

Acerca de Usted (opcionales)

Los siguientes datos son opcionales y no serán entregados a terceros bajo ningún motivo.

Nombre y apellido:
Empresa u organización:
Responsabilidad o cargo:
¿Desea que le avisemos cuando haya futuras ponencias o workshops?
¿Qué temas son los que le interesan que le avisemos?
Dirección, teléfono o e-mail para avisarle: