c6 metafora diu

8/18/2019 C6 Metafora DIU

1/60

Metaforas

Diseño de Interfaces

de Usuarios

Ciclo 2012-1

Profesor:

Diaz Muñante Jorge


2/60

Interfaz a la fama o vergüenza


3/60


4/60


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.


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


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

Metafora de un HW


9/60

Metáforas


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.

á


11/60

MetáforasEjemplo

Cuando nos encontramos con una nuevaherramienta tecnológica tendemos acompararla con alguna cosa conocida

teclas

barra esp.

retorno


12/60

Otro ejemplo

Lapiz

Paleta

dibujo

Herramientasdibujo

á


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


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


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


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


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


18/60

Dokeos – Aula virtual


19/60

Metáfora visual

Metáfora del escritorio


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


21/60

Ejemplos

Papelera de reciclaje


22/60

Libro de direcciones

es una mixtura

Lista de Contactos


23/60

Lista de contactos

Rolodex

Greenberg, S.

Dept Computer Science

University of Calgary

Guttenburg, A.Harleck, P.

J-S

T-Z

A-F


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


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


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


27/60

Ejemplos

Correo electrónico

Cubre la función de gestionar correoelectrónico


28/60

Ejemplo Metafora Visual


29/60

¿Que le sugiere?


30/60

Metáfora global


31/60


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


33/60

Agenda electrónica

Metáfora globalEjemplo


34/60


35/60

Ejemplo de errores

Se utiliza la metáfora del reproductor devídeo para controlar una impresora

¿¿¿???


36/60

Ejemplo de errores

Asociaciones inadecuadas

Los iconos no tienen un

significado intuitivo


37/60

Revo Desinstalador:

Mantiene al usuario informado con respecto a las acciones que tomará

Las metáforasayudan a

comprender elobjetivo que

sequiere alcanzar


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


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


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


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


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


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


á


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


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


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


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


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



49/60

Diseño de metáforasEjercicio – paso 1

Escoger los objetos que están implicados: Estantería Álbum

Hoja

Foto


50/60


Asociar un elemento visual a cada objeto

Estantería Álbum Hoja Foto

Di ñ d táf


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


Di ñ d áf


52/60

Construir un elemento visual para cada acción

Crear/Añadir

Seleccionar

Borrar

Mover


Ejemplos


53/60

Ejemplos

Aplicaciones y páginas web

www.healthy.net

Ejemplos


54/60

Ejemplos


Ejemplos


55/60

Ejemplos


Amplitube, emulador de efectospara guitarras eléctricas


56/60

Señales de transito absurdas


57/60



58/60



59/60


Concl siones


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

c6 metafora diu

Documents