Interacción Interactuando con la computadora…

Interacción Humano-Computadora
(HCI - GUIs)
Hemos tenido en cuenta al usuario, por un lado, y a la
computadora con sus dispositivos de e/s por el otro.

Sin embargo, nuestro objetivo no es tenerlos en cuenta

aisladamente. El usuario utiliza la computadora como una
herramienta para llevar a cabo una determinada tarea.

Cuando esto ocurre, se produce un intercambio de

información entre el humano y la computadora, y a esto es a
lo que llamaremos interacción.

Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea

Clase 1 - 1 Clase 1 - 2

… Interactuando con la computadora… … Interactuando con la computadora

Para considerar la interacción veremos:

El uso de modelos de interacción nos puede ayudar a
entender exactamente qué ocurre en la interacción y nos - Modelos de Interacción que nos permitirán
permite identificar la verdadera razón de las dificultades. identificar y evaluar las componentes de la
interacción así como los elementos físicos,
sociales y organizacionales que le dan contexto.

También nos provee un marco para comparar distintos - Diferentes Estilos de Interacción usados y
estilos de interacción y considerar los problemas que se considerar si son efectivos o no para soportar al
producen en la interacción usuario.

Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea

Clase 1 - 4 Clase 1 - 5

Modelos de Interacción… Modelos de Interacción…

Ciclo de ejecución-evaluación (Norman)
Ciclo de ejecución-evaluación (Norman)
El ciclo interactivo puede dividirse en dos fases:
Es posiblemente el más intuitivo debido a su cercanía con - Ejecución
lo que entendemos por interacción usuario-computadora. - Evaluación

El usuario formula un plan de acción y éste se ejecuta. Estas pueden subdividirse en 7 pasos que, en este
modelo de Norman son:
Cuando el plan, o parte de éste, ha sido ejecutado, el - Establecer la meta
usuario observa la interfaz para evaluar el resultado de la - Formar la intención
ejecución del mismo. - Especificar la secuencia de acciones
- Ejecutar la acción
Así, determina cómo seguir. - Percibir el estado del sistema
- Interpretar el estado del sistema
- Evaluar el estado del sistema con respecto a las
metas e intenciones.

Cada paso es una actividad del usuario.

Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea
Clase 1 - 6 Clase 1 - 7
 … Modelos de Interacción… … Modelos de Interacción…
Ciclo de ejecución-evaluación (Norman) Ciclo de ejecución-evaluación (Norman)

Norman utiliza este modelo de interacción para El usuario y el sistema no usan los mismos términos para
demostrar por qué estas interfaces causan problemas describir el dominio y las metas.
a los usuarios.
El abismo de ejecución se refiere a la distancia entre las
Él describe esto en términos de metas del usuario y los medios de lograrlas utilizando
- Abismo de Ejecución el sistema; es decir que es la diferencia entre la
- Abismo de Evaluación formulación de las acciones por el usuario para
alcanzar la meta y las acciones permitidas por el
sistema.

El abismo de evaluación se refiere a la distancia entre el

comportamiento del sistema y las metas del usuario;
es decir que es la distancia entre la presentación física
del estado del sistema y lo que espera el usuario.

Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea

Clase 1 - 8 Clase 1 - 9

… Modelos de Interacción… … Modelos de Interacción…

Modelo de Abowd y Beale
Ciclo de ejecución-evaluación (Norman) Intenta una descripción de la Interfaz incluyendo
explícitamente al sistema. Detalla 4 componentes
principales en la interacción:
El modelo de Norman es útil para entender la interacción.
Sin embargo, sólo considera al sistema desde la
interfaz. Output
(Salida)
Norman se concentra sólo en la vista de la interacción Sistema Usuario
que tiene el usuario y no intenta la comunicación con
el sistema a través de la interfaz.
Input
Abowd y Beale trataron este problema y propusieron una
(Entrada)
extensión al modelo de Norman.

Cada componente tiene su propio lenguaje

Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea
Clase 1 - 10 Clase 1 - 11

… Modelos de Interacción Marco de la Interacción

Modelo de Abowd y Beale Así como discutimos los detalles de una interacción en
particular, es importante poner en un marco adecuado
Como la interfaz está entre el usuario y el sistema, hay 4
otros elementos importantes relacionados con la
pasos en el ciclo interactivo que corresponden a una
interacción.
traducción de un componente a otro:

presentación observación
Output
(Salida)

Sistema Usuario

Input
performance (Entrada) articulación
Cada una de estas áreas tiene importantes implicancias en
el diseño de sistemas interactivos.
Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea
Clase 1 - 12 Clase 1 - 13
 Evolución
Daremos la evolución de los sistemas interactivos con énfasis
en cómo estos incrementaron la usabilidad de las
computadoras en general.
En todo proceso de evolución los avances se van dando en
dos aspectos: Por un lado en lo teórico-científico y por el otro
en lo tecnológico.
Ambos se interrelacionan, influenciándose y actuando unos
como disparadores de los otros y viceversa.
Muchas veces las ideas inspiran a los diseñadores, demando
nueva tecnología. Otras, la tecnología existente en un
momento dado permite su utilización con propósito distinto
del que había motivado su diseño.
Sergio Martig – Martín Larrea
Clase 1 - 14
Evolución
El problema con los paradigmas de interacción es que
raramente están bien definidos; no es claro cómo ayudan al
usuario a llevar a cabo determinadas tareas. Como resultado,
es posible que el uso repetido de los mismos no resulte en un
sistema más usable.
La derivación de los principios de interacción proviene
usualmente de la necesidad de explicar el éxito o fracaso de un
paradigma de interacción.
Los principios proveen definiciones abstractas y generales que
no son muy útiles para el diseñador.
Un diseño exitoso se basa en una propuesta
complementaria.
Sergio Martig – Martín Larrea
Clase 1 - 16
Paradigmas
Unidades de display y video
Sketchpad demostró dos ideas importantes:
- Las computadoras podían usarse para otras
aplicaciones que no sólo fueran el procesamiento de
datos. Podían extender la habilidad de los usuarios
permitiéndoles abstraerse de algunos niveles de detalle,
visualizando y manipulando diferentes representaciones
de la misma información. La computadora podía hablar
más humanamente.
- Los esfuerzos de Sutherland demostraron cuán
importante podía ser la contribución de una mente
creativa para la historia de la computación.
Sergio Martig – Martín Larrea
Clase 1 - 18
Evolución
Los avances tecnológicos han incrementado la potencia de
las máquinas y mejorado el ancho de banda de la
comunicación entre computadoras y humanos. Sin embargo,
sólo el impacto de la tecnología no es suficiente para
mejorar la usabilidad
• Los paradigmas de interacción han sido dependientes
de los avances tecnológicos y de su aplicación creativa, en
su mayoría, en lo que se refiere al mejoramiento de la
interacción
• Los principios de interacción son independientes de la
tecnología; dependen, en gran parte, de un profundo
entendimiento del ser humano como elemento de la
interacción.
Sergio Martig – Martín Larrea
Clase 1 - 15
Paradigmas
Unidades de display de Video
• A mediados de los 50 se comenzó a experimentar con
la posibilidad de presentar y manipular información en
una computadora en forma de imágenes en una unidad
de video.
• Los display proveerían un medio adecuado para
presentar información para rápida asimilación
• Las primeras aplicaciones fueron militares
• En 1962, Ivan Sutherland presentó el programa
Sketchpad. Fue no sólo una herramienta para crear
imágenes en los displays sino que fue un nuevo modelo
de operar las computadoras.
Sergio Martig – Martín Larrea
Clase 1 - 17
Paradigmas
Herramientas de Programación
• Douglas Engelbart, alrededor de los 50, tenía como
ambición usar las computadoras como un medio para
complementar la actividad humana de resolución de
problemas, para enseñar a los humanos.
• El equipo de Engelbart desarrolló el mouse y el
procesador de palabras, pero lo importante de este equipo
fue la metdología adoptada para crear sus poderosos e
innovativos sistemas interactivos, con la tecnología de ese
entonces.
• La idea clave para producir sistemas que ayudaran al ser
humano en la actividad de resolución de problemas era la
de proveer la herramienta adecuada para tal fin.
Sergio Martig – Martín Larrea
Clase 1 - 19
 Paradigmas
Herramientas de Programación
El equipo de programadores se concentró en el desarrollo
de un conjunto de herramientas interactivas que se
requerirían posteriormente para construir sistemas
interactivos más complejos.
La potencia de las herramientas de programación era
contar con componentes pequeños y bien entendidos que
pudieran componerse para crear otras herramientas. Una
vez que estas herramientas se entendieran podían a su vez
componerse con otras y así seguir.
Esto permitió que se aumentara la productividad de los
entendidos. Pero el entendido no era la única meta de
Engelbart.
Sergio Martig – Martín Larrea
Clase 1 - 20
Paradigmas
Computadora Personal
• Alan Kay, profundamente influenciado por los sistemas de
Papert y Engelbart, vió que la potencia y el éxito de un
sistema residía en ser accesible a los usuarios novatos tal
como lo fue LOGO.
• A principios de los 70, su visión del futuro de los sistemas
de cómputos se sintetizó en máquinas pequeñas y
poderosas que fueran dedicadas a un solo usuario: eran las
computadoras personales.
• Kay y su equipo, en Xerox Palo Alto Research Center,
trabajaron en la incorporación de un ambiente de
programación visual, simple y poderoso, Smalltalk, a una
computadora personal que ya estaba disponible.
Sergio Martig – Martín Larrea
Clase 1 - 22
Paradigmas
Sistemas de Ventana y la interface WIMP
• Un mecanismo para lograr este diálogo particionado es
separar físicamente la presentación de las diferentes
actividades de conversación en el display. La ventana es
el mecanismo asociado con esta separación física y lógica
de los espacios de display.
• Cada vez más usuarios usaban este tipo de interacción
(WIMP)
• Estos dispositivos aparecieron por primera vez en el
mercado en abril de 1981, cuando Xerox introdujo el
sistema de información Star 8010. Engelbart y Kay habían
sido los precursores.
Sergio Martig – Martín Larrea
Clase 1 - 24
Paradigmas
Computadora Personal
• La década de los 70 vió surgir la computación para las
masas.
• Una de las primeras demostraciones de las herramientas
poderosas que podían desarrollarse y ponerse a
disposición de novatos fue el primer lenguaje de
programación gráfico para chicos llamado LOGO (Seymour
Papert, MIT).
• Adaptando el lenguaje de programación a un modelo
(tortuga) que los chicos pudieran entender y usar, Papert
demostró algo invalorable de los sistemas interactivos: no
importa cuán poderoso pueda ser un sistema, siempre
será más poderoso si es sencillo para usar.
Sergio Martig – Martín Larrea
Clase 1 - 21
Paradigmas
Sistemas de Ventana y la interface WIMP
• Con el inmenso éxito comercial de las PC’s, se puso
énfasis en aumentar la usabilidad de la tecnología
centrada en el diálogo del usuario con la computadora.
• El modelo de trabajo estándar no se corresponde con
forzar al usuario a llevar a cabo su tarea desde el
comienzo hasta el fin sin diversificarse. La PC debería ser
flexible en cuanto a permitir al usuario la posibilidad de
cambiar de actividad.
• Además, si el usuario se dedicaba a más de un tipo de
actividad, era necesario presentar adecuadamente el
contexto de cada una de éstas de modo que pudiese
distinguirlas.
Sergio Martig – Martín Larrea
Clase 1 - 23
Paradigmas
La metáfora
• Las metáforas pueden usarse para enseñar nuevos
conceptos en término de los que ya se conocen. En el
desarrollo de LOGO, Papert usó la metáfora de la tortuga.
• Este mecanismo se reveló exitoso para introducir a los
novatos en técnicas de interacción relativamente
extrañas. Ejemplos son la metáfora del escritorio y la de
las hojas de cálculo. El peligro de la metáfora se percibe
luego de transcurrido un determinado tiempo. Metáfora de
la máquina de escribir. En la metáfora del escritorio, en la
Mac, la papelera es usada indistintamente para sacar un
diskette y para borrar un archivo.
Sergio Martig – Martín Larrea
Clase 1 - 25
 Paradigmas
La metáfora
• Otro problema que debe ser tenido en cuenta con las
metáforas es la carga cultural; debemos tener en
cuenta que el software se ha internacionalizado y que
la metáfora subyacente se aplicará en muchos países
distintos.
• Una metáfora sin sentido agregará complejidad
adicional entre el usuario y el sistema.
Sergio Martig – Martín Larrea
Clase 1 - 26
Paradigmas
Manipulación Directa
Las características delineadas por Shneiderman de una
interfaz de manipulación directa pueden resumirse como:
- Visibilidad de los objetos de interés
- Acción incremental en la interfaz con realimentación
rápida de todas las acciones
- Reversibilidad de todas las acciones, que alienta a
los usuarios a explorar sin penalidades severas
- Correctitud sintáctica de todas las acciones, de
modo tal que cada acción de un usuario sea legal
- Reemplazo de complejos lenguajes de comando por
acciones que manipulan directamente los objetos
visibles.
Sergio Martig – Martín Larrea
Clase 1 - 28
Paradigmas
Hipertexto
• En 1945, Vannevar Bush, estaba a cargo de más de
6000 científicos que expandieron las fronteras del
conocimiento científico durante la 2º Guerra Mundial.
Reconoció que el mayor problema de estos esfuerzos de
investigación tan prolíficos era mantenerse en contacto
con todo este cuerpo creciente de conocimiento científico
en la literatura. En su opinión, las mayores ventajas de
esta revolución científica serían obtenidas por aquéllos
que pudiesen mantenerse al tanto de este flujo de
información creciente.
• Describió entonces un aparato de recuperación y
almacenamiento de información innovativo y futurista: el
memex.
Sergio Martig – Martín Larrea
Clase 1 - 30
Paradigmas
Manipulación Directa
• A principios de los 80 el precio del hardware gráfico de
alta calidad bajó rápidamente y los diseñadores vieron
que sus productos ganaban popularidad si su contenido
visual aumentaba.
• De las interfaces de líneas de comandos se pasó a
interfaces que daban una gran realimentación haciendo
posible tener información por cada acción ejecutada por el
usuario.
• En 1982, Ben Shneiderman delineó las características de
una interfaz de manipulación directa. Utilizó el término
manipulación directa para describir las características
atractivas que tenían los sistemas interactivos basados en
gráficos tales como el Sketchpad y el de Xerox Palo Alto,
el Star.
Sergio Martig – Martín Larrea
Clase 1 - 27
Paradigmas
Manipulación Directa
• El primer suceso comercial que demostró la usabilidad
inherente de las interfaces de manipulación directa para el
público general fue el de la computadora personal de
Apple, en 1984.
• El paradigma WYSIWYG está relacionado con la
manipulación directa. Lo que se ve en la pantalla cuando se
usa por ejemplo un procesador de texto, no es el
documento actual que se producirá como documento final,
sino una representación de cómo se verá el documento
final. La implicancia con una interface WYSIWYG es que la
diferencia entre el final y la representación es mínima. Sin
embargo WYSIWYG no es una panacea en lo que se refiere
a usabilidad. Figura en documento.
Sergio Martig – Martín Larrea
Clase 1 - 29
Paradigmas
Hipertexto
• El memex era esencialmente un escritorio con la
habilidad de producir y almacenar cantidades masivas de
copias fotográficas de información documentada. Además
de su capacidad de almacenamiento, mantenía enlaces
entre las diferentes partes de los documentos. Así, la info
almacenada se asimilaba con una vasta red de datos
interconectados similar a cómo se percibe que la info está
almacenada en el cerebro humano.
• En los 60, Ted Nelson comenzó con la creación de un
revolucionario sistema de recuperación de información
denominado Xanadu, basado en la idea de interconexión,
texto no lineal y otras formas de medios. Nelson acuñó el
término de hipertexto a mediados de los 60 para reflejar
esta estructura de texto no lineal.
Sergio Martig – Martín Larrea
Clase 1 - 31
 Paradigmas
Trabajo cooperativo soportado por computadoras
• Otro desarrollo de los 60 fue el de las pimeras redes de
computadoras que permitieron la comunicación entre
distintas máquinas.
• Un resultado de esta comunicación es la emergencia de
colaboración entre distintos individuos vía la
computadora. CSCW: Computer Supported Cooperative
Work.
• CSCW es un tópico emergente en la investigación actual
de la IHC. Estos sistemas se construyen para soportar
usuarios que trabajan en grupos.
Sergio Martig – Martín Larrea
Clase 1 - 32
Paradigmas
La World Wide Web
• En tanto Internet estuvo disponible alrededor de
1969, no fue un gran paradigma de interacción hasta
que surgieron interfaces gráficas (browsers) bien
diseñadas para la Web.
• Estos browsers permitieron a los usuarios acceder
fácilmente a información multimedia usando sólo un
mouse para apuntar y cliquear.
• El gran impacto ha sido debido a la facilidad de uso
tanto de los browsers como del HTML.
Sergio Martig – Martín Larrea
Clase 1 - 34
Paradigmas
Interfaces Basadas en Agentes
• Los agentes humanos son personas que trabajan en pro
o en nombre de alguien: hay agentes que compran y
venden propiedades, agentes de viajes, agentes de bolsa,
etc. Los agentes de software, del mismo modo, actúan en
pro de los usuarios dentro del mundo electrónico.
Ejemplo: agentes de mail que filtran el correo.
• Los agentes pueden llevar a cabo tareas repetitivas,
observar y responder a eventos cuando los usuarios no
están presentes y también pueden aprender de las
acciones de los usuarios.
• Algunos agentes hacen exactamente lo que se les dice;
otros, usan técnicas de IA para aprender basándose en las
acciones de los usuarios.
Sergio Martig – Martín Larrea
Clase 1 - 36
Paradigmas
La World Wide Web
• Es probablemente el desarrollo reciente de mayor
significación.
• Ofrece facilidad de uso, interfaz predominantemente
gráfica, oculta la complejidad subyacente de los
protocolos de comunicación, las direcciones y el
acceso remoto a los datos.
• El proyecto WWW fue concebido en 1989 por Tim
Berners-Lee, que trabajaba en el CERN (Laboratorio
Eropeo de Física de Partículas) con el objetivo de
distrbuir información científica generada en el CERN y
compartirla con físicos de todo el mundo.
Sergio Martig – Martín Larrea
Clase 1 - 33
Paradigmas
Multimodalidad
• Un sistema interactivo multimodal es el que se basa
en el uso de múltiples canales de comunicación
humana. Cada canal diferente corresponde a una
modalidad de interacción diferente.
• Los sistemas multimodales son tema de
investigación hoy en día.
Sergio Martig – Martín Larrea
Clase 1 - 35
Paradigmas
La Computadora Omnipresente
• Los últimos 50 años de computación interactiva
muestran que aún pensamos en una computadora como
confinada a una caja sobre un escritorio, en una oficina o
en un laboratorio. La interface ha sido transformada de
una ruidosa teletipo a un display gráfico con una interface
WIMP o de lenguaje natural.
• A fines de los 80, un grupo de investigadores de Xerox
PARC, conducidos por Mark Weiser, iniciaron un programa
de investigación con el obejtivo de alejar la IHC del
escritorio e introducirla en la vida diaria.
• La intención es crear una infraestructura de cómputo que
penetre nuestro mundo físico de modo tal que no notemos
más a la computadora, aunque esté siempre presente
Sergio Martig – Martín Larrea
Clase 1 - 37
 Paradigmas Ejemplo
El Sistema Xerox Star
Interfaces Tangibles:
En 1981 Xerox introdujo el Sistema de Información 8010
Star. Este sistema cambió la forma en que debían
Caso de estudio teórico del curso… diseñarse los sistemas interactivos.

Fue diseñado como un sistema de automatización de

oficinas.

La idea básica era que los profesionales en una

organización debían tener estaciones de trabajo en sus
escritorios y debían usarlas para producir, recuperar,
distribuir y organizar documentación, presentaciones,
memos y reportes.

Todas las estaciones de trabajo en la organización debían

estar conectadas y debían compartir acceso a los
servidores de archivos, las impresoras y otros recursos.
Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea
Clase 1 - 38 Clase 1 - 39

Ejemplo Ejemplo
Los usuarios de Xerox Star Las características básicas de Xerox Star

Básicamente, la computadora debería ser tan invisible como Según Johnson et al. (1989) las características que la hicieron
fuese posible para los usuarios. única, caracterizadas de acuerdo a sus distintos niveles en la
arquitectura del sistema son:

Los usuarios podrían así enfocarse en su trabajo, olvidándose

• La máquina y la red
de tener que manejar conceptos de sistemas operativos,
programas, … • Las ventanas y los manejadores de archivo
• La interfaz de usuario

Otra característica importante era que se asumía que muchos de • El editor de documentos
los usuarios del Star serían ocasionales. Esto implicaba que el
sistema debía ser fácil de usar y de aprender.

Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea

Clase 1 - 40 Clase 1 - 41

Ejemplo Ejemplo
La máquina y la red Las ventanas y los manejadores de archivo
Las facilidades distintivas de la capa por encima del sistema
Las características básicas eran: operativo y que le permiten soportar la interfaz de usuario son
básicamente:
• Computadores personales en un ambiente distribuido.
Éstas estaban conectadas a una red local para compartir • Ventanas. Permiten mostrar simultáneamente
recursos caros. información en áreas separadas de la pantalla y también
solaparla.
• El mouse como dispositivo apuntador y seleccionador • Aplicaciones integradas. En los documentos puede
relativo. mostrarse diferente tipo de información (gráficos, rexto,
• Display de mapa de bits. planillas, …).

Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea

Clase 1 - 42 Clase 1 - 43
 Ejemplo Ejemplo
La Interfaz de usuario
El Star fue el primer sistema de manipulación directa para aplicaciones El editor de documentos
de negocios en un ambiente de oficina. Uso de metáfora del escritorio
dándole al usuario un modelo de documentos electrónicos en un Al nivel más alto de la arquitectura Star están sus aplicaciones, la
escritorio simulado. más prominente de las cuales es el editor de documentos:
• Manipulación directa e interfaz gráfica.
• Comandos genéricos o universales. • Editor de documentos WYSIWYG (What you see is what you
get).
• Íconos y manejo icónico de archivos.
• Uso de hojas de propiedades u opciones para especificar la • Conjunto de caracteres extendido para soportar distintos
apariencia de los objetos. idiomas.
• Descubrimiento progresivo • El documento es el corazón del sistema. El uso primario del
sistema es crear y mantener documentos.
• Un alto grado de consistencia

La alta calidad de la interfaz no se debió sólo a una década de diseño

creativo sino también al prototipado de ideas, a los análisis de lápiz y
papel y a los experimentos de factores humanos con potenciales
usuarios.
Sergio Martig – Martín Larrea Sergio Martig – Martín Larrea
Clase 1 - 44 Clase 1 - 45

Bibliografía

• ACM CHI Proceedings

• Johnson, J., et al., The Xerox Star: A Retrospective, IEEE
Computer 22(9), pp. 11-29, September 1989.
• Preece, J., Rogers, Y., Sharp, H., Benyon, D., Holland, S.,
Carey, T., Human-Computer Interaction, Addison Wesley,
1997.

Sergio Martig – Martín Larrea

Clase 1 - 46