Metáforas IHC

Universidad Católica Escuela Profesional de
Ingeniería de Sistemas
de Santa María
Dr. Héctor Raúl

c ión Velarde Bedregal
r a c
Inte ano r
Hum pu tado
Com
2 0- 1
rs o 20
Cu
7. Metáforas
Tomado de:
La interacción Persona Ordenador de Julio Abascal
Agenda
7. Metáforas
7.1. Objetivos
7.2. Generalidades
7.3. Metáforas verbales
7.4. Metáforas visuales
7.6. Metáfora del escritorio
7.6. Metodología de creación de metáforas
7.7. Diseño de metáforas
7.8. Ejemplos de metáforas
7.9. Conclusiones
11:55 Interacción Humano Computador - IHC Sesión 08 - 2/76

6.1. Objetivos
 Aprender qué es una metáfora

 Conocer qué son las metáforas verbales, visuales y
globales
 Conocer la metáfora del escritorio y su historia
 Ver el uso de las metáforas en las interfaces actuales,
sus ventajas y sus inconvenientes
 Aprender a diseñar y aplicar metáforas con
efectividad

6.2. Generalidades
Un modelo contiene los conceptos y expectativas que

una persona desarrolla a través de su experiencia.
 Modelo del Diseñador
 Modelo del Programador
 Modelo del Usuario

6.2. Generalidades
Modelo conceptual del usuario

Modelo del programador
Experiencias del mundo real: Principios y guías de diseño de interfaces
Tareas,
Procesos,
Herramientas, etc.
Plataforma
Sistema Operativo
Herramientas de
Desarrollo, etc.
Modelo del
Diseñador
Modelo conceptual
del usuario
Modelo del
Programador

6.2. Generalidades: Modelo mental
“Modelo Mental (o modelo conceptual) es una

representación interna de cómo los usuarios entienden e
interactúan con un sistema”

6.2. Generalidades: Objetivos de los diseñadores
 Diseñar y facilitar el proceso de desarrollo de un

modelo mental efectivo.
 Transferir el conocimiento del mundo que les rodea al
mundo de los ordenadores de forma que los usuarios
confíen en sus modelos para interactuar con el
ordenado.
Metáfora

6.2. Generalidades: de la interfaz
 “Una metáfora es una figura del lenguaje en la que un

trabajo o frase denota una clase de objeto u acción
que es usada en lugar de otra para sugerir un
parecido o analogía entre ellas”.
 Los diseñadores adoptan metáforas porque ayudan a
estructurar aspectos del sistema o interfaz en
términos más familiares y comunes del dominio.
 Tipos de Metáforas:
 Verbales.
 Visuales.
 Compuestas.

6.2. Generalidades: Modelo mental del usuario
La norma CUA (Acceso de usuario común) recomienda

cinco formas para intentar descubrir el modelo mental del
usuario:
 Análisis de los trabajos del usuario
 Encuestas y entrevistas a los usuarios potenciales
 Visitas a los usuarios en los lugares de trabajo
 Reacciones de los usuarios
 Test de usabilidad.

6.2. Generalidades: Modelo del Programador
Es más fácil de identificar:

 Escribe el código del programa
 Selecciona plataforma de desarrollo, sistema operativo,
herramientas de desarrollo, etc.

Generalidades: Modelo del Diseñador
Modelo del
Diseñador
Modelo
conceptual Modelo del
del usuario programador

6.2. Generalidades: El mito
Modelo del Diseñador:

6.2. Generalidades: El mito
Paradigmas en el diseño de interfaces:

 De la Tecnología
Se basa en entender como trabajan las cosas
 De la Metáfora
Se basa en intuir como trabajan las cosas
 Idiomático
Se basa en aprender como se llevan a cabo las
cosas.

6.2. Generalidades: Paradigma de la tecnología
 Es simple
 Está muy extendido
 La interfaz se expresa en términos de su construcción
 Se basa en el modelo de implementación
 El usuario debe comprender como trabaja el software

6.2. Generalidades: Paradigma de la metáfora
 Confía en las conexiones intuitivas en las que no hay

que conocer la mecánica del software
 Basar el diseño de una interfaz en una metáfora no
solo no es útil sino que es perjudicial
 No hay suficientes metáforas
 El éxito de Apple Macintosh no es achacable a la
metáfora.

6.2. Generalidades: Paradigma de la metáfora
Inconvenientes:
 Las metáforas no escalan bien
 Confían en asociaciones percibidas de manera similar
por el diseñador y el usuario
 Las metáforas son difíciles de encontrar
 Restringen nuestro pensamiento

6.2. Generalidades: Paradigma Idiomático
 Soluciona los problemas de los dos anteriores

 Se basa en la forma en la que aprendemos idiomas
 Los elementos de una GUI (interfaz gráfica de
usuario) son elementos que entendemos
idiomáticamente más que intuirlos metafóricamente.

6.2. Generalidades
• 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
• La metáfora del escritorio introducida por el
computador Macintosh 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
comunidades de usuarios más diversas

6.2. Generalidades: Ejemplos

Área de Aplicación Metáfora Conocimiento familiar

Entorno operativo El escritorio Tareas de oficina, gestión de ficheros
Hojas de cálculo Libro contable Tablas encolumnadas
Entorno de aprendizaje Viajes Giras, guías, navegación


6.3. Metáforas Verbales
• Metáfora:
 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”

6.3. Metáforas Verbales
• Las metáforas son una parte integrante del lenguaje y

aparecen en las conversaciones cotidianas
 Tiempo (abstracto) -> ahorrar, gastar, desaprove-
char (dinero)
 Ideas (abstracto) -> defender, atacar, retirar
(conceptos bélicos)
 Navegar, explorar, visitar, inmersión, web, red,
mapa, página, home, ancla, bookmark, etc.

6.3. Metáforas Verbales: Ejemplos
• Cuando nos encontramos con una nueva herramienta

tecnológica tendemos a compararla con alguna cosa
conocida

6.3. Metáforas Verbales: Ejemplos
• Los conocimientos sobre los elementos de un dominio

familiar se traspasan a los elementos de otro nuevo.
retorno
Teclas
Barra
esp.

6.3. Metáforas Verbales: Ventajas y limitaciones
• Ventajas: basándonos en el conocimiento previo

podemos desarrollar más rápidamente el conocimiento
del nuevo dominio
 Presionar una tecla significa ver un carácter en la
pantalla
• Limitaciones: existen diferencias
 La tecla de retroceso 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.

6.3. Metáforas Verbales: Ventajas y limitaciones
Conclusión
Las metáforas verbales son muy útiles para ayudar
a los usuarios a iniciarse en el uso de un nuevo
sistema.

6.4. Metáforas Visuales
• Metáfora visual
Imagen que nos permite representar una cosa de
manera que el usuario puede reconocer lo que
representa y por extensión comprender su propósito
• Va desde pequeñas imágenes hasta pantallas
completas

6.4. Metáforas Visuales: Ejemplos
• Los conocimientos sobre los elementos de un dominio

familiar se traspasan a los elementos de otro no
familiar.



6.4. Metáforas Visuales: Orígenes
• Xerox, primera metáfora visual

 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,
carpetas, bandejas, archivadores

64. Metáforas Visuales: Orígenes
• Xerox, primera metáfora visual

 La metáfora de organización global que
se presentaba en la pantalla fue la del
escritorio y se parecía al área de trabajo
de una típica mesa de oficina
 Los ficheros se transformaron en
representaciones pictóricas

6.4. Metáforas Visuales: Intuición
• Las personas entendemos las metáforas por intuición

 Intuición: cognición inmediata. Conocimiento de
una cosa obtenida sin utilizar inferencia o
razonamiento
• Comprendemos su significado porque las conectamos
mentalmente con procesos que hemos aprendido.

6.4. Metáforas Visuales: Intuición
• 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 es fácil que la metáfora falle
¿?

6.4. Metáforas Visuales: Global
• La metáfora global es una metáfora que nos da 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

6.4. Metáforas Visuales: Global
Explorando el sistema solar

6.4. Metáforas Visuales: Ejemplo
Cuarto de Juegos

6.4. Metáforas Visuales: Ejemplo
Agenda Electrónica

Universidad Católica de Santa María

6.6. Metáfora del Escritorio
• Fue la primera metáfora

global
• Está muy extendida
• Reproduce una oficina
con todos sus objetos

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

6.6. Metáfora del Escritorio ¿Cómo funciona?
• 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.

6.6. Metáfora del Escritorio: Historia
Steve Jobs Xerox Star Xerox PARC

Apple California
1981 Alan Kay
Lisa Microsoft
1983
Macintosh XWindows
1984 Windows 1.0 1984, Athena
1985
Windows 2.0 XWindows

1986 1986, comercial

6.6. Metáfora del Escritorio: Compuestas
• La metáfora del escritorio se ha combinado con otras

metáforas para permitir que los usuarios 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
 Cortar y pegar, basadas en el diseño de páginas de
una imprenta

6.6. Metáfora del Escritorio: El computador invisible
• El objetivo final de las metáforas es hacer al

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

6.6. Metodología de Creación
• Las metáforas visuales han de diseñarse de acuerdo

con una metodología
• Fases del diseño de metáforas:
Identificación
Identificación Generación
Generación Evaluación
Evaluación
Definición
Definición de
de problemas
problemas de
de la
la de
de la
la
funcional
funcional del
del usuario
usuario metáfora
metáfora metáfora
metáfora
 Observar el entorno de trabajo del usuario

Lo primero es entender
 Encontrar unaUnacómo funciona
vez
relación entreaquello
Examinar
generadas la
la formaqueen
varias que los usuarios
metáforas,
información realizan
se evalúan
se va a modelar
familiar ycon lapara
metáfora
la nueva las tareas
escoger la más adecuada a la funcionalidad.
 Qué puede hacer
 Estudiar el gradoel sistema
Analizar (análisis de
las dificultades
de coincidencia y las que se encuentran
requisitos)
diferencias que existen Mostrar a los usuarios un prototipo del sistema y
 Qué puede hacer
Elegir la el usuario observar
representación (análisis de
cómo
gráfica más tareas)
lo utilizan
adecuada

6.6. Metodología de Creación: Evaluac. de la Metáfora
• Puntos para evaluar la utilidad de la metáfora:

 Volumen de la estructura que proporciona
 Aplicabilidad de la estructura. Falsas expectativas
 Representatividad. ¿Fácil de representar?. La
metáfora ideal tiene representación visual, auditiva
y palabras asociadas
 Adecuación a la audiencia
 Extensibilidad

6.6. Metodología de Creación: Ejemplo de errores
• Asociaciones inadecuadas
Se utiliza la metáfora del

reproductor de vídeo para
controlar una impresora
¿¿¿???

• Asociaciones inadecuadas
Los iconos no tienen un

significado intuitivo

• Extensión de la metáfora con funciones no intuitivas
Para expulsar el disco se

arrastra el icono a la papelera

• Caso Estudio: Apple Quicktime 4
interfaz de consumidor,
diseñada para parecerse a un
producto físico. Intención: será
más fácil transportar la
información. Resultado: (1) no
se pueden transportar los
conocimientos sobre interac-
ción con el computador, y (2) el
programa se ve sujeto
innecesariamente a las
limitaciones del objeto físico
http://homepage.mac.com/bradster/iarchitect/qtime.htm

6.7. 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 procesos y algoritmos a verbos
de acción
• Tipos de metáforas:
 De objetos: libro, álbum, agenda, escritorio,
biblioteca
 De actividades: visita, exploración, viaje
 De lugares: casa, plaza, museo, ciudad, isla

6.7. Diseño de Metáforas: Objetos Familiares
• Escritorio
 Dibujos, ficheros, carpetas, papeles, clips, notas de
papel
• Fotografía
 Álbumes, fotos, portafotos
• Juegos
 Reglas del juego, piezas del juego, tablero de juego
• Contenedores
 Estanterías, cajas, compartimentos
• Ciudades
 Hitos, perfiles, casas

6.7. Diseño 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. Escoger los verbos asociados a las acciones que
se pueden ejecutar
4. Construir un elemento visual para cada acción
Procedan a resolver el ejercicio, paso por paso.

1. Escoger los objetos que están implicados

 Estantería
 Álbum
 Hoja
 Foto

2. Asociar un elemento visual a cada objeto
Estantería Álbum
Foto
Hoja

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

4. Construir un elemento visual para cada acción
Borrar
Crear/Añadir
Seleccionar Mover

6.8. Ejemplos de Metáforas
• Objetos y acciones
• Aplicaciones y sitios web

6.8. Ejemplos de Metáforas: Papelera
• Es una herramienta habitual

 Sirve para poner elementos que ya no sirven antes
de tirarlos a la basura
• El símbolo de reciclaje es habitual
 Los objetos se pueden recuperar

6.8. Ejemplos de Metáforas: Tijeras (cortar)
• Las tijeras dan la funcionalidad de cortar papel, tela,

etc.
• La metáfora 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

6.8. Ejemplos de Metáforas: Herramientas de dibujo
• Se usan elementos muy conocidos y de significado

intuitivo para el diseñador
• El bote de pintura que se vacía indica que se llenará
de un color el interior de un objeto

6.8. Ejemplos de Metáforas: Carro de compra

6.8. Ejemplos de Metáforas: Aplicaciones y Sitios WEB
www.healthy.net

www.ncsa.uiuc.edu/Cyberia/Expo

Neopets, web de mascotas virtuales www.neopets.com

Nero 7.0

Amplitube, emulador de efectos para guitarras eléctricas

Total Club Manager 2005

Square Circle Media, agencia creativa: http://www.sqcircle.com/

Medal of Honor Allied Assault

Agencynet, agencia creativa: http://www.agencynet.com/


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

Universidad Católica de Santa María
Dudas o Preguntas
Escuela Profesional de Ingeniería de Sistemas 76

Metáforas IHC

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Metáforas IHC

Cargado por

Copyright:

Formatos disponibles

Universidad Católica Escuela Profesional de

Dr. Héctor Raúl

11:55 Interacción Humano Computador - IHC Sesión 08 - 2/76

 Aprender qué es una metáfora

11:55 Interacción Humano Computador - IHC Sesión 08 - 3/76

Un modelo contiene los conceptos y expectativas que

11:55 Interacción Humano Computador - IHC Sesión 08 - 4/76

Modelo conceptual del usuario

11:55 Interacción Humano Computador - IHC Sesión 08 - 5/76

“Modelo Mental (o modelo conceptual) es una

11:55 Interacción Humano Computador - IHC Sesión 08 - 6/76

 Diseñar y facilitar el proceso de desarrollo de un

11:55 Interacción Humano Computador - IHC Sesión 08 - 7/76

 “Una metáfora es una figura del lenguaje en la que un

11:55 Interacción Humano Computador - IHC Sesión 08 - 8/76

La norma CUA (Acceso de usuario común) recomienda

11:55 Interacción Humano Computador - IHC Sesión 08 - 9/76

Es más fácil de identificar:

11:55 Interacción Humano Computador - IHC Sesión 08 - 10/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 11/76

Modelo del Diseñador:

11:55 Interacción Humano Computador - IHC Sesión 08 - 12/76

Paradigmas en el diseño de interfaces:

11:55 Interacción Humano Computador - IHC Sesión 08 - 13/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 14/76

 Confía en las conexiones intuitivas en las que no hay

11:55 Interacción Humano Computador - IHC Sesión 08 - 15/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 16/76

 Soluciona los problemas de los dos anteriores

11:55 Interacción Humano Computador - IHC Sesión 08 - 17/76

• Utilizamos metáforas para comunicar conceptos

11:55 Interacción Humano Computador - IHC Sesión 08 - 18/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 19/76

Área de Aplicación Metáfora Conocimiento familiar

11:55 Interacción Humano Computador - IHC Sesión 08 - 20/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 21/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 22/76

• Las metáforas son una parte integrante del lenguaje y

11:55 Interacción Humano Computador - IHC Sesión 08 - 23/76

• Cuando nos encontramos con una nueva herramienta

11:55 Interacción Humano Computador - IHC Sesión 08 - 24/76

• Los conocimientos sobre los elementos de un dominio

11:55 Interacción Humano Computador - IHC Sesión 08 - 25/76

• Ventajas: basándonos en el conocimiento previo

11:55 Interacción Humano Computador - IHC Sesión 08 - 26/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 27/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 28/76

• Los conocimientos sobre los elementos de un dominio

11:55 Interacción Humano Computador - IHC Sesión 08 - 29/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 30/76

11:55 Interacción Humano Computador - IHC Sesión 08 - 31/76

• Xerox, primera metáfora visual

11:55 Interacción Humano Computador - IHC Sesión 08 - 32/76

• Xerox, primera metáfora visual

11:55 Interacción Humano Computador - IHC Sesión 08 - 33/76

• Las personas entendemos las metáforas por intuición

11:55 Interacción Humano Computador - IHC Sesión 08 - 34/76

• Las metáforas se basan en asociaciones percibidas

11:55 Interacción Humano Computador - IHC Sesión 08 - 35/76

• La metáfora global es una metáfora que nos da el

11:55 Interacción Humano Computador - IHC Sesión 08 - 36/76

Explorando el sistema solar

11:55 Interacción Humano Computador - IHC Sesión 08 - 37/76