MasterClass
Diseño de Interacción
  Jesús Gorriti & Juan Leal
Convivimos con objetos bien
 diseñados desde siempre...
http://www.flickr.com/photos/travisbell/87499962/
Y también con lo contrario…
Distintas soluciones para un
      mismo problema
Pero la tecnología sí es algo
           nuevo
Y si hablamos de software aún
           peor…
Calcular
Objetivo: prevenir el error
        humano
A prueba de errores.
             Evita el error humano o,
             en caso de que se
             manifieste, que sea
...
Vale, pero... ¿de dónde viene?
Otl Aicher
Bill Moggridge
psicología cognitiva y perceptual,
teoria del lenguaje, ciencia
cognitiva, arquitectura, diseño de
entornos, diseño de pro...
psicología cognitiva y perceptual,
teoria del lenguaje, ciencia
cognitiva, arquitectura, diseño de
entornos, diseño de pro...
Anne Kirah
Intuición
(o conocimiento no verbalizable)
y más importante...
¿Qué NO es?
No es usabilidad
No es ciencia
No es infalible
y ahora...
Técnicas y Trucos
  (ojo, no son recetas de cocina)
investigación



prototipado    análisis
Objetivos de
la Experiencia de Uso
¿Por qué?
 Aplicados al principio y al final de un
proyecto ayudan a evaluar el éxito (o
  fracaso) del mismo y sirven com...
Cómo funciona
Ojo!
   La lista de objetivos puede ser tan
larga o tan corta como tu quieras, pero
se honesto contigo mismo y acuerdate
 ...
Una experiencia de uso contrastada con
Objetivos de la                                      investigación
                ...
Benchmarking
¿Por qué?

Es importante encontrar fuentes de inspiración,
qué es lo que nuestra competencia hace bien y
          plantea...
¿Cómo funciona? (WTF)




                  ?
Este coste humano es denominado
                     por distintos autores como “carga
                     de trabajo” y ...
¿Por qué?

No es lo mismo la tarea que crees que realizan los
usuarios que la tarea que realmente desempeñan
             ...
Tarea prescrita vs Tarea real
Tarea prescrita (o escenario): ruta o camino que
nosotros como diseñadores definimos dentro ...
Tarea prescrita vs Tarea real

   Tarea real: aquello que el usuario realiza para
alcanzar el objetivo final pretendido, d...
Cómo funciona
  Situándote en el entorno real del usuario,
conociéndo su contexto, sus necesidades, sus
interrupciones y c...
Personas / Etnografías
¿Por qué?
  Necesitamos referencias externas para
poder priorizar mejor como diseñamos, una
suerte de brújula que nos indi...
Etnografía vs Persona
Ejemplo 1
Ejemplo 2
Ojo!
Nos tenemos que forzar a actuar y a
pensar como nuestras personas, si no
    son completamente inútiles.
Cómo funciona
Defines unos cuantos pérfiles según tu muestra de usuarios
        Escribes para cada uno de ellos una histo...
Análisis Semántico
¿Por qué?

  Ayuda a describir en un lenguaje más
‘humano’ las funcionalidades que puede
          tener tu aplicación
Cómo funciona
Ojo!
No es un análisis funcional ni te vale
como documento de especificaciones
Cómo funciona
    Escribes listas de tipos de usuarios, acciones y objetos
     Construyes ‘frases’ con sujetos, verbos y ...
Bola Extra
                http://tinyurl.com/jyriengstrom
 Una presentación de Jyri Engström sobre Microblogging y los
pe...
Prototipado con Retales
¿Por qué?

Centras tu atención sólo en los
elementos que tienen que estar
      en el diseño final
Cómo funciona
Cómo funciona
Escribes una lista con todos los items que componen la página
Creas grupos de items teniendo en cuenta como ...
1. Info sobre la compañia                        A: 1, 10       Importante
2. Info sobre seguros para la compañia
        ...
Navigation Stress Test (NST)
¿Por qué?

Porque es importante comprobar que nuestra
 propuesta de interfaz cumple los requisitos
           básicos de n...
Cómo funciona
Cómo funciona
Escoges de forma aleatoria una página de 2º nivel
       Imprimes la página en b/n, sin la ur
  Imaginas que...
Las preguntas
¿De qué va esta página ?
     Dibuja un rectángulo alrededor del título de la página o apúntalo en el papel....
El resultado
Test de los cinco segundos
¿Por qué? (1)

Porque cada página tiene un objetivo muy
concreto y es fácil olvidarlo cuando estás
 diseñando en el día a ...
¿Por qué? (2)

Transcurridos 5 segundos empezamos a fijarnos
    en detalles visuales menos importantes
Cómo funciona
Cómo funciona
Defines una tarea para tu propuesta de interfaz
     A continuación enseñas la propuesta
         La retiras...
Resultados

Observando las primeras impresiones podemos
identificar si la propuesta se acerca al objetivo
                ...
Por qué es bueno para la salud

      Testeo en fases muy tempranas de diseño
          Papel, PDF, PNG, HTML... Todo vale...
Bola Extra

            fivesecondtest.com
         Subes tu propuesta online
Tras los 5 seg. la aplicación pide feedback
...
Evaluación Heurística
¿Por qué?
  Con poco esfuerzo se pueden
identificar la gran mayoría de los
  problemas de una aplicación
   ahorrando tiem...
Cómo funciona
Estado del sistema
El mundo real en la aplicación
   El usuario tiene el control
  Consistencia y estándares
     Prevenci...
Cómo funciona
    Redactas una lista de reglas que deberia cumplir el interfaz
     Defines una lista de tareas que deberi...
Test de usuarios
¿Por qué?

Porque los usuarios finales no piensan como
     nosotros pensamos que piensan
Cómo funciona
Ojo! (1)
No son heatmaps. Tampoco es eyetracking
Ojo! (2)

Los usuarios no siempre dicen la verdad
Escenario ficticio y dinero de por medio
       Más de 6 ya es multitud
Problemas a la hora de aplicar
                                                         esta técnica sobre prototipos en
 ...
El resultado
Bola Extra
                       userfly.com
Introduces un javascript en la página que quieres testear
El sistema graba e...
Recomendaciones de la casa
Diseña interacción, pero piensa siempre en las
      páginas de error. Suelen olvidarse
El copy también es interfaz




wad
      us!
A   B
A   B
Evita rediseños masivos. Diseña pensando en
 la transición. No obligues a tus usuarios a
     reaprender tu interfaz. Hazl...
Cuida tus elementos de interacción. Es lo que
        más recuerdan tus usuarios
Diseña pensando en el affordance. Que el
   elemento de interacción dé una idea de la
acción que genera antes de interactu...
Diseña para prevenir el fraude antes de que
ocurra. Piensa que al final habrá gente que
  sepa usar la interfaz quizá mejo...
El silencio debe campar a sus anchas en tu
 interfaz. La mayoría de los usuarios web
navega desde la oficina... Asegúrate ...
Larry Tesler




Por desgracia, siempre hay un punto a partir
del cual no se puede simplificar más: Ley de
      conservac...
Los bullets te obligan a simplificar la
información. Los usuarios además prestan más
 atención a estos elementos. Consider...
Data ink: cantidad de tinta que aporta
información en un determinado elemento,
          dispositivo o interfaz
Ten en cuenta los comportamientos de tu
interfaz en las acciones Guardar, Buscar y Abrir
No existe existe ninguna fórmula mágica en el
 diseño de interacción. El mejor consejo es
           prueba, prueba y prue...
Lee, lee, lee...
¿Preguntas?
Fin
      Generic Work Process
project.cmd.hro.nl/cmi/hci/toolkit/

             Juan Leal
        seisdeagosto.com
 seisd...
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
MadInspain 2009
Próxima SlideShare
Cargando en…5
×

MadInspain 2009

1.706 visualizaciones

Publicado el

Keynote given by Juan Leal and Jesús Gorriti at the Interaction Design Masterclass during the last MadInspain 2009 held in Madrid, Spain.

seisdeagosto.com
gorriti.com

Publicado en: Diseño, Viajes, Tecnología
0 comentarios
13 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.706
En SlideShare
0
De insertados
0
Número de insertados
753
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
13
Insertados 0
No insertados

No hay notas en la diapositiva.

MadInspain 2009

  1. 1. MasterClass Diseño de Interacción Jesús Gorriti & Juan Leal
  2. 2. Convivimos con objetos bien diseñados desde siempre...
  3. 3. http://www.flickr.com/photos/travisbell/87499962/
  4. 4. Y también con lo contrario…
  5. 5. Distintas soluciones para un mismo problema
  6. 6. Pero la tecnología sí es algo nuevo
  7. 7. Y si hablamos de software aún peor…
  8. 8. Calcular
  9. 9. Objetivo: prevenir el error humano
  10. 10. A prueba de errores. Evita el error humano o, en caso de que se manifieste, que sea fácilmente identificable. Shigeo Shingo Poka-Yokes
  11. 11. Vale, pero... ¿de dónde viene?
  12. 12. Otl Aicher
  13. 13. Bill Moggridge
  14. 14. psicología cognitiva y perceptual, teoria del lenguaje, ciencia cognitiva, arquitectura, diseño de entornos, diseño de productos, diseño de información, arquitectura de información, etnografia, diseño de interacción, diseño de servicios, heurísticos, teoria de diseño, etc ...
  15. 15. psicología cognitiva y perceptual, teoria del lenguaje, ciencia cognitiva, arquitectura, diseño de entornos, diseño de productos, diseño de información, arquitectura de información, etnografia, diseño de interacción, diseño de servicios, heurísticos, teoria de diseño, etc ...
  16. 16. Anne Kirah
  17. 17. Intuición (o conocimiento no verbalizable)
  18. 18. y más importante... ¿Qué NO es?
  19. 19. No es usabilidad
  20. 20. No es ciencia
  21. 21. No es infalible
  22. 22. y ahora... Técnicas y Trucos (ojo, no son recetas de cocina)
  23. 23. investigación prototipado análisis
  24. 24. Objetivos de la Experiencia de Uso
  25. 25. ¿Por qué? Aplicados al principio y al final de un proyecto ayudan a evaluar el éxito (o fracaso) del mismo y sirven como vector director a la hora de diseñar las funcionalidades
  26. 26. Cómo funciona
  27. 27. Ojo! La lista de objetivos puede ser tan larga o tan corta como tu quieras, pero se honesto contigo mismo y acuerdate de mirarla de cuando en cuando
  28. 28. Una experiencia de uso contrastada con Objetivos de la investigación La investigación de las experiencias e Experiencia de Uso interacciones de los usuarios es la mejor manera de identificar problemas de usabilidad. La ¿Para que son estos objetivos? investigación identifica problemas y mide el éxito Estos son los objetivos de experiencia de uso para de las tareas, pero no provee soluciones. el desarrollo de Drupal. Su seguimiento esta recomendado para desarrolladores de modulos y Un interfaz intuitivo temas. Los interfaces deberian ser simples y concisos. Un interfaz deberia ser tan simple como sea posible, ¿Quién es un usuario de Drupal? pero no más simple. Un usuario es alguien que usa Drupal para desarrollar, configurar o mantener un sitio web. Un interfaz consistente Esto incluye desarrolladores, administradores y Los interfaces tienen que ser consistentes; la editores de contenidos. Estos usuarios deberian reutilización de elementos ayuda a que las ser capaces de crear buenas experiencias de uso expectativas de los usuarios a la hora de para sus visitantes. Esto se puede conseguir con interactuar con el interfaz sean precedibles y buenos valores por defecto y herramientas ayudan a la familiarización. suficientemente flexibles. Terminologia clara y concisa La terminologia no deberia ser ambigua ni estar escrita en otro idioma excepto Inglés. El material de ayuda deberia ser relevante y accesible en todo momento. Comunicación Efectiva Hay que comunicar correctamente que esta ocurriendo a los usuarios en todas las tareas, confirmando el éxito de las mismas y suministrando información útil en caso de error.
  29. 29. Benchmarking
  30. 30. ¿Por qué? Es importante encontrar fuentes de inspiración, qué es lo que nuestra competencia hace bien y plantearse cómo mejorarlo
  31. 31. ¿Cómo funciona? (WTF) ?
  32. 32. Este coste humano es denominado por distintos autores como “carga de trabajo” y abarca ámbitos: psíquico, cognitivo y, como no, físico. En el ámbito cognitivo, la diferencia tarea prescrita/tarea real constituye un elemento clave para poder abordar un test de usuarios Análisis de tareas
  33. 33. ¿Por qué? No es lo mismo la tarea que crees que realizan los usuarios que la tarea que realmente desempeñan en un entorno real
  34. 34. Tarea prescrita vs Tarea real Tarea prescrita (o escenario): ruta o camino que nosotros como diseñadores definimos dentro de la interfaz y que el usuario presumiblemente recorre para conseguir un objetivo concreto
  35. 35. Tarea prescrita vs Tarea real Tarea real: aquello que el usuario realiza para alcanzar el objetivo final pretendido, dentro de un contexto muy concreto (oficina, vacaciones...)
  36. 36. Cómo funciona Situándote en el entorno real del usuario, conociéndo su contexto, sus necesidades, sus interrupciones y cómo resuelve él mismo los problemas que encuentra
  37. 37. Personas / Etnografías
  38. 38. ¿Por qué? Necesitamos referencias externas para poder priorizar mejor como diseñamos, una suerte de brújula que nos indica el camino correcto
  39. 39. Etnografía vs Persona
  40. 40. Ejemplo 1
  41. 41. Ejemplo 2
  42. 42. Ojo! Nos tenemos que forzar a actuar y a pensar como nuestras personas, si no son completamente inútiles.
  43. 43. Cómo funciona Defines unos cuantos pérfiles según tu muestra de usuarios Escribes para cada uno de ellos una historia Extraes citas de tu diálogo con ellos Intentas mirar tu aplicación desde su punto de vista
  44. 44. Análisis Semántico
  45. 45. ¿Por qué? Ayuda a describir en un lenguaje más ‘humano’ las funcionalidades que puede tener tu aplicación
  46. 46. Cómo funciona
  47. 47. Ojo! No es un análisis funcional ni te vale como documento de especificaciones
  48. 48. Cómo funciona Escribes listas de tipos de usuarios, acciones y objetos Construyes ‘frases’ con sujetos, verbos y predicados Eliges aquellas que son esenciales para una buena experiencia Y ya tienes el esqueleto de tu aplicación
  49. 49. Bola Extra http://tinyurl.com/jyriengstrom Una presentación de Jyri Engström sobre Microblogging y los pequeños objetos que componen las redes sociales dónde aplica una suerte de análisis semántico para diseccionar este tipo de aplicaciones
  50. 50. Prototipado con Retales
  51. 51. ¿Por qué? Centras tu atención sólo en los elementos que tienen que estar en el diseño final
  52. 52. Cómo funciona
  53. 53. Cómo funciona Escribes una lista con todos los items que componen la página Creas grupos de items teniendo en cuenta como se relacionan Priorizas que grupos tienen más relevancia en tu aplicación Diseñas cada uno de los grupos de forma independiente Creas un prototipo usando los grupos como piezas de lego
  54. 54. 1. Info sobre la compañia A: 1, 10 Importante 2. Info sobre seguros para la compañia B: 2, 9, 10 3. Status del usuario C, A, G, E C: 3, 10, 11 4. Otros usuarios de la cuenta D: 4, 10 5. Info del comercial Necesario E: 5 6. Plan de precios B, D, F 7. Enlace para cambiar preferencias de F: 6, 10 busqueda G: 7, 12 8. Fecha de creación de la cuenta Molaría H: 8 9. Los usuarios rara vez ven o cambian la info del seguro H 10. Todos los usuarios pueden editar cualquier cosa menos la info de otros usuarios 11. Cambiar la contraseña es la acción más común 12. Los usuarios puede que accedan a esta página buscando como cambiar las preferencias de búsqueda
  55. 55. Navigation Stress Test (NST)
  56. 56. ¿Por qué? Porque es importante comprobar que nuestra propuesta de interfaz cumple los requisitos básicos de navegación
  57. 57. Cómo funciona
  58. 58. Cómo funciona Escoges de forma aleatoria una página de 2º nivel Imprimes la página en b/n, sin la ur Imaginas que estás entrando por primera vez Respondes a una serie de preguntas Marcas en la hoja impresa las respuestas
  59. 59. Las preguntas ¿De qué va esta página ? Dibuja un rectángulo alrededor del título de la página o apúntalo en el papel. ¿Qué sitio es este? Rodea con un círculo el nombre del sitio o apúntalo. ¿Cuáles son las secciones principales de este sitio ? Marca con una X. ¿En qué secciones se encuentra esta página ? Dibuja un triángulo alrededor de la X. ¿Como se sube un nivel desde esta página ? Marca con una U. ¿Como se llega hasta la página de inicio del sitio desde esta página ? Marca con una H. ¿ Como se llega hasta la página de inicio de la sección a la que pertenece esta página ? Marca con una T. ¿Que representan cada uno de los conjuntos de enlaces? D: Subpáginas de la actual. N: Páginas del mismo nivel que la actual y de la misma sección. S: Páginas del mismo sitio, pero no de la misma sección. O: Páginas de fuera del sitio. ¿Cómo se llegaría a esta página desde la página de inicio ? Escribe el conjunto de selecciones que tendrías que hacer. Conecta los elementos visuales de la página que te indican ese camino.
  60. 60. El resultado
  61. 61. Test de los cinco segundos
  62. 62. ¿Por qué? (1) Porque cada página tiene un objetivo muy concreto y es fácil olvidarlo cuando estás diseñando en el día a día una propuesta
  63. 63. ¿Por qué? (2) Transcurridos 5 segundos empezamos a fijarnos en detalles visuales menos importantes
  64. 64. Cómo funciona
  65. 65. Cómo funciona Defines una tarea para tu propuesta de interfaz A continuación enseñas la propuesta La retiras pasados 5 segundos Pides feedback
  66. 66. Resultados Observando las primeras impresiones podemos identificar si la propuesta se acerca al objetivo final pretendido
  67. 67. Por qué es bueno para la salud Testeo en fases muy tempranas de diseño Papel, PDF, PNG, HTML... Todo vale ¡Rápido! No más de 10 min. por usuario
  68. 68. Bola Extra fivesecondtest.com Subes tu propuesta online Tras los 5 seg. la aplicación pide feedback Lo recibes todo en tu email
  69. 69. Evaluación Heurística
  70. 70. ¿Por qué? Con poco esfuerzo se pueden identificar la gran mayoría de los problemas de una aplicación ahorrando tiempo y dinero
  71. 71. Cómo funciona
  72. 72. Estado del sistema El mundo real en la aplicación El usuario tiene el control Consistencia y estándares Prevención de errores Familiaridad vs memoria Flexibilidad y eficiencia de uso Estética y diseño minimalista Ayuda y documentación
  73. 73. Cómo funciona Redactas una lista de reglas que deberia cumplir el interfaz Defines una lista de tareas que deberia hacer tu interfaz Te cronometras realizando las tareas, paso a paso, tomando notas Apuntas que barreras de uso has encontrado Comparas tu experiencia según la lista de tareas que has listado
  74. 74. Test de usuarios
  75. 75. ¿Por qué? Porque los usuarios finales no piensan como nosotros pensamos que piensan
  76. 76. Cómo funciona
  77. 77. Ojo! (1) No son heatmaps. Tampoco es eyetracking
  78. 78. Ojo! (2) Los usuarios no siempre dicen la verdad Escenario ficticio y dinero de por medio Más de 6 ya es multitud
  79. 79. Problemas a la hora de aplicar esta técnica sobre prototipos en papel Cómo funciona Defines un escenario lo más parecido posible con la realidad Screening: perfiles de los usuarios que van a participar en el test Eliges el sofware que mejor te venga para lo que quieres testear Feedback y entrevista final Evocación y recuerdo
  80. 80. El resultado
  81. 81. Bola Extra userfly.com Introduces un javascript en la página que quieres testear El sistema graba en tiempo real lo que hacen los usuarios Recibes en cómodos plazos el vídeo en tu email
  82. 82. Recomendaciones de la casa
  83. 83. Diseña interacción, pero piensa siempre en las páginas de error. Suelen olvidarse
  84. 84. El copy también es interfaz wad us!
  85. 85. A B
  86. 86. A B
  87. 87. Evita rediseños masivos. Diseña pensando en la transición. No obligues a tus usuarios a reaprender tu interfaz. Hazlo suave
  88. 88. Cuida tus elementos de interacción. Es lo que más recuerdan tus usuarios
  89. 89. Diseña pensando en el affordance. Que el elemento de interacción dé una idea de la acción que genera antes de interactuar sobre él
  90. 90. Diseña para prevenir el fraude antes de que ocurra. Piensa que al final habrá gente que sepa usar la interfaz quizá mejor que tú
  91. 91. El silencio debe campar a sus anchas en tu interfaz. La mayoría de los usuarios web navega desde la oficina... Asegúrate de que nada genera sonidos
  92. 92. Larry Tesler Por desgracia, siempre hay un punto a partir del cual no se puede simplificar más: Ley de conservación de la complejidad
  93. 93. Los bullets te obligan a simplificar la información. Los usuarios además prestan más atención a estos elementos. Considera su uso
  94. 94. Data ink: cantidad de tinta que aporta información en un determinado elemento, dispositivo o interfaz
  95. 95. Ten en cuenta los comportamientos de tu interfaz en las acciones Guardar, Buscar y Abrir
  96. 96. No existe existe ninguna fórmula mágica en el diseño de interacción. El mejor consejo es prueba, prueba y prueba
  97. 97. Lee, lee, lee...
  98. 98. ¿Preguntas?
  99. 99. Fin Generic Work Process project.cmd.hro.nl/cmi/hci/toolkit/ Juan Leal seisdeagosto.com seisdeagosto.com/indica (blog) twitter.com/seisdeagosto Jesús Gorriti gorriti.com twitter.com/gorriti

×