You are on page 1of 78

LA METÁFORA EN

INTERACCIÓN HUMANO COMPUTADOR

Metáfora Actualizada noviembre 2012 Centro Ingeniería de Software y Sistemas ISYS 1


Agenda

• Modelando la IU

• Metáforas

• Tipos de Metáforas

• Metáfora del escritorio

• Creación de metáforas

Metáfora Actualizada noviembre 2012 10


Modelando la Interfaz de Usuario
¿Quiénes son los participantes?
• El usuario
Compra el producto e interactúa
Perspectiva
Modelo deldel con el sistema a
usuario
usuario
través de su interfaz para realizar una tarea

• El equipo multidisciplinario de diseño


Diseña interfaces usables, orientadas a darle al
Modelo
usuario todas las deldel
Perspectiva diseñador
facilidades, eldiseñador
confort y el poder
para realizar una tarea

• El desarrollador
Construye el producto
Modelo acorde
deldel a las especificaciones
desarrollador
Perspectiva desarrollador
Metáfora Actualizada noviembre 2012 11
Modelando la Interfaz de Usuario

Modelo del
Diseñador

Modelo del Modelo del


Usuario Desarrollador

Metáfora Actualizada noviembre 2012 12


… y la Usabilidad

Desarrollar software involucra individuos


que trabajan juntos y que interactúan
para producir un producto USABLE

¿Qué es USABILIDAD?

Metáfora Actualizada noviembre 2012 13


Metáfora Actualizada noviembre 2012 14
Enlace Banana

H H
C
C C
H H
C C
H H
Fórmula Modelo Mental
Química del Profesor

Metáfora Actualizada noviembre 2012 15


Múltiples Modelos Mentales

Metáfora Actualizada noviembre 2012 16


Metáfora

• Origen Griego: Metaphora, traslación


– Metà: después
– Pherien: llevar
• Consiste en expresar una idea valiéndose de otra,
con la que guarda analogía o semejanza
• Aplicación de una palabra o de una expresión a
un objeto o a un concepto, al cual no denota
literalmente, con el fin de sugerir una
comparación (con otro objeto o concepto) y
facilitar su comprensión.

Metáfora Actualizada noviembre 2012 17


La Metáfora en IHC
• Es una vía 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
conectándolas mentalmente con otros
procesos previamente aprendidos
• Las metáforas tienen un papel dominante
en el diseño de las IU actuales

Metáfora Actualizada noviembre 2012 18


La Metáfora en IHC
El uso de metáforas adecuadas en el diseño 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

Metáfora Actualizada noviembre 2012 19


La Metáfora en IHC (cont.)

El uso de metáforas además…

• ayudan al usuario a entender más


rápidamente cómo moverse por un
producto interactivo
• permite formar un modelo mental de una
nueva situación transformando, mediante
analogía, el conocimiento que se tiene de
un entorno conocido.

Metáfora Actualizada noviembre 2012 20


La Metáfora y su Carga Cognitiva

“... lo que pasa de un carro a otro”


• ¿Cuál es la carga?
– Las similitudes, proyecciones

• ¿Cómo interpretar “alta o baja carga”?


– ¿Son evidentes las similitudes o proyecciones?
– Número de elementos a manipular para lograr el
significado correcto (7 2)

Metáfora Actualizada noviembre 2012 22


Algunos Conceptos Básicos
• Signo: estímulo cuya imagen mental está asociada a otro
estímulo que ese signo tiene por función evocar

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

!"#$%
• Símbolo: Es un vehículo o medio universal que transmite una
idea abstracta de carácter arbitrario asignado a una forma
convencional. Un símbolo es la representación perceptible de
una realidad

!"#
Metáfora Actualizada noviembre 2012 23
Símbolos…

¿Se necesita saber chino?

Metáfora Actualizada noviembre 2012 24


Algunos Conceptos Básicos (cont.)

• Marca: una forma visual


creada o transferida a un
soporte dado
(representación individual o
corporativa)

• Imagen: se refiere a toda


representación visual que
presentan relación directa
con el objeto representado

• Emblema: es una
representación concreta de
un concepto

Metáfora Actualizada noviembre 2012 25


Algunos Conceptos Básicos

Logotipo: es un grupo de letras, símbolos,


abreviaturas, cifras etc., fundidas en un solo
bloque para facilitar una composición
tipográfica, no es más que la firma de la
compañía 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
acompañar la marca

Metáfora Actualizada noviembre 2012 26


Ejemplos de Conceptos

Lo
o mejor
ejo de
del a
azúcar
úca ssin sus c
calorías

SU MAMA EN MANOS DE ESPECIALISTAS

Esta representación es a través de un CONCEPTO


Metáfora Actualizada noviembre 2012 27
Agenda

• Modelando la IU

• Metáforas

• Tipos de Metáforas

• Metáfora del escritorio

• Creación de metáforas

Metáfora Actualizada noviembre 2012 28


Metáfora Actualizada noviembre 2012 29
¿Qué es una Metáfora?

• Una metáfora es la representación de un


objeto o de una acción
• En las interfaces de usuario las metáforas
deben ser familiares al usuario y reflejar
bien el dominio de la aplicación
• Una metáfora 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)

Metáfora Actualizada noviembre 2012 30


Metáforas: Ejemplo
Cuando nos encontramos con una nueva
herramienta tecnológica tendemos a
compararla con alguna cosa conocida

Metáfora Actualizada noviembre 2012 31


Metáforas: Ejemplo
Cuando nos encontramos con una nueva
herramienta tecnológica tendemos a
compararla con alguna cosa conocida

retorno

teclas

barra esp.

Metáfora Actualizada noviembre 2012 32


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

Metáfora Actualizada noviembre 2012 33


... pero lo que no pasa, puede entorpecer

La Paleta

Restricción
no evidente

Metáfora Actualizada noviembre 2012 34


¿Qué significa diseñar metáforas adecuadas?

• Establecer metáforas adecuadas significa


que los objetos en la interfaz deben tener
una analogía directa con los objetos en el
ambiente del usuario
• La interfaz debe usar términos y conceptos
familiares al usuario
• La metáfora debe ser coherente en su
aspecto y consistente en su uso
• Pueden ser universales o específicas a una
cultura.

Metáfora Actualizada noviembre 2012 35


Actu izada noviembre 2012
Actualizada 12

Ejemplo: Bote de Pintura (Pintar)

• El bote de pintura es un objeto muy


común y de fácil comprensión
• Con el bote de pintura que se vacía se
quiere indicar al usuario que lo que se
hace es llenar de un color el interior de
un determinado objeto

Metáfora Actualizada
Actual
alizada noviembre 2012
20 36
Ejemplo: Correo

• El correo es un elemento habitual en


diversas culturas. Permite enviar
información escrita en papel a un
destinatario normalmente lejano
• Esta metáfora se utiliza para el correo
electrónico

Metáfora Actualizada noviembre 2012 37


Acerca de las Metáforas: Ejemplos

Metáfora Actualizada noviembre 2012 38


Metáforas: Contraejemplos

• Las metáforas se basan en


asociaciones percibidas de manera
similar por el diseñador y el usuario
• Si el usuario no tiene la misma base
cultural que el desarrollador, la
metáfora falla

Metáfora Actualizada noviembre 2012 39


Metáforas: Contraejemplos

• Asociaciones inadecuadas

Se utiliza la
metáfora del
reproductor de
video para
controlar una
impresora
¿¿¿???

Metáfora Actualizada noviembre 2012 40


Metáforas: Contraejemplos

• Extensión de la metáfora con funciones


no intuitivas

Al arrastrar el
icono del
disquete a la
papelera se
expulsa el
disquete ¿¿¿???

Metáfora Actualizada noviembre 2012 41


Tipología de las Metáforas

• Metáforas verbales
• Metáforas organizacionales
• Metáforas funcionales
• Metáforas ontológicas
• Metáforas de orientación
• Metáforas estructurales
• Metáforas visuales

Metáfora Actualizada noviembre 2012 42


Metáforas Verbales
• Expresión 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
• Aplicación de una palabra o de una expresión a
un objeto o un concepto, al cual no denota
literalmente, con el fin de sugerir una
comparación (con otro objeto o concepto) y
facilitar su comprensión (RAE)
• Ejemplos: navegar, ojos esmeralda, cabello de
oro
Metáfora Actualizada noviembre 2012 43
Metáforas Verbales

• Constituyen una parte integrante del lenguaje y


aparecen en las conversaciones cotidianas

• Ejemplos:
- ahorrar, gastar, desaprovechar (dinero) tiempo
- defender, atacar, retirar (conceptos bélicos) Ideas

- navegar, explorar, visitar, inmersión, web, red,


mapa, página, home, ancla, bookmark,
ventana…

Metáfora Actualizada noviembre 2012 44


Metáforas Organizacionales

• Se fundamentan en la estructura existente de un


grupo, sistema u organización
• Ejemplo: un sitio web de una tienda se agrupa en
departamentos o secciones como las tiendas
reales (Panadería, carnicería, 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 metáfora: si es un sitio de compras,
no es conveniente organizarlo como reflejo de la
estructura corporativa de la empresa
Metáfora Actualizada noviembre 2012 45
Metáfora Actualizada noviembre 2012 46
Metáforas 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 cómo puede reutilizar
parte de su trabajo en la misma o diferentes
aplicaciones.

Metáfora Actualizada noviembre 2012 47


Metáforas de Orientación
• Tiene relación con la orientación y cómo una
persona entiende su lugar en el espacio

• Ejemplos:
– Tener un bajón
– 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

Metáfora Actualizada noviembre 2012 48


Metáforas Ontológicas
• Transformación de procesos complejos en objetos y
substancias
• Pueden ser:
a. familiares (fácil de entender): escritorio
b. de transporte (fácil de extender): planilla electrónica
• Ejemplos:
– No me entra en la cabeza
– Estar saturado
– Llegaron buscando fama y fortuna
– Míralo por el lado bueno
– La vida me ha dado tanto

Metáfora Actualizada noviembre 2012 49


Metáforas Estructurales
• Estructurar una experiencia o actividad en
términos de otra

• Ejemplos:
– Trenzar una jugada (fútbol)
– Perder el hilo (de la conversación)
– Atar cabos
– Hilar muy fino
– Al hilo de lo que iba diciendo...

Metáfora Actualizada noviembre 2012 50


Metáforas Visuales

• Consiste en una imagen que permite representar


alguna “cosa” de tal manera que el usuario puede
reconocer lo que representa y por extensión
comprender su propósito
• Una metáfora visual es la asociación de un objeto
gráfico o un texto a un objeto o una acción
Metáfora Actualizada noviembre 2012 51
Metáforas Visuales
• Se basan en elementos gráficos familiares para la
mayoría de la gente.
• Por ejemplo: un sitio de música 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…

Metáfora Actualizada noviembre 2012 52


Metáfora Actualizada noviembre 2012 54
Actualizada no embre 2012

Metáfora Actualizada noviembre


novi
viembre 2012
2012 55
Metáfora Actualizada noviembre 2012 56
Metáforas Visuales
• Es una imagen que nos permite
representar alguna cosa de tal
manera que el usuario puede
reconocer lo que representa y por
extensión comprender su propósito
• Antiguamente, sólo existía el texto
en los computadores

• 1981: Xerox desarrolla el primer


entorno “metaforado”
– Diseñó una interfaz visual basada
en la oficina física (utilizando
también interfaces verbales)

Metáfora Actualizada noviembre 2012 57


Metáforas Visuales: Metáfora Global

• La metáfora global es una metáfora


que establece el marco para las otras
metáforas del sistema
La metáfora del escritorio se puede
considerar como una metáfora global
• Es importante que todas las metáforas
se integren adecuadamente en la
metáfora global

Metáfora Actualizada noviembre 2012 58


Metáfora Global: Ejemplo

Cuarto de juegos
Metáfora Actualizada noviembre 2012 59
La Metáfora del Escritorio

Metáfora Actualizada noviembre 2012 60


La Metáfora del Escritorio

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

Metáfora Actualizada noviembre 2012 61


La Metáfora del Escritorio

• En el diseño de interfaces basadas en metáforas,


el equipo de Xerox en Palo Alto fue uno de los
pioneros con la introducción de la metáfora 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
• Más de 20 años después, la metáfora del
escritorio está presente en la mayoría de las PC,
independientemente del sistema operativo
• Desde ese momento el Mac reinará como
paradigma de usabilidad de un entorno gráfico.

Metáfora Actualizada noviembre 2012 62


La Metáfora del Escritorio

Escritorio: Archivos, Carpetas, Block de Notas,


Calculadora, Hojas de cálculo, Papelera, Reloj, Calendario

Esta representación se realiza a través de un


conjunto de objetos y acciones
Metáfora Actualizada noviembre 2012 63
Metáfora del Escritorio: ¿Cómo 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 físicas están ausentes
– Las carpetas no pesan, no hacen ruido cuando se abren
• Por otra parte tienen propiedades “mágicas”
– 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.

Metáfora Actualizada noviembre 2012 64


La Metáfora del Escritorio

• Oficina física • Oficina Virtual

–Documento
–Carpetas
–Archivadores
–Escritorio
–Papelera

Metáfora Actualizada noviembre 2012


La Metáfora del Escritorio

Metáfora Actualizada noviembre 2012 67


La Metáfora del Escritorio

Metáfora Actualizada noviembre 2012 68


La Metáfora del Escritorio

Metáfora Actualizada noviembre 2012 69


La Metáfora del Escritorio

Fue creada hace más de 20 años


cuando la computadora era de uso
individual, hoy en día las personas no
sólo crean y almacenan documentos
sino que también se comunican,
comparten y crean colaborativamente a
través de redes, esto supone un desafío
para romper con la metáfora del
escritorio quizás a otra más adaptada a
estos tiempos

Metáfora Actualizada noviembre 2012 70


Beneficios de las Metáforas

• 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
más accesibles a una mayor
diversidad de usuarios.
Metáfora Actualizada noviembre 2012 71
Limitaciones de las Metáforas

• Pueden infringir reglas culturales


• Pueden restringir a los diseñadores en la
manera como conceptualizan el espacio
del problema
• Obligan al usuario a comprender el
sistema en términos de métaforas
• Limita la imaginación de los diseñadores
en la búsqueda de nuevos modelos
conceptuales.

Metáfora Actualizada noviembre 2012 72


Limitaciones de las Metáforas

• Hay contextos en los que las


metáforas no funcionan: cuando el
diseñador es forzado a agregar
funciones imprevistas a una metáfora
la solución puede ser confusa

• El paso del tiempo: pueden llegar a


ser obsoletas

Metáfora Actualizada noviembre 2012 73


Características de una buena Metáfora
• Es Familiar
• Facilita el aprendizaje
• Auxilia a la memorización
• 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
Metáfora Actualizada noviembre 2012 74
Características de una buena Metáfora

• Debe ser consistente, aplicándose 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 información
superflua o innecesaria
Metáfora Actualizada noviembre 2012 75
Diseñar Metáforas Adecuadas

• Establecer metáforas adecuadas significa


que los objetos en la interfaz deben tener
una analogía directa con los objetos en el
ambiente del usuario
• La interfaz debe usar términos y
conceptos familiares al usuario
• La metáfora debe ser coherente en su
aspecto y consistente en su uso
• Pueden ser universales o específicos a
una cultura.

Metáfora Actualizada noviembre 2012 76


El Computador Invisible

• El objetivo final de las metáforas


es hacer el computador invisible
para el usuario
• La metáfora puede llegar a ser
transparente al usuario y no
requerir de él ningún esfuerzo
cognitivo

Metáfora Actualizada noviembre 2012 77


Creación: Consejos Prácticos

Definir el contexto

Metáfora Actualizada noviembre 2012 78


Creación: Consejos Prácticos

Definir el contexto: ejemplo


Fuera de Contexto

Dentro del Contexto

Brocha, Pintar

¿Copiar formato?

Metáfora Actualizada noviembre 2012 79


Creación: Consejos Prácticos

Definir un Lenguaje de Iconos

Vocabulario

Gramática + =

Document = Application + DocType [+ Template]


[+ Assistant]

Metáfora Actualizada noviembre 2012 80


Creación: Consejos Prácticos

Definir un Lenguaje de Iconos

Metáfora Actualizada noviembre 2012 81


Creación de Metáforas: Ejercicio

• Objetivo: Diseñar un conjunto de


metáforas para la gestión de una
biblioteca de imágenes digitales
• Pasos:
1. Escoger los objetos que están 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
acción

Metáfora Actualizada noviembre 2012 82


Creación de Metáforas: Paso 1

Escoger los objetos que están implicados:

– Estantería
– Álbum
– Hoja
– Foto

Metáfora Actualizada noviembre 2012 83


Creación de Metáforas: Paso 2

Asociar un elemento visual a cada objeto

Estantería Álbum Hoja Foto

Metáfora Actualizada noviembre 2012 84


Creación de Metáforas: Paso 3
Escoger los verbos asociados a las acciones
que se pueden ejecutar
– Crear
estantería, álbum, hoja, foto
– Añadir
estantería, álbum, hoja, foto
– Borrar
estantería, álbum, hoja, foto
– Seleccionar
álbum, hoja, foto
– Mover
álbum, hoja, foto

Metáfora Actualizada noviembre 2012 85


Creación de Metáforas: Paso 4

Construir un elemento visual para cada acción

Crear/Añadir Borrar

Seleccionar Mover

Metáfora Actualizada noviembre 2012 86


La Usabilidad y las Metáforas

ATRIBUTOS:
- Aprendizaje
- Eficiencia
- Memorización
- Baja rata de
errores
- Satisfacción
Metáfora Actualizada noviembre 2012 87
¿Nuevas Metáforas del Escritorio?
BumpTop expande la metáfora del escritorio
con técnicas expresivas análogas a nuestros
escenarios típicos del mundo real

Metáfora Actualizada noviembre 2012 88


Para finalizar…

Escoge tres
metáforas y escribe
una palabra por cada
una de ellas

Metáfora Actualizada noviembre 2012 89