Este documento trata sobre el uso de metáforas en el diseño de interfaces de usuario. Brevemente describe que las metáforas juegan un papel importante en los diseños de interfaces actuales, como la metáfora del escritorio introducida por el Macintosh. También cubre objetivos, ventajas y limitaciones de las metáforas, así como ejemplos comunes como la papelera y las herramientas de dibujo.

1. Diseño de Interfaces Profesor:
de Usuarios
Diaz Muñante Jorge
Ciclo 2012-1
Metaforas

2. Interfaz a la fama o vergüenza

5. Síntesis
En el diseño de las interfaces actuales, las
metáforas tienen un papel dominante.
La metáfora del escritorio introducida por
MacIntosh y de uso generalizado
actualmente, supuso un cambio en la
usabilidad de los computadoras.
El uso de las metáforas permite conseguir
maneras más eficientes y efectivas de
comunicarse con comunidades de
usuarios diversas.

6. Objetivos
Metáforas
Metáforas verbales
Metáforas visuales
Metáfora del escritorio
Metodología de creación de metáforas
Diseño de metáforas
Ejemplos de metáforas

7. Metáforas
 Sirven para traspasar conocimientos sobre un
dominio familiar a otro no familiar, ayudando a
construir programas que puedan ser usados por
comunidades de usuarios más diversas
 La metáfora del escritorio introducida por el
computador Macintosh supuso un gran avance en la
usabilidad de las computadoras
 El objetivo final de las metáforas es hacer el
computador invisible para el usuario
 La metáfora puede hacer la interfaz transparente al
usuario y no requerir de él ningún esfuerzo cognitivo

8. Metafora de un HW

9. Metáforas

10. 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”
 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.

11. Metáforas
Ejemplo
Cuando nos encontramos con una nueva
herramienta tecnológica tendemos a
compararla con alguna cosa conocida
retorno
teclas
barra esp.

12. Otro ejemplo
dibujo
Lapiz
Herramientas
dibujo
Paleta

13. Metáforas
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
visualizado en la pantalla
 Limitaciones: existen diferencias
 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 son muy útiles para
ayudar a los usuarios a iniciarse en el uso de un nuevo
sistema

14. Metáfora visual
Definíción
Es una imagen que nos permite
representar alguna cosa y que el usuario
puede reconocer lo que representa y por
extensión comprender su propósito
Basada en la idea del rollo de pergamino.

15. .....Metáfora visual
Las metáforas visuales combinan el
sistema y los dominios familiares en una
sola entidad
Los usuarios desarrollan modelos
mentales mas similares a la metáfora que
al mundo real
La metáfora es el modelo que se aprende

16. Metáforas visuales..
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

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

18. Dokeos – Aula virtual

19. Metáfora visual
Metáfora del escritorio

20. Metáforas compuestas
La metáfora del escritorio se ha
combinado con otras metáforas para
permitir a los usuarios que puedan hacer
un conjunto de tareas mas amplio
Ejemplos:
 La barra de desplazamiento como la metáfora
del rollo
 Menús y ventanas
 Cortar y pegar que se basa en el diseño de
páginas

21. Ejemplos
Papelera de reciclaje

22. Lista de Contactos
Libro de direcciones
es una mixtura

23. Lista de contactos
Rolodex
A-F
T-Z
J-S
Harleck, P.
Guttenburg, A.
Greenberg, S.
Dept Computer Science
University of Calgary

24. Ejemplos
Papelera
La papelera es una herramienta habitual
en la mayoría de las culturas avanzadas
 Sirve para poner todos los papeles o trozos
de elementos que no sirven para después
tirarlo como basura
El símbolo de reciclar es habitual en
nuestra cultura
Tenemos una papelera que permite
reciclar los objetos que depositamos en
ella

25. Ejemplos
Tijera
Las tijeras nos representan su
funcionalidad de cortar papel, ropa, etc..
La metáfora nos permite cortar un trozo
de documento, dibujo, hoja de cálculo
Su enlace con el portapapeles tiene que
ser aprendido

26. Ejemplo
Tarro de pintura y herramientas de dibujo
 El tarro de pintura es una objeto muy común y de
comprensión fácil
 El tarro de pintura que se vacía queremos hacer
comprender al usuario que lo que haremos será
llenar el interior de un determinado objeto

27. Ejemplos
Correo electrónico
Cubre la función de gestionar correo
electrónico

28. Ejemplo Metafora Visual

29. ¿Que le sugiere?

30. Metáfora global

32. Metáfora global
La metáfora global es una metáfora que
nos da el marco para todas las otras
metáforas del sistema
 Por ejemplo la metáfora de MacInstosh se
puede considerar como una metáfora global
Problemas
 Las metáforas que incluye puede o no que
tengan beneficios cognitivos por asociación

33. Metáfora global
Ejemplo
Agenda electrónica

35. Ejemplo de errores
Se utiliza la metáfora del reproductor de
vídeo para controlar una impresora
¿¿¿???

36. Ejemplo de errores
 Asociaciones inadecuadas
Los iconos no tienen un
significado intuitivo

37. Revo Desinstalador:
Las metáforas
ayudan a
comprender el
objetivo que
se
quiere alcanzar
Mantiene al usuario informado con respecto a las acciones que tomará

38. Metodología de creación
z Las metaforas visuales han de diseñarse
de acuerdo con una metodologia
z Fases del diseño de metaforas
Definición Identificación de Generación Evaluació
problemas del de la
funcional n de la
usuario metáfora
metáfora

39. Metodología de creación
Definición funcional
Entender como funciona la funcionalidad a
implementar la metáfora
 Que puede hacer el sistema
 Lo que está disponible para el usuario
 Rapidez de respuesta

40. Identificación de los problemas de
los usuarios
Analizar las dificultades del usuario
Ver como utilizan funcionalidades similares
y que problemas tienen
Explicar lo que queremos hacer y ver si lo
entienden, enseñar el prototipo y ver
como lo utilizan

41. Generación de la metáfora
Examen detallado de la manera de realizar
las tareas
 Analizar oficinas, fábricas, escuelas, etc.. y
observar los problemas que las personas
tienen y las herramientas que utilizan
Una vez identificados los problemas y las
herramientas que se utilizan ver cuales de
ellas envuelven algunas de las
características que los usuarios
encuentran difíciles de comprender
Estas son buenas candidatas para
metáforas

42. Metodología de creación
Evaluación de la metáfora
 Una vez generadas varias metáforas, se evalúan
para escoger la más adecuada a la funcionalidad
 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

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

44. Diseño de metáforas
Objetos familiares (1)
 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

45. Objetos familiares (2)
Disco compacto, cassette, grabaciones,
pistas
Pila de cartas: Cartas, pilas,
Juegos: reglas del juego, piezas del
juego, tablero de juego
Películas: Rollos, bandejas,
presentaciones, rollos, películas, teatros
Contenedores: Estanterías, cajas,
compartimentos

46. Objetos familiares (3)
Árboles: Raices, tronco, ramas, hojas
Red, diagrama, mapa: nodos, enlaces,
landmarks, regiones, etiquetas, bases
(fondos), leyenda
Ciudades: Regiones, casas, habitaciones,
ventanas, mesas

47. Verbos
 Ejemplos típicos de conceptos de acción y las
relaciones con los objetos:
 Mover: navegar, conducir, volar
 Localizar: apuntar, tocar, enmarcar elemento(s)
 Seleccionar: tocar elemento, grabar elemento, poner
dedo en elemento y moverlo
 Crear: añadir (nuevo), copiar
 Borrar: tirar, destruir, perder, reciclar, borrar (t/p)
 Evaluar: Mover botón, desplazar puntero, rodar
 Vaciar, flujo: agua (tubos, ríos), electricidad

48. Ejercicio
Diseño de un conjunto de metáforas
que permitan cubrir la gestión de
una librería de imágenes
 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 ejecutar
 Construir un elemento visual para cada acción

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

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

51. Diseño de metáforas
Ejercicio – 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

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

53. Ejemplos
Aplicaciones y páginas web
www.healthy.net

54. Ejemplos
Aplicaciones y páginas web

55. Ejemplos
Aplicaciones y páginas web
Amplitube, emulador de efectos
para guitarras eléctricas

56. Señales de transito absurdas

57. Señales de transito absurdas

58. Señales de transito absurdas

59. Señales de transito absurdas

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