Diseo de Interfaces

de Usuarios
Ciclo 2012-1

Metaforas

Profesor:
Diaz Muante Jorge

Interfaz a la fama o vergenza

Sntesis
En el diseo de las interfaces actuales, las
metforas tienen un papel dominante.
La metfora del escritorio introducida por
MacIntosh y de uso generalizado
actualmente, supuso un cambio en la
usabilidad de los computadoras.
El uso de las metforas permite conseguir
maneras ms eficientes y efectivas de
comunicarse con comunidades de
usuarios diversas.

Objetivos

Metforas

Metforas verbales
Metforas visuales
Metfora del escritorio

Metodologa de creacin de metforas

Diseo de metforas
Ejemplos de metforas

Metforas
Sirven para traspasar conocimientos sobre un
dominio familiar a otro no familiar, ayudando a
construir programas que puedan ser usados por
comunidades de usuarios ms diversas
La metfora del escritorio introducida por el
computador Macintosh supuso un gran avance en la
usabilidad de las computadoras
El objetivo final de las metforas es hacer el
computador invisible para el usuario
La metfora puede hacer la interfaz transparente al
usuario y no requerir de l ningn esfuerzo cognitivo

Metafora de un HW

Metforas

Metforas Verbales
Metfora:

Figura 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
Ejemplo:
cabellos de oro por cabellos rubios

Las metforas son una parte integrante del lenguaje y

aparecen en las conversaciones cotidianas
Tiempo (abstracto) -> ahorrar, gastar, desaprovechar
(dinero)
Ideas (abstracto) -> defender, atacar, retirar (conceptos
blicos)
Navegar, explorar, visitar, inmersin, web, red, mapa,
pgina, home, ancla, bookmark, etc.

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

teclas

barra esp.

Otro ejemplo

dibujo

Lapiz

Herramientas
dibujo
Paleta

Metforas
Ventajas y limitaciones
Ventajas: basndonos en el conocimiento previo
podemos desarrollar ms rpidamente el
conocimiento del nuevo dominio
Presionar una tecla significa ver un carcter
visualizado en la pantalla
Limitaciones: existen diferencias
La tecla de retorno mueve el carro fsicamente
mientras que en el ordenador se borra el carcter
No obstante, una vez asimiladas estas diferencias el
usuario construye un nuevo modelo mental

Conclusin: las metforas verbales son muy tiles para

ayudar a los usuarios a iniciarse en el uso de un nuevo
sistema

Metfora visual

Defincin

Es una imagen que nos permite

representar alguna cosa y que el usuario
puede reconocer lo que representa y por
extensin comprender su propsito

Basada en la idea del rollo de pergamino.

.....Metfora visual
Las metforas visuales combinan el
sistema y los dominios familiares en una
sola entidad
Los usuarios desarrollan modelos
mentales mas similares a la metfora que
al mundo real
La metfora es el modelo que se aprende

Metforas visuales..

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 es fcil que
la metfora falle

Intuicin
Las personas entendemos las metforas por
intuicin
Intuicin. Cognicin inmediata. Conocimiento de
una cosa obtenida sin utilizar inferencia o
razonamiento

Dokeos Aula virtual

Metfora visual

Metfora del escritorio

Metforas compuestas

La metfora del escritorio se ha

combinado con otras metforas para
permitir a los usuarios que puedan hacer
un conjunto de tareas mas amplio
Ejemplos:
La barra de desplazamiento como la metfora
del rollo
Mens y ventanas
Cortar y pegar que se basa en el diseo de
pginas

Ejemplos

Papelera de reciclaje

Lista de Contactos

Libro de direcciones
es una mixtura

Lista de contactos

Rolodex

A-F
T-Z
J-S
Harleck, P.
Guttenburg, A.

Greenberg, S.
Dept Computer Science
University of Calgary

Ejemplos
Papelera
La papelera es una herramienta habitual
en la mayora de las culturas avanzadas
Sirve para poner todos los papeles o trozos
de elementos que no sirven para despus
tirarlo como basura
El smbolo de reciclar es habitual en
nuestra cultura
Tenemos una papelera que permite
reciclar los objetos que depositamos en
ella

Ejemplos

Tijera

Las tijeras nos representan su

funcionalidad de cortar papel, ropa, etc..
La metfora nos permite cortar un trozo
de documento, dibujo, hoja de clculo
Su enlace con el portapapeles tiene que
ser aprendido

Ejemplo

Tarro de pintura y herramientas de dibujo

El tarro de pintura es una objeto muy comn y de

comprensin fcil
El tarro de pintura que se vaca queremos hacer
comprender al usuario que lo que haremos ser
llenar el interior de un determinado objeto

Ejemplos

Correo electrnico

Cubre la funcin de gestionar correo

electrnico

Ejemplo Metafora Visual

Que le sugiere?

Metfora global

Metfora global
La metfora global es una metfora que
nos da el marco para todas las otras
metforas del sistema
Por ejemplo la metfora de MacInstosh se
puede considerar como una metfora global
Problemas
Las metforas que incluye puede o no que
tengan beneficios cognitivos por asociacin

Metfora global
Ejemplo

Agenda electrnica

Ejemplo de errores

Se utiliza la metfora del reproductor de

vdeo para controlar una impresora
???

Ejemplo de errores

Asociaciones inadecuadas
Los iconos no tienen un
significado intuitivo

Revo Desinstalador:

Las metforas
ayudan a
comprender el
objetivo que
se
quiere alcanzar

Mantiene al usuario informado con respecto a las acciones que tomar

Metodologa de creacin
z Las metaforas visuales han de disearse
de acuerdo con una metodologia
z Fases del diseo de metaforas

Definicin
funcional

Identificacin de
problemas del
usuario

Generacin
de la
metfora

Evaluaci
n de la
metfora

Metodologa de creacin

Definicin funcional

Entender como funciona la funcionalidad a

implementar la metfora
Que puede hacer el sistema
Lo que est disponible para el usuario
Rapidez de respuesta

Identificacin 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, ensear el prototipo y ver
como lo utilizan

Generacin de la metfora
Examen detallado de la manera de realizar
las tareas
Analizar oficinas, fbricas, 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
caractersticas que los usuarios
encuentran difciles de comprender
Estas son buenas candidatas para
metforas

Metodologa de creacin

Evaluacin de la metfora
Una vez generadas varias metforas, se evalan
para escoger la ms adecuada a la funcionalidad
Puntos para evaluar la utilidad de la metfora:
Volumen de la estructura que proporciona
Aplicabilidad de la estructura. Falsas
expectativas
Representatividad. Fcil de representar?. La
metfora ideal tiene representacin visual,
auditiva y palabras asociadas
Adecuacin a la audiencia
Extensibilidad

Diseo de metforas
Las metforas pueden conseguir su efectividad a
travs de asociaciones:
Podemos asociar clases y atributos a objetos
familiares
Podemos asociar procesos y algoritmos a
verbos de accin
Tipos de metforas:

De objetos: libro, lbum, agenda, escritorio,

biblioteca
De actividades: visita, exploracin, viaje
De lugares: casa, plaza, museo, ciudad, isla

Diseo de metforas
Objetos familiares (1)
Escritorio
Dibujos, ficheros, carpetas, papeles, clips, notas de
papel
Fotografa
lbumes, fotos, portafotos
Juegos
Reglas del juego, piezas del juego, tablero de juego
Contenedores
Estanteras, cajas, compartimentos
Ciudades
Hitos, perfiles, casas

Objetos familiares (2)

Disco compacto, cassette, grabaciones,

pistas
Pila de cartas: Cartas, pilas,
Juegos: reglas del juego, piezas del
juego, tablero de juego
Pelculas: Rollos, bandejas,
presentaciones, rollos, pelculas, teatros
Contenedores: Estanteras, cajas,
compartimentos

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

Verbos
Ejemplos tpicos de conceptos de accin 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: aadir (nuevo), copiar
Borrar: tirar, destruir, perder, reciclar, borrar (t/p)
Evaluar: Mover botn, desplazar puntero, rodar
Vaciar, flujo: agua (tubos, ros), electricidad

Ejercicio

Diseo de un conjunto de metforas

que permitan cubrir la gestin de
una librera de imgenes
Pasos:
Escoger los objetos que estn 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 accin

Diseo de metforas
Ejercicio paso 1
Escoger los objetos que estn implicados:
Estantera
lbum
Hoja
Foto

Diseo de metforas
Ejercicio paso 2
Asociar un elemento visual a cada objeto

Estantera

lbum

Hoja

Foto

Diseo de metforas
Ejercicio 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

Diseo de metforas
Ejercicio paso 4
Construir un elemento visual para cada accin
Crear/Aadir

Borrar

Seleccionar

Mover

Ejemplos

Aplicaciones y pginas web

www.healthy.net

Ejemplos

Aplicaciones y pginas web

Ejemplos

Aplicaciones y pginas web

Amplitube, emulador de efectos

para guitarras elctricas

Seales de transito absurdas

Seales de transito absurdas

Seales de transito absurdas

Seales de transito absurdas

Conclusiones
Las metforas constituyen un elemento
fundamental de las interfaces actuales
Hemos expuesto una visin general de su
historia y algunos ejemplos actuales
Hemos aprendido algunas ideas sobre
cmo disear metforas