metaforas.ppt

7/22/2019 metaforas.ppt

1/56

Interaccin persona-ordenador

Metforas


2/56

Objetivos

Aprender qu es una metfora

Conocer qu son las metforas verbales, visuales yglobales

Conocer la metfora del escritorio y su historia Ver el uso de las metforas en las interfaces actuales

Discutir los problemas y las ventajas de su uso

Aprender cmo disear y aplicar las metforas con

efectividad


3/56

Contenido

Metforas

Metforas verbales

Metforas visuales

Metfora del escritorioMetodologa de creacin de metforas

Diseo de metforas

Ejemplos de metforas


4/56

Metforas

Utilizamos metforas para comunicar conceptosabstractos de una forma familiar y accesible

Las metforas tienen un papel dominante en el diseode las interfaces actuales

La metfora del escritorio introducida por elordenador Macintosh supuso un cambio en lausabilidad de los ordenadores

El uso de metforas ayuda a los desarrolladores aconstruir programas que puedan ser usados por

comunidades de usuarios ms diversas


5/56

Metforas verbales

Metfora:Figura retrica que consiste en usar una palabra o frase en un

sentido distinto del que tiene pero manteniendo con ste unarelacin de analoga o semejanza

Ejemplo:cabellos de oro por cabellos rubios

Las metforas son una parte integrante del lenguaje yaparecen en las conversaciones cotidianasTiempo (abstracto) -> ahorrar, gastar, desaprovechar (dinero)

Ideas (abstracto) -> defender, atacar, retirar (conceptos blicos)

Navegar, explorar, visitar, inmersin, web, red, mapa, pgina,home, ancla, bookmark, etc.


6/56

Metforas verbales

Ejemplo

Cuando nos encontramos con una nueva herramientatecnolgica tendemos a compararla con alguna cosaconocida


7/56

Metforas verbales

Ejemplo

Los conocimientos sobre los elementos y relaciones enun dominio familiar se traspasan a los elementos yrelaciones en otro no familiar

teclas

barra esp.

retorno


8/56

Metforas verbales

Ventajas y limitaciones

Ventajas: basndonos en el conocimiento previopodemos desarrollar ms rpidamente elconocimiento del nuevo dominioPresionar una tecla significa ver un carcter en la pantalla

Limitaciones: existen diferenciasLa tecla de retroceso mueve el carro fsicamente mientras

que en el ordenador se borra el carcterNo obstante, una vez asimiladas estas diferencias el usuario

construye un nuevo modelo mental

Conclusin: las metforas verbales son muy tilespara ayudar a los usuarios a iniciarse en el uso deun nuevo sistema


9/56


10/56

Metforas visuales

Ejemplo

Los conocimientos sobre los elementos de undominio familiar se traspasan a los elementos deotro no familiar


11/56

Metforas visuales

Ejemplo


12/56

Metforas visuales

Ejemplo


13/56

Metforas visuales

Orgenes

Xerox, primera metfora visualXerox Star, interfaz visual basada en la oficina fsicaLa base consisti en crear objetos electrnicos simulando los

objetos fsicos de una oficina: papel,

carpetas, bandejas, archivadoresLa metfora de organizacin global que

se presentaba en la pantalla fue la delescritorio y se pareca al rea de trabajode una tpica mesa de oficina

Los ficheros se transformaron enrepresentaciones pictricas


14/56

Metforas visuales

Intuicin

Las personas entendemos las metforas por intuicinIntuicin: cognicin inmediata. Conocimiento de una cosa

obtenida sin utilizar inferencia o razonamiento

Comprendemos su significado porque las conectamos

mentalmente con otros procesos que previamentehemos aprendido


15/56

Las metforas se basan en asociaciones percibidasde manera similar por el diseador y el usuario

Si el usuario no tiene la misma base cultural que eldesarrollador es fcil que la metfora falle

Metforas visuales

Intuicin


16/56

Metforas visuales

Metfora global

La metfora global es una metfora que nos da elmarco para las otras metforas del sistemaLa metfora del escritorio se puede considerar como una

metfora global

Es importante que todas las metforas se integrenadecuadamente en la metfora global


17/56

Metfora global

Ejemplo

Explorando el sistema solar


18/56

Cuarto de juegos

Metfora global

Ejemplo


19/56

Agenda electrnica

Metfora global

Ejemplo


20/56

Metfora del escritorio

Fue la primera metfora global Est muy extendida Reproduce una oficina con

todos sus objetos


21/56


Cmo funciona?

Las carpetas son contenedores de documentos en elmundo real y en el virtualSe puede abrir una carpeta para coger o dejar alguna cosaSe pueden poner carpetas dentro de carpetas

Se pueden mover las carpetas por todo el escritorio Algunas propiedades fsicas estn ausentesLas carpetas no pesan, no hacen ruido cuando se abren

Por otra parte tienen propiedades mgicas

Se puede poner el mismo documento en dos carpetas a la vezSe puede reproducir un conjunto de carpetas y susdocumentos automticamente

Se pueden ordenar las carpetas por orden alfabtico, etc.


22/56


Historia

Xerox Star1981

Windows 1.01985

Windows 2.01986

Macintosh1984

Lisa

1983

XWindows1986, comercial

XWindows1984, Athena

Xerox PARCCaliforniaAlan Kay

Steve JobsApple

Microsoft


23/56

Metafora del escritorio

Metforas compuestas

La metfora del escritorio se ha combinado conotras metforas para permitir que los usuariospuedan realizar un conjunto de tareas ms amplio

Ejemplos:La barra de desplazamiento como metfora del rollo, que es

un papiro que se desplaza para leer

Mens y ventanas

Cortar y pegar, basadas en el diseo de pginas de unaimprenta

M t f d l it i


24/56

Metafora del escritorio

El ordenador invisible

El objetivo final de las metforas es hacer elordenador invisible para el usuario

La metfora puede llegar a ser transparente alusuario y no requerir de l ningn esfuerzo cognitivo


25/56

Metodologa de creacin

Las metforas visuales han de disearse de acuerdocon una metodologa

Fases del diseo de metforas:

Definicinfuncional

Identificacinde problemasdel usuario

Generacinde la

metfora

Evaluacinde la

metfora

M t d l d i


26/56


Definicin funcional

Lo primero es entender cmo funciona aquello que seva a modelar con la metforaQu puede hacer el sistema (anlisis de requisitos)Qu puede hacer el usuario (anlisis de tareas)



27/56


Identific. problemas usuario

Examinar la forma en que los usuarios realizan lastareas

Analizar las dificultades que se encuentranMostrar a los usuarios un prototipo del sistema y

observar cmo lo utilizan



28/56


Generacin de la metfora

Observar el entorno de trabajo del usuario Encontrar una relacin entre la informacin familiar y

la nueva Estudiar el grado de coincidencia y las diferencias que

existen Elegir la representacin grfica ms adecuada



29/56


Evaluacin de la metfora

Una vez generadas varias metforas, se evalan paraescoger 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 expectativasRepresentatividad. Fcil de representar?. La metfora ideal

tiene representacin visual, auditiva y palabras asociadasAdecuacin a la audienciaExtensibilidad



30/56


Ejemplo de errores

Asociaciones inadecuadas

Se utiliza la metfora delreproductor de vdeo paracontrolar una impresora

???



31/56


Ejemplo de errores

Asociaciones inadecuadas

Los iconos no tienen unsignificado intuitivo



32/56


Ejemplo de errores

Extensin de la metfora con funciones no intuitivas

Al arrastrar el icono deldisquete a la papelera seexpulsa el disquete ???



33/56


Ejemplo de errores

Caso de estudio: Apple Quicktime 4

http://homepage.mac.com/bradster/iarchitect/qtime.htm

interfaz de consumidor,diseada para parecerse a unproducto fsico. Intencin:

ser ms fcil transportar lainformacin. Resultado: (1)no se pueden transportar losconocimientos sobreinteraccin con el ordenador,y (2) el programa se ve

sujeto innecesariamente alas limitaciones del objetofsico


34/56

Diseo de metforas

Las metforas pueden conseguir su efectividad atravs 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


35/56

Objetos familiares

EscritorioDibujos, ficheros, carpetas, papeles, clips, notas de papel

Fotografalbumes, fotos, portafotos

JuegosReglas del juego, piezas del juego, tablero de juego

ContenedoresEstanteras, cajas, compartimentos

CiudadesHitos, perfiles, casas

Diseo de metforas


36/56

Ejercicio

Objetivo:Disear un conjunto de metforas para la gestin de una

biblioteca de imgenes digitales

Pasos:

Escoger los objetos que estn implicadosAsociar un elemento visual a cada objetoEscoger los verbos asociados a las acciones que se pueden

ejecutarConstruir un elemento visual para cada accin

Diseo de metforas


37/56

Escoger los objetos que estn implicados:EstanteralbumHoja

Foto

Ejercicio paso 1

Diseo de metforas


38/56

Ejercicio paso 2

Asociar un elemento visual a cada objeto

Estantera lbum Hoja Foto

Diseo de metforas


39/56

Ejercicio paso 3

Escoger los verbos asociados a las acciones que sepueden ejecutarCrear estantera, lbum, hoja, fotoAadir estantera, lbum, hoja, fotoBorrar estantera, lbum, hoja, fotoSeleccionar lbum, hoja, fotoMover lbum, hoja, foto

Diseo de metforas


40/56

Ejercicio paso 4

Construir un elemento visual para cada accin

Crear/Aadir

Seleccionar

Borrar

Mover


41/56

Ejemplos de metforas

Objetos y acciones Aplicaciones y sitios web

Ejemplos


42/56

Papelera

La papelera es una herramienta habitual en lamayora de las culturas avanzadasSirve para poner todos los papeles u otros elementos que

no sirven para despus tirarlos a la basura

El smbolo de reciclaje es cada vez ms habitualLa papelera permite reciclar los objetos depositados en ella

Ejemplos

Tij (C t )


43/56

Tijera (Cortar)

Las tijeras nos dan la funcionalidad de cortar papel,tela, etc.

La metfora nos aporta la idea de poder cortar untrozo de documento, una parte de un dibujo, etc.

Su enlace con el portapapeles tiene que ser aprendido

Ejemplos

H i t d dib j


44/56

Herramientas de dibujo

Se usan elementos muy conocidos y de significadointuitivo para el diseador

El bote de pintura que se vaca indica que se llenarde un color el interior de un objeto

Ejemplos

C d l
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


45/56

Carro de la compra

Ejemplos

A li i iti b


46/56

Aplicaciones y sitios web

www.healthy.net

Ejemplos

A li i iti b


47/56


www.ncsa.uiuc.edu/Cyberia/Expo

Ejemplos

A li i iti b


48/56


Ejemplos



49/56

Neopets, web demascotas virtualeswww.neopets.com


Ejemplos

http://www.neopets.com/http://www.neopets.com/


50/56


Nero 7.0

Ejemplos



51/56


Amplitube, emulador de efectospara guitarras elctricas

Ejemplos



52/56

Total Club Manager 2005


Ejemplos



53/56

Square Circle Media, agencia creativahttp://www.sqcircle.com/


Ejemplos

http://www.sqcircle.com/http://www.sqcircle.com/


54/56

Medal of Honor Allied Assault


Ejemplos



55/56

Agencynet, agencia creativahttp://www.agencynet.com/


Conclusiones
http://www.agencynet.com/http://www.agencynet.com/


56/56

Conclusiones

Las metforas constituyen un elemento fundamentalde las interfaces actuales

Hemos expuesto una visin general de su historia yalgunos ejemplos actuales

Hemos aprendido algunas ideas sobre cmo disearmetforas

metaforas.ppt

Documents