tomas laurenzo laboratorio de medios · inco · fing · udelar interacción persona computadora. ...

52
tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora. www.fing.edu.uy/inco/cursos/inpercom Manipulación directa

Upload: eduarda-saucedo

Post on 28-Jan-2016

221 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

tomas laurenzo

laboratorio de medios · inco · fing · udelar Interacción persona computadora.

www.fing.edu.uy/inco/cursos/inpercom

Manipulación directa

Page 2: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa
Page 3: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

usuario vs. programador

Page 4: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación Directa

Basado en:

Direct Manipulation InterfacesHutchings, Hollan y Norman.

Del libro: User Centered System Design Edited by Norman & Draper

Page 5: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

• Término introducido por Ben Shneiderman. • "Direct manipulation: a step beyond programming

languages," IEEE Computer 16(8) (August 1983), 57-69.

• Special Issue of International Journal of Human-Computer Interaction in honor of Ben Shneiderman’s 60th birthday:

• Definió el área de investigación de usabilidad universal.• El diseño de productos y de métodos de comunicación usables por

todo el mundo.

Page 6: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

• Principales antecedentes: sketchpad (1963) y pygmalion (1975).

• Sketchpad.• Creado por Ivan Sutherland como

parte de su tesis de doctorado.

• Ganó el Turing Award de 1988.• Introduce los conceptos de

• GUI y OOP

• (http://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.pdf)

"A display connected to a digital computer gives us a chance to gain familiarity with concepts not realizable in the physical world. It is a looking glass into a mathematical wonderland.”

Page 7: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

• Pygmalion• Tesis de doctorado de 1975 de David Canfield Smith.

• Introduce otros conceptos:

• "Communication between human being and computer is by means of visual entities called 'icons', subsuming the notions of variable, reference, data structure, function, and picture".

• Programming by example

• Programación visual.• PD, Max, Quartz Composer, etc.

Page 8: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa
Page 9: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

Ejemplo:

• Tenemos un conjunto de datos a ser analizados con los números en forma de una matriz.

• Queremos ver qué relaciones hay entre los números.

• El conjunto de números se representa en la pantalla como un ícono.

• Para graficar una columna contra la otra, simplemente tomamos una copia del ícono, dibujamos una línea de la salida de una columna hasta el eje x y otra de la copia hasta el eje y.

Page 10: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

Page 11: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Ejemplo:• Si queremos calcular un log y hacer un análisis de

varianza, simplemente conectamos las funciones deseadas.

Page 12: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

Ejemplo:

• Ahora queremos partir los datos supongamos que el resultado de uno de nuestros análisis es el siguiente diagrama

Page 13: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

Ejemplo:

• Hay dos grupos marcados y querríamos analizarlos por separado.

Page 14: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

Ejemplo:

• Hay dos grupos marcados y querríamos analizarlos por separado.

Page 15: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa
Page 16: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa
Page 17: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa
Page 18: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa
Page 19: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

La promesa de la manipulación directa consiste en que, en lugar de tener un medio computacional abstracto, toda la programación pueda ser hecha gráficamente, de forma coherente con como el usuario piensa acerca del problema.

Las operaciones deseadas se realizan moviendo y conectando íconos.

no hay operaciones escondidas, sintaxis o nombres de comandos.

Page 20: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Manipulación directa

• Desaparecen clases enteras de errores.– no se puede apuntar a un objeto inexistente

• El sistema sólo requiere de conocimientos en el dominio de actividad.

Page 21: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Objetivo de la manipulación directa

En lugar de tener un medio computacional abstracto, todo es realizado gráficamente, en una forma que se corresponde naturalmente con la manera en que el usuario piensa.

Page 22: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Virtudes de la manipulación directa

1. Los novatos pueden aprender rápidamente funcionalidades

básicas, usualmente a través de la demostración hecha por un usuario más experto (TBE)

2. Los expertos pueden trabajar de forma extremadamente rápida.

3. Los usuarios esporádicos pueden retener conceptos operativos.

4. raramente se necesitan mensajes de error.

5. Los usuarios pueden ver inmediatamente si sus acciones están siguiendo sus objetivos, y si no, pueden cambiar la dirección de su actividad.

6. Los usuarios reducen su ansiedad porque el sistema es comprensible y porque las acciones son fácilmente reversibles

Page 23: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Abismos de ejecución y de evaluación

Sistema Físico

Objetivos

Abismo de Ejecución

Abismo de Evaluación

Page 24: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Virtudes de la manipulación directa

• ¿es siempre posible una interfaz de este tipo?

• ¿hay problemas al perder abstracción?

Page 25: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Virtudes de la manipulación directa

• es aplicable en interfaces que puedan dar una

representación continua del objeto de interés.

• Debe implementarse

• mediante acciones físicas de sintaxis simple (como hacer clic en un botón etiquetado)

• mediante acciones rápidas, incrementales y reversibles, de impacto inmediatamente visible sobre el objeto de interés.

Page 26: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Virtudes de la manipulación directa

• mediante acciones rápidas,

• incrementales y reversibles,

• de impacto inmediatamente visible sobre el objeto de interés.

Ensuring that objects of interest are continuously visible is said to be difficult or impossible in complex or distributed applications.Giving immediate feedback about the results of action is said to be impossible for actions with delayed results and undesirable for background tasks.Finally, making actions incremental is said to be tedious and inefficient for repetitive tasks.

Page 27: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

distancia y compromiso (engagement)

Distancia:

Entre los pensamientos del usuario y los requerimientos físicos del sistema en uso.

Si la distancia es corta, los pensamientos son traducidos fácilmente a las acciones permitidas por el sistema y su salida es fácilmente interpretable.

La distancia no es una característica de la interfaz sola, sino que involucra una relación entre la tarea que el usuario tiene en mente y la forma en que puede ser realizada en la interfaz.

Page 28: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

distancia y compromiso (engagement)

Compromiso (engagement):

Es la impresión o sensación de que se están manipulando directamente los objetos de interés.

No se usa una metáfora de conversación, sino de mundo.

En la primera, la interfaz es intermediaria para tener un diálogo sobre un mundo implícito pero no representado, en la segunda manipula directamente un mundo cambiando su estado.

Page 29: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Distancias semántica y articulatoria

La distancia equivale a los abismos de Norman.

Distancia semántica: Complejidad de la relación entre las intenciones del usuario y los significados de la expresión

Distancia articulatoria: Complejidad de la relación entre el significado de una expresión y su forma física (su representación) (dist. sintáctica)

Page 30: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Distancias semántica y articulatoria

Objetivos Significado de la expresión

Forma de la expresión

Distancia Semántica

DistanciaArticulatoria

Page 31: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Distancia articulatoria

Cada elemento del vocabulario tiene una forma y la forma tiene una estructura interna.

Estructura fonética, estructura tipográfica, estructura gráfica, estructura gestual, ...

Entrada: secuencia de teclas del teclado, movimiento del ratón, una palabra hablada.

Salida: texto en la pantalla, cambio en un ícono, un gráfico, un sonido, etc.

En el lenguaje natural oral una alta relación la tienen las onomatopeyas, pero se usan poco.

En los lenguajes de interacción debería ser mas fácil de explotar las similitudes articulatorias.

Page 32: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Distancia semántica

Existen varias preguntas importantes a responder en cualquier interfaz:

• ¿Es posible decir en este lenguaje lo que se quiere decir? ¿El sistema soporta la concepción del usuario sobre las tareas? ¿Los conceptos se codifican de la misma forma en que el usuario piensa acerca de ellos?

• ¿Las cuestiones de interés pueden ser dichas de manera concisa?

Page 33: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Distancia semántica y los abismos

Abismo de Ejecución: En una máquina de Turing todo se puede hacer, pero una gran distancia debe ser recorrida por el usuario. Lo ideal es que la tarea sea descrita a un nivel muy cercano a las intenciones del usuario

Abismo de Evaluación: Hay gran distancia cuando el usuario requiere procesar mucha información para determinar si el objetivo ha sido alcanzado. A veces la información está pero no de forma directa

Page 34: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

ejemplo de distancia semántica en el abismo de evaluación

Quiero saber a qué velocidad sube el nivel de agua

La distancia es recorrida por el usuario

La distancia es recorrida por el diseñador

A

B

Page 35: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Reduciendo la distancia semántica

siempre se debe construir puentes que disminuyan el impacto de los abismos.

lo puede hacer el usuario mediante nuevas estructuras mentales: aprender a pensar en el lenguaje que el sistema propone

lo puede hacer el diseñador, construyendo lenguajes de más alto nivel, o más especializados, o más naturales.

Page 36: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Reduciendo la distancia semántica

lenguajes de más alto nivel, más especializados.: Las tareas pueden ser más fáciles de especificar pero se puede perder generalidad y detalle.

diseñar una salida que represente directamente los conceptos. El ejemplo del agua o cualquier sistema WYSISWYG. Encontramos el mismo problema de generalidad vs. potencia.

el comportamiento automático no reduce la distancia semántica: El usuario puede adquirir un hábito y que sea fácil para él hacer algo, resultando, quizás, en una experiencia más directa. Pero la distancia recorrida es la misma.

Page 37: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

virtuosismo y la distancia semántica

El usuario se puede adaptar a la representación del sistema.

• El abismo es salvado por el acercamiento del usuario. Por su experiencia, el usuario cambia su comprensión de las tareas y cambia el lenguaje en que piensa.

• El lenguaje de la interfaz (potencialmente) provee una poderosa y productiva forma de pensar acerca del dominio.

• Si el usuario se mueve hacia el modelo implicado por la interfaz, el modelo debe ser coherente y consistente con alguna concepción del dominio.

• Hay un balance entre el costo del usuario de aprender una nueva forma de pensar y el poder que se gana por pensar en una nueva forma.

Page 38: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa
Page 39: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Virtuosismo y la distancia semántica: A veces el usuario tiene una concepción de la tarea y del sistema que es más compleja que la provista por la interfaz.

Si la tarea no estaba prevista, entonces la distancia semántica aumenta.

Para conocer la distancia semántica es esencial realizar un análisis de la tarea que se está desarrollando.

Ejemplo:

Si se quiere tocar la nota do, el piano es un instrumento musical más directo semánticamente que el violín.

Si se quiere hacer un glissando, el violín puede tiene una semántica mucho más directa.

Reduciendo la distancia semántica

Page 40: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

distancia articulatoria

más allá de su significado, todos los ítems de un vocabulario, en cualquier lenguaje, tienen una estructura interna.

en lenguaje natural, las palabras tienen estructura fonética (lenguaje oral) y tipográfica (lenguaje escrito).

lo mismo pasa en las interfaces

la distancia semántica se relaciona con las intenciones y los significados de las expresiones, la distancia articulatoria se vincula con las relaciones entre los significados de las expresiones y su forma física.

Page 41: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

entrada: la forma puede ser una secuencia de presiones de teclas, movimientos de ratón, clics, una palabra hablada, etc.

salida: cadena de caracteres, cambio de forma en un ícono, un sonido, diagrama, animación, etc.

¿la relación entre forma y significado es arbitraria?

distancia articulatoria

Page 42: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

• cricrí.– 1. onomat. U. para imitar el canto del grillo.

• be2.– 1. onomat. U. para imitar el balido del carnero, de la oveja y de la

cabra.– 2. m. balido

pero se basan en que el usuario sabe como suenan las palabras

ojo.

distancia articulatoria

Page 43: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

distancia articulatoria

Page 44: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

distancia articulatoria en los abismos de ejecución y evaluación

problema: no siempre es posible crear una relación entre la forma y su significado. A veces se puede crear una relación arbitraria, aprovechando conocimiento previo del usuario.

La distancia articulatoria depende mucho de la tecnología de E/S.

- ¿cursores en el mundo real?

lenguajes iconográficos: la forma se relaciona con el significado.

Problemas:

– Requieren conocimiento previo de convenciones sociales.

– Algunas cosas se resaltan y otras desaparecen.

Page 45: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

distancia articulatoria en los abismos de ejecución y evaluación

Page 46: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Íconos

¿Por qué indica el baño?

¿Tiene sentido en todas las sociedades?

Page 47: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

puede ser manipulada por el modelo mental adoptado por el usuario

la moto de Yutaka Sayeki

distancia articulatoria

Page 48: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

El espacio de la interfaz

lenguaje de alto nivel

manipulación directa

Interfaz como conversación

Interfaz como modelo del mundo

lenguaje de bajo nivel

mundo de bajo nivel

Peq

ueñ

aG

ran

de

Dis

tan

cia

de

sde

los

O

bje

tiv

os

de

l Usu

ari

o

Page 49: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Reviendo las virtudes de la manipulación directa

1. los novatos pueden aprender rápidamente funcionalidades básicas, usualmente a través de la demostración hecha por un usuario más experto.

En realidad la velocidad de aprendizaje se da cuando el novato conoce sobre el dominio de la tarea. El usuario siente que trabaja directamente en dicho dominio.

La demostración funciona porque las acciones son visibles (a diferencia de una interfaz de comandos que es oscura), y los resultados son visibles y un reflejo directo de las operaciones hechas sobre él.

Page 50: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Reviendo las virtudes de la manipulación directa

2. Expertos pueden trabajar de forma extremadamente rápida.

Esto puede ser falso. En realidad unas oscuras líneas de código pueden hacer ir más rápido al usuario de lo que es posible realizar en un ambiente gráfico.

3. Usuarios esporádicos o intermitentes que sean expertos pueden retener conceptos operativos.

Esto puede ser verdadero. El experto en el uso refleja que es experto en el tema en cuestión, que está bien establecido en la memoria. Y un buen mapeo semántico de las acciones lleva a lento olvido, y a un fácil recuerdo de aquello ya olvidado.

Esto funciona para Manipulación Directa y para otros métodos, mientras haya sistemas bien diseñados.

Page 51: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Reviendo las virtudes de la manipulación directa

4. Mensajes de error se necesitan raramente.

sí y no (!) Los resultados son inmediatamente visibles, entonces no se necesitan mensajes. Pero pueden ocurrir errores conceptuales que sean operaciones legales y que son extremadamente difíciles de detectar.

un mensaje puede ser deseable, pero el sistema no se molesta en presentarlo.

5. Los usuarios pueden ver inmediatamente si sus acciones están siguiendo sus objetivos, y si no, pueden cambiar la dirección de su actividad.

Si el sistema no es reversible, no hay diferencia con otros sistemas, dado que es difícil cambiar la dirección. Esto implica la necesidad del “deshacer”.

Page 52: Tomas laurenzo laboratorio de medios · inco · fing · udelar Interacción persona computadora.  Manipulación directa

Reviendo las virtudes de la manipulación directa

6. Los usuarios han reducido su ansiedad a causa de que el sistema es comprensible y porque las acciones son fácilmente reversibles.

Esto es difícil de probar. Se requerirían dos sistemas con iguales capacidades .