Introducci n a la interacci n persona ordenador met foras l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 42

Introducción a la Interacción Persona-Ordenador Metáforas PowerPoint PPT Presentation


  • 133 Views
  • Uploaded on
  • Presentation posted in: General

Introducción a la Interacción Persona-Ordenador Metáforas. Síntesis. En el diseño de las interfases actuales, las metáforas tienen un papel dominante

Download Presentation

Introducción a la Interacción Persona-Ordenador Metáforas

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Introducci n a la interacci n persona ordenador met foras l.jpg

Introducción a la Interacción Persona-OrdenadorMetáforas


S ntesis l.jpg

Síntesis

  • En el diseño de las interfases actuales, las metáforas tienen un papel dominante

  • La metáfora de la sobremesa introducida por el ordenador MacIntosh y de uso generalizado actualmente, supuso un cambio en la usabilidad de los ordenadores

  • El uso de las metáforas permite conseguir maneras más eficientes y efectivas de comunicarse con comunidades de usuarios diversas


Objetivos l.jpg

Aprender que es una metáfora

Conocer que son las metáforas verbales

Conocer que son las metáforas visuales

Conocer las metaforas globales

Ver el uso de las metáforas en las interfases actuales

Discutir los problemas y las ventajas de su uso

Aprender como diseñarlas y aplicarlas con la máxima efectividad

Objetivos


Met fora verbal l.jpg

Metáfora verbal


Met fora verbal5 l.jpg

Metáfora verbal

  • Las metáforas son una parte integrante del lenguaje

  • Nos permite comunicar un concepto abstracto de una manera más familiar y accesible

  • Las utilizamos continuamente...

    • Los argumentos pueden ser defendidos o atacados, si una posición es indefendible nos podemos retirar

    • Ahorrar, gastar, desaprovechar el tiempo


Met fora verbal limitaciones l.jpg

Metáfora verbalLimitaciones

  • La tecla de retorno mueve el carro fisicamente mientras que en el ordenador se borra el carácter

  • No obstante, una vez asimiladas estas diferencias, el usuario construye un nuevo modelo mental


Met fora visual macintosh l.jpg

Metáfora visualMacIntosh


Metafora visual l.jpg

Metafora visual....

  • Xerox, primera metàfora virtual

    • Metáfora de la interfase basada en la oficina física

    • La metáfora de organización global que se presentaba en la pantalla fue la de la sobremesa y se parecía al área de trabajo de una típica mesa de oficina

  • A diferencia de las metáforas verbales, la metáfora forma parte de la interfase


Met fora visual l.jpg

.....Metáfora visual

  • Las metáforas visuales combinan el sistema y los dominios familiares en una sola entidad

  • Los usuarios desarrollan modelos mentales mas similares a la metáfora que al mundo real

  • La metáfora es el modelo que se aprende


Met foras visuales l.jpg

Metáforas visuales..

  • Las metáforas se basan en asociaciones percibidas de manera similar por el diseñador y el usuario

  • Si el usuario no tiene la misma base cultural que el desarrollador es fácil que la metáfora falle


Met fora visual defin ci n l.jpg

Metàfora visualDefiníción

  • Es una imagen que nos permite representar alguna cosa y que el usuario puede reconocer lo que representa y por extensión comprender su propósito


Intuici n l.jpg

Intuición

  • Las personas entendemos las metáforas por intuición

  • Intuición. Cognición inmediata. Conocimiento de una cosa obtenida sin utilizar inferencia o razonamiento


Met fora visual met fora de la sobremesa l.jpg

Metáfora visualMetáfora de la sobremesa


Como funcionan estas met foras l.jpg

¿Como funcionan estas metáforas?

  • Las carpetas son contenedores de documentos en el mundo real y en el virtual,

    • Abres una carpeta para coger o dejar alguna cosa, podemos poner carpetas dentro de carpetas y dentro de carpetas, podemos mover las carpetas por toda la sobremesa


Como funcionan estas met foras15 l.jpg

¿Como funcionan estas metáforas?

  • Algunas propiedades físicas estan ausentes

    • No pesan no hacen ruido cuando se abren, pero por otra parte tienen propiedades mágicas, puedes poner el mismo documento en dos carpetas al mismo tiempo, aunque puedas pensar que los puedes pasar por una copiador virtual, puedes reproducir un conjunto de carpetas y sus documentos automáticamente, puedes ordenar las carpetas por orden alfabético.


Met fora de la sobremesa hist ria l.jpg

Metáfora de la sobremesaHistória

1981

Xerox Star

1983

Lisa

MacIntosh

Windows 1.0

1984 Athena

1985

1985

Xwindows

Windows 2.0

1986

1986 comercial


Met fora global l.jpg

Metáfora global


Met fora global18 l.jpg

Metáfora global

  • La metáfora global es una metáfora que nos da el marco para todas las otras metáforas del sistema

    • Por ejemplo la metáfora de MacInstosh se puede considerar como una metáfora global

  • Problemas

    • Las metáforas que incluye puede o no que tengan beneficios cognitivos por asociación


Met foras compuestas l.jpg

Metáforas compuestas

  • La metáfora de la sobremesa se ha combinado con otras metáforas para permitir a los usuarios que puedan hacer un conjunto de tareas mas amplio

  • Ejemplos:

    • La barra de desaplazamiento como la metáfora del rollo

    • Menús y ventanas

    • Cortar y pegar que se basa en el diseño de páginas


El ordenador invisible fin de la met fora l.jpg

El ordenador invisibleFin de la metáfora

  • Podemos considerar que puede llegar a ser la metáfora transparente al usuario y no tener ningún esfuerzo cognitivo


Ejemplos papelera de reciclaje l.jpg

EjemplosPapelera de reciclaje


Ejemplos papelera l.jpg

EjemplosPapelera

  • La papelera es una herramienta habitual en la mayoría de las culturas avanzadas

    • Sirve para poner todos los papeles o tros elementos que no sirven para después tirarlo como basura

  • El símbolo de reciclar es habitual en nuestra cultura

  • Tenemos una papelera que permite reciclar los objetos que depositamos en ella


Ejemplos tijera l.jpg

EjemplosTijera

  • Las tijeras nos representan su funcionalidad de cortar papel, ropa, etc..

  • La metáfora nos permite cortar un trozo de documento, dibujo, hoja de cálculo

  • Su enlace con el portapapeles tiene que ser aprendido


Ejemplo pote de pintura l.jpg

EjemploPote de pintura

  • El pote de pintura es una objeto muy común y de compresnión fácil

  • El pote de pintura que se vacia queremos hacer comprender al usuario que lo que haremos será llenar el interios de un determinado objeto


Ejemplos portapapeles l.jpg

EjemplosPortapapeles

  • Esta metáfora pretende cubrir una componente del sistema operativo que nos permite pasar información entre aplicaciones


Ejemplos correo electr nico l.jpg

EjemplosCorreo electrónico

  • Cubre la función de gestionar correo electrónico


Metodolog a de creaci n l.jpg

Metodología de creación

  • Definición funcional

  • Identificación de los problemas de los usuarios

  • Generación de la metáfora

  • Evaluación de la metáfora


Metodolog a de creaci n definici n funcional l.jpg

Metodología de creaciónDefinición funcional

  • Entender como funciona la funcionalidad a implementar la metáfora

    • Que puede hacer el sistema

    • Lo que está disponible para el usuario

    • Rapidez de respuesta


Identificaci n de los problemas de los usuarios l.jpg

Identificación de los problemas de los usuarios

  • Analizar las dificultades del usuario

  • Ver como utilizan funcionalidades similares y que problemas tienen

  • Explicar lo que queremos hacer y ver si lo entienden, enseñar el prototipo y ver como lo utilizan


Generaci n de la met fora l.jpg

Generación de la metàfora

  • Examen detallado de la manera de realizar las tareas

    • Analizar oficinas, fábricas, escuelas, etc.. y observar los problemas que las personas tienen y las herramientas que utilizan

  • Una vez identificados los problemas y las herramientas que se utilizan ver cuales de ellas envuelven algunas de las caracteristicas que los usuarios encuentran difíciles de comprender

  • Estas son buenas candidatas para metáforas


Creaci de met fores evaluaci n l.jpg

Creació de metàforesEvaluación

  • Cantidad de estructura, composición, organización

  • Aplicabilidad de la estructura

  • Representatividad

  • Adecuación a la audiencia

  • Extensibilidad


Dise o de met foras lenguaje l.jpg

Diseño de metáforasLenguaje

  • Las metáforas pueden conseguir su efectividad a través de la asociación con organizaciones

  • Podemos asociar estructuras, clases, objetos, atributos a nombres o operaciones

  • Podemos asociar procesos, algoritmos a verbos


Elementos de dise o 1 l.jpg

Elementos de diseño (1)

  • Escritorio: Dibujos, ficheros, carpetas, papeles, clips, notas de papel

  • Documentos: Libros, capítulos, marcadores, figuras; periódicos, secciones; revistas, artículos; cartas; formularios

  • Fotografía: Álbums, fotos, portafotos

  • Televisión: Programas, canales, redes, anuncios comerciales, guías


Elementos de dise o 2 l.jpg

Elementos de diseño (2)

  • Disco compacto, cassette, grabaciones, pistas, jukeboxes

  • Pila de cartas: Cartas, pilas,

  • Juegos: reglas del juego, piezas del juego, tablero de juego

  • Películas: Rollos, bandejas de transpas, presentaciones, rollos, películas, teatros

  • Contenedores: Estanterías, cajas, compartimentos


Elementos de dise o 3 l.jpg

Elementos de diseño (3)

  • Árboles: Raices, tronco, ramas, hojas

  • Red, diagrama, mapa: nodos, enlaces, landmarks, regiones, etiquetas, bases (fondos), leyenda

  • Ciudades: Regiones, landmarks, pathways, casas, habitaciones, ventanas, mesas


Verbos l.jpg

Verbos

  • Ejemplos típicos de conceptos de acción y las relaciones con los objetos:

    • Mover: navegar, conducir, volar

    • Localizar: apuntar, tocar, enmarcar elemento(s)

    • Seleccionar: tocar elemento, grabar elemento, poner dedo en elemento y moverlo

    • Crear: añadir (nuevo), copiar

    • Borrar: tirar, destruir, perder, reciclar, borrar (temporal o permanentemente)

    • Evaluar: Mover botón, desplazar puntero, rodar, girar

    • Vaciar, flujo: agua (tubos, ríos), electricidad


Ejercicio l.jpg

Ejercicio

  • Diseño de un conjunto de metáforas que permitan cubrir la gestión de una librería de imágenes


Ejemplo l.jpg

Estanteria

Album

Hoja

Foto

Crear (Nuevo elemento)

Añadir

Seleccionar

Borrar

Cambiar

Ejemplo


Bibliograf a l.jpg

Bibliografía

  • Cooper, Alan . About face. The Essentials of User Interface Design. IDG books. (1995)

  • Lakoff G. Johnson M. Metaphor We Live By . The University of Chicago Press.(1980)

  • Laurel, Brenda . The Art of Human-Computer Interaction Design. Capítol Working with Interface metaphors. Addison and Wesley.(1990)

  • Laurel, Brenda. Computers as Theatre. Addison &Wesley. (1993)


Conclusiones l.jpg

Conclusiones

  • Las metáforas constituyen un elemento fundamental de las interfases actuales

  • Hemos expuesto una visión general de su historia y ejemplo actuales

  • Hemos aprendido a como diseñar metáforas

  • Hemos aprendido a como aplicar estas técnicas a problemas reales


Bibliograf a42 l.jpg

Bibliografía

  • Preece, Jenny. Human -Computer Interaction. Capítulo Interface metaphors and Conceptual Models. Addison & Wesley. (1994)

  • Carroll J.M, Mack R.L , Kellogg W.A. Handbook of Human-Computer Interaction . Helander M. (1988)

  • Erikson T.D. The Art of Human-Computer Interface . Addison-Wesley.(1990)


  • Login