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 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
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
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...”
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.
Metáforas verbales
Ejemplo
Cuando nos encontramos con una nueva herramienta tecnológica tendemos a compararla con alguna cosa conocida
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
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
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
Metáforas visuales
Ejemplo
Metáforas visuales
Ejemplo
Los conocimientos sobre los elementos de un dominio familiar se traspasan a los elementos de otro no familiar
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 quese presentaba en la pantalla fue la delescritorio y se parecía al área de trabajode una típica mesa de oficina
Los archivos se transformaron enrepresentaciones pictóricas
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
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
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
Cuarto de juegos
Metáfora global
Ejemplo
Agenda electrónica
Metáfora global
Ejemplo
Metáfora del escritorio
Fue la primera metáfora global Está muy extendida Reproduce una oficina con todos
sus objetos
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.
Metáfora del escritorio
Historia
Xerox Star1981
Windows 1.01985
Windows 2.01986
Macintosh1984
Lisa1983
XWindows1986, comercial
XWindows1984, Athena
Xerox PARCCaliforniaAlan Kay
Steve JobsApple
Microsoft
¿Cómo sería un escritorio real visto desde la metáfora de escritorio?
http://www.metacafe.com/watch/688382/reality_desktop/#
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
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
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
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)
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
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
Creación de Metáforas
Para crear las metáforas Identificar funcionalidades básicas
New, Save, Close, Cut, Paste, Print, ...
Buscar un icono adecuado para cada funcionalidad básica
Identificar funcionalidades dependientes del dominio Buy book, Assign, Run server, Order, Invoices, Select place, Modify
Info...
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
Evaluación de Metáforas
Estructuración
Aplicabilidad
Representación
Adaptabilidad al dominio
Extensibilidad
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?
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?
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?
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?
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?
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
Metodología de creación
Ejemplo de errores
Asociaciones inadecuadas
Se utiliza la metáfora del reproductor de vídeo para controlar una impresora ¿¿¿???
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 ¿¿¿???
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
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
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
Escoger los objetos que están implicados:
Estantería
Álbum
Hoja
Foto
Diseño de metáforas
Ejercicio – paso 1
Diseño de metáforas
Ejercicio – paso 2
Asociar un elemento visual a cada objeto
Estantería Álbum Hoja Foto
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
Diseño de metáforas
Ejercicio – paso 4
Construir un elemento visual para cada acción
Crear/Añadir
Seleccionar
Borrar
Mover
Ejemplos de metáforas
Objetos y acciones
Páginas web
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
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
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
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
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