Diseo de Interfaces d

Interfaz a la fama o vergenza

Diseo de Interfaces Profesor:

Ciclo 2012-2 Diaz Muante Jorge

Metaforas

Sntesis Objetivos

En el diseo de las interfaces actuales, las Metforas

metforas tienen un papel dominante.
Metforas verbales

La metfora del escritorio introducida por
Metforas visuales
MacIntosh y de uso generalizado
actualmente, supuso un cambio en la Metfora del escritorio
usabilidad de los computadoras. Metodologa de creacin de metforas

El uso de las metforas permite conseguir Diseo de metforas
maneras ms eficientes y efectivas de
Ejemplos de metforas
comunicarse con comunidades de
usuarios diversas.

Diaz Muante Jorge 1

Diseo de Interfaces d

Metforas Metafora de un HW

 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

Metforas Verbales
Metforas

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 Otro ejemplo

Ejemplo

Cuando nos encontramos con una nueva
herramienta tecnolgica tendemos a
compararla con alguna cosa conocida
dibujo
Lapiz
retorno

Herramientas
dibujo
teclas
Paleta

barra esp.

Diaz Muante Jorge 2

Diseo de Interfaces d

Metforas
Metfora visual
Ventajas y limitaciones
Defincin

Ventajas: basndonos en el conocimiento previo
podemos desarrollar ms rpidamente el
conocimiento del nuevo dominio

Es una imagen que nos permite
 Presionar una tecla significa ver un carcter
representar alguna cosa y que el usuario
visualizado en la pantalla puede reconocer lo que representa y por

Limitaciones: existen diferencias extensin comprender su propsito
 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
Basada en la idea del rollo de pergamino.
Conclusin: las metforas verbales son muy tiles para
ayudar a los usuarios a iniciarse en el uso de un nuevo
sistema

Metfora visual Metafora visual....

Skype

Xerox, primera metfora virtual
 Metfora de la interfaz basada en la oficina
fsica
 La metfora de organizacin global que se
presentaba en la pantalla fue la del escritorio
y se pareca al rea de trabajo de una tpica
mesa de oficina

A diferencia de las metforas verbales, la
metfora forma parte de la interfaz

.....Metfora visual Metforas visuales..

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

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

Diaz Muante Jorge 3

Diseo de Interfaces d

Intuicin Metfora visual

Metfora del escritorio

Las personas entendemos las metforas por
intuicin

Intuicin. Cognicin inmediata. Conocimiento de
una cosa obtenida sin utilizar inferencia o
razonamiento

Como funcionan estas metforas? Como funcionan estas metforas?

Las carpetas son contenedores de
Algunas propiedades fsicas estn

documentos en el mundo real y en el
virtual,
 Abres una carpeta para coger o dejar alguna
cosa, podemos poner carpetas dentro de
carpetas y dentro de carpetas, podemos
mover las carpetas por todo el escritorio
ausentes
 No pesan no hacen ruido cuando se abren,
pero por otra parte tienen propiedades
mgicas, puedes poner el mismo documento
en dos carpetas al mismo tiempo, aunque
puedas pensar que los puedes pasar por una
copiador virtual, puedes reproducir un
conjunto de carpetas y sus documentos
automticamente, puedes ordenar las
carpetas por orden alfabtico.

Metfora del escritorio

Metforas compuestas
Historia

La metfora del escritorio se ha

Xerox Star 1981 combinado con otras metforas para
1983
permitir a los usuarios que puedan hacer
Lisa un conjunto de tareas mas amplio

Ejemplos:
MacIntosh
 La barra de desplazamiento como la metfora
Windows 1.0
del rollo
1985 1985 1984 Athena
 Mens y ventanas
Xwindows
Windows 2.0  Cortar y pegar que se basa en el diseo de
1986 comercial pginas
1986

Diaz Muante Jorge 4

Diseo de Interfaces d

Ejemplos
Lista de Contactos
Papelera de reciclaje

Libro de direcciones
es una mixtura

Lista de contactos Ejemplos

Papelera

La papelera es una herramienta habitual
Rolodex
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
A-F
T-Z
nuestra cultura
J-S
Harleck, P.
Tenemos una papelera que permite
Guttenburg, A.
Greenberg, S. reciclar los objetos que depositamos en
Dept Computer Science
University of Calgary
ella

Ejemplos Ejemplo

Tijera 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

Las tijeras nos representan su llenar el interior de un determinado objeto
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

Diaz Muante Jorge 5

Diseo de Interfaces d

Ejemplos Ejemplo Metafora Visual

Correo electrnico

Cubre la funcin de gestionar correo

electrnico

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

Diaz Muante Jorge 6

Diseo de Interfaces d

Metfora global
Ejemplo

Agenda electrnica

Ejemplo de errores Ejemplo de errores

Asociaciones inadecuadas

Se utiliza la metfora del reproductor de

vdeo para controlar una impresora Los iconos no tienen un
??? significado intuitivo

Revo Desinstalador:
Metodologa de creacin

Las metaforas visuales han de disearse

de acuerdo con una metodologia
Las metforas Fases del diseo de metaforas
ayudan a
comprender el
objetivo que
se
quiere alcanzar
Definicin Identificacin de Generacin Evaluaci
problemas del de la
funcional n de la
usuario metfora
metfora

Mantiene al usuario informado con respecto a las acciones que tomar

Diaz Muante Jorge 7

Diseo de Interfaces d
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
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
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
Diaz Muante Jorge
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
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
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
8
Diseo de Interfaces d

Objetos familiares (2) Objetos familiares (3)

rboles: Raices, tronco, ramas, hojas

Disco compacto, cassette, grabaciones,
Red, diagrama, mapa: nodos, enlaces,
pistas landmarks, regiones, etiquetas, bases

Pila de cartas: Cartas, pilas, (fondos), leyenda

Juegos: reglas del juego, piezas del
Ciudades: Regiones, casas, habitaciones,
juego, tablero de juego ventanas, mesas

Pelculas: Rollos, bandejas,
presentaciones, rollos, pelculas, teatros

Contenedores: Estanteras, cajas,
compartimentos

Verbos Ejercicio

Ejemplos tpicos de conceptos de accin y las
Diseo de un conjunto de metforas

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

Ejercicio paso 1 Ejercicio paso 2

Escoger los objetos que estn implicados:
 Estantera Asociar un elemento visual a cada objeto
 lbum
 Hoja
 Foto

Estantera lbum Hoja Foto

Diaz Muante Jorge 9

Diseo de Interfaces d

Diseo de metforas Diseo de metforas

Ejercicio paso 3 Ejercicio paso 4

Escoger los verbos asociados a las acciones que Construir un elemento visual para cada accin
se pueden ejecutar
Crear estantera, lbum, hoja, foto Crear/Aadir Borrar
Aadir estantera, lbum, hoja, foto
Borrar estantera, lbum, hoja, foto
Seleccionar lbum, hoja, foto
Mover lbum, hoja, foto

Seleccionar Mover

Ejemplos Ejemplos

Aplicaciones y pginas web Aplicaciones y pginas web

www.healthy.net

Ejemplos
Aplicaciones y pginas web Seales de transito absurdas

Amplitube, emulador de efectos

para guitarras elctricas

Diaz Muante Jorge 10

Diseo de Interfaces d

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

Diaz Muante Jorge 11