You are on page 1of 86

LA METFORA EN

INTERACCIN HUMANO COMPUTADOR

Metfora

Actualizada noviembre 2012

Centro Ingeniera de Software y Sistemas ISYS 1

PICTONARY
Metfora

Actualizada noviembre 2012

Reglas de nuestro juego


Cada persona va a representar una
palabra y una frase
Contar con 1 minuto para hacer cada
representacin
Si alguien de la audiencia logra
determinar la palabra y/o frase, tanto
esa persona como quien hizo la
representacin acumulan 10 puntos
Y, a jugar ....
Metfora

Actualizada noviembre 2012

A Jugar Pictonary: ejemplo

10 puntos
Metfora

Actualizada noviembre 2012

A Jugar Pictonary: ejemplo

10 puntos
Metfora

Actualizada noviembre 2012

A Jugar Pictonary: ejemplo

10 puntos
Metfora

Actualizada noviembre 2012

A Jugar Pictonary: ejemplo

10 puntos
Metfora

Actualizada noviembre 2012

A jugar Pictonary en lnea

http://www.isketch.net/isketch.shtml
Metfora

Actualizada noviembre 2012

Metfora

Actualizada noviembre 2012

Agenda
Modelando la IU
Metforas
Tipos de Metforas
Metfora del escritorio
Creacin de metforas

Metfora

Actualizada noviembre 2012

10

Modelando la Interfaz de Usuario


Quines son los participantes?

El usuario
Compra el producto
e interacta
con el sistema a
Perspectiva
usuario
Modelo
deldel
usuario
travs de su interfaz para realizar una tarea

El equipo multidisciplinario de diseo


Disea interfaces usables, orientadas a darle al
Modelo
deldel
diseador
Perspectiva
usuario todas las
facilidades,
eldiseador
confort y el poder
para realizar una tarea

El desarrollador

Construye el producto
acorde
a las especificaciones
Modelo
deldel
desarrollador
Perspectiva
desarrollador

Metfora

Actualizada noviembre 2012

11

Modelando la Interfaz de Usuario


Modelo del
Diseador
Modelo del
Usuario

Metfora

Actualizada noviembre 2012

Modelo del
Desarrollador

12

y la Usabilidad
Desarrollar software involucra individuos
que trabajan juntos y que interactan
para producir un producto USABLE

Qu es USABILIDAD?

Metfora

Actualizada noviembre 2012

13

Metfora

Actualizada noviembre 2012

14

Enlace Banana
H

H
H

H
C

Frmula
Qumica

Metfora

Actualizada noviembre 2012

Modelo Mental
del Profesor

15

Mltiples Modelos Mentales

Metfora

Actualizada noviembre 2012

16

Metfora
Origen Griego: Metaphora, traslacin
Met: despus
Pherien: llevar
Consiste en expresar una idea valindose de otra,
con la que guarda analoga o semejanza
Aplicacin de una palabra o de una expresin a
un objeto o a un concepto, al cual no denota
literalmente, con el fin de sugerir una
comparacin (con otro objeto o concepto) y
facilitar su comprensin.

Metfora

Actualizada noviembre 2012

17

La Metfora en IHC
Es una va para plasmar el modelo del
usuario en el sistema
Toma elementos que son familiares al
usuario y los utiliza como anclas
conceptuales que facilitan el aprendizaje
del usuario en el nuevo contexto
Se comprende su significado
conectndolas mentalmente con otros
procesos previamente aprendidos
Las metforas tienen un papel dominante
en el diseo de las IU actuales
Metfora

Actualizada noviembre 2012

18

La Metfora en IHC
El uso de metforas adecuadas en el diseo de
una interfaz de usuario:
ayuda a establecer expectativas acerca de
su utilidad y funcionamiento
facilita y acelera el aprendizaje del
funcionamiento de un producto
ayuda a establecer similitudes con
mecanismos y procesos conocidos por el
usuario, aplicando lo que ya conoce dentro
de un dominio no familiar
Metfora

Actualizada noviembre 2012

19

La Metfora en IHC (cont.)


El uso de metforas adems
ayudan al usuario a entender ms
rpidamente cmo moverse por un
producto interactivo
permite formar un modelo mental de una
nueva situacin transformando, mediante
analoga, el conocimiento que se tiene de
un entorno conocido.

Metfora

Actualizada noviembre 2012

20

La Metfora y su Carga Cognitiva


... lo que pasa de un carro a otro
Cul es la carga?
Las similitudes, proyecciones

Cmo interpretar alta o baja carga?


Son evidentes las similitudes o proyecciones?
Nmero de elementos a manipular para lograr el
significado correcto (7 2)

Metfora

Actualizada noviembre 2012

22

Algunos Conceptos Bsicos


Signo: estmulo cuya imagen mental est asociada a otro
estmulo que ese signo tiene por funcin evocar

+, -,,
Icono: Es todo signo que originalmente tiene semejanza con
el objeto al cual se refiere


Smbolo: Es un vehculo o medio universal que transmite una
idea abstracta de carcter arbitrario asignado a una forma
convencional. Un smbolo es la representacin perceptible de
una realidad

Metfora

Actualizada noviembre 2012

23

Smbolos
Se necesita saber chino?

Metfora

Actualizada noviembre 2012

24

Algunos Conceptos Bsicos (cont.)


Marca: una forma visual
creada o transferida a un
soporte dado
(representacin individual o
corporativa)
Imagen: se refiere a toda
representacin visual que
presentan relacin directa
con el objeto representado
Emblema: es una
representacin concreta de
un concepto
Metfora

Actualizada noviembre 2012

25

Algunos Conceptos Bsicos


Logotipo: es un grupo de letras, smbolos,
abreviaturas, cifras etc., fundidas en un solo
bloque
para
facilitar
una composicin
tipogrfica, no es ms que la firma de la
compaa que se puede aplicar a todas clases
de material impreso o visual
Slogan: Frase publicitaria corta y contundente,
que resume el beneficio del producto. Suele
acompaar la marca

Metfora

Actualizada noviembre 2012

26

Ejemplos de Conceptos
Lo mejor del azcar sin sus caloras

SU MAMA EN MANOS DE ESPECIALISTAS

Esta representacin es a travs de un CONCEPTO


Metfora

Actualizada noviembre 2012

27

Agenda
Modelando la IU
Metforas
Tipos de Metforas
Metfora del escritorio
Creacin de metforas

Metfora

Actualizada noviembre 2012

28

Metfora

Actualizada noviembre 2012

29

Qu es una Metfora?
Una metfora es la representacin de un
objeto o de una accin
En las interfaces de usuario las metforas
deben ser familiares al usuario y reflejar
bien el dominio de la aplicacin
Una metfora es un modelo conceptual
similar en unos aspectos a la entidad real
pero que tiene su propiedades particulares.
Combina conocimiento familiar y nuevos
conceptos (ejemplo: el escritorio o desktop)
Metfora

Actualizada noviembre 2012

30

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

Metfora

Actualizada noviembre 2012

31

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

teclas

barra esp.

Metfora

Actualizada noviembre 2012

32

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

Metfora

Actualizada noviembre 2012

33

... pero lo que no pasa, puede entorpecer

La Paleta

Restriccin
no evidente
Metfora

Actualizada noviembre 2012

34

Qu significa disear metforas adecuadas?


Establecer metforas adecuadas significa
que los objetos en la interfaz deben tener
una analoga directa con los objetos en el
ambiente del usuario
La interfaz debe usar trminos y conceptos
familiares al usuario
La metfora debe ser coherente en su
aspecto y consistente en su uso
Pueden ser universales o especficas a una
cultura.
Metfora

Actualizada noviembre 2012

35

Ejemplo: Bote de Pintura (Pintar)


El bote de pintura es un objeto muy
comn y de fcil comprensin
Con el bote de pintura que se vaca se
quiere indicar al usuario que lo que se
hace es llenar de un color el interior de
un determinado objeto

Metfora

Actualizada noviembre 2012

36

Ejemplo: Correo
El correo es un elemento habitual en
diversas culturas. Permite enviar
informacin escrita en papel a un
destinatario normalmente lejano
Esta metfora se utiliza para el correo
electrnico

Metfora

Actualizada noviembre 2012

37

Acerca de las Metforas: Ejemplos

Metfora

Actualizada noviembre 2012

38

Metforas: Contraejemplos
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, la
metfora falla

Metfora

Actualizada noviembre 2012

39

Metforas: Contraejemplos
Asociaciones inadecuadas
Se utiliza la
metfora del
reproductor de
video para
controlar una
impresora
???
Metfora

Actualizada noviembre 2012

40

Metforas: Contraejemplos
Extensin de la metfora con funciones
no intuitivas
Al arrastrar el
icono del
disquete a la
papelera se
expulsa el
disquete ???
Metfora

Actualizada noviembre 2012

41

Tipologa de las Metforas


Metforas verbales
Metforas organizacionales
Metforas funcionales
Metforas ontolgicas
Metforas de orientacin
Metforas estructurales
Metforas visuales

Metfora

Actualizada noviembre 2012

42

Metforas Verbales
Expresin 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
Aplicacin de una palabra o de una expresin a
un objeto o un concepto, al cual no denota
literalmente, con el fin de sugerir una
comparacin (con otro objeto o concepto) y
facilitar su comprensin (RAE)
Ejemplos: navegar, ojos esmeralda, cabello de
oro
Metfora

Actualizada noviembre 2012

43

Metforas Verbales
Constituyen una parte integrante del lenguaje y
aparecen en las conversaciones cotidianas
Ejemplos:
- ahorrar, gastar, desaprovechar (dinero)
tiempo
- defender, atacar, retirar (conceptos blicos) Ideas

- navegar, explorar, visitar, inmersin, web, red,


mapa, pgina, home, ancla, bookmark,
ventana
Metfora

Actualizada noviembre 2012

44

Metforas Organizacionales
Se fundamentan en la estructura existente de un
grupo, sistema u organizacin
Ejemplo: un sitio web de una tienda se agrupa en
departamentos o secciones como las tiendas
reales (Panadera, carnicera, higiene, limpieza)
de esta manera, el usuario aplica su conocimiento
de la vida real al sitio web y puede comenzar a
moverse
Es importante que el usuario encuentre sentido y
utilidad a la metfora: si es un sitio de compras,
no es conveniente organizarlo como reflejo de la
estructura corporativa de la empresa
Metfora

Actualizada noviembre 2012

45

Metfora

Actualizada noviembre 2012

46

Metforas Funcionales
Se apoyan en tareas o funciones que el
usuario puede realizar en su vida cotidiana
Ejemplo: Adobe Photoshop o MS Word y en
general todos los programas que funcionan
bajo sistemas de ventanas tienen las
funciones Copiar, Cortar y Pegar, que permiten
que el usuario entienda cmo puede reutilizar
parte de su trabajo en la misma o diferentes
aplicaciones.
Metfora

Actualizada noviembre 2012

47

Metforas de Orientacin
Tiene relacin con la orientacin y cmo una
persona entiende su lugar en el espacio
Ejemplos:
Tener un bajn
Bajos fondos
Altas esferas
Eso est fuera de lugar
Dar la espalda
Decirlo de frente (a la cara)
Andar por las nubes
Poner los pies en la tierra
Metfora

Actualizada noviembre 2012

48

Metforas Ontolgicas
Transformacin de procesos complejos en objetos y
substancias
Pueden ser:
a. familiares (fcil de entender): escritorio
b. de transporte (fcil de extender): planilla electrnica
Ejemplos:
No me entra en la cabeza
Estar saturado
Llegaron buscando fama y fortuna
Mralo por el lado bueno
La vida me ha dado tanto
Metfora

Actualizada noviembre 2012

49

Metforas Estructurales
Estructurar una experiencia o actividad en
trminos de otra
Ejemplos:
Trenzar una jugada (ftbol)
Perder el hilo (de la conversacin)
Atar cabos
Hilar muy fino
Al hilo de lo que iba diciendo...

Metfora

Actualizada noviembre 2012

50

Metforas Visuales

Consiste en una imagen que permite representar


alguna cosa de tal manera que el usuario puede
reconocer lo que representa y por extensin
comprender su propsito
Una metfora visual es la asociacin de un objeto
grfico o un texto a un objeto o una accin
Metfora

Actualizada noviembre 2012

51

Metforas Visuales
Se basan en elementos grficos familiares para la
mayora de la gente.
Por ejemplo: un sitio de msica en la que los
usuarios puedan escuchar canciones, se les puede
proveer de tres iconos Play Pause y Stop, que
ya le son familiares en todos los aparatos de CD,
DVD, etc

Metfora

Actualizada noviembre 2012

52

Metfora

Actualizada noviembre 2012

54

Metfora

Actualizada noviembre 2012

55

Metfora

Actualizada noviembre 2012

56

Metforas Visuales
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
Antiguamente, slo exista el texto
en los computadores
1981: Xerox desarrolla el primer
entorno metaforado
Dise una interfaz visual basada
en la oficina fsica (utilizando
tambin interfaces verbales)
Metfora

Actualizada noviembre 2012

57

Metforas Visuales: Metfora Global


La metfora global es una metfora
que establece 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

Actualizada noviembre 2012

58

Metfora Global: Ejemplo

Cuarto de juegos
Metfora

Actualizada noviembre 2012

59

La Metfora del Escritorio

Metfora

Actualizada noviembre 2012

60

La Metfora del Escritorio

Picture from http://www.dynamicdiagrams.com/design/memex/model.htm#download


Metfora

Actualizada noviembre 2012

61

La Metfora del Escritorio


En el diseo de interfaces basadas en metforas,
el equipo de Xerox en Palo Alto fue uno de los
pioneros con la introduccin de la metfora del
escritorio para el sistema Star en 1981.
Luego, en 1984, fue utilizada en el sistema
operativo de la primera Mac, contribuyendo al
xito de Apple
Ms de 20 aos despus, la metfora del
escritorio est presente en la mayora de las PC,
independientemente del sistema operativo
Desde ese momento el Mac reinar como
paradigma de usabilidad de un entorno grfico.
Metfora

Actualizada noviembre 2012

62

La Metfora del Escritorio


Escritorio: Archivos, Carpetas, Block de Notas,

Calculadora, Hojas de clculo, Papelera, Reloj, Calendario

Esta representacin se realiza a travs de un


conjunto de objetos y acciones
Metfora

Actualizada noviembre 2012

63

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

Actualizada noviembre 2012

64

La Metfora del Escritorio


Oficina fsica

Documento
Carpetas
Archivadores
Escritorio
Papelera

Metfora

Actualizada noviembre 2012

Oficina Virtual

La Metfora del Escritorio

Metfora

Actualizada noviembre 2012

67

La Metfora del Escritorio

Metfora

Actualizada noviembre 2012

68

La Metfora del Escritorio

Metfora

Actualizada noviembre 2012

69

La Metfora del Escritorio


Fue creada hace ms de 20 aos
cuando la computadora era de uso
individual, hoy en da las personas no
slo crean y almacenan documentos
sino que tambin se comunican,
comparten y crean colaborativamente a
travs de redes, esto supone un desafo
para romper con la metfora del
escritorio quizs a otra ms adaptada a
estos tiempos
Metfora

Actualizada noviembre 2012

70

Beneficios de las Metforas


Facilita el aprendizaje de nuevos
sistemas
Ayudan al usuario a comprender el
modelo conceptual subyacente
Pueden ser muy innovadoras, y
permitir que el dominio de los
computadores y sus aplicaciones sean
ms accesibles a una mayor
diversidad de usuarios.
Metfora

Actualizada noviembre 2012

71

Limitaciones de las Metforas


Pueden infringir reglas culturales
Pueden restringir a los diseadores en la
manera como conceptualizan el espacio
del problema
Obligan al usuario a comprender el
sistema en trminos de mtaforas
Limita la imaginacin de los diseadores
en la bsqueda de nuevos modelos
conceptuales.
Metfora

Actualizada noviembre 2012

72

Limitaciones de las Metforas


Hay contextos en los que las
metforas no funcionan: cuando el
diseador es forzado a agregar
funciones imprevistas a una metfora
la solucin puede ser confusa
El paso del tiempo: pueden llegar a
ser obsoletas

Metfora

Actualizada noviembre 2012

73

Caractersticas de una buena Metfora


Es Familiar
Facilita el aprendizaje
Auxilia a la memorizacin
Logra ser comunicativa
Asiste a la Creatividad
Proporciona un mapa objetivo del mundo
real
Brinda unidad al modelo conceptual
Permite simplificar y facilitar los procesos de
Metfora

Actualizada noviembre 2012

74

Caractersticas de una buena Metfora


Debe ser consistente, aplicndose de
forma coherente a lo largo de todo el
sistema
Debe ser autoexplicativa a fin de facilitar
al usuario conocer las acciones posibles en
cada momento
Debe informar con claridad al usuario
acerca del estado actual del sistema y de
las consecuencias de sus acciones.
No desbordar al usuario con informacin
superflua o innecesaria
Metfora

Actualizada noviembre 2012

75

Disear Metforas Adecuadas


Establecer metforas adecuadas significa
que los objetos en la interfaz deben tener
una analoga directa con los objetos en el
ambiente del usuario
La interfaz debe usar trminos y
conceptos familiares al usuario
La metfora debe ser coherente en su
aspecto y consistente en su uso
Pueden ser universales o especficos a
una cultura.
Metfora

Actualizada noviembre 2012

76

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

Metfora

Actualizada noviembre 2012

77

Creacin: Consejos Prcticos


Definir el contexto

Metfora

Actualizada noviembre 2012

78

Creacin: Consejos Prcticos


Definir el contexto: ejemplo
Fuera de Contexto
Dentro del Contexto

Brocha, Pintar

Copiar formato?
Metfora

Actualizada noviembre 2012

79

Creacin: Consejos Prcticos


Definir un Lenguaje de Iconos
Vocabulario
Gramtica

Document = Application + DocType [+ Template]


[+ Assistant]

Metfora

Actualizada noviembre 2012

80

Creacin: Consejos Prcticos


Definir un Lenguaje de Iconos

Metfora

Actualizada noviembre 2012

81

Creacin de Metforas: Ejercicio


Objetivo: Disear un conjunto de
metforas para la gestin de una
biblioteca de imgenes digitales
Pasos:
1. Escoger los objetos que estn implicados
2. Asociar un elemento visual a cada objeto
3. Determinar las acciones (verbos) que se
pueden ejecutar
4. Construir un elemento visual para cada
accin
Metfora

Actualizada noviembre 2012

82

Creacin de Metforas: Paso 1


Escoger los objetos que estn implicados:
Estantera
lbum
Hoja
Foto

Metfora

Actualizada noviembre 2012

83

Creacin de Metforas: Paso 2


Asociar un elemento visual a cada objeto

Estantera

Metfora

lbum

Actualizada noviembre 2012

Hoja

Foto

84

Creacin de Metforas: 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
Metfora

Actualizada noviembre 2012

85

Creacin de Metforas: Paso 4


Construir un elemento visual para cada accin

Metfora

Crear/Aadir

Borrar

Seleccionar

Mover

Actualizada noviembre 2012

86

La Usabilidad y las Metforas


ATRIBUTOS:
- Aprendizaje
- Eficiencia
- Memorizacin
- Baja rata de
errores
- Satisfaccin
Metfora

Actualizada noviembre 2012

87

Nuevas Metforas del Escritorio?


BumpTop expande la metfora del escritorio
con tcnicas expresivas anlogas a nuestros
escenarios tpicos del mundo real

Metfora

Actualizada noviembre 2012

88

Para finalizar

Escoge tres
metforas y escribe
una palabra por cada
una de ellas

Metfora

Actualizada noviembre 2012

89