8/18/2019 C6 Metafora DIU
1/60
Metaforas
Diseño de Interfaces
de Usuarios
Ciclo 2012-1
Profesor:
Diaz Muñante Jorge
8/18/2019 C6 Metafora DIU
2/60
Interfaz a la fama o vergüenza
8/18/2019 C6 Metafora DIU
3/60
8/18/2019 C6 Metafora DIU
4/60
8/18/2019 C6 Metafora DIU
5/60
Síntesis
En el diseño de las interfaces actuales, lasmetáforas tienen un papel dominante.
La metáfora del escritorio introducida porMacIntosh y de uso generalizadoactualmente, supuso un cambio en lausabilidad de los computadoras.
El uso de las metáforas permite conseguir
maneras más eficientes y efectivas decomunicarse con comunidades deusuarios diversas.
8/18/2019 C6 Metafora DIU
6/60
Objetivos
MetáforasMetá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
8/18/2019 C6 Metafora DIU
7/60
Metáforas
Sirven para traspasar conocimientos sobre undominio familiar a otro no familiar, ayudando aconstruir programas que puedan ser usados porcomunidades de usuarios más diversas
La metáfora del escritorio introducida por el
computador Macintosh supuso un gran avance en lausabilidad 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/18/2019 C6 Metafora DIU
8/60
Metafora de un HW
8/18/2019 C6 Metafora DIU
9/60
Metáforas
8/18/2019 C6 Metafora DIU
10/60
Metáforas Verbales
Metáfora: Figura retórica que consiste en usar una palabra o frase
en un sentido distinto del que tiene pero manteniendocon é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 yaparecen 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.
á
8/18/2019 C6 Metafora DIU
11/60
MetáforasEjemplo
Cuando nos encontramos con una nuevaherramienta tecnológica tendemos acompararla con alguna cosa conocida
teclas
barra esp.
retorno
8/18/2019 C6 Metafora DIU
12/60
Otro ejemplo
Lapiz
Paleta
dibujo
Herramientasdibujo
á
8/18/2019 C6 Metafora DIU
13/60
MetáforasVentajas y limitaciones
Ventajas: basándonos en el conocimiento previopodemos desarrollar más rápidamente elconocimiento 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 elusuario construye un nuevo modelo mental
Conclusión: las metáforas verbales son muy útiles paraayudar a los usuarios a iniciarse en el uso de un nuevo
sistema
8/18/2019 C6 Metafora DIU
14/60
Metáfora visual
Definíción
Es una imagen que nos permiterepresentar 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.
http://fiestascartoon.webcindario.com/dise/pergamino.jpg
8/18/2019 C6 Metafora DIU
15/60
.....Metáfora visual
Las metáforas visuales combinan elsistema y los dominios familiares en unasola entidad
Los usuarios desarrollan modelos
mentales mas similares a la metáfora queal mundo real
La metáfora es el modelo que se aprende
http://pixelmatorhelp.com/tools/zoom.html
8/18/2019 C6 Metafora DIU
16/60
Metáforas visuales..
Las metáforas se basan en asociacionespercibidas de manera similar por eldiseñador y el usuario
Si el usuario no tiene la misma basecultural que el desarrollador es fácil que
la metáfora falle
8/18/2019 C6 Metafora DIU
17/60
Intuición
Las personas entendemos las metáforas porintuición Intuición. Cognición inmediata. Conocimiento de
una cosa obtenida sin utilizar inferencia orazonamiento
8/18/2019 C6 Metafora DIU
18/60
Dokeos – Aula virtual
8/18/2019 C6 Metafora DIU
19/60
Metáfora visual
Metáfora del escritorio
8/18/2019 C6 Metafora DIU
20/60
La metáfora del escritorio se hacombinado con otras metáforas parapermitir a los usuarios que puedan hacerun 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
Metáforas compuestas
8/18/2019 C6 Metafora DIU
21/60
Ejemplos
Papelera de reciclaje
8/18/2019 C6 Metafora DIU
22/60
Libro de direcciones
es una mixtura
Lista de Contactos
8/18/2019 C6 Metafora DIU
23/60
Lista de contactos
Rolodex
Greenberg, S.
Dept Computer Science
University of Calgary
Guttenburg, A.Harleck, P.
J-S
T-Z
A-F
8/18/2019 C6 Metafora DIU
24/60
EjemplosPapelera
La papelera es una herramienta habitualen 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 basuraEl símbolo de reciclar es habitual en
nuestra cultura
Tenemos una papelera que permitereciclar los objetos que depositamos enella
8/18/2019 C6 Metafora DIU
25/60
Ejemplos
Tijera
Las tijeras nos representan sufuncionalidad de cortar papel, ropa, etc..La metáfora nos permite cortar un trozo
de documento, dibujo, hoja de cálculoSu enlace con el portapapeles tiene que
ser aprendido
8/18/2019 C6 Metafora DIU
26/60
El tarro de pintura es una objeto muy común y decomprensió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
Ejemplo
Tarro de pintura y herramientas de dibujo
http://pixelmatorhelp.com/tools/type.htmlhttp://pixelmatorhelp.com/tools/hand.htmlhttp://pixelmatorhelp.com/tools/eyedropper.htmlhttp://pixelmatorhelp.com/tools/lasso.htmlhttp://pixelmatorhelp.com/tools/brush.htmlhttp://pixelmatorhelp.com/tools/pencil.htmlhttp://pixelmatorhelp.com/tools/clone.htmlhttp://pixelmatorhelp.com/tools/eraser.html
8/18/2019 C6 Metafora DIU
27/60
Ejemplos
Correo electrónico
Cubre la función de gestionar correoelectrónico
8/18/2019 C6 Metafora DIU
28/60
Ejemplo Metafora Visual
8/18/2019 C6 Metafora DIU
29/60
¿Que le sugiere?
8/18/2019 C6 Metafora DIU
30/60
Metáfora global
8/18/2019 C6 Metafora DIU
31/60
8/18/2019 C6 Metafora DIU
32/60
Metáfora global
La metáfora global es una metáfora quenos da el marco para todas las otrasmetáforas del sistema Por ejemplo la metáfora de MacInstosh se
puede considerar como una metáfora globalProblemas Las metáforas que incluye puede o no que
tengan beneficios cognitivos por asociación
8/18/2019 C6 Metafora DIU
33/60
Agenda electrónica
Metáfora globalEjemplo
8/18/2019 C6 Metafora DIU
34/60
8/18/2019 C6 Metafora DIU
35/60
Ejemplo de errores
Se utiliza la metáfora del reproductor devídeo para controlar una impresora
¿¿¿???
8/18/2019 C6 Metafora DIU
36/60
Ejemplo de errores
Asociaciones inadecuadas
Los iconos no tienen un
significado intuitivo
8/18/2019 C6 Metafora DIU
37/60
Revo Desinstalador:
Mantiene al usuario informado con respecto a las acciones que tomará
Las metáforasayudan a
comprender elobjetivo que
sequiere alcanzar
8/18/2019 C6 Metafora DIU
38/60
Metodología de creación
z Las metaforas visuales han de diseñarsede acuerdo con una metodologia
z Fases del diseño de metaforas
Definición
funcional
Identificación deproblemas del
usuario
Generaciónde la
metáfora
Evaluació
n de lametáfora
8/18/2019 C6 Metafora DIU
39/60
Metodología de creación
Definición funcional
Entender como funciona la funcionalidad aimplementar la metáfora Que puede hacer el sistema
Lo que está disponible para el usuario
Rapidez de respuesta
d ifi ió d l bl d
8/18/2019 C6 Metafora DIU
40/60
Identificación de los problemas delos usuarios
Analizar las dificultades del usuarioVer como utilizan funcionalidades similaresy que problemas tienen
Explicar lo que queremos hacer y ver si lo
entienden, enseñar el prototipo y vercomo lo utilizan
8/18/2019 C6 Metafora DIU
41/60
Generación de la metáfora
Examen detallado de la manera de realizarlas tareas Analizar oficinas, fábricas, escuelas, etc.. y
observar los problemas que las personas
tienen y las herramientas que utilizanUna vez identificados los problemas y lasherramientas que se utilizan ver cuales deellas envuelven algunas de las
características que los usuariosencuentran difíciles de comprenderEstas son buenas candidatas para
metáforas
8/18/2019 C6 Metafora DIU
42/60
Una vez generadas varias metáforas, se evalúanpara 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. Falsasexpectativas Representatividad. ¿Fácil de representar?. La
metáfora ideal tiene representación visual,auditiva y palabras asociadas
Adecuación a la audiencia Extensibilidad
Metodología de creación Evaluación de la metáfora
8/18/2019 C6 Metafora DIU
43/60
Las metáforas pueden conseguir su efectividad através de asociaciones: Podemos asociar clases y atributos a objetos
familiares
Podemos asociar procesos y algoritmos averbos 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
Diseño de metáforas
á
8/18/2019 C6 Metafora DIU
44/60
Diseño de metáforasObjetos 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
8/18/2019 C6 Metafora DIU
45/60
Objetos familiares (2)
Disco compacto, cassette, grabaciones,pistas
Pila de cartas: Cartas, pilas,Juegos: reglas del juego, piezas del juego, tablero de juegoPelículas: Rollos, bandejas,
presentaciones, rollos, películas, teatrosContenedores: Estanterías, cajas,
compartimentos
8/18/2019 C6 Metafora DIU
46/60
Objetos familiares (3)
Árboles: Raices, tronco, ramas, hojasRed, diagrama, mapa: nodos, enlaces,landmarks, regiones, etiquetas, bases(fondos), leyenda
Ciudades: Regiones, casas, habitaciones,ventanas, mesas
8/18/2019 C6 Metafora DIU
47/60
Verbos
Ejemplos típicos de conceptos de acción y lasrelaciones con los objetos: Mover: navegar, conducir, volar
Localizar: apuntar, tocar, enmarcar elemento(s)
Seleccionar: tocar elemento, grabar elemento, ponerdedo 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
8/18/2019 C6 Metafora DIU
48/60
Ejercicio
Diseño de un conjunto de metáforasque permitan cubrir la gestión deuna 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
Diseño de metáforas
8/18/2019 C6 Metafora DIU
49/60
Diseño de metáforasEjercicio – paso 1
Escoger los objetos que están implicados: Estantería Álbum
Hoja
Foto
8/18/2019 C6 Metafora DIU
50/60
Diseño de metáforasEjercicio – paso 2
Asociar un elemento visual a cada objeto
Estantería Álbum Hoja Foto
Di ñ d táf
8/18/2019 C6 Metafora DIU
51/60
Escoger los verbos asociados a las acciones quese pueden ejecutar
Crear estantería, álbum, hoja, fotoAñadir estantería, álbum, hoja, fotoBorrar estantería, álbum, hoja, fotoSeleccionar álbum, hoja, fotoMover álbum, hoja, foto
Diseño de metáforasEjercicio – paso 3
Di ñ d áf
8/18/2019 C6 Metafora DIU
52/60
Construir un elemento visual para cada acción
Crear/Añadir
Seleccionar
Borrar
Mover
Diseño de metáforasEjercicio – paso 4
Ejemplos
8/18/2019 C6 Metafora DIU
53/60
Ejemplos
Aplicaciones y páginas web
www.healthy.net
Ejemplos
8/18/2019 C6 Metafora DIU
54/60
Ejemplos
Aplicaciones y páginas web
Ejemplos
8/18/2019 C6 Metafora DIU
55/60
Ejemplos
Aplicaciones y páginas web
Amplitube, emulador de efectospara guitarras eléctricas
8/18/2019 C6 Metafora DIU
56/60
Señales de transito absurdas
8/18/2019 C6 Metafora DIU
57/60
Señales de transito absurdas
8/18/2019 C6 Metafora DIU
58/60
Señales de transito absurdas
8/18/2019 C6 Metafora DIU
59/60
Señales de transito absurdas
Concl siones
8/18/2019 C6 Metafora DIU
60/60
Conclusiones
Las metáforas constituyen un elementofundamental de las interfaces actuales
Hemos expuesto una visión general de suhistoria y algunos ejemplos actuales
Hemos aprendido algunas ideas sobrecómo diseñar metáforas