Introducción a la Interacción Persona-Ordenador Metáforas

1. Introducción a la Interacción Persona-OrdenadorMetáforas

2. Síntesis • En el diseño de las interfases actuales, las metáforas tienen un papel dominante • La metáfora de la sobremesa introducida por el ordenador MacIntosh y de uso generalizado actualmente, supuso un cambio en la usabilidad de los ordenadores • El uso de las metáforas permite conseguir maneras más eficientes y efectivas de comunicarse con comunidades de usuarios diversas

3. Aprender que es una metáfora Conocer que son las metáforas verbales Conocer que son las metáforas visuales Conocer las metaforas globales Ver el uso de las metáforas en las interfases actuales Discutir los problemas y las ventajas de su uso Aprender como diseñarlas y aplicarlas con la máxima efectividad Objetivos

4. Metáfora verbal

5. Metáfora verbal • Las metáforas son una parte integrante del lenguaje • Nos permite comunicar un concepto abstracto de una manera más familiar y accesible • Las utilizamos continuamente... • Los argumentos pueden ser defendidos o atacados, si una posición es indefendible nos podemos retirar • Ahorrar, gastar, desaprovechar el tiempo

6. Metáfora verbalLimitaciones • La tecla de retorno mueve el carro fisicamente mientras que en el ordenador se borra el carácter • No obstante, una vez asimiladas estas diferencias, el usuario construye un nuevo modelo mental

7. Metáfora visualMacIntosh

8. Metafora visual.... • Xerox, primera metàfora virtual • Metáfora de la interfase basada en la oficina física • La metáfora de organización global que se presentaba en la pantalla fue la de la sobremesa y se parecía al área de trabajo de una típica mesa de oficina • A diferencia de las metáforas verbales, la metáfora forma parte de la interfase

9. .....Metáfora visual • Las metáforas visuales combinan el sistema y los dominios familiares en una sola entidad • Los usuarios desarrollan modelos mentales mas similares a la metáfora que al mundo real • La metáfora es el modelo que se aprende

10. Metáforas visuales.. • Las metáforas se basan en asociaciones percibidas de manera similar por el diseñador y el usuario • Si el usuario no tiene la misma base cultural que el desarrollador es fácil que la metáfora falle

11. Metàfora visualDefiníción • Es una imagen que nos permite representar alguna cosa y que el usuario puede reconocer lo que representa y por extensión comprender su propósito

12. Intuición • Las personas entendemos las metáforas por intuición • Intuición. Cognición inmediata. Conocimiento de una cosa obtenida sin utilizar inferencia o razonamiento

13. Metáfora visualMetáfora de la sobremesa

14. ¿Como funcionan estas metáforas? • Las carpetas son contenedores de documentos en el mundo real y en el virtual, • Abres una carpeta para coger o dejar alguna cosa, podemos poner carpetas dentro de carpetas y dentro de carpetas, podemos mover las carpetas por toda la sobremesa

15. ¿Como funcionan estas metáforas? • Algunas propiedades físicas estan ausentes • No pesan no hacen ruido cuando se abren, pero por otra parte tienen propiedades mágicas, puedes poner el mismo documento en dos carpetas al mismo tiempo, aunque puedas pensar que los puedes pasar por una copiador virtual, puedes reproducir un conjunto de carpetas y sus documentos automáticamente, puedes ordenar las carpetas por orden alfabético.

16. Metáfora de la sobremesaHistória 1981 Xerox Star 1983 Lisa MacIntosh Windows 1.0 1984 Athena 1985 1985 Xwindows Windows 2.0 1986 1986 comercial

17. Metáfora global

18. Metáfora global • La metáfora global es una metáfora que nos da el marco para todas las otras metáforas del sistema • Por ejemplo la metáfora de MacInstosh se puede considerar como una metáfora global • Problemas • Las metáforas que incluye puede o no que tengan beneficios cognitivos por asociación

19. Metáforas compuestas • La metáfora de la sobremesa se ha combinado con otras metáforas para permitir a los usuarios que puedan hacer un conjunto de tareas mas amplio • Ejemplos: • La barra de desaplazamiento como la metáfora del rollo • Menús y ventanas • Cortar y pegar que se basa en el diseño de páginas

20. El ordenador invisibleFin de la metáfora • Podemos considerar que puede llegar a ser la metáfora transparente al usuario y no tener ningún esfuerzo cognitivo

21. EjemplosPapelera de reciclaje

22. EjemplosPapelera • La papelera es una herramienta habitual en la mayoría de las culturas avanzadas • Sirve para poner todos los papeles o tros elementos que no sirven para después tirarlo como basura • El símbolo de reciclar es habitual en nuestra cultura • Tenemos una papelera que permite reciclar los objetos que depositamos en ella

23. EjemplosTijera • Las tijeras nos representan su funcionalidad de cortar papel, ropa, etc.. • La metáfora nos permite cortar un trozo de documento, dibujo, hoja de cálculo • Su enlace con el portapapeles tiene que ser aprendido

24. EjemploPote de pintura • El pote de pintura es una objeto muy común y de compresnión fácil • El pote de pintura que se vacia queremos hacer comprender al usuario que lo que haremos será llenar el interios de un determinado objeto

25. EjemplosPortapapeles • Esta metáfora pretende cubrir una componente del sistema operativo que nos permite pasar información entre aplicaciones

26. EjemplosCorreo electrónico • Cubre la función de gestionar correo electrónico

27. Metodología de creación • Definición funcional • Identificación de los problemas de los usuarios • Generación de la metáfora • Evaluación de la metáfora

28. Metodología de creaciónDefinición funcional • Entender como funciona la funcionalidad a implementar la metáfora • Que puede hacer el sistema • Lo que está disponible para el usuario • Rapidez de respuesta

29. Identificación de los problemas de los usuarios • Analizar las dificultades del usuario • Ver como utilizan funcionalidades similares y que problemas tienen • Explicar lo que queremos hacer y ver si lo entienden, enseñar el prototipo y ver como lo utilizan

30. Generación de la metàfora • Examen detallado de la manera de realizar las tareas • Analizar oficinas, fábricas, escuelas, etc.. y observar los problemas que las personas tienen y las herramientas que utilizan • Una vez identificados los problemas y las herramientas que se utilizan ver cuales de ellas envuelven algunas de las caracteristicas que los usuarios encuentran difíciles de comprender • Estas son buenas candidatas para metáforas

31. Creació de metàforesEvaluación • Cantidad de estructura, composición, organización • Aplicabilidad de la estructura • Representatividad • Adecuación a la audiencia • Extensibilidad

32. Diseño de metáforasLenguaje • Las metáforas pueden conseguir su efectividad a través de la asociación con organizaciones • Podemos asociar estructuras, clases, objetos, atributos a nombres o operaciones • Podemos asociar procesos, algoritmos a verbos

33. Elementos de diseño (1) • Escritorio: Dibujos, ficheros, carpetas, papeles, clips, notas de papel • Documentos: Libros, capítulos, marcadores, figuras; periódicos, secciones; revistas, artículos; cartas; formularios • Fotografía: Álbums, fotos, portafotos • Televisión: Programas, canales, redes, anuncios comerciales, guías

34. Elementos de diseño (2) • Disco compacto, cassette, grabaciones, pistas, jukeboxes • Pila de cartas: Cartas, pilas, • Juegos: reglas del juego, piezas del juego, tablero de juego • Películas: Rollos, bandejas de transpas, presentaciones, rollos, películas, teatros • Contenedores: Estanterías, cajas, compartimentos

35. Elementos de diseño (3) • Árboles: Raices, tronco, ramas, hojas • Red, diagrama, mapa: nodos, enlaces, landmarks, regiones, etiquetas, bases (fondos), leyenda • Ciudades: Regiones, landmarks, pathways, casas, habitaciones, ventanas, mesas

36. Verbos • Ejemplos típicos de conceptos de acción y las relaciones con los objetos: • Mover: navegar, conducir, volar • Localizar: apuntar, tocar, enmarcar elemento(s) • Seleccionar: tocar elemento, grabar elemento, poner dedo en elemento y moverlo • Crear: añadir (nuevo), copiar • Borrar: tirar, destruir, perder, reciclar, borrar (temporal o permanentemente) • Evaluar: Mover botón, desplazar puntero, rodar, girar • Vaciar, flujo: agua (tubos, ríos), electricidad

37. Ejercicio • Diseño de un conjunto de metáforas que permitan cubrir la gestión de una librería de imágenes

38. Estanteria Album Hoja Foto Crear (Nuevo elemento) Añadir Seleccionar Borrar Cambiar Ejemplo

40. Bibliografía • Cooper, Alan . About face. The Essentials of User Interface Design. IDG books. (1995) • Lakoff G. Johnson M. Metaphor We Live By . The University of Chicago Press.(1980) • Laurel, Brenda . The Art of Human-Computer Interaction Design. Capítol Working with Interface metaphors. Addison and Wesley.(1990) • Laurel, Brenda. Computers as Theatre. Addison &Wesley. (1993)

41. Conclusiones • Las metáforas constituyen un elemento fundamental de las interfases actuales • Hemos expuesto una visión general de su historia y ejemplo actuales • Hemos aprendido a como diseñar metáforas • Hemos aprendido a como aplicar estas técnicas a problemas reales

42. Bibliografía • Preece, Jenny. Human -Computer Interaction. Capítulo Interface metaphors and Conceptual Models. Addison & Wesley. (1994) • Carroll J.M, Mack R.L , Kellogg W.A. Handbook of Human-Computer Interaction . Helander M. (1988) • Erikson T.D. The Art of Human-Computer Interface . Addison-Wesley.(1990)