Interacción persona-computador Metáforas. Objetivos Aprender qué es una metáfora Conocer qué son las metáforas verbales, visuales y globales Conocer la.

Presentación del tema: "Interacción persona-computador Metáforas. Objetivos Aprender qué es una metáfora Conocer qué son las metáforas verbales, visuales y globales Conocer la."— Transcripción de la presentación:

1 Interacción persona-computador Metáforas

2 Objetivos Aprender qué es una metáfora Conocer qué son las metáforas verbales, visuales y globales Conocer la metáfora del escritorio y su historia Ver el uso de las metáforas en las interfaces actuales Discutir los problemas y las ventajas de su uso Aprender cómo diseñar y aplicar las metáforas con efectividad

3 Metáforas Utilizamos metáforas para comunicar conceptos abstractos de una forma familiar y accesible La metáfora del escritorio introducida por el computador Macintosh y de uso generalizado actualmente supuso un cambio en la usabilidad de los computadores

4 Metáforas verbales Metáfora:  Figura retórica que consiste en usar una palabra o frase en un sentido distinto del que tiene pero manteniendo con éste una relación de analogía o semejanza  Aplicación de una palabra o de una expresión a un objeto o un concepto, al cual no denota literalmente, con el fin de sugerir una comparación (con otro objeto o concepto) y facilitar su comprensión (RAE)  Lenguaje floreado de novelas y poesía.... “... tenía el cabello de oro...” 

5 Metáforas verbales Son una parte integrante del lenguaje y aparecen en las conversaciones cotidianas Ejemplo:  ahorrar, gastar, desaprovechar (dinero)  tiempo  defender, atacar, retirar (conceptos bélicos)  Ideas (abstracto)  Navegar, explorar, visitar, inmersión, web, red, mapa, página, home, ancla, bookmark, ventana, etc.

6 Metáforas verbales Ejemplo Cuando nos encontramos con una nueva herramienta tecnológica tendemos a compararla con alguna cosa conocida

7 Metáforas verbales Ejemplo Los conocimientos sobre los elementos y relaciones en un dominio familiar se traspasan a los elementos y relaciones en otro no familiar teclas barra esp. retorno

8 Metáforas verbales Ventajas y limitaciones Ventajas: basándonos en el conocimiento previo podemos desarrollar más rápidamente el conocimiento del nuevo dominio  Presionar una tecla significa ver un carácter visualizado en la pantalla Limitaciones: existen diferencias  La tecla de retorno mueve el carro físicamente mientras que en el computador se borra el carácter  No obstante, una vez asimiladas estas diferencias el usuario construye un nuevo modelo mental Conclusión: las metáforas verbales pueden ser muy útiles para ayudar a los usuarios a iniciarse en el uso de un nuevo sistema

9 Metáforas visuales Metáfora visual:  Es una imagen que nos permite representar alguna cosa de tal manera que el usuario puede reconocer lo que representa y por extensión comprender su propósito La metáfora puede variar desde pequeñas imágenes hasta pantallas completas

10 Metáforas visuales Ejemplo

11 Los conocimientos sobre los elementos de un dominio familiar se traspasan a los elementos de otro no familiar

12 Metáforas visuales Orígenes Xerox, primera metáfora visual  Xerox Star, interfaz visual basada en la oficina física  La base consistió en crear objetos electrónicos simulando los objetos físicos de una oficina: papel, carpetas, bandejas, archivadores  La metáfora de organización global que se presentaba en la pantalla fue la del escritorio y se parecía al área de trabajo de una típica mesa de oficina  Los archivos se transformaron en representaciones pictóricas

13 Metáforas visuales 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 Comprendemos su significado porque las conectamos mentalmente con otros procesos que previamente hemos aprendido

14 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 Metáforas visuales Intuición

15 Metáforas visuales Metáfora global La metáfora global es una metáfora que nos da el marco para las otras metáforas del sistema  La metáfora del escritorio se puede considerar como una metáfora global Es importante que todas las metáforas se integren adecuadamente en la metáfora global

16 Cuarto de juegos Metáfora global Ejemplo

17 Agenda electrónica Metáfora global Ejemplo

18 Metáfora del escritorio Fue la primera metáfora global Está muy extendida Reproduce una oficina con todos sus objetos

19 Metáfora del escritorio ¿Cómo funciona? Las carpetas son contenedores de documentos en el mundo real y en el virtual  Se puede abrir una carpeta para coger o dejar alguna cosa  Se pueden poner carpetas dentro de carpetas  Se pueden mover las carpetas por todo el escritorio Algunas propiedades físicas están ausentes  Las carpetas no pesan, no hacen ruido cuando se abren Por otra parte tienen propiedades “mágicas”  Se puede poner el mismo documento en dos carpetas a la vez  Se puede reproducir un conjunto de carpetas y sus documentos automáticamente  Se pueden ordenar las carpetas por orden alfabético, etc.

20 Metáfora del escritorio Historia Xerox Star 1981 Windows 1.0 1985 Windows 2.0 1986 Macintosh 1984 Lisa 1983 XWindows 1986, comercial XWindows 1984, Athena Xerox PARC California Alan Kay Steve Jobs Apple Microsoft

21 Metáfora del escritorio Metáforas compuestas La metáfora del escritorio se ha combinado con otras metáforas para permitir que los usuarios puedan realizar un conjunto de tareas más amplio Ejemplos:  La barra de desplazamiento como metáfora del rollo, que es un papiro que se desplaza para leer  Menús y ventanas  Cortar y pegar, basadas en el diseño de páginas de una imprenta

22 Metáfora del escritorio El computador invisible El objetivo final de las metáforas es hacer el computador invisible para el usuario La metáfora puede llegar a ser transparente al usuario y no requerir de él ningún esfuerzo cognitivo

23 Metodología de creación Las metáforas visuales son un aspecto importante del diseño de un sistema interactivo y han de diseñarse de acuerdo con una metodología Fases del diseño de metáforas: Definición funcional Identificación de los problemas del usuario Generación de la metáfora Evaluación de la metáfora

24 Definición Funcional Consiste en obtener información de la funcionalidad deseada del sistema para (Captura de Requisitos)  Realizar el análisis de tareas a realizar  Realizar un estudio de los casos de uso  Establecer las metáforas básicas Obtener una idea básica inicial que permita la interacción  qué puede hacer el sistema (análisis de requisitos)  qué puede hacer el usuario (análisis de la tarea)

25 Identificación de Problemas Enfocado al diseño de prototipo  Se crea un prototipo sin funcionalidad, pero con la interfaz “completa”  Se guía al cliente/usuario cómo utilizar el prototipo  Se observa si el usuario comprende Dónde se encuentra la funcionalidad Cómo utilizan el prototipo Qué problemas tienen en su utilización  Y con esto se obtiene una verificación de Que la captura de requisitos es correcta Que la funcionalidad capturada es la adecuada Que las metáforas básicas utilizadas en el prototipo son intuitivas para el usuario

26 Creación de metáforas La captura de requisitos nos ha permitido obtener las funcionalidades básicas De la Identificación de Problemas hemos obtenido cómo actúa el usuario frente a una nueva aplicación La Creación de las Metáforas se basa en  Estudiar las funcionalidades y handicaps en el uso del prototipo por parte del usuario para incluir metáforas necesarias  Determinar las características, opciones o acciones en las que el usuario tiene dificultad  Esas son buenas candidatas para metáforas

27 Creación de Metáforas Para crear las metáforas  Identificar funcionalidades básicas Nuevo, Guardar, Cerrar, Cortar, Pegar  Buscar un icono adecuado para cada funcionalidad básica  Identificar funcionalidades dependientes del dominio  Para cada funcionalidad: Buscar un subconjunto de iconos que puedan ajustarse a la funcionalidad Mostrar al cliente/usuario dichos iconos y que decida él cuál puede ser más adecuado para su dominio Establecer los iconos en una versión prototipo

28 Evaluación de Metáforas Estructuración Aplicabilidad Representación Adaptabilidad al dominio  Extensibilidad

29 Estructuración Preguntas básicas:  ¿La estructura de la metáfora es correcta?  ¿El conjunto de metáforas es demasiado grande o demasiado pequeño?  Las funcionalidades más utilizadas ¿están hacia la derecha o hacia la izquierda?  ¿Tiene relación una metáfora con las adyacentes?  ¿Puede el usuario realizar las funcionalidades básicas? (cortar, pegar, guardar, abrir, cerrar, borrar, copiar, imprimir, vista previa, deshacer, rehacer,....)  De las metáforas desechadas para el diseño ¿cuáles realmente deberían incluirse?  De las metáforas incluidas en el diseño ¿cuáles realmente son de poca utilización? ¿cuáles convendría desechar?

30 Aplicabilidad De las metáforas  ¿Cuáles deben aplicarse en cada momento? Ejemplo: Si no hay nada en el portapapeles, la metáfora pegar debería estar desactivada  ¿Sabe el usuario cuándo debe aplicar una metáfora? ¿Sobre qué datos afecta el click?  Al hacerse efectiva una metáfora, ¿el usuario tiene el control del resultado obtenido?  ¿Puede deshacerse?

31 Representación Cada metáfora está asociada a una metáfora verbal: texto, sonido, imagen  ¿El usuario comprende de forma unívoca la metáfora?   Si para una metáfora existen varias interpretaciones ¿existe un manual de usuario para aclararlo?  De las interpretaciones de la metáfora ¿coincide alguna con la funcionalidad? Por ejemplo: Una imagen de un PC, ¿podría corresponder a cerrar el archivo? NO!!!  Cada imagen tiene asociada una palabra ¿se ha hecho el estudio de las implicaciones de dicha imagen en distintas culturas?

32 Adaptabilidad al Dominio Si nos encontramos en un dominio específico  ¿Qué palabras son las más relevantes en dicho dominio?  De dichas palabras, ¿existen imágenes para representarlas?  Un usuario ducho en el dominio ¿es capaz de asociar imagen con el texto?  En caso de duda, ¿existe un texto alternativo para las metáforas?  Dicho texto alternativo ¿aclara en algo la funcionalidad de la metáfora? La metáfora del Escritorio fue diseñada a partir de un escritorio físico  La metáfora del dominio ¿ha sido diseñada a partir del dominio físico?

33 Extensibilidad Cuando creemos que está diseñado el conjunto de metáforas de manera inequívoca...  ¿Podría ser que nuevas funcionalidades “estropeen” la actual estructuración?  Al incluir nuevas metáforas ¿las anteriores metáforas podrían confundirse con las nuevas?  ¿Existe alguna palabra a la que puedan corresponder varias imágenes? ¿Existe alguna imagen a la que corresponda más de una palabra?  Si se amplía el conjunto de metáforas, ¿se sigue guardando la idea de que una metáfora en una “tecla rápida”?  El conjunto de metáforas ¿es demasiado extenso? ¿es demasiado escueto? ¿el usuario puede confundirse?

34 Metodología de creación Otra versión Identificar el tipo de comparación  Debemos encontrar una relación entre la información familiar y la nueva Grado de ajuste  Estudiar el grado de coincidencia y las diferencias que existen

35 Metodología de creación Ejemplo de errores Asociaciones inadecuadas Se utiliza la metáfora del reproductor de vídeo para controlar una impresora ¿¿¿???

36 Metodología de creación Ejemplo de errores Extensión de la metáfora con funciones no intuitivas Al arrastrar el icono del disquete a la papelera se expulsa el disquete ¿¿¿???

37 Diseño de metáforas Las metáforas pueden conseguir su efectividad a través de asociaciones:  Podemos asociar clases y atributos a objetos familiares  Podemos asociar procesos y algoritmos a verbos de acción Tipos de metáforas:  De objetos: libro, álbum, agenda, escritorio, biblioteca  De actividades: visita, exploración, viaje  De lugares: casa, plaza, museo, ciudad, isla

38 Diseño de metáforas Objetos familiares Escritorio  Dibujos, archivos, carpetas, papeles, clips, notas de papel Fotografía  Álbumes, fotos, portafotos Juegos  Reglas del juego, piezas del juego, tablero de juego Contenedores  Estanterías, cajas, compartimentos Ciudades  Hitos, perfiles, casas

39 Ejemplos de metáforas Objetos y acciones Páginas web

40 Ejemplos Papelera La papelera es una herramienta habitual en la mayoría de las culturas avanzadas  Sirve para poner todos los papeles u otros elementos que no sirven para después tirarlos a la basura El símbolo de reciclaje es cada vez más habitual  La papelera permite reciclar los objetos depositados en ella

41 Ejemplos Tijera (Cortar) Las tijeras nos dan la funcionalidad de cortar papel, tela, etc. La metáfora nos aporta la idea de poder cortar un trozo de documento, una parte de un dibujo, etc. Su enlace con el portapapeles tiene que ser aprendido

42 Ejemplos Bote de pintura (Pintar) El bote de pintura es un objeto muy común y de fácil comprensión Con el bote de pintura que se vacía queremos hacer comprender al usuario que lo que se hace es llenar de un color el interior de un determinado objeto

43 El correo es un elemento habitual en nuestra cultura. Nos permite enviar información escrita en papel a un destinatario normalmente lejano Esta metáfora se utiliza para el correo electrónico Ejemplos Correo

44

45

46 Conclusiones Las metáforas constituyen un elemento fundamental de las interfaces actuales Hemos expuesto una visión general de su historia y algunos ejemplos actuales Hemos aprendido algunas ideas sobre cómo diseñar metáforas

47 Objetivo:  Diseño de un conjunto de metáforas para la gestión de una biblioteca de imágenes digitales Pasos:  Escoger los objetos que están implicados  Asociar un elemento visual a cada objeto  Escoger los verbos asociados a las acciones que se pueden ejecutar  Construir un elemento visual para cada acción Diseño de metáforas Ejercicio

48 Escoger los objetos que están implicados:  Estantería  Álbum  Hoja  Foto Diseño de metáforas Ejercicio – paso 1

49 Diseño de metáforas Ejercicio – paso 2 Asociar un elemento visual a cada objeto EstanteríaÁlbumHojaFoto

50 Diseño de metáforas Ejercicio – paso 3 Escoger los verbos asociados a las acciones que se pueden ejecutar  Crear estantería, álbum, hoja, foto  Añadir estantería, álbum, hoja, foto  Borrar estantería, álbum, hoja, foto  Seleccionar álbum, hoja, foto  Mover álbum, hoja, foto

51 Diseño de metáforas Ejercicio – paso 4 Construir un elemento visual para cada acción Crear/Añadir Seleccionar Borrar Mover