Metforas

Prof. Robert Espinoza Domnguez

Objetivos
Aprender qu es una metfora

Conocer qu son las metforas verbales, visuales y globales

Conocer la metfora del escritorio y su historia

Ver el uso de las metforas en las interfaces actuales, sus ventajas y sus inconvenientes
Aprender a disear y aplicar metforas con efectividad

Contenido
Metforas Metforas verbales

Metforas visuales
Metfora del escritorio Metodologa de creacin de metforas

Diseo de metforas
Ejemplos de metforas

Metforas
Cuando queremos comunicar un concepto abstracto de una manera ms familiar y accesible utilizamos el recurso de las metforas. Por ejemplo cuando hablamos del tiempo que es un trmino abstracto, lo expresamos en relacin con dinero que es un trmino concreto y hablamos de ahorrar, gastar, desaprovechar el tiempo. En el diseo de las interfaces actuales, las metforas tienen un papel dominante.

Metforas
La metfora del escritorio introducida por Macintosh supuso un cambio en la usabilidad de los ordenadores En esta metfora los objetos en la pantalla, los nombres que se dan a las rdenes de comando, conceptos como escritorio, icono, mens, ventanas estn basados en temas familiares y lo mismo sucede con las acciones a realizar, arrastrar, soltar, pegar, etc. El uso de metforas ayuda a los desarrolladores a construir programas que puedan ser usados por comunidades de usuarios ms diversas

Metforas

Metforas

Metforas

Metforas verbales
Metfora:
Figura retrica que consiste en usar una palabra o frase en un sentido distinto del que tiene pero manteniendo con ste una relacin de analoga o semejanza

Ejemplo:
cabellos de oro por cabellos rubios

Las metforas son una parte integrante del lenguaje y aparecen en las conversaciones cotidianas
Tiempo (abstracto) -> ahorrar, gastar, desaprovechar (dinero) Ideas (abstracto) -> defender, atacar, retirar (conceptos blicos) Navegar, explorar, visitar, inmersin, web, red, mapa, pgina, home, ancla, bookmark, etc.

Metforas verbales

Ejemplo
Cuando nos encontramos con una nueva herramienta tecnolgica tendemos a compararla con alguna cosa conocida

Metforas verbales

Ejemplo
Los conocimientos sobre los elementos de un dominio familiar se traspasan a los elementos de otro nuevo

retorno

teclas

barra esp.

Metforas verbales

Ventajas y limitaciones
Ventajas: basndonos en el conocimiento previo podemos desarrollar ms rpidamente el conocimiento del nuevo dominio
Presionar una tecla significa ver un carcter en la pantalla

Limitaciones: existen diferencias

La tecla de retroceso mueve el carro fsicamente mientras que en el ordenador se borra el carcter No obstante, una vez asimiladas estas diferencias el usuario construye un nuevo modelo mental

Conclusin: las metforas verbales son muy tiles para ayudar a los usuarios a iniciarse en el uso de un nuevo sistema

Metforas visuales
Metfora visual:
Imagen que nos permite representar una cosa de manera que el usuario puede reconocer lo que representa y por extensin comprender su propsito

Va desde pequeas imgenes hasta pantallas completas

Metforas visuales
Las metforas visuales combinan el sistema y los dominios familiares en una sola entidad Los usuarios desarrollan modelos mentales ms similares a la metfora que al mundo real La metfora es el modelo que se aprende

Metforas visuales

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

Metforas visuales

Ejemplo

Metforas visuales

Ejemplo

Metforas visuales

Orgenes
Xerox, primera metfora visual
Xerox Star, interfaz visual basada en la oficina fsica La base consisti en crear objetos electrnicos simulando los objetos fsicos de una oficina: papel, carpetas, bandejas, archivadores La metfora de organizacin global que se presentaba en la pantalla fue la del escritorio y se pareca al rea de trabajo de una tpica mesa de oficina Los ficheros se transformaron en representaciones pictricas

Metforas visuales

Intuicin
Las personas entendemos las metforas por intuicin
Intuicin: cognicin inmediata. Conocimiento de una cosa obtenida sin utilizar inferencia o razonamiento

Comprendemos su significado porque las conectamos mentalmente con procesos que hemos aprendido

Metforas visuales

Intuicin
Las metforas se basan en asociaciones percibidas de manera similar por el diseador y el usuario Si el usuario no tiene la misma base cultural que el desarrollador es fcil que la metfora falle

Metforas visuales

Metfora global
La metfora global es una metfora que nos da el marco para las otras metforas del sistema
La metfora del escritorio se puede considerar como una metfora global

Es importante que todas las metforas se integren adecuadamente en la metfora global

Metfora global

Ejemplo

Explorando el sistema solar

Metfora global

Ejemplo

Cuarto de juegos

Metfora global

Ejemplo

Agenda electrnica

Metfora del escritorio

Fue la primera metfora global Est muy extendida Reproduce una oficina con todos sus objetos

Metfora del escritorio

Cmo 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 fsicas estn ausentes

Las carpetas no pesan, no hacen ruido cuando se abren

Por otra parte tienen propiedades mgicas

Se puede poner el mismo documento en dos carpetas a la vez Se puede reproducir un conjunto de carpetas y sus documentos automticamente Se pueden ordenar las carpetas por orden alfabtico, etc.

Metfora del escritorio

Historia
Steve Jobs Apple

Xerox Star 1981

Xerox PARC California Alan Kay

Lisa 1983 Macintosh 1984

Microsoft

Windows 1.0 1985

XWindows 1984, Athena

Windows 2.0 1986

XWindows 1986, comercial

Metfora del escritorio

Metforas compuestas
La metfora del escritorio se ha combinado con otras metforas para permitir que los usuarios puedan realizar un conjunto de tareas ms amplio Ejemplos:
La barra de desplazamiento como metfora del rollo, que es un papiro que se desplaza para leer Mens y ventanas Cortar y pegar, basadas en el diseo de pginas de una imprenta

Metafora del escritorio

El ordenador invisible
El objetivo final de las metforas es hacer el ordenador invisible para el usuario La metfora puede llegar a ser transparente al usuario y no requerir de l ningn esfuerzo cognitivo

Metodologa de creacin
Las metforas visuales han de disearse de acuerdo con una metodologa Fases del diseo de metforas:

Definicin funcional

Identificacin de problemas del usuario

Generacin de la metfora

Evaluacin de la metfora

Metodologa de creacin

Definicin funcional
Definicin funcional

Lo primero es entender cmo funciona aquello que se va a modelar con la metfora

Qu puede hacer el sistema (anlisis de requisitos) Qu puede hacer el usuario (anlisis de tareas)

Metodologa de creacin

Identificacin de problemas del usuario

Definicin funcional Identificacin de problemas del usuario

Examinar la forma en que los usuarios realizan las tareas Analizar las dificultades que se encuentran Ver como utilizan funcionalidades similares y que problemas tienen Mostrar a los usuarios un prototipo del sistema y observar cmo lo utilizan

Metodologa de creacin

Generacin de la metfora
Definicin funcional Identificacin de problemas del usuario Generacin de la metfora

Observar el entorno de trabajo del usuario Encontrar una relacin entre la informacin familiar y la nueva Estudiar el grado de coincidencia y las diferencias que existen Elegir la representacin grfica ms adecuada

Metodologa de creacin

Evaluacin de la metfora
Definicin funcional Identificacin de problemas del usuario Generacin de la metfora

Evaluacin de la metfora

Una vez generadas varias metforas, se evalan para escoger la ms adecuada a la funcionalidad

Metodologa de creacin

Evaluacin de la metfora
Puntos para evaluar la utilidad de la metfora: Volumen Cuanta estructura nos proporciona la metfora. Una metfora con poca estructura nos ser poco til. Aplicabilidad Qu parte de la estructura aplicable es relevante para el problema. Evaluar lo que pueda llevar al usuario en la direccin incorrecta o le pueda hacer caer en falsas expectativas. Representatividad. Fcil de representar?. La metfora ideal tiene representacin visual, auditiva y palabras asociadas Adecuacin a la audiencia Los usuarios tienen que entender la metfora, porque aunque cumpla los otros criterios no nos sirve. Extensibilidad Qu ms pueden hacer las metforas? Una metfora puede tener otras partes de la estructura que pueden ser tiles mas adelante.

Metodologa de creacin

Otra versin
1. Identificar el tipo de comparacin.
Debemos encontrar una relacin entre la informacin familiar y la nueva.
Por ejemplo la metfora del escritorio puede ser adecuada para la descripcin del sistema de ordenador. Los objetos en un escritorio se pueden coger, ubicar y manipular. En el ordenador, los objetos (representados por iconos) que se asemejan a papeles y carpetas pueden ser manipulados. Coger un documento es equivalente a presionar el botn del ratn sobre el icono y arrastrar.

No todas las comparaciones son adecuadas.

Ejemplo. El sistema ha finalizado su actividad: metfora de funeral

Metodologa de creacin

Otra versin
2. Grado de ajuste.
Estudiar el grado de coincidencia y diferencias que existen. Ejemplo. Mquina de escribir: Posicin de teclas igual, pero no existe las opciones hacia atrs ni suprimir un carcter. El problema surge cuando no existe una relacin completa entre la tarea conocida y la nueva.

Diseo de metforas
Las metforas pueden conseguir su efectividad a travs de asociaciones:
Podemos asociar clases y atributos a objetos familiares Podemos asociar procesos y algoritmos a verbos de accin

Tipos de metforas:
De objetos: libro, lbum, agenda, escritorio, biblioteca
De actividades: visita, exploracin, viaje De lugares: casa, plaza, museo, ciudad, isla

Diseo de metforas

Objetos familiares
Escritorio: dibujos, ficheros, carpetas, papeles, clips, notas de papel. Documentos: libros, captulos, marcadores, figuras; peridicos, secciones; revistas, artculos; cartas; formularios. Fotografa: lbumes, fotos, portafotos. Televisin: programas, canales, redes, anuncios comerciales, guas. Disco compacto, cassette, grabaciones, pistas, jukeboxes. Pila de cartas: cartas, pilas. Juegos: reglas del juego, piezas del juego, tablero de juego.

Diseo de metforas

Objetos familiares
Pelculas: rollos, bandejas de transparencias, presentaciones, rollos, pelculas, teatros. Contenedores: estanteras, cajas, compartimentos. rboles: races, tronco, ramas, hojas. Red, diagrama, mapa: nodos, enlaces, hitos, regiones, etiquetas, bases (fondos), leyenda. Ciudades: regiones, hitos, caminos, casas, habitaciones, ventanas, mesas.

Diseo de metforas

Verbos
Ejemplos tpicos de conceptos de accin 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: aadir (nuevo), copiar Borrar: tirar, destruir, perder, reciclar, borrar (temporal o permanentemente) Evaluar: Mover botn, desplazar puntero, rodar, girar Vaciar, flujo: agua (tubos, ros), electricidad

Ejemplos

Papelera de reciclaje

Ejemplos

Papelera de reciclaje
La papelera es una herramienta habitual en la mayora de las culturas avanzadas Sirve para poner todos los papeles u otros elementos que no sirven para despus tirarlo como basura El smbolo de reciclar es habitual en nuestra cultura Tenemos una papelera que permite reciclar los objetos que depositamos en ella

Ejemplos

Tijera (Cortar)

Las tijeras nos representan su funcionalidad de cortar papel, ropa, etc.. La metfora nos permite cortar un trozo de documento, dibujo, hoja de clculo Su enlace con el portapapeles tiene que ser aprendido

Ejemplos

Herramientas de dibujo
Se usan elementos muy conocidos y de significado intuitivo para el diseador

Ejemplo

Pote de pintura (Relleno de color)

El pote de pintura es un objeto muy comn y de comprensin fcil El pote de pintura que se vaca queremos hacer comprender al usuario que lo que haremos ser llenar el interior de un determinado objeto con determinado color.

Ejemplos

Portapapeles

Esta metfora pretende cubrir una componente del sistema operativo que nos permite pasar informacin entre aplicaciones

Ejemplos

Correo electrnico

Cubre la funcin de gestionar correo electrnico

Ejemplos

Carro de la compra

Ejemplos

Aplicaciones y sitios web

Neopets, web de mascotas virtuales www.neopets.com

Ejemplos

Aplicaciones y sitios web

Nero 7.0

Ejemplos

Aplicaciones y sitios web

Amplitube, emulador de efectos para guitarras elctricas

Ejemplos

Aplicaciones y sitios web

Square Circle Media, agencia creativa http://www.sqcircle.com/

Ejemplos

Aplicaciones y sitios web

Medal of Honor Allied Assault

Ejemplos

Aplicaciones y sitios web

Agencynet, agencia creativa http://www.agencynet.com/

Ejemplos

Aplicaciones y sitios web

Ejemplo de errores
Asociaciones inadecuadas
Se utiliza la metfora del reproductor de vdeo para controlar una impresora ???

Ejemplo de errores
Asociaciones inadecuadas
Los iconos no tienen un significado intuitivo

Ejemplo de errores
Extensin de la metfora con funciones no intuitivas
Para expulsar el disco se arrastra el icono a la papelera

Ejemplo de errores
Caso de estudio: Apple Quicktime 4
interfaz de consumidor, diseada para parecerse a un producto fsico. Intencin: ser ms fcil transportar la informacin. Resultado: (1) no se pueden transportar los conocimientos sobre interaccin con el ordenador, y (2) el programa se ve sujeto innecesariamente a las limitaciones del objeto fsico http://homepage.mac.com/bradster/iarchitect/qtime.htm

Diseo de metforas

Ejercicio
Objetivo:
Disear un conjunto de metforas para la gestin de una biblioteca de imgenes digitales

Pasos:
Escoger los objetos que estn 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 accin

Diseo de metforas

Ejercicio paso 1
Escoger los objetos que estn implicados:
Estantera lbum Hoja Foto

Diseo de metforas

Ejercicio paso 2
Asociar un elemento visual a cada objeto

Estantera

lbum

Hoja

Foto

Diseo de metforas

Ejercicio paso 3
Escoger los verbos asociados a las acciones que se pueden ejecutar
Crear estantera, lbum, hoja, foto Aadir estantera, lbum, hoja, foto Borrar estantera, lbum, hoja, foto Seleccionar lbum, hoja, foto Mover lbum, hoja, foto

Diseo de metforas

Ejercicio paso 4
Construir un elemento visual para cada accin
Crear/Aadir Borrar

Seleccionar

Mover

Conclusiones
Las metforas constituyen un elemento fundamental de las interfaces actuales Hemos expuesto una visin general de su historia y algunos ejemplos actuales Hemos aprendido algunas ideas sobre cmo disear metforas