1 CA IHCI Metaforas 1

LA METFORA EN
INTERACCIN HUMANO COMPUTADOR
Metfora
Actualizada noviembre 2012
Centro Ingeniera de Software y Sistemas ISYS 1
PICTONARY
Metfora
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
A Jugar Pictonary: ejemplo
10 puntos
Metfora
10 puntos
Metfora
10 puntos
Metfora
10 puntos
Metfora
A jugar Pictonary en lnea
http://www.isketch.net/isketch.shtml
Metfora
Metfora
Agenda
Modelando la IU
Metforas
Tipos de Metforas
Metfora del escritorio
Creacin de metforas
Metfora
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
11
Modelando la Interfaz de Usuario

Modelo del
Diseador
Modelo del
Usuario
Metfora
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
13
Metfora
14
Enlace Banana
H
H
H
H
C
Frmula
Qumica
Metfora
Modelo Mental
del Profesor
15
Mltiples Modelos Mentales
Metfora
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
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
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
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
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
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
23
Smbolos
Se necesita saber chino?
Metfora
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
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
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
27
Agenda
Modelando la IU
Metforas
Tipos de Metforas
Metfora del escritorio
Creacin de metforas
Metfora
28
Metfora
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
30
Metforas: Ejemplo
Cuando nos encontramos con una nueva
herramienta tecnolgica tendemos a
compararla con alguna cosa conocida
Metfora
31
Metforas: Ejemplo
Cuando nos encontramos con una nueva
herramienta tecnolgica tendemos a
compararla con alguna cosa conocida
retorno
teclas
barra esp.
Metfora
32
Metforas: Ejemplo
Los conocimientos sobre los elementos de
un dominio familiar se traspasan a los
elementos de otro no familiar
Metfora
33
... pero lo que no pasa, puede entorpecer
La Paleta
Restriccin
no evidente
Metfora
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
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
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
37
Acerca de las Metforas: Ejemplos
Metfora
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
39
Asociaciones inadecuadas
Se utiliza la
metfora del
reproductor de
video para
controlar una
impresora
???
Metfora
40
Extensin de la metfora con funciones
no intuitivas
Al arrastrar el
icono del
disquete a la
papelera se
expulsa el
disquete ???
Metfora
41
Tipologa de las Metforas

Metforas verbales
Metforas organizacionales
Metforas funcionales
Metforas ontolgicas
Metforas de orientacin
Metforas estructurales
Metforas visuales
Metfora
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
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
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
45
Metfora
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
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
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
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
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
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
52
Metfora
54
Metfora
55
Metfora
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
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
58
Metfora Global: Ejemplo
Cuarto de juegos
Metfora
59
La Metfora del Escritorio
Metfora
60
Picture from http://www.dynamicdiagrams.com/design/memex/model.htm#download

Metfora
61

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
62

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

Oficina fsica
Documento
Carpetas
Archivadores
Escritorio
Papelera
Metfora
Oficina Virtual
Metfora
67
Metfora
68
Metfora
69

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
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
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
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
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
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
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
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
77
Creacin: Consejos Prcticos

Definir el contexto
Metfora
78

Definir el contexto: ejemplo
Fuera de Contexto
Dentro del Contexto
Brocha, Pintar
Copiar formato?
Metfora
79

Definir un Lenguaje de Iconos
Vocabulario
Gramtica
Document = Application + DocType [+ Template]

[+ Assistant]
Metfora
80

Definir un Lenguaje de Iconos
Metfora
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
82
Creacin de Metforas: Paso 1

Escoger los objetos que estn implicados:
Estantera
lbum
Hoja
Foto
Metfora
83

Asociar un elemento visual a cada objeto
Estantera
Metfora
lbum
Hoja
Foto
84

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

Construir un elemento visual para cada accin
Metfora
Crear/Aadir
Borrar
Seleccionar
Mover
86
La Usabilidad y las Metforas

ATRIBUTOS:
- Aprendizaje
- Eficiencia
- Memorizacin
- Baja rata de
errores
- Satisfaccin
Metfora
87
Nuevas Metforas del Escritorio?

BumpTop expande la metfora del escritorio
con tcnicas expresivas anlogas a nuestros
escenarios tpicos del mundo real
Metfora
88
Para finalizar
Escoge tres
metforas y escribe
una palabra por cada
una de ellas
Metfora
89

1 CA IHCI Metaforas 1

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

1 CA IHCI Metaforas 1

Hochgeladen von

Copyright:

Verfügbare Formate

LA METFORA EN

INTERACCIN HUMANO COMPUTADOR

Actualizada noviembre 2012

Centro Ingeniera de Software y Sistemas ISYS 1

Actualizada noviembre 2012

Reglas de nuestro juego

Actualizada noviembre 2012

A Jugar Pictonary: ejemplo

Actualizada noviembre 2012

A Jugar Pictonary: ejemplo

Actualizada noviembre 2012

A Jugar Pictonary: ejemplo

Actualizada noviembre 2012

A Jugar Pictonary: ejemplo

Actualizada noviembre 2012

A jugar Pictonary en lnea

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

Modelando la Interfaz de Usuario

El equipo multidisciplinario de diseo

Actualizada noviembre 2012

Modelando la Interfaz de Usuario

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

Mltiples Modelos Mentales

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

La Metfora en IHC (cont.)

Actualizada noviembre 2012

La Metfora y su Carga Cognitiva

Cmo interpretar alta o baja carga?

Actualizada noviembre 2012

Algunos Conceptos Bsicos

Actualizada noviembre 2012

Actualizada noviembre 2012

Algunos Conceptos Bsicos (cont.)

Actualizada noviembre 2012

Algunos Conceptos Bsicos

Actualizada noviembre 2012

SU MAMA EN MANOS DE ESPECIALISTAS

Esta representacin es a travs de un CONCEPTO

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

Actualizada noviembre 2012

... pero lo que no pasa, puede entorpecer

Actualizada noviembre 2012

Qu significa disear metforas adecuadas?

Actualizada noviembre 2012

Ejemplo: Bote de Pintura (Pintar)

Actualizada noviembre 2012

Actualizada noviembre 2012

Acerca de las Metforas: Ejemplos

Actualizada noviembre 2012

Actualizada noviembre 2012