Presentaci

1
Interfaces - Interacción Lengua, lenguajes y
canales de comunicación y más .
Prof. Adelaide Bianchini Depto. de Computación y
Tecnología de la Información Universidad Simón
Bolívar - Caracas. Octubre 2007
2

• Agenda
• Motivación

3

• Agenda
• Motivación
• HCI Human Computer Interaction

4

• Agenda
• Motivación
• HCI Human Computer Interaction
• Lengua, lenguajes y canales de comunicación

5

• Agenda
• Motivación
• HCI Human Computer Interaction
• Lengua, lenguajes y canales de comunicación
• Concepto de interacción

6
Motivación ? Qué es la Interfaz?
Medio de comunicación y lenguaje de algo no
necesariamente trivial"
7
Motivación ? Qué es la Interfaz?
Medio de comunicación y lenguaje, de algo no
necesariamente trivial" La superficie de
contacto entre dos entes disímiles
8
Motivación ? Qué es la Interfaz?
Medio de comunicación y lenguaje, de algo no
necesariamente trivial" La superficie de
contacto entre dos entes disímiles Todos
los intercambios que suceden entre la persona
y el computador (o cualquier dispositivo)
9
Motivación ? Qué es la Interfaz?
La interfaz es la parte (hardware y software) del
sistema informático que facilita al usuario el
acceso a los recursos del computador.
10
Motivación ? Qué es la Interfaz?
La interfaz es la parte (hardware y software) del
sistema informático que facilita al usuario el
acceso a los recursos del ordenador. Para saber
acerca de las interfaces, se requiere conocer las
tareas de interacción que puede realizar un
individuo.
11
Motivación ? Qué es la Interfaz?
Para saber diseñar interfaces, se requiere
conocer algunos aspectos relacionados con los
individuos. Es decir, se requiere analizar las
peculiaridades de los usuarios.
12
Motivación ? Qué es la Interfaz?
Para saber diseñar interfaces, se requiere
conocer algunos aspectos relacionados con los
individuos. Es decir, se requiere analizar las
peculiaridades de los usuarios. Se requiere
además, conocer las características de los
dispositivos que se utilizarán.
13
Motivación ? Qué es la Interfaz?
El diseño de interfaces y el diseño de
interacción son áreas de interés de la disciplina
llamada Factores Humanos (Human Factors) ,
también llamada Interacción Humano-Computador
(HCI Human-Computer Interaction).
14
Motivación ? Qué es la Interfaz?
El diseño de interfaces y el diseño de
interacción es son áreas de interés de la
disciplina llamada Factores Humanos (Human
Factors) , también llamada Interacción
Humano-Computador (HCI Human-Computer
Interaction). El objetivo primordial de esta
disciplina es desarrollar técnica y métodos para
mejorar la interacción entre los humanos y las
máquinas (el computador, entre ellas).
15
HCI Human Computer Interaction
16
HCI Human Computer Interaction

• Es la disciplina que se encarga de los siguientes
  procesos
• diseñar
• evaluar
• implementar
• artefactos en sistemas interactivos utilizados
• por humanos
• el estudio de los fenómenos que rodean estos
  procesos

17
HCI Human Computer Interaction
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Contextos básicos a considerar
18
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Contextos básicos a considerar
Físicos ? relacionados con el hardware y
dispositivos de interfaz
19
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Contextos básicos a considerar
Físicos ? relacionados con el hardware y
dispositivos de interfaz Sintácticos ?
presentación de información secuencia, orden
de las acciones
20
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Contextos básicos a considerar
Físicos ? relacionados con el hardware y
dispositivos de interfaz Sintácticos ?
presentación de información secuencia, orden
de las acciones Semánticos ? significado de
los objetos significado de las acciones
21
HCI Human Computer Interaction
Usos y contextos
Áreas de aplicación y tareas
Aspectos sociales y organizacionales
Máquinas
Diálogos
Metáforas
Diseño Gráfico
Dispositivos I/O
22
Lo primero ? Observar al usuario
Análisis del usuario Lengua y lenguaje Canales de
comunicación ? Tipos Integración Interacción ?
Primitivas
23
Conceptos generales Análisis del usuario

• Implica conocer aspectos como
• Habilidades físicas y sensoriales.

24
Conceptos generales Análisis del usuario

• Implica conocer aspectos como
• Habilidades físicas y sensoriales.
• Habilidades cognitivas.

25
Conceptos generales Análisis del usuario

• Implica conocer aspectos como
• Habilidades físicas y sensoriales.
• Habilidades cognitivas.
• Diferencias de personalidad.

26
Conceptos generales Análisis del usuario

• Implica conocer aspectos como
• Habilidades físicas y sensoriales.
• Habilidades cognitivas.
• Diferencias de personalidad.
• Diferencias culturales.

27
Conceptos generales Análisis del usuario

• Implica conocer aspectos como
• Habilidades físicas y sensoriales.
• Habilidades cognitivas.
• Diferencias de personalidad.
• Diferencias culturales.
• Escenarios
• Las tareas.
• Entorno físico y social.

28
Lenguaje natural, lengua y canales de
comunicación Qué es el lenguaje natural? Qué
es la lengua?
29
Lengua, lenguaje y canales de comunicación

• El lenguaje natural del hombre es la capacidad
  multisensorial y multimedial del hombre para
  comunicarse entre si.

30
Lengua, lenguaje y canales de comunicación

• El lenguaje natural del hombre es la capacidad
  multisensorial y multimedial del hombre para
  comunicarse entre si.
• El lenguaje natural es a la vez un fenómeno
  individual y social.

31
Lengua, lenguaje y canales de comunicación

• La lengua es el lenguaje hablado y escrito,
  enseñado, cuidado y transmitido por una
  determinada comunidad a lo largo de un período
  histórico significativo.
• La lengua es estudiada por la lingüística.

32
Lengua, lenguaje y canales de comunicación

• La lengua es artificial y puede alejar al hombre
  de sus raíces más profundas.
• Una lengua puede morir si no logra transformarse
  constantemente al contacto con el lenguaje
  natural.

33
Lengua, lenguaje y canales de comunicación

• La lengua es artificial y puede alejar al hombre
  de sus raíces más profundas.
• Una lengua puede morir si no logra transformarse
  constantemente al contacto con el lenguaje
  natural.
• El lenguaje es un fenómeno natural. La lengua es
  producto de una civilización.

34
Lengua, lenguaje y canales de comunicación

• Canales de comunicación

35
Lengua, lenguaje y canales de comunicación

• Los canales de comunicación dependen de
• un medio de transmisión,
• de los equipos de transducción y traducción y
• del aparato sensori-motor del hombre, capaz de
  producir y recibir mensajes por estos canales.

36
Lengua, lenguaje y canales de comunicación

• Se utilizan normalmente tres canales
• el visual,
• el auditivo y
• el gestual.

37
Lengua, lenguaje y canales de comunicación

• Se utilizan normalmente tres canales
• el visual,
• el auditivo y
• el gestual.
• El hombre trata de ampliar el ancho de banda de
  los canales de comunicación.

38
Lengua, lenguaje y canales de comunicación

• Canal gestual
• El gesto es un signo no persistente y funciona
  por medio del contacto físico directo o mediante
  la percepción de posturas del cuerpo humano.

39
Lengua, lenguaje y canales de comunicación

• Canal gestual
• El gesto es un signo no persistente y funciona
  por medio del contacto físico directo o mediante
  la percepción de posturas del cuerpo humano.
• La computación entiende ciertos gestos bien
  definidos, pero es en general muy pobre para
  producir gestos.

40
Lengua, lenguaje y canales de comunicación

• Canal auditivo
• Es el primer canal de contacto del ser humano con
  el mundo.
• Es el primer canal lingüístico de cada ser
  humano. Es un canal bidireccional.

41
Lengua, lenguaje y canales de comunicación

• Canal auditivo
• Es el primer canal de contacto del ser humano con
  el mundo.
• Es el primer canal lingüístico de cada ser
  humano. Es un canal bidireccional.
• La computación produce y empieza a entender los
  signos auditivos.

42
Lengua, lenguaje y canales de comunicación

• Canal visual
• El canal visual tiene el ancho de banda más
  importante de todos los canales de comunicación.
• La comunicación visual es la más importante para
  la existencia y utilización de símbolos para la
  comunicación.

43
Lengua, lenguaje y canales de comunicación

• Canal visual
• La historia de la computación es al mismo tiempo
  la historia de la ampliación y plena integración
  de este canal en las aplicaciones.
• La computación produce y empieza a entender
  signos visuales.

44
Integración

• La interfaz es el indicio del esfuerzo del hombre
  para integrar la computación en la comunicación
  general del hombre.

45
Integración

• La interfaz es el indicio del esfuerzo del hombre
  para integrar la computación en la comunicación
  general del hombre.
• Es el reconocimiento que un programa antes de ser
  cálculo y evaluación lógica es un lenguaje y un
  intento de comunicación.

46
Integración

• Las interfaces tienden a utilizar de manera
  natural todos los canales de comunicación que se
  disponen.

47
Qué es la interacción?
48
Interacción

• El intercambio de información entre un usuario y
  un sistema informático.

49
Interacción

• El intercambio de información entre un usuario y
  un sistema informático.
• El intercambio tiene asociado un lenguaje, por
  consiguiente una sintáxis y una semática.

50
Interacción

• El intercambio de información entre un usuario y
  un sistema informático.
• El intercambio tiene asociado un lenguaje, por
  consiguiente una sintáxis y una semática.
• Se interactúa con objetos para activar acciones y
  eventos.

51
Interacción
Interacción con cosas de la vida real?
52
Interacción Objetos en la vida real
VS.
53
Interacción Objetos en la vida real
VS.
54
Interacción Objetos en la vida real
VS.
55
Interacción Objetos en la vida real
VS.
56
Interacción Objetos en la vida real
VS.
57
Interacción Objetos en la vida real
VS.
58
Interacción Objetos en la vida real
VS.
59
Interacción Objetos en la vida real
VS.
60
Interacción Objetos en la vida real
61
Interacción Objetos en la vida real
Cuál es la semántica?
62
Interacción
Volvamos a los conceptos!
63
Interacción

• Todo está basado en las primitivas de interacción

64
Interacción

• Todo está basado en las primitivas de
  interacción
• Posicionamiento
• Obtención de una posición u orientación (2D y 3D)
• Ejm. Aplicación de dibujo

65
Interacción

• Todo está basado en las primitivas de
  interacción
• Introducir Valor
• Obtención de un dato cuantificable (numérico,
  porcentual, etc.)
• Ejm. Datos sensibles en una aplicación

66
Interacción

• Todo está basado en las primitivas de
  interacción
• Introducir Texto
• Introducción de un texto o identificador
• Ejm. Autor de un documento

67
Interacción

• Todo está basado en las primitivas de
  interacción
• Selección
• Obtención de una alternativa (entre varias
  posibles).
• Puede ser sobre un conjunto finito o un conjunto
  de cardinalidad variable.

68
Interacción

• Todo está basado en las primitivas de
  interacción
• Arrastre
• Secuencia de posiciones entre un punto inicial y
  otro final.
• Ejm. Mover un documento hacia
• otra carpeta.

69
Interacción
70
Interacción
71
Interacción
72
Interacción
Cómo interactúa el usuario con esta aplicación?
73
Interacción
74
Diseño de interfaces (más adelante..)
75
Objetivos de una buena interfaz

• Maximizar la velocidad de aprendizaje
• Minimizar la tasa de errores
• Maximizar la velocidad de uso
• Estética adecuada

76
Cómo diseñar para mejorar la interacción hombre-m
áquina?

• Diseño centrado en el usuario
• Principios
• Reglas
• Estándares
• Directrices ? Guías de estilo

77
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Principios
Son conceptos de muy alto nivel que deben ser
utilizados en el diseño de aplicaciones.
78
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Principios A modo de ejemplo

• Aliviar la carga cognitiva
• Confiar en el reconocimiento
• Proporcionar pistas visuales
• Proporcionar opciones por defecto
• Proporcionar atajos

79
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Principios A modo de ejemplo (cont.)

• Aliviar la carga cognitiva
• Promover la sintaxis objetoacción
• Emplear metáforas del mundo real
• Emplear la revelación progresiva para evitar
  abrumar al usuario.
• Promover la claridad visual

80
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Reglas de diseño
Guían al diseñador con el fin de incrementar la
usabilidad. Se clasifican en estándares y
directrices.
81
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Estándares
Son requisitos, reglas o recomendaciones basadas
en principios probados y en práctica.
82
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Directrices
Las directrices recomiendan acciones que se
basan en un conjunto de principios de diseño.
Son más específicas que los principios y
requieren menos experiencia para entenderlas e
interpretarlas que éstos.
83
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Guías de estilo
Llamadas también guías corporativas. Están
basadas en principios y contienen directrices que
se concretan a muy bajo nivel.
84
Cómo diseñar para mejorar la interacción hombre-m
áquina?
Guías de estilo
Llamadas también guías corporativas. Están
basadas en principios y contienen directrices que
se concretan a muy bajo nivel. Las guías de
estilo corporativas se centran en presentaciones
comunes, comportamientos y técnicas que deben ser
implementadas por todos los productos en una
compañía.
85
Objetos de las interfaces
86
Objetos de las interfaces gráficas
Ventanas Menúes Íconos Botones Campos etc.
87
Objetos de las interfaces gráficas
Ventanas
88
Objetos de las interfaces gráficas
Ventanas tipo diálogo
89
Objetos de las interfaces gráficas
Menúes
90
Objetos de las interfaces gráficas
Íconos
91
Objetos de las interfaces gráficas
Botones
92
Objetos de las interfaces gráficas
Campos
93
Objetos de las interfaces gráficas
Qué es?
Metáforas Es un tropo fundamental de la
retórica. Es una descripción de una situación
desconocida utilizando una situación conocida.
94
Objetos de las interfaces gráficas

• Metáforas
• Existen metáforas visuales
• Basados en en lenguaje visual
• Se asocian a estructuras, clases, objetos,
  atributos a nombres y operaciones
• Se pueden asociar procesos y algoritmos a verbos

95
Objetos de las interfaces gráficas
Metáforas Ejm. (palabras) TV programas,
canales, redes, anuncios, guías,
noticias Juegos reglas del juego, piezas del
juego, tablero del juego Árboles raíces,
tronco, ramas, hojas
96
Objetos de las interfaces gráficas
Metáforas Existen metáforas verbales, basadas en
la utilización de verbos para denotar
acciones. Ejm. Mover navegar, conducir,
volar Localizar apuntar Seleccionar tocar un
elemento, poner el
dedo sobre.... Crear añadir (nuevo),
copiar Borrar botar, destruir, perder, cortar
97
Objetos de las interfaces gráficas
Metáforas Existen metáforas verbales, basadas en
la utilización de verbos para denotar
acciones. Ejm. Mover navegar, conducir,
volar Localizar apuntar Seleccionar tocar un
elemento, poner el
dedo sobre.... Crear añadir (nuevo),
copiar Borrar botar, destruir, perder, cortar
98
Objetos de las interfaces gráficas
Metáforas Existen metáforas del mundo
real Ejms. Semáforo (aplicaciones?) Colores
Escritorio (global) Levantamiento y
diagramación de textos (acciones)
A.K. S.J.
99
Objetos de las interfaces gráficas
Metáforas ? Utilidad
Utilidad práctica se espera que permita un
entendimiento más rápido de la situación
desconocida y que acelere el aprendizaje de una
herramienta mediante el conocimiento que se tiene
del mundo real.
100
Objetos de las interfaces gráficas
Metáforas
Utilidad comunicacional La metáfora va creando
comunicación mediante su posibilidad de dejar de
ser metafórica y convertirse en expresión directa
de la lengua, así la metáfora crea lengua
ampliando los elementos básicos de comunicación y
dando posibilidades nuevas de comunicación.
101
Algunos principios de diseño de interfaces
102
Algunos principios de diseño de interfaces
gráficas
Consistencia
La consistencia en un interfaz permite a los
usuarios transferir sus conocimientos y destrezas
de una aplicación a otra.
103
Algunos principios de diseño de interfaces
gráficas
Consistencia
La consistencia en un interfaz permite a los
usuarios transferir sus conocimientos y destrezas
de una aplicación a otra. La consistencia en las
interfaces gráficas ayuda a los usuarios a
aprender y reconocer fácilmente el lenguaje
gráfico de esa interfaz.
104
Algunos principios de diseño de interfaces
gráficas
Consistencia
La consistencia en el comportamiento de una
interfaz significa que los usuarios aprenden cómo
hacer las cosas, por ejemplo apuntar y
seleccionar, una sola vez.
105
Algunos principios de diseño de interfaces
gráficas
Control del usuario
El usuario y no el computador (o aplicación)
inicia y controla las actividades.
106
Algunos principios de diseño de interfaces
gráficas
Control del usuario
El usuario y no el computador (o aplicación)
inicia y controla las actividades. Tolerancia Po
sibilidad de ofrecerle al usuario la capacidad de
recuperarse de los errores.
107
Algunos principios de diseño de interfaces
gráficas
Retroalimentación y diálogo
El usuario debe estar constantemente informado de
lo que está ocurriendo con los procesos. Diálogo
simple al alcance del usuario La información que
recibe el usuario debe ser entendible y a su
alcance.
108
Algunos principios de diseño de interfaces
gráficas
Integridad estética
La información se encuentra organizada en forma
adecuada y consistente con los principios de
diseño visual. El número de elementos y su
respectivo comportamiento debe ser limitado para
aumentar la usabilidad de la interfaz.
109
Algunos principios de diseño de interfaces
gráficas
Integridad estética
Se debe asegurar de mantener la semántica del
lenguaje gráfico o del lenguaje asociado a la
interfaz. No cambiar el significado de los
objetos que son estándares.
110
Algunos principios de diseño de interfaces
gráficas

• Uso de metáforas
• Manipulación directa de los objetos

111
Algunos principios de diseño de interfaces
gráficas
112
Continuará .....