metaforas visuales 2

8/18/2019 metaforas visuales 2

1/51

Interacción persona-ordenador

Metáforas


2/51

Metáforas verbales

Ejemplo

Cuando nos encontramos con una nueva herramientatecnológica tendemos a compararla con alguna cosaconocida


3/51

Metáforas 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


4/51

Metáforas verbales

Ventajas 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 en la pantalla

Limitaciones: existen diferencias La tecla de retroceso mueve el carro físicamente mientras

que en el ordenador se borra el carácter No obstante una ve! asimiladas estas diferencias el usuario

construye un nuevo modelo mental

Conclusión: las metáforas verbales son muy "tilespara ayudar a los usuarios a iniciarse en el uso deun nuevo sistema


5/51

Metáforas visuales

#etáfora visual: Es una imagen que nos permite representar alguna cosa de

tal manera que el usuario puede reconocer lo que representay por extensión comprender su propósito

La metáfora puede variar desde peque$as imágeneshasta pantallas completas


6/51

Metáforas visuales

Ejemplo

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


7/51

Metáforas visuales

Ejemplo


8/51

Metáforas visuales

Ejemplo


9/51

Metáforas visuales

Orígenes

%erox primera metáfora visual Xerox Star interfa! visual basada en la oficina física La base consistió en crear ob&etos electrónicos simulando los

ob&etos físicos de una oficina: papel

carpetas bande&as archivadores La metáfora de organi!ación global que

se presentaba en la pantalla fue la delescritorio y se parecía al área de traba&ode una típica mesa de oficina

Los ficheros se transformaron enrepresentaciones pictóricas


10/51

Metáforas visuales

Intuición

Las personas entendemos las metáforas por intuición Intuición: cognición inmediata' Conocimiento de una cosa

obtenida sin utili!ar inferencia o ra!onamiento

Comprendemos su significado porque las conectamos

mentalmente con otros procesos que previamentehemos aprendido


11/51

Las metáforas se basan en asociaciones percibidasde manera similar por el dise$ador y el usuario

(i el usuario no tiene la misma base cultural que eldesarrollador es fácil que la metáfora falle

Metáforas visuales

Intuición


12/51

Metáforas visuales

Metáfora global

La metáfora global es una metáfora que nos da elmarco para las otras metáforas del sistema La metáfora del escritorio se puede considerar como una

metáfora global

)s importante que todas las metáforas se integrenadecuadamente en la metáfora global


13/51

Metáfora global

Ejemplo

Explorando el sistema solar


14/51

Agenda electrónica

Metáfora global

Ejemplo


15/51

Metáfora del escritorio

*ue la primera metáfora global )stá muy extendida +eproduce una oficina con

todos sus ob&etos


16/51


¿ómo funciona!

Las carpetas son contenedores de documentos en elmundo real y en el virtual (e puede abrir una carpeta para coger o de&ar alguna cosa (e pueden poner carpetas dentro de carpetas

(e pueden mover las carpetas por todo el escritorio ,lgunas propiedades físicas están ausentes

Las carpetas no pesan no hacen ruido cuando se abren

Por otra parte tienen propiedades -mágicas.

(e puede poner el mismo documento en dos carpetas a la ve! (e puede reproducir un con&unto de carpetas y sus

documentos automáticamente (e pueden ordenar las carpetas por orden alfab/tico etc'


17/51


"istoria

%erox (tar0120

3indo4s 0'50126

3indo4s 7'50128

#acintosh0129

Lisa012

%3indo4s0128 comercial

%3indo4s0129 ,thena

Xerox PARCCalifornia,lan ;ay

(teve


18/51

Metafora del escritorio

Metáforas compuestas

La metáfora del escritorio se ha combinado con otrasmetáforas para permitir que los usuarios puedanreali!ar un con&unto de tareas más amplio

)&emplos: La barra de desplazamiento como metáfora del rollo, que es

un papiro que se desplaza para leer

Menús y ventanas

ortar y pegar, basadas en el dise!o de páginas de unaimprenta


19/51

Metafora del escritorio

El ordenador invisible

)l ob&etivo final de las metáforas es hacer elordenador inisible para el usuario

La metáfora puede llegar a ser transparente alusuario y no requerir de /l ning"n esfuer!o cognitivo


20/51

Metodología de creación

Las metáforas visuales han de dise$arse de acuerdocon una metodología

*ases del dise$o de metáforas:

=efiniciónfuncional

>dentificaciónde problemasdel usuario

?eneraciónde la

metáfora

)valuaciónde la

metáfora


21/51


#efinición funcional

Lo primero es entender cómo funciona aquello que seva a modelar con la metáfora @u/ puede hacer el sistema Aanálisis de requisitosB @u/ puede hacer el usuario Aanálisis de tareasB


22/51


Identific$ problemas usuario

)xaminar la forma en que los usuarios reali!an lastareas

,nali!ar las dificultades que se encuentran #ostrar a los usuarios un prototipo del sistema y

observar cómo lo utili!an


23/51


%eneración de la metáfora

bservar el entorno de traba&o del usuario )ncontrar una relación entre la información familiar y

la nueva )studiar el grado de coincidencia y las diferencias que

existen )legir la representación gráfica más adecuada


24/51


Evaluación de la metáfora

Dna ve! generadas varias metáforas se eval"an paraescoger la más adecuada a la funcionalidad

Puntos para evaluar la utilidad de la metáfora: Volumen de la estructura que proporciona Aplicabili!a! de la estructura' *alsas expectativas Representatii!a!' E*ácil de representarF' La metáfora ideal

tiene representación visual auditiva y palabras asociadas A!ecuación a la audiencia "xtensibili!a!


25/51


Ejemplo de errores

,sociaciones inadecuadas

(e utili!a la metáfora delreproductor de vídeo paracontrolar una impresora

EEEFFF


26/51


Ejemplo de errores

,sociaciones inadecuadas

Los iconos no tienen unsignificado intuitivo


27/51


Ejemplo de errores

)xtensión de la metáfora con funciones no intuitivas

,l arrastrar el icono deldisquete a la papelera seexpulsa el disquete EEEFFF


28/51


Ejemplo de errores

Caso de estudio: ,pple @uicGtime 9

http:HHhomepage'mac'comHbradsterHiarchitectHqtime'htm

interfa# !e consumi!ordise$ada para parecerse a unproducto físico' >ntención:

será más fácil transportar lainformación' +esultado: A0Bno se pueden transportar losconocimientos sobreinteracción con el ordenadory A7B el programa se ve

su&eto innecesariamente alas limitaciones del ob&etofísico


29/51

#ise&o de metáforas

Las metáforas pueden conseguir su efectividad atrav/s de asociaciones: Podemos asociar clases y atributos a ob&etos familiares

Podemos asociar procesos y algoritmos a verbos de acción

Iipos de metáforas: =e ob&etos: libro álbum agenda escritorio biblioteca

=e actividades: visita exploración via&e

=e lugares: casa pla!a museo ciudad isla



30/51


Objetos familiares

)scritorio =ibu&os ficheros carpetas papeles clips notas de papel

*otografía Jlbumes fotos portafotos


31/51


Ejercicio

b&etivo: =ise$ar un con&unto de metáforas para la gestión de una

biblioteca de imágenes digitales

Pasos:

)scoger los ob&etos que están implicados ,sociar un elemento visual a cada ob&eto )scoger los verbos asociados a las acciones que se pueden

e&ecutar Construir un elemento visual para cada acción



32/51

)scoger los ob&etos que están implicados: "stanter$a %lbum &oja

'oto


Ejercicio ' paso (



33/51


Ejercicio ' paso )

,sociar un elemento visual a cada ob&eto

)stantería Jlbum Ko&a *oto



34/51


Ejercicio ' paso *

)scoger los verbos asociados a las acciones que sepueden e&ecutar Crear estantería álbum ho&a foto A(a!ir estantería álbum ho&a foto )orrar estantería álbum ho&a foto Seleccionar álbum ho&a foto Moer álbum ho&a foto



35/51


Ejercicio ' paso +

Construir un elemento visual para cada acción

CrearH,$adir

(eleccionar

orrar

#over


36/51

Ejemplos de metáforas

b&etos y acciones ,plicaciones y sitios 4eb

Ejemplos


37/51

j p

,apelera

La papelera es una herramienta habitual en lamayoría de las culturas avan!adas (irve para poner todos los papeles u otros elementos que

no sirven para despu/s tirarlos a la basura

)l símbolo de recicla&e es cada ve! más habitual La papelera permite reciclar los ob&etos depositados en ella

Ejemplos


38/51

ijera .ortar/

Las ti&eras nos dan la funcionalidad de cortar papeltela etc'

La metáfora nos aporta la idea de poder cortar untro!o de documento una parte de un dibu&o etc'

(u enlace con el portapapeles tiene que ser aprendido

Ejemplos


39/51

j p

"erramientas de dibujo

(e usan elementos muy conocidos y de significadointuitivo para el dise$ador

)l bote de pintura que se vacía indica que se llenará deun color el interior de un ob&eto

M

Ejemplos


40/51

j

arro de la compra

Ejemplos


41/51

0plicaciones y sitios 1eb

www.healthy.net

Ejemplos


42/51


www.ncsa.uiuc.edu/Cyberia/Expo

Ejemplos


43/51


Ejemplos


44/51

Neopets 4eb demascotas virtualeswww.neopets.com


Ejemplos


45/51


Nero '5

Ejemplos


46/51


,mplitube emulador de efectospara guitarras el/ctricas

Ejemplos


47/51

Iotal Club #anager 7556


Ejemplos

0 li i iti b


48/51

(quare Circle #edia agencia creativahttp://www.sqcircle.com/


Ejemplos

0 li i iti b


49/51

#edal of Konor ,llied ,ssault


Ejemplos

0 li i iti b


50/51

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


onclusiones


51/51

onclusiones

Las metáforas constituyen un elemento fundamentalde las interfaces actuales

Kemos expuesto una visión general de su historia yalgunos e&emplos actuales

Kemos aprendido algunas ideas sobre cómo dise$armetáforas

Documents

metaforas visuales 2