Interaccin persona-ordenador

Metforas

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 y relaciones en

un dominio familiar se traspasan a los elementos y
relaciones en otro no familiar

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:
Es una imagen que nos permite representar alguna cosa de
tal manera que el usuario puede reconocer lo que representa
y por extensin comprender su propsito

La metfora puede variar desde pequeas imgenes

hasta pantallas completas

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 otros procesos que previamente
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

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

Microsoft

Lisa
1983
Macintosh
1984

Xerox PARC
California
Alan Kay

Windows 1.0
1985
Windows 2.0
1986

XWindows
1984, Athena

XWindows
1986, comercial

Metafora 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
Definicin
funcional
funcional

Identificacin
Identificacin
de
de problemas
problemas
del
del usuario
usuario

Generacin
Generacin
de
de la
la
metfora
metfora

Evaluacin
Evaluacin
de
de la
la
metfora
metfora

Metodologa de creacin

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

Identific. problemas usuario

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

Metodologa de creacin

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
Una vez generadas varias metforas, se evalan para
escoger la ms adecuada a la funcionalidad
Puntos para evaluar la utilidad de la metfora:
Volumen de la estructura que proporciona
Aplicabilidad de la estructura. Falsas expectativas
Representatividad. Fcil de representar?. La metfora ideal
tiene representacin visual, auditiva y palabras asociadas
Adecuacin a la audiencia
Extensibilidad

Metodologa de creacin

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

Metodologa de creacin

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

Metodologa de creacin

Ejemplo de errores
Extensin de la metfora con funciones no intuitivas
Al arrastrar el icono del
disquete a la papelera se
expulsa el disquete ???

Metodologa de creacin

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
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

Fotografa
lbumes, fotos, portafotos

Juegos
Reglas del juego, piezas del juego, tablero de juego

Contenedores
Estanteras, cajas, compartimentos

Ciudades
Hitos, perfiles, casas

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

Ejemplos de metforas
Objetos y acciones
Aplicaciones y sitios web

Ejemplos

Papelera
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 tirarlos a la basura

El smbolo de reciclaje es cada vez ms 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 metfora 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

Herramientas de dibujo
Se usan elementos muy conocidos y de significado
intuitivo para el diseador
El bote de pintura que se vaca indica que se llenar de
un color el interior de un objeto

Ejemplos

Carro de la compra

Ejemplos

Aplicaciones y sitios web

www.healthy.net

Ejemplos

Aplicaciones y sitios web

www.ncsa.uiuc.edu/Cyberia/Expo

Ejemplos

Aplicaciones y sitios web

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

Total Club Manager 2005

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/

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