Metafora

1. http://shererom.no-ip.org/memoria /Bibliografia/Adicional/Otros/ Interacción persona-ordenado
r
Metáforas

2. Objetivos Objetivos
Aprender qué es una metáfora 
Conocer qué son las metáforas verbales visuales y

Conocer qué son las metáforas verbales
,
visuales y
globales

Conocer la metáfora del escritorio y su historia

Conocer la metáfora del escritorio y su historia
Ver el uso de las metáforas en las interfaces actuales
lbl l d
Discutir
l
os pro
bl
emas y
l
as ventajas
d
e su uso
Aprender cómo diseñar y aplicar las metáforas con
fdd
e
f
ectivi
d
a
d

3. Contenido Contenido
Metáforas 
Metáforas verbales

Metáforas verbales
Metáforas visuales
áf d l
Met
áf
ora
d
e
l
escritorio
Metodología de creación de metáforas
Diseño de metáforas
E
j
em
p
los de metáforas
jp

4. Metáforas Metáforas
Utilizamos metáforas para comunicar conceptos
abstractos de una forma familiar y accesible
Las metáforas tienen un papel dominante en el diseño
de las interfaces actuales

L táf d l it i i t d id l d d

L
a

me
táf
ora
d
e
l
escr
it
or
i
o
i
n
t
ro
d
uc
id
a

por

e
l
or
d
ena
d
or

Macintosh y de uso generalizado actualmente supuso un cambio en la usabilidad de los ordenadores
El uso de metáforas ayuda a los desarrolladores a
construir programas que puedan ser usados por
id d d i á di
comun
id
a
d
es
d
e

usuar
i
os

m
á
s
di
versas

5. Metáforas verbales Metáforas verbales
Metáfora:

Figura retórica que consiste en usar una palabra o frase en un

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
Ejemplo:
“cabellos de oro” por “cabellos rubios”
Las metáforas son una parte integrante del lenguaje y
aparecen en las conversaciones cotidianas
Tiempo (abstracto) -> ahorrar, gastar, desaprovechar (dinero)
Ideas (abstracto) -> defender, atacar, retirar (conceptos bélicos)
Navegar, explorar, visitar, inmersión, web, red, mapa, página,
home, ancla, bookmark, etc.

6. Metáforas verbales Ejemplo Ejemplo
Cuando nos encontramos con una nueva herramienta
tecnoló
g
ica tendemos a com
p
ararla con al
g
una cosa
gpg
conocida

7. Metáforas verbales Ejemplo Ejemplo
Los conocimientos sobre los elementos y relaciones en
un dominio familiar se tras
p
asan a los elementos
y

py
relaciones en otro no familiar
retorno
teclas teclas
barra esp.

8. Metáforas verbales Ventajas y limitaciones Ventajas y limitaciones
Ventajas: basándonos en el conocimiento previo
p
odemos desarrollar más rá
p
idamente el
pp conocimiento del nuevo dominio
Presionar una tecla significa ver un carácter visualizado en la
tll
pan
t
a
ll
a
Limitaciones: existen diferencias

La tecla de retorno mueve el carro físicamente mientras que

La tecla de retorno mueve el carro físicamente mientras que en el ordenador 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
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áforas visuales
Metáfora visual:
Es una ima
g
en
q
ue nos
p
ermite re
p
resentar al
g
una cosa de

gq p p g
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

La metáfora puede variar desde pequeñas imágenes hasta pantallas completas

10. Metáforas visuales Ejemplo Ejemplo

11. Metáforas visuales Orígenes Orígenes
Xerox, primera metáfora visual

Xerox Star
interfaz visual basada en la oficina física

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,
t bdj hid
carpe
t
as,
b
an
d
e
j
as,

arc
hi
va
d
ores
La metáfora de organización global que
se
p
resentaba en la
p
antalla fue la del
pp
escritorio y se parecía al área de trabajo de una típica mesa de oficina

Los ficheros se transformaron en

Los ficheros se transformaron en representaciones pictóricas

12. Metáforas visuales Intuición
Las personas entendemos las metáforas por intuición
Intuición: co
g
nición inmediata. Conocimiento de una cosa
g
obtenida sin utilizar inferencia o razonamiento
Comprendemos su significado porque las conectamos
li
menta
l
mente con otros procesos que prev
i
amente
hemos aprendido

13. Metáforas visuales Intuición
Las metáforas se basan en asociaciones percibidas
de manera similar
p
or el diseñador
y
el usuario
py
Si el usuario no tiene la misma base cultural que el
desarrollador es fácil que la metáfora falle

14. Metáforas visuales Mtáf lbl M
e
táf
ora

g
l
o
b
a
l
La metáfora global es una metáfora que nos da el
marco
p
ara las otras metáforas del sistema
p
La metáfora del escritorio se puede considerar como una
metáfora global
idláfi
Es
i
mportante que to
d
as
l
as met
áf
oras se
i
ntegren
adecuadamente en la metáfora global

15. Metáfora global Ejemplo Ejemplo Explorando el sistema solar

16. Metáfora global Ejemplo Ejemplo Cuarto de juegos

17. Metáfora global Ejemplo Ejemplo Agenda electrónica

18. Metáfora del escritorio Metáfora del escritorio
Fue la primera metáfora global 
Está muy extendida

Está muy extendida
Reproduce una oficina con
todos sus ob
j
etos
j

19. Metáfora del escritorio ¿Cómo funciona? ¿Cómo funciona?
Las carpetas son contenedores de documentos en el
mundo real
y
en el virtual
y
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

L t h id d b

L
as

carpe
t
as

no

pesan,

no
h
acen

ru
id
o

cuan
d
o

se

a
b
ren
Por otra parte tienen propiedades “mágicas”

Se puede poner el mismo documento en dos carpetas a la vez

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 Historia
Xerox Star
1981
Xerox PARC
California
Alan Ka
y
Steve Jobs
Apple
Lisa
y
Microsoft
1983
Windows 1.0
1985
Macintosh
1984
XWindows
1984, Athena
1985
Windows 2 0
XWindows
Windows 2
.
0
1986
XWindows
1986, comercial

21. Metafora del escritorio Metáforas compuestas
La metáfora del escritorio se ha combinado con
otras metáforas
p
ara
p
ermitir
q
ue los usuarios
pp q
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

Menús y ventanas
Cortar y pegar, basadas en el diseño de páginas de una
imprenta

22. Metafora del escritorio El ordenador invisible
El objetivo final de las metáforas es hacer el
ordenador invisible
p
ara el usuario
p
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 Metodología de creación
Las metáforas visuales son un aspecto importante
del diseño de un sistema interactivo
y
han de
y
diseñarse de acuerdo con una metodología
Fases del diseño de metáforas:
ó
Identificación de
Generación
Evaluación
Definici
ó
n
funcional
Identificación de los problemas del usuario
Generación de la metáfora
Evaluación de la metáfora

24. Metodología de creación Definición funcional Definición funcional
Lo primero es entender cómo funciona aquello que se
va a modelar con la metáfora
Qué puede hacer el sistema
Lo que está disponible para el usuario
Rapidez de respuesta del sistema
Hay que revisar bien el sistema

P b l t ti i tá d ll d

P
ro
b
ar

e
l
pro
t
o
ti
po,

s
i
es
tá d
esarro
ll
a
d
o
Revisar la documentación, si no lo está

25. Metodología de creación Identific problemas usuario Identific
.
problemas usuario
Analizar las dificultades del usuario 
Ver cómo utilizan funcionalidades similares y qué

Ver cómo utilizan funcionalidades similares y qué problemas tienen
Ex
p
licar lo
q
ue
q
ueremos hacer
y
ver si lo entienden
,

pqq y ,
enseñar el prototipo y ver cómo lo utilizan

26. Metodología de creación Generación de la metáfora Generación de la metáfora
Examen detallado de la manera tradicional de realizar
las tareas
Analizar oficinas, fábricas, escuelas, etc. y observar los
problemas que tienen los usuarios y las herramientas que
utilizan para resolverlos
Una vez identificados los problemas y las
herramientas que se utilizan, ver cuáles de ellas
envuelven algunas de las características que los envuelven algunas de las características que los usuarios encuentran difíciles de comprender

Estas son buenas candidatas para metáforas

Estas son buenas candidatas para metáforas

27. Metodología de creación Evaluación de la metáfora Evaluación de la metáfora
Una vez generadas varias metáforas, se evalúan para
esco
g
er la más adecuada a la funcionalidad
g
Puntos para evaluar la utilidad de la metáfora:
Volumende la estructura que proporciona Aplicabilidadde la estructura. Falsas expectativas
Representatividad. ¿Fácil de representar?. La metáfora ideal
tiene representación visual auditiva y palabras asociadas tiene representación visual
,
auditiva y palabras asociadas
Adecuacióna la audiencia
Extensibilidad

28. Metodología de creación Otra versió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

29. Diseño de metáforas 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
p
rocesos
y
al
g
oritmos a verbos de acción
pyg
Tipos de metáforas:

De objetos: libro álbum agenda escritorio biblioteca

De objetos: libro
,
álbum
,
agenda
,
escritorio
,
biblioteca
De actividades: visita, exploración, viaje 
De lugares: casa plaza museo ciudad isla

De lugares: casa
,
plaza
,
museo
,
ciudad
,
isla

30. Diseño de metáforas Objetos familiares Objetos familiares
Escritorio
Dibu
j
os
,
ficheros
,
car
p
etas
,

p
a
p
eles
,
cli
p
s
,
notas de
p
a
p
el
j, , p ,pp , p, pp
Fotografía
Álbumes, fotos, portafotos
Juegos
Reglas del juego, piezas del juego, tablero de juego
Contenedores
Estanterías, cajas, compartimentos

Ciudades

Ciudades
Hitos, perfiles, casas

31. Diseño de metáforas Ejercicio Ejercicio
Objetivo:
Diseño de un con
j
unto de metáforas
p
ara la
g
estión de una
jpg
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

Escoger los verbos asociados a las acciones que se pueden ejecutar
Construir un elemento visual para cada acción

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

33. Diseño de metáforas Ejercicio
paso 2
Ejercicio
–
paso 2
Asociar un elemento visual a cada objeto
Estantería Álbum Hoja Foto

34. Diseño de metáforas Ejercicio
paso 3
Ejercicio
–
paso 3
Escoger los verbos asociados a las acciones que se
pueden ejecutar
Crearestantería, álbum, hoja, foto
Añadirestantería, álbum, hoja, foto

Borrar
estantería álbum hoja foto

Borrar
estantería
,
álbum
,
hoja
,
foto
Seleccionarálbum, hoja, foto
Moverálbum, hoja, foto

35. Diseño de metáforas Ejercicio
paso 4
Ejercicio
–
paso 4
Construir unelemento visual para cada acción
Crear/Añadir Borrar Seleccionar Mover

36. Ejemplos de metáforas Ejemplos de metáforas
Objetos y acciones 
Páginas web

Páginas web

37. Ejemplos Papelera Papelera
La papelera es una herramienta habitual en la
ma
y
oría de las culturas avanzadas
y
Sirve para poner todos los papeles u otros elementos que
no sirven para después tirarlos a la basura
líbld ilj d áhbi l
E
l
s
í
m
b
o
l
o
d
e rec
i
c
l
a
j
e es ca
d
a vez m
á
s
h
a
bi
tua
l
La papelera permite reciclar los objetos depositados en ella

38. Ejemplos Tijera (Cortar) 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

39. Ejemplos Bote de pintura (Pintar) Bote de pintura (Pintar)
El bote de pintura es un objeto muy común y de fácil
com
p
rensión
p
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

40. Ejemplos Portapapeles Portapapeles
Esta metáfora pretende cubrir un componente del
sistema o
p
erativo
q
ue nos
p
ermite
p
asar
pqpp
información entre aplicaciones diferentes
Su uso es fácil de intuir, pero es una metáfora
pobre: no se puede recoger más de una cosa, no se
sabe de dónde vienen los documentos y carece de
historial historial
Hay aspectos que no cubre la metáfora y han de ser
aprendidos aprendidos

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

42. Ejemplos Páginas web Páginas web www.healthy.net

43. Ejemplos Páginas web Páginas web www.ncsa.uiuc.edu/Cyberia/Expo

44. Ejemplos Páginas web Páginas web

45. Conclusiones 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