Interacción persona-ordenador Metáforas

Slides:



Advertisements
Presentaciones similares
CONOCIENDO LA COMPUTADORA
Advertisements

ORGANIZADORES DE INFORMACIÒN
Usabilidad CI-2413 Desarrollo de Aplicaciones para Internet.
CAPACITACION PARA EL TRABAJO: INFORMATICA
Arquitectura de la información en sitios web y Usabilidad
Unidad II Interfaces Hombre Máquina
Interacción Persona ordenador
Modalidades para el uso educativo de NT
Cruz Roja Mexicana Delegación León Curso de Introducción a Microsoft Word Francisco Jorge Valdovinos Barragán Agosto sección.
Diseño de íconos [ producción digital – 2012 ].
Sistema operativo windows XP.
DIAGRAMAS DE CLASES Completando los diagramas de interacción, es posible identificar la especificación de las clases que participarán en la solución indicando.
ANDRES COHEN GUERRA Ing. HENRY FARFAN UPC- INFORMARICA
Lectura funcional “Los aprendizajes han de ser funcionales (que sirvan para algo) y significativos (Estar basados en la comprensión). Yo he de tener elementos.
Qué es una ventana En informática, una ventana es un área visual, normalmente de forma rectangular, que contiene algún tipo de interfaz de usuario, mostrando.
Windows es un sistema operativo
ANALOGÍAS Y MODELOS En las explicaciones tenemos que tener en cuenta el modelo mental que se genera el alumno porque puede distar de la idea que queremos.
Interacción persona-computador Metáforas
Interfaces Humano-Computador. Introducción n Se refiere al medio por el cual un usuario interactúa con el computador n Involucra las instrucciones que.
Dr. Luis Alonso Aparicio
Actividad 6. Requisitos del software, referente a la estructura y base de datos. M.C. Juan Carlos Olivares Rojas Syllabus May,
ENTORNO GRAFICO ANDRES COHEN GUERRA Ing. HENRY FARFAN UPC- INFORMARICA.
Aplicación gráficas por computadoras BRAVO ANDRADE JOSÉ CARLOS LOPEZ CRUZ VICTOR ELOY MARTINEZ MUÑOZ MARTIN EDUARDO GRAFICACION 15:00-16:00.
Windows es un sistema operativo
11 de febrero de 2008 Portal de la JuntaPortal del CNICE OTRAS DIRECCIONES Otros portales educativos BuscadoresFreeware Shareware Editoriales Páginas.
“Diseño de base de Datos Alquicira Jiménez Carolina 303
Seminario de Informática Unidad 2: Operaciones Básicas de Sistemas Operativos Windows XP.
WINDOWS 8 Windows 8 es la versión actual del sistema operativo de Microsoft Windows, producido por Microsoft para su uso en computadoras personales, incluidas.
Windows 8 Windows 8: Es la versión actual del sistema operativo de Microsoft Windows, producido por Microsoft para su uso en computadoras personales, incluidas.
CI-4325 Interfaces con el usuario CI-4325 Interfaces con el usuario. Depto. de Computación y Tecnología de la Información - USB. Prof. Adelaide Bianchini.
Ingeniería en Sistemas de Información Diseño de Sistemas (3K1)
Google Docs y Talk. Vamos a hacer una pequeña presentación de google docs y google talk en la que hablaremos de: Historia Historia Ventajas y desventajas.
Interacción persona-computador Metáforas. Objetivos Aprender qué es una metáfora Conocer qué son las metáforas verbales, visuales y globales Conocer la.
“Técnicas de Interacción” Rogelio Ferreira Escutia
Internet básico Introducción a Windows Daniel Gayo Avello.
Informática Básica Introdución a Windows
EDWIN ACOSTA PINILLA DIEGO FERNANDO CASTRO JHON SEBASTIAN CASTRO.
TRABAJO DE INFORMATICA
Conociendo la Computadora
Diapositivas: R/:D R/:B iconos, fotos y barra de entrada.
TEMA 2: SISTEMAS OPERATIVOS. ENTORNO MONOUSUARIO
EL EXPLORADOR DE WINDOWS
El escritorio y la Barra de tareas
Taller de Herramientas de Presentación
INTERNET Y WEB. ORÍGENES DE INTERNET Internet se remonta al temprano desarrollo de las redes de comunicación. La idea de una red de ordenadores diseñada.
Clase 3 Explorador de Windows.
Título Calibri 28 puntos 2015 Subtítulos: Calibri mínimo 18 ptos y máximo 23 ptos.
Barra de tareas mejorada y vistas de pantalla completa
7.-Calendario en Outlook
¿Qué es Outlook Barra de Outlook
Windows 8 es la versión actual del sistema operativo de Microsoft Windows, producido por Microsoft para su uso en computadoras personales, incluidas computadoras.
SISTEMA OPERATIVO WINDOWS.
EXCEL 2013 DEFINICION PARTES FUNDAMENTALES DIBUJOS EXCEL VIDEO
 Facilita la comunicación, la interacción, entre dos sistemas de diferente naturaleza, típicamente el ser humano y una máquina como el computador. 
SISTEMA OPERATIVO.
WINDOWS 8 Es la versión actual del sistema operativo de Microsoft Windows, producido por Microsoft para su uso en computadoras personales, incluidas computadoras.
I CURSO DE INTERNET BÁSICO FUNDAMENTOS DEL TRABAJO CON UN ORDENADOR.
S ISTEMA O PERATIVO P ROCESADOR DE T EXTOS. SOFTWARE El primer elemento de un sistema de computación es el hardware (equipamiento). El SOFTWARE es el.
ACCESORIOS DE WINDOWS.
¿Qué es un Mapa Conceptual?
INGENIERIA DE SOFTWARE
1. Iniciación a la arquitectura de la información.
Windows 8 Windows 8 es la versión actual del sistema operativo de Microsoft Windows, producido por Microsoft para su uso en computadoras personales, 
Windows 8 Definición Partes Fundamentales Documento Word
CONCEPTOS BÁSICOS DE COMPUTACIÓN
P O W E R P O I N T CONCEPTOS BÁSICOS 1.
Definición Partes Fundamentales Documento Word Libro de Excel Video Fuente:
Definición Partes Fundamentales Archivo Excel Archivo Word Pagina Web Video Fuente:
Interacción persona-ordenador Metáforas
Transcripción de la presentación:

Interacción persona-ordenador Metáforas

Objetivos Aprender qué es una metáfora Conocer qué son las metáforas verbales, visuales y globales Conocer la metáfora del escritorio y su historia Ver el uso de las metáforas en las interfaces actuales Discutir los problemas y las ventajas de su uso Aprender cómo diseñar y aplicar las metáforas con efectividad

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

Metáforas Utilizamos metáforas para comunicar conceptos abstractos de una forma familiar y accesible Las metáforas tienen un papel dominante en el diseño de las interfaces actuales La metáfora del escritorio introducida por el ordenador Macintosh y de uso generalizado actualmente supuso un cambio en la usabilidad de los ordenadores El uso de metáforas ayuda a los desarrolladores a construir programas que puedan ser usados por comunidades de usuarios más diversas

Metáforas verbales Metáfora: Ejemplo: Figura retórica que consiste en usar una palabra o frase en un sentido distinto del que tiene pero manteniendo con é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 y aparecen 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.

Metáforas verbales Ejemplo Cuando nos encontramos con una nueva herramienta tecnológica tendemos a compararla con alguna cosa conocida

Metáforas verbales Ejemplo Los conocimientos sobre los elementos y relaciones en un dominio familiar se traspasan a los elementos y relaciones en otro no familiar retorno teclas barra esp.

Metáforas verbales Ventajas y limitaciones Ventajas: basándonos en el conocimiento previo podemos desarrollar más rápidamente el conocimiento 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 el usuario construye un nuevo modelo mental Conclusión: las metáforas verbales pueden ser muy útiles para ayudar a los usuarios a iniciarse en el uso de un nuevo sistema

Metáforas visuales Metáfora visual: Es una imagen que nos permite representar alguna cosa de tal manera que el usuario puede reconocer lo que representa y por extensión comprender su propósito La metáfora puede variar desde pequeñas imágenes hasta pantallas completas

Metáforas visuales Ejemplo Los conocimientos sobre los elementos de un dominio familiar se traspasan a los elementos de otro no familiar

Metáforas visuales Ejemplo

Metáforas visuales Orígenes Xerox, primera metáfora visual Xerox Star, interfaz visual basada en la oficina física La base consistió en crear objetos electrónicos simulando los objetos físicos de una oficina: papel, carpetas, bandejas, archivadores La metáfora de organización global que se presentaba en la pantalla fue la del escritorio y se parecía al área de trabajo de una típica mesa de oficina Los ficheros se transformaron en representaciones pictóricas

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 utilizar inferencia o razonamiento Comprendemos su significado porque las conectamos mentalmente con otros procesos que previamente hemos aprendido

Metáforas visuales Intuición 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áforas visuales Metáfora global La metáfora global es una metáfora que nos da el marco para las otras metáforas del sistema La metáfora del escritorio se puede considerar como una metáfora global Es importante que todas las metáforas se integren adecuadamente en la metáfora global

Metáfora global Ejemplo Explorando el sistema solar

Metáfora global Ejemplo Cuarto de juegos

Metáfora global Ejemplo Agenda electrónica

Metáfora del escritorio Fue la primera metáfora global Está muy extendida Reproduce una oficina con todos sus objetos

Metáfora del escritorio ¿Cómo 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 físicas están ausentes Las carpetas no pesan, no hacen ruido cuando se abren Por otra parte tienen propiedades “mágicas” Se puede poner el mismo documento en dos carpetas a la vez Se puede reproducir un conjunto de carpetas y sus documentos automáticamente Se pueden ordenar las carpetas por orden alfabético, etc.

Metáfora del escritorio Historia Steve Jobs Apple Xerox Star 1981 Xerox PARC California Alan Kay Lisa 1983 Microsoft Macintosh 1984 XWindows 1984, Athena Windows 1.0 1985 Windows 2.0 1986 XWindows 1986, comercial

Metafora del escritorio Metáforas compuestas La metáfora del escritorio se ha combinado con otras metáforas para permitir que los usuarios puedan realizar un conjunto de tareas más amplio Ejemplos: La barra de desplazamiento como metáfora del rollo, que es un papiro que se desplaza para leer Menús y ventanas Cortar y pegar, basadas en el diseño de páginas de una imprenta

Metafora del escritorio El ordenador invisible El objetivo final de las metáforas es hacer el ordenador invisible para el usuario La metáfora puede llegar a ser transparente al usuario y no requerir de él ningún esfuerzo cognitivo

Metodología de creación Las metáforas visuales son un aspecto importante del diseño de un sistema interactivo y han de diseñarse de acuerdo con una metodología Fases del diseño de metáforas: Identificación de los problemas del usuario Generación de la metáfora Evaluación de la metáfora Definición funcional

Metodología de creación Definición funcional Lo primero es entender cómo funciona aquello que se va a modelar con la metáfora Qué puede hacer el sistema (análisis de requisitos) Qué puede hacer el usuario (análisis de tareas)

Metodología de creación Identific. problemas usuario Analizar las dificultades del usuario Ver cómo utilizan funcionalidades similares y qué problemas tienen Explicar lo que queremos hacer y ver si lo entienden, enseñándoles el prototipo y viendo cómo lo utilizan

Metodología de creación Generación de la metáfora Examen detallado de la manera tradicional de realizar las tareas Analizar oficinas, fábricas, escuelas, etc. y observar los problemas que tienen los usuarios y las herramientas que utilizan para resolverlos Una vez identificados los problemas y las herramientas que se utilizan, ver cuáles de ellas envuelven algunas de las características que los usuarios encuentran difíciles de comprender Estas son buenas candidatas para metáforas

Metodología de creación Evaluación de la metáfora Una vez generadas varias metáforas, se evalúan para 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. Falsas expectativas 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 Otra versión Identificar el tipo de comparación Debemos encontrar una relación entre la información familiar y la nueva Grado de ajuste Estudiar el grado de coincidencia y las diferencias que existen

Metodología de creación Ejemplo de errores Asociaciones inadecuadas Se utiliza la metáfora del reproductor de vídeo para controlar una impresora ¿¿¿???

Metodología de creación Ejemplo de errores Extensión de la metáfora con funciones no intuitivas Al arrastrar el icono del disquete a la papelera se expulsa el disquete ¿¿¿???

Metodología de creación Ejemplo de errores Caso de estudio: Apple Quicktime 4 interfaz de consumidor, diseñada para parecerse a un producto físico. Intención: será más fácil transportar la información. Resultado: (1) no se pueden transportar los conocimientos sobre interacción con el ordenador, y (2) el programa se ve sujeto innecesariamente a las limitaciones del objeto físico http://digilander.libero.it/chiediloapippo/Engineering/iarchitect/metaphor.htm

Diseño de metáforas Las metáforas pueden conseguir su efectividad a través de asociaciones: Podemos asociar clases y atributos a objetos familiares Podemos asociar procesos y algoritmos a verbos 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

Diseño de metáforas Objetos familiares 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

Diseño de metáforas Ejercicio Objetivo: Diseño de un conjunto de metáforas para la gestión de una biblioteca de imágenes digitales 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

Diseño de metáforas Ejercicio – paso 1 Escoger los objetos que están implicados: Estantería Álbum Hoja Foto

Diseño de metáforas Ejercicio – paso 2 Asociar un elemento visual a cada objeto Estantería Álbum Hoja Foto

Diseño de metáforas Ejercicio – paso 3 Escoger los verbos asociados a las acciones que se pueden ejecutar Crear estantería, álbum, hoja, foto Añadir estantería, álbum, hoja, foto Borrar estantería, álbum, hoja, foto Seleccionar álbum, hoja, foto Mover álbum, hoja, foto

Diseño de metáforas Ejercicio – paso 4 Construir un elemento visual para cada acción Crear/Añadir Borrar Seleccionar Mover

Ejemplos de metáforas Objetos y acciones Páginas web

El símbolo de reciclaje es cada vez más habitual Ejemplos Papelera La papelera es una herramienta habitual en la mayoría de las culturas avanzadas Sirve para poner todos los papeles u otros elementos que no sirven para después tirarlos a la basura El símbolo de reciclaje es cada vez más habitual La papelera permite reciclar los objetos depositados en ella

Ejemplos Tijera (Cortar) Las tijeras nos dan la funcionalidad de cortar papel, tela, etc. La metáfora nos 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 Bote de pintura (Pintar) El bote de pintura es un objeto muy común y de fácil comprensión Con el bote de pintura que se vacía queremos hacer comprender al usuario que lo que se hace es llenar de un color el interior de un determinado objeto

Ejemplos Portapapeles Esta metáfora pretende cubrir un componente del sistema operativo que nos permite pasar información entre aplicaciones diferentes Su uso es fácil de intuir, pero es una metáfora pobre: no se puede recoger más de una cosa, no se sabe de dónde vienen los documentos y carece de historial Hay aspectos que no cubre la metáfora y han de ser aprendidos

Esta metáfora se utiliza para el correo electrónico Ejemplos Correo El correo es un elemento habitual en nuestra cultura. Nos permite enviar información escrita en papel a un destinatario normalmente lejano Esta metáfora se utiliza para el correo electrónico

Ejemplos Páginas web www.healthy.net

Ejemplos Páginas web www.ncsa.uiuc.edu/Cyberia/Expo

Ejemplos Páginas web

Conclusiones Las metáforas constituyen un elemento fundamental de las interfaces actuales Hemos expuesto una visión general de su historia y algunos ejemplos actuales Hemos aprendido algunas ideas sobre cómo diseñar metáforas