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