Interaccin persona-ordenador
Metforas
Contenido
Metforas
Metforas verbales Metforas visuales Metfora del escritorio Metodologa de creacin de metforas Diseo de metforas Ejemplos de metforas
Metforas
Utilizamos metforas para comunicar conceptos abstractos de una forma familiar y accesible Las metforas tienen un papel dominante en el diseo de las interfaces actuales La metfora del escritorio introducida por el ordenador Macintosh supuso un cambio en la usabilidad de los ordenadores El uso de metforas ayuda a los desarrolladores a construir programas que puedan ser usados por comunidades de usuarios ms diversas
Metforas
Metforas verbales
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 verbales
Ejemplo
Cuando nos encontramos con una nueva herramienta tecnolgica tendemos a compararla con alguna cosa conocida
Metforas verbales
Ejemplo
Los conocimientos sobre los elementos de un dominio familiar se traspasan a los elementos de otro nuevo
retorno
teclas
barra esp.
Metforas verbales
Ventajas y limitaciones
Ventajas: basndonos en el conocimiento previo podemos desarrollar ms rpidamente el conocimiento del nuevo dominio
Presionar una tecla significa ver un carcter en la pantalla
Limitaciones: existen diferencias
La tecla de retroceso 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
Conclusin: las metforas verbales son muy tiles para ayudar a los usuarios a iniciarse en el uso de un nuevo sistema
Metforas visuales
Metfora visual:
Imagen que nos permite representar una cosa de manera que el usuario puede reconocer lo que representa y por extensin comprender su propsito
Va desde pequeas imgenes hasta pantallas completas
Metforas visuales
Ejemplo
Los conocimientos sobre los elementos de un dominio familiar se traspasan a los elementos de otro no familiar
Metforas visuales
Ejemplo
Metforas visuales
Ejemplo
Metforas visuales
Orgenes
Xerox, primera metfora visual
Xerox Star, interfaz visual basada en la oficina fsica La base consisti en crear objetos electrnicos simulando los objetos fsicos de una oficina: papel, carpetas, bandejas, archivadores 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 Los ficheros se transformaron en representaciones pictricas
Metforas visuales
Intuicin
Las personas entendemos las metforas por intuicin
Intuicin: cognicin inmediata. Conocimiento de una cosa obtenida sin utilizar inferencia o razonamiento
Comprendemos su significado porque las conectamos mentalmente con procesos que hemos aprendido
Metforas visuales
Intuicin
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
Metforas visuales
Metfora global
La metfora global es una metfora que nos da el marco para las otras metforas del sistema
La metfora del escritorio se puede considerar como una metfora global
Es importante que todas las metforas se integren adecuadamente en la metfora global
Metfora global
Ejemplo
Explorando el sistema solar
Metfora global
Ejemplo
Cuarto de juegos
Metfora global
Ejemplo
Agenda electrnica
Metfora del escritorio
Fue la primera metfora global Est muy extendida Reproduce una oficina con todos sus objetos
Metfora del escritorio
Cmo funciona?
Las carpetas son contenedores de documentos en el mundo real y en el virtual
Se puede abrir una carpeta para coger o dejar alguna cosa Se pueden poner carpetas dentro de carpetas Se pueden mover las carpetas por todo el escritorio
Algunas propiedades fsicas estn ausentes
Las 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 vez Se puede reproducir un conjunto de carpetas y sus documentos automticamente Se pueden ordenar las carpetas por orden alfabtico, etc.
Metfora del escritorio
Historia
Steve Jobs Apple
Xerox Star 1981
Xerox PARC California Alan Kay
Lisa 1983 Macintosh 1984
Microsoft
Windows 1.0 1985
XWindows 1984, Athena
Windows 2.0 1986
XWindows 1986, comercial
Metafora del escritorio
Metforas compuestas
La metfora del escritorio se ha combinado con otras metforas para permitir que los usuarios puedan 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 una imprenta
Metafora del escritorio
El ordenador invisible
El objetivo final de las metforas es hacer el ordenador invisible para el usuario La metfora puede llegar a ser transparente al usuario y no requerir de l ningn esfuerzo cognitivo
Metodologa de creacin
Las metforas visuales han de disearse de acuerdo con una metodologa Fases del diseo de metforas:
Definicin funcional
Identificacin de problemas del usuario
Generacin de la metfora
Evaluacin de la metfora
Metodologa de creacin
Definicin funcional
Lo primero es entender cmo funciona aquello que se va a modelar con la metfora
Qu puede hacer el sistema (anlisis de requisitos) Qu puede hacer el usuario (anlisis de tareas)
Definicin funcional
Metodologa de creacin
Identific. problemas usuario
Examinar la forma en que los usuarios realizan las tareas Analizar las dificultades que se encuentran Mostrar a los usuarios un prototipo del sistema y observar cmo lo utilizan
Definicin funcional
Identificacin de problemas del usuario
Metodologa de creacin
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
Definicin funcional
Identificacin de problemas del usuario
Generacin de la metfora
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
Definicin funcional Identificacin de problemas del usuario Generacin de la metfora Evaluacin de la metfora
Metodologa de creacin
Ejemplo de errores
Asociaciones inadecuadas
Se utiliza la metfora del reproductor de vdeo para controlar una impresora ???
Metodologa de creacin
Ejemplo de errores
Asociaciones inadecuadas
Los iconos no tienen un significado intuitivo
Metodologa de creacin
Ejemplo de errores
Extensin de la metfora con funciones no intuitivas
Para expulsar el disco se arrastra el icono a la papelera
Metodologa de creacin
Ejemplo de errores
Caso de estudio: Apple Quicktime 4
interfaz de consumidor, diseada para parecerse a un producto fsico. Intencin: ser ms fcil transportar la informacin. Resultado: (1) no se pueden transportar los conocimientos sobre interaccin con el ordenador, y (2) el programa se ve sujeto innecesariamente a las limitaciones del objeto fsico http://homepage.mac.com/bradster/iarchitect/qtime.htm
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
Diseo de metforas
Objetos familiares
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
Diseo de metforas
Ejercicio
Objetivo:
Disear un conjunto de metforas para la gestin de una biblioteca de imgenes digitales
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
Ejercicio paso 1
Escoger los objetos que estn implicados:
Estantera lbum Hoja Foto
Diseo de metforas
Ejercicio paso 2
Asociar un elemento visual a cada objeto
Estantera
lbum
Hoja
Foto
Diseo de metforas
Ejercicio paso 3
Escoger los verbos asociados a las acciones que se pueden ejecutar
Crear estantera, lbum, hoja, foto Aadir estantera, lbum, hoja, foto Borrar estantera, lbum, hoja, foto Seleccionar lbum, hoja, foto Mover lbum, hoja, foto
Diseo de metforas
Ejercicio paso 4
Construir un elemento visual para cada accin
Crear/Aadir Borrar
Seleccionar
Mover
Ejemplos de metforas
Objetos y acciones Aplicaciones y sitios web
Ejemplos
Papelera
Es una herramienta habitual
Sirve para poner elementos que ya no sirven antes de tirarlos a la basura
El smbolo de reciclaje es habitual
Los objetos se pueden recuperar
Ejemplos
Tijeras (Cortar)
Las tijeras dan la funcionalidad de cortar papel, tela, etc. La metfora aporta la idea de poder cortar un trozo de documento, una parte de un dibujo, etc. Su enlace con el portapapeles tiene que ser aprendido
Ejemplos
Herramientas de dibujo
Se usan elementos muy conocidos y de significado intuitivo para el diseador El bote de pintura que se vaca indica que se llenar de un color el interior de un objeto
Ejemplos
Carro de la compra
Ejemplos
Aplicaciones y sitios web
www.healthy.net
Ejemplos
Aplicaciones y sitios web
www.ncsa.uiuc.edu/Cyberia/Expo
Ejemplos
Aplicaciones y sitios web
Neopets, web de mascotas virtuales www.neopets.com
Ejemplos
Aplicaciones y sitios web
Nero 7.0
Ejemplos
Aplicaciones y sitios web
Amplitube, emulador de efectos para guitarras elctricas
Ejemplos
Aplicaciones y sitios web
Total Club Manager 2005
Ejemplos
Aplicaciones y sitios web
Square Circle Media, agencia creativa http://www.sqcircle.com/
Ejemplos
Aplicaciones y sitios web
Medal of Honor Allied Assault
Ejemplos
Aplicaciones y sitios web
Agencynet, agencia creativa http://www.agencynet.com/
Ejemplos
Aplicaciones y sitios web
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
