Es importante conocer los diferentes estilos y paradigmas de interacción, sus ventajas y desventajas para poder sacar provecho de ellos en el contexto adecuado.
2. Introducción
La IHC provee métodos y herramientas pensando en las
interacciones de un usuario con el sistema.
Esta claro que si haces bien tu trabajo nadie se preguntará siquiera
qué es el diseño de la interacción, mucho menos quién lo hizo.
Consideren que estamos en medio de una revolución tecnológica y
los retos del diseño son grandes.
Interacciones
Todos los intercambios que suceden entre la
persona y el ordenador (Baecker and Buxton,
1987)
Interacción multimodal Se usan múltiples canales de comunicación
simultáneamente
Estilo de interacción
Término genérico que agrupa las diferentes
maneras en que los usuarios se comunican o
interaccionan con el ordenador (Preece, 1994)
4. Lenguaje de comandos
Sistema en el que
el usuario obtiene
información en la
aplicación
interactiva cuya
sintaxis esta
formalmente
definida a partir de
un grupo de
comandos con o
sin abreviación,
con o sin
parámetros
Orayen, R. (2010). Powershell. Curso básico de Powershell:
Comandos básicos. Recuperado de
https://lh6.googleusercontent.com/_2kdfosHrfSmvLV-
rrzGQ1KtcLMYrCod7iuIj3M32Ik=w400
5. Desventajas
Requiere un memorización y entrenamiento importantes
•No hay indicación visual de la orden que se necesita
•Más útil para usuarios expertos que para usuarios noveles
Gestión de errores pobre
Ventajas
Flexibilidad
• Las opciones de la orden
pueden modificar su
comportamiento
• La orden puede ser
aplicada a muchos
objetos a la vez
Permite la iniciativa
del usuario
Es atractivo para
usuarios expertos
•Ofrece acceso directo a
la funcionalidad del
sistema
Potencialmente rápido
para tareas complejas
Capacidad para hacer
macros
Lenguaje de comandos
6. Lenguaje Natural
Sistema cuyo
lenguaje de
comandos es un
sub conjunto
similar al de un
idioma, lengua
materna, natural
para el usuario
TabRez 2014. Ironman playing Jarvis interface and
voice.
https://www.youtube.com/watch?v=Wx7RCJvoCMc
7. Lenguaje natural
• Conocimiento del propio lenguaje
• Uso de la voz, por tanto manos libres
Beneficios
• Diferencias en lenguajes, argots, voces
• Pueden ser necesarios diálogos de
clarificación
• Interfaces todavía no inteligentes
Problemas
8. Actividad
• 1. Identificar qué tareas de tu proyecto tiene sentido usarlas
con comandos de voz (al menos 5).
• 2. Explicar a compañeros del salón tu aplicación y las tareas
que ejecuta y pedirle que hable con tu sistema y simule que
usa lenguaje natural.
• Al menos todos los integrantes de otro equipo.
• Al final define su lenguaje de comandos para su aplicación
tomando como base sus respuestas.
• Documente los resultados en su documento de proyecto.
9. Lenguaje de interrogación
• Sistema en el que los
comandos son de tipo
interrogatorios
llamados solicitudes
de acceso a bases de
datos de las que el
sistema entrega un
reporte de la solicitud
• Ejemplo: SQL
SQL BootCamp, por Paul, J.
2019. A Better Way to Write
SQL queries for Developers.
Recuperado de:
https://hackernoon.com/drafts/
yo17b3wmj.png
10. Preguntas /
Respuesta
s
• Sistema en el que
la aplicación interactiva hace
una serie de preguntas que
el usuario responde a uno por
uno.
Por ejemplo un sistemas
expertos
medico basados en árboles
de decisión, hace preguntas y
dependiendo de las
respuestas da un diagnostico
11. Las teclas
de función
• Sistema en la que el usuario
directamente desencadena
acciones pulsando uno o más
botones denominados teclas de
función.
• la presión de la tecla de
función [F1] llama el sistema de
ayuda en línea, la presión de la
tecla [Shift] + [F1] llama a
este mismo sistema,
pero se coloca en el contexto de
la tarea.
12. Selección
de menú
• Sistema en el que el usuario
activa mediante la selección de las
acciones de un conjunto finito de
alternativas llamados elementos de
menú o elementos de menú. Este
conjunto se conoce comúnmente
como el menú, rara vez la lista.
• Un elemento del menú se puede
seleccionar por apuntar
directamente (por ejemplo con el
puntero del mouse) o indirecta (por
ejemplo, con las flechas de
desplazamiento),mediante la
introducción de un código
numérico (por ejemplo, 1, 2, 3) o
alfanumérico(por
ejemplo, "Q" para salir) o la tecla de
función (por ejemplo, [F10] para salir)
13. Selección de menú
Ventajas
Entrenamiento reducido, menos tecleo
Permiten el uso de herramientas de
gestión de diálogos
Toma de decisión estructurada
Desventajas
Pueden resultar lentos para usuarios
experimentados
• Solución: atajos de teclado
Ocupan mucho espacio en la interfaz
• Solución: menús desplegables y pop-
up
Requieren una visualización rápida
14. Llenado de
formularios
• Sistema en el que
la aplicación
interactiva presenta
un formulario en la
pantalla se compone
de los campos
vacíos y etiquetas
para ser completado
por el usuario
15. Multi-ventana
• Sistema de muchas
pantallas donde se
divide el usuario en una
serie
de ventanas físicas que
pueden
superponerse, cada
ventana contiene una o
más acciones
específicas o puede ser
en sí una terminal
virtual con el
lenguaje de comandos
16. Manipulación
directa
Características: (Schneiderman, 1991)
•Representación continua de los objetos y acciones de interés
•Cambio de una sintaxis de órdenes compleja por la manipulación
de objetos y acciones
•Acciones rápidas, incrementales y reversibles que provocan un
efecto visible inmediato en el objeto seleccionado
Posible gracias a las pantallas gráficas de alta
resolución y los dispositivos apuntadores
Historia: Xerox Star, Apple Macintosh
Entorno más común: interfaz WIMP
•Windows, Icons, Menus, Pointers
17. Manipulación directa
Ventajas
Los nuevos usuarios aprenden más
rápidamente
Los usuarios expertos pueden trabajar
rápidamente
Los usuarios ven rápidamente el resultado de
sus acciones
Las acciones son reversibles
Desventajas
Se necesitan más recursos
No todas las tareas pueden ser
descritas por objetos concretos
No todas las acciones se pueden
hacer directamente
18. Interacción
icónica
• Sistema de acciones de
usuario y la retroalimentación
de la aplicación interactiva se
expresan mediante símbolos
gráficos llamados iconos,
pictogramas o ideogramas.
• La interfaz gráfica de
usuario basada en arrastrar
/liberar es de uso extensivo en
el escritorio de todo sistema
operativo gráfico
19. Interacción
gráfica
• Sistema en el que el usuario
puede establecer, modificar,
procesar,
almacenar bocetos gráficos,
diagramas, dibujos,
ilustraciones en dos o tres
dimensiones espaciales y pued
e seleccionar los
elementos con un puntero.
• Esto es de suma importancia para
la implementación de sistemas
de Diseño Asistido por
Computadora (CAD)
20. Interacción Multimedia
• Sistema en el que el usuario
puede realizar las tareas que
implican múltiples objetos
multimedia (por
ejemplo, gráficos, sonido,
imagen, música, voz,
video).La puesta en
práctica suele ir
acompañada de múltiples
medios (por ejemplo, la
voz, el altavoz,
un Camero video).
24. Formularios - TextFields
• ¿Por qué elegir TextFields?
• Medios para entrar en las respuestas no
estandarizadas.
• Datos personales
• Todos los usuarios estarán familiarizados con
ellos y saben cómo deben interactuar con ellos.
• Guías:
• Permitir al usuario ver los tipos de datos que
pueden ser introducidos en estas regiones
• Cuáles son obligatorios; de lo contrario
• Los campos de entrada no editables deben
tener una apariencia clara y explicar la razón
por la que no podemos modificar información,
incluso mejor omitirlos.
• Si se tiene un grupo limitado de respuestas
posibles entonces utilizar un menú
desplegable o lista de desplazamiento.
• Proporcionar una lista de posibles
selecciones; así el usuario puede introducir su
elección de forma manual si no necesitan
ayuda para recordar o la elección de una
opción o que puede escanear la lista si lo
hacen necesitar ayuda.
26. Guías de Formularios
Colocar las
etiquetas cerca de
las entradas de
datos permite a los
usuarios
rápidamente asociar
lo que esperan que
ingrese de valor
Colocar las
etiquetas lejos
de las
entradas de
datos
disminuye los
porcentajes de
entradas por
usuario
27. La entrada debe ser visible
Las cajas de Texto se expanden
Verticalmente para que el usuario
tenga que hacer scrolling
Las cajas de Texto deben tener el
tamaño suficiente para que el
usuario vea sus entradas
28. Formularios -
TextFields
• Guías:
• Establecer un TextField para cada respuesta, nombre,
dirección, institución, país.
• Para cada respuesta individual establecer la cantidad de
información que será ingresada.
• Usar TextArea para respuestas más grandes
• Elige un color apropiado para el campo de entrada, de
acuerdo con el color de fondo.
• Asignar etiquetas adecuadas para cada uno de estos
campos de entrada, como "Tu Nombre", "Primera Línea
de Dirección ‘ y ' Mensaje '.
• Coloque las etiquetas cerca de sus campos de entrada
correspondientes.
• Deja una pequeña cantidad de espacio muerto entre
cada campo de entrada para asegurarse de que el
usuario sabe qué campo para introducir datos en cada
etiqueta.
• Cursor visible (rayita negra) es una pieza útil de
retroalimentación informativa
• El usuario dispone de una clave al instante de
que puede escribir y cuando se acaben los
caracteres disponibles pues quitar el cursor.
29. Formularios -
TextFields
• Otras guías:
• Color - El usuario debe ser capaz de
determinar qué partes de la pantalla son
editables y que las regiones no lo son.
• El campo de entrada es de color blanco
• El resto de la forma en línea es de color
gris o algún otro color de contraste.
• Tamaño - El campo de entrada debería
proporcionar al usuario con indicación implícita
de la cantidad de información que se requiere.
Por ejemplo presentar un tamaño de campo
para un número específico de dígitos y / o
letras requeridas, como al entrar en detalles de
la tarjeta de crédito / débito con 16 dígitos.
• Arreglos – Agrupa todo de forma coherente.
Los campos de entrada usando etiquetas
específicas; y sus campos de entrada cerca de
sus etiquetas correspondientes
30. Mejores usos de Estilos de
Interacción en función de la
tarea y el contexto
organizacional
• Pre-requisitos mínimo o máximos, como la cantidad
de conocimientos necesarios para el usuario para
realizar correctamente la tarea con la interfaz de
usuario varía. Por ejemplo, los requisitos de un cajero
automático debe ser mínima, mientras que la interfaz de
usuario de un sistema de control de tráfico aéreo sin
duda sería máxima.
• Baja o alta productividad, como la frecuencia de uso
varía dependiendo de la tarea. Por ejemplo, una
redacción de carta en una compañía de seguros es de
alta productividad para los productores de seguros,
mientras que un informe mensual no lo es.
• Representatividad del medio ambiente es posible o
no, ya que el que es útil para representar los objetos de
dominio como objetos manipulables. Por
ejemplo, IBM RealPlaces [Robe00b] reproduce los
objetos físicos que pertenecen al mundo real para que
puedan comportarse como en el mundo real (por
ejemplo, un sistema de teléfono, un archivador
de tarjetas).
31. Representatividad del medio ambiente
POSIBLE
3DNA Desktop, Unkwnown, retrieved from
http://www.3dna.net/products/desktop.htm
38. Mejores usos de Estilos de Interacción en
función de la tarea y el contexto organizacional
• Importancia baja o alta, si
una tarea en la
organización pueden ser
cruciales o no. Por
ejemplo, la creación de una
alarma en una sala de
control se considera
importante, mientras que la
edición de un informe
estadístico sencillo no lo es.
• Complejidad baja o alta, ya
que el grado de complejidad
de una tarea puede
variar. Por ejemplo, una
tarea de seguimiento
de radar es muy complejo,
mientras que una
composición de publicidad no
lo es.
• Estructuración de la tarea
baja o alta. Se refiera a los
grados de libertad o las
limitaciones que tiene el
usuario en la realización
de la tarea. Por ejemplo, el
cálculo de las raíces de
una ecuación de segundo
grado está altamente
estructurado ya que
un algoritmo
determinista rige el proceso,
mientras que un consejo que
da la tarea de los préstamos
puede reordenar las sub-
tareas de acuerdo con la
información actualmente
disponible.
39. Mejores usos de Estilos de Interacción en
función de la tarea y el contexto organizacional
Estilo de interacción Pre-requisito Productividad Reproductitividad Estructurada Importancia Complejidad
Comandos moderada alta no posible baja alta baja a
moderada
Lenguaje de programación maximizado baja no posible baja baja moderada a alta
Lenguaje minimizado baja no posible baja baja baja a moderada
Natural
Teclas de Función minimizado alta no posible baja a
moderada
moderada baja a moderada
Menú minimizado moderada no posible moderada a
alta
baja moderada
Lenguaje de Consultas moderada moderada no posible baja baja baja
Preguntas/Respuestas minimizado baja posible alta baja baja
Llenado Formularios moderada moderada posible alta alta moderada
Multi-ventanas moderada moderada posible baja a
moderada
alta alta
Manipulación Directa minimizado to
maximizado
moderada posible baja alta alta
Interacción Iconos moderada alta posible moderada moderada baja
Interacción gráfica moderada a
maximizado
moderada posible baja baja a
moderada
baja a moderada
Interacción Multimedia minimizado baja posible moderada baja a
moderada
moderada a alta
Interfaces 3D minimizado baja posible baja a
moderada
baja baja a moderada
40. Mejores usos de Estilos de Interacción
en función del Usuario
• Experiencia en la
tarea (elemental, regular, rica): este
parámetro combina conocimiento de la
tarea sintáctico y semántico. Conocimiento
sintáctico se refiere a la asignación de tareas y su
posición en la cadena completa, incluida la
terminología, mientras que el conocimiento
semántico se refiere al dominio de los objetos,
acciones y procedimientos integrados en la tarea. Si
un usuario integrado estas, tanto desde el punto
de intelectual y de vista práctico, la experiencia
de la tarea que se dice rica.
• La experiencia del sistema
(elemental, regular, rica): este parámetro expresa el
nivel de experiencia requerido por los medios
tecnológicos con el fin de llevar a cabo la
tarea, tales como las instalaciones de la
impresora, gestión de archivos, procesador de
textos.
41. Mejores usos de Estilos de Interacción
en función del Usuario
• La motivación de
Trabajo (bajo, moderado, alto): este
parámetro se traduce la actitud
psicológica del usuario con respecto a la
tarea. Si el usuario está dispuesto a llevar
a cabo una tarea, su motivación es
alta. Un usuario limitado tiene un valor
bajo.
• La experiencia con dispositivos de
interacción moderna (bajo, moderado,
alto): este parámetro refleja cómo un
usuario puede utilizar el dispositivo
de interacción moderno uno a la vez
o varios simultáneamente. Por ejemplo,
los dispositivos de reconocimiento de
gestos se espera que requiere de cierta
experiencia sustantiva de los usuarios.
42. Mejores usos de Estilos de Interacción en función del
Usuario
Interaction style Experiencia en la
tarea
Experiencia en el sistema motivación Experiencia con la
modernidad
Command
Language
moderada a rica rica alta moderada
Programming
language
rica rica rica moderada
Natural
Language
rica moderada baja alta
Query language rica moderada moderada alta
Questions/Answers elemental elemental to moderada baja moderada a rica
Function keys moderada a rica elemental baja baja
Menu selection elemental elemental baja baja
Form filling elemental to rica elemental to rica baja to moderada elemental to moderada
Multi-windowing elemental elemental baja baja
Direct
manipulation
elemental moderada baja baja
Iconic
interaction
elemental to
moderada
moderada baja to moderada baja
Graphic
interaction
elemental moderada baja to moderada moderada
Multimedia
interaction
elemental moderada baja moderada
Virtual reality elemental moderada baja alta
44. Interacción asistida
• La manipulación directa exige que el
usuario explicite todas las tareas y
controle todos los eventos
• El creciente número de nuevos
usuarios exige un cambio en la forma
de interactuar con el ordenador
• La interacción asistida usa la
metáfora del asistente personal o
agente que colabora con el usuario
• El usuario no dirige la
interacción
• Trabaja de forma cooperativa
con
el agente o agentes
• Se reduce el esfuerzo del usuario
• Agentes vs Asistentes
46. Interacción asistida
Agentes de la interfaz
Agente: es un programa que el usuario ve como un asistente o
programa que le ayuda y no como una herramienta
Tiene algunas de las características asociadas a la inteligencia
humana
• Capacidad de aprender, inferencia, adaptabilidad, independencia, creatividad,
etc (Lieberman, 97)
El usuario no ordena, delega tareas al agente (Maes, 94)
El agente es más discreto que el asistente
• Trabaja en segundo plano y actúa por propia iniciativa cuando encuentra
información que puede ser relevante para el usuario
• Puede afectar a los objetos de la interfaz sin instrucciones explícitas del usuario
47. Interacción asistida – agentes
Características
Autonomía
Trabaja en segundo plano
Observa al usuario y las
fuentes de información
disponibles
Inteligencia
Actúa por propia iniciativa
Se adapta a múltiples
situaciones, variando su
estrategia
Uso personal
Se adapta y aprende del
usuario
No insiste en una solución
si el usuario decide otra
48. Interacción asistida – agentes
Integración con aplicaciones
Para poder
interaccionar
con agentes las
aplicaciones
deben tener
ciertas
propiedades:
Programable
Controlable
Examinable
49. Interacción asistida - agentes
Integración con aplicaciones
Programable
Una aplicación es programable si
proporciona un medio (a través de un
lenguaje de programación o mediante
un API) a un agente externo para llamar
a las órdenes de la aplicación
Controlable
Una aplicación es controlable si es
capaz de informar a un agente externo
que el usuario pide a la aplicación
utilizar una función por menú, por icono
o por teclado
Examinable
Una aplicación es examinable si se
pueden revisar periódicamente las
estructuras de datos de la aplicación y
tratar de inferir las acciones que se
están realizando con la interfaz de
usuario comparando con otros estados
de las estructuras de datos
51. Interacción asistida
Asistentes, magos, guías
Son entidades computacionales que nos asisten en el uso de las
aplicaciones existentes
Nos exponen de manera fácil lo que se ha de hacer y pueden entender
palabras escritas o habladas o acciones gráficas e interpretarlas
Son muy flexibles en la forma en que reciben las instrucciones: el usuario
tan sólo dice lo que quiere hacer
Pueden ser capaces de aprender del usuario
El asistente es activado por el usuario
54. Paradigmas de interacción
Son los modelos de los que se derivan
todos los sistemas de interacción
Los paradigmas
interactivos actuales
son:
El ordenador de sobremesa
La realidad virtual
La computación ubicua
La realidad aumentada
60. Realidad virtual
• El término RV se suele aplicar a
• Interfaces en 3D con las que se puede interactuar
y se actualizan en tiempo real
• Sistemas cuyo nivel de autonomía, interacción y
sensación de presencia es casi igual al del mundo
real
• Condiciones para hablar de un sistema de RV:
• Sensación de presencia física directa mediante
indicaciones sensoriales (visuales, auditivas,
hápticas) creadas por la tecnología
• Indicaciones sensoriales en tres dimensiones
• Interacción natural. Permiten manipular los objetos
virtuales con los mismos gestos que los reales:
coger, girar, etc.
64. 01
WORLD IA DAY 2017
Computación
Ubicua
Trata de extender la
capacidad computacional al
entorno del usuario
Permite que:
la capacidad de
información esté
presente en todas partes
en forma de pequeños
dispositivos muy
diversos
que permiten
interacciones de poca
dificultad
conectados en red a
servidores de
información
El diseño y localización de los
dispositivos son específicos
de la tarea objeto de
interacción
El ordenador queda relegado
a un segundo plano,
intentando que resulte
“transparente” al usuario
(ordenador invisible)
65. 01
WORLD IA DAY 2017
Computación
ubicua
Origen: Mark Weiser,
Xerox PARC, 1991
Hay una gran variedad
de dispositivos:
Insignias activas
Marcas
Tabletas
Pizarras, etc.
Podemos hablar de
entornos en los que los
usuarios no
interaccionan
directamente con
ordenadores, sino con
dispositivos de diverso
tipo y tamaño
66. Mark Weiser y su grupo
en un entorno ubicuo
Computación ubicua
69. Computación ubicua
Pizarras
• 1 m x 1½ m
• 1024 x 768
• b & n
• tiza electrónica
• Tablón de anuncios
(cambia según la
marca
o insignia activa)
• Pizarra clásica, pero
que
cambia con el
usuario
70. Computación ubicua
Necesidades
Necesidades para la
computación ubicua:
Ordenadores baratos y de
bajo consumo
Programas de ejecución
ubicua
Red que lo unifique todo
Los avances en el hardware no son aún suficientes
para que el paradigma de la computación ubicua
sustituya al del ordenador de sobremesa
74. Computación ubicua
Beneficios y problemas
Beneficios
Simplicidad o invisibilidad de la
interacción
Fiabilidad
Problemas
Pérdida de privacidad (insignia
activa)
Tecnología no asentada
No resuelve todos los problemas
75. Realidad aumentada
La RA trata de
reducir las
interacciones con el
ordenador
utilizando la
información del
entorno como una
entrada implícita
La RA integra el
mundo real y el
computacional:
El mundo real
aparece
aumentado
por
información
sintética
Se consigue
una
disminución
importante del
coste
interactivo
76. Realidad aumentada
• Objetivos:
• Mejorar la interacción con el mundo
real
• Integrar el uso del ordenador en
actividades cotidianas
• Posibilitar el acceso a usuarios
diversos y no especializados
• Los objetos cotidianos se convierten
en objetos interactivos
• Trasladar el foco de atención del
ordenador al mundo real
• La información se traslada al mundo
real, en lugar de introducir el mundo
real en el ordenador (realidad virtual)
77. • Método más común:
• Solapamiento entre la información digital y
las imágenes del mundo real a través del
uso de visualizadores en casco o
proyecciones de vídeo
• La situación del usuario será
automáticamente reconocida utilizando
diversas técnicas de reconocimiento
(tiempo, posición, objetos, códigos de
barra…)
Realidad aumentada
78. Realidad aumentada
Corrientes existentes (1)
• Aplicar la realidad virtual al mundo real
• Se aumenta o mejora la visión que el usuario tiene del mundo
real con información adicional sintetizada
• La información se superpone mediante el uso de gafas
especializadas
79. Realidad aumentada
Corrientes existentes
• Usar dispositivos que
aumentan la realidad e
interaccionan directamente con
ella
• El usuario interactúa con el
mundo real, que está
aumentado con información
sintetizada
• No se trata de superponer
la información real con la
virtual, sino de hacer
participar a objetos
cotidianos como un lápiz o
una mesa que interactúan
con el sistema de forma
automática
83. Realidad aumentada
Líneas de trabajo
• Superficies interactivas
• Transformación de la superficie dentro de un espacio
arquitectónico (paredes, mesas, puertas, ventanas) en una
superficie activa entre el mundo físico y el mundo real
• Acoplamiento de bits y átomos
• Acoplamiento sin interrupciones entre los objetos de cada día
que se pueden coger (tarjetas, libros, etc.) y la información
digital que está relacionada con ellos
• Medio ambiente
• Uso del medio ambiente como sonido, luz, corrientes de aire y
movimiento de agua como interfaces de fondo
85. Realidad aumentada
Ordenadores corporales
Objetivos:
Llevar encima el ordenador
Interactuar con el usuario
según el contexto
Enlazar la información del
entorno personal con la de un
sistema informático
Características:
Comodidad
Naturalidad
Integración con
la vestimenta
MIT Media Lab.
Wearable
computers
86. Comparación de los paradigmas
de interacción
[Rekimoto, 1995]
A) Sobremesa
D) Realidad AumentadaC) Computación Ubicua
B) Realidad Virtual
C Computador
R Mundo Real
Comparación de paradigmas de interacción
Persona - Computador
Persona - Mundo real
Mundo real - Computador