Sunteți pe pagina 1din 62

Centro Ingeniera de Software y Sistemas (ISYS) 1

Centro Ingeniera de Software y Sistemas (ISYS) 2


Aspectos Generales de la
Interaccin Humano Computador
(IHC)

Sensibilizacin:
el nuevo rol de la computacin, la
importancia de las interfaces de usuario
y el carcter social de la interaccin

Centro Ingeniera de Software y Sistemas (ISYS) Actualizado: octubre 2012 (E. Acosta) 3
Aspectos Generales de IHC: Contenido
Contexto: reto, rol, ondas, terminologa

Evolucin tecnolgica y Contexto


Tecnolgico

Definicin de IHC, IU. Diseo de la


interaccin

Importancia de la IHC

Relaciones con otras disciplinas

Tpicos y tendencias de la IHC

AgilUs
Centro Ingeniera de Software y Sistemas (ISYS) 4
Retos de la IHC

Centro Ingeniera de Software y Sistemas (ISYS) 5


Nuevo rol de la Computacin
Presente: comunicar
(como rol fundamental)

Pasado: calcular
(como rol fundamental)

Centro Ingeniera de Software y Sistemas (ISYS) 6


4ta Onda: Tecnologa Interactiva Persuasiva

Centro Ingeniera de Software y Sistemas (ISYS) 7


Evolucin Tecnolgica

Eniac

Fuente: Historic Computer Images

Centro Ingeniera de Software y Sistemas (ISYS) 8


Evolucin Tecnolgica

Centro Ingeniera de Software y Sistemas (ISYS) 9


El Contexto Tecnolgico
La era actual de la revolucin tecnolgica de la
informtica y de las telecomunicaciones se
caracteriza por la masificacin de los
computadores y su interconexin en redes
El paradigma: la computacin basada en redes
Se incrementan las aplicaciones de ndole
social
El medio de comunicacin
(la interfaz de usuario)
pasa a ser relevante
Interaccin humano humano
Centro Ingeniera de Software y Sistemas (ISYS) 10
Terminologa
Interaccin Humano Computador
Human Computer Interaction

Interaccin Computador Humano


Computer Human Interaction

Interaccin Hombre Mquina


Man Machine Interaction

Interaccin de Usuario
User Interaction

Interaccin Humano Humano


Human Human Interaction

Centro Ingeniera de Software y Sistemas (ISYS) 11


IHC: Definicin

Centro Ingeniera de Software y Sistemas (ISYS) 12


IHC: Definicin

Centro Ingeniera de Software y Sistemas (ISYS) 13


IHC: Definicin

Es una disciplina que trata con el diseo,


evaluacin e implementacin de sistemas de
computacin interactivos que son usados por
los humanos y con el estudio de su contexto.
(ACM SIGCHI forCurricula HCI)

Centro Ingeniera de Software y Sistemas (ISYS) 14


Importancia de la IHC

Actualmente ms del 70% del esfuerzo de


desarrollo de las aplicaciones interactivas
est dedicado a la interfaz de usuario
(Gartner Group)
Gestin de Datos

70%
Lgica de la Aplicacin Interfaz de Usuario

Centro Ingeniera de Software y Sistemas (ISYS) 15


Importancia de la IHC

La Interaccin Humano Computador


es relevante
en el proceso de
sociabilizacin de la informtica
Centro Ingeniera de Software y Sistemas (ISYS) 16
Importancia de la IHC
Masificacin de computadores
interconectadas en redes

Variedad de Diversidad de Emergencia de


Aplicaciones Usuarios Tecnologas

Incremento de aplicaciones de ndole social

Nuevas Metas en el Diseo de la Interaccin

Centro Ingeniera de Software y Sistemas (ISYS) 17


Rol de la Comunicacin
Soporte al Trabajo Colaborativo
Telemedicina, Educacin a Distancia,
Atencin al Ciudadano

La comunicacin entre personas utilizando el


computador introduce, como elemento central,
Interfaz de Usuario
Centro Ingeniera de Software y Sistemas (ISYS) 18
Interfaz de Usuario
El componente interactivo
(hardware y/o software) de un
producto de software que le
permite a la gente realizar las
tareas para las cuales est
concebido, en su trabajo o en su
vida cotidiana

Centro Ingeniera de Software y Sistemas (ISYS) 19


Caractersticas de una IU
Mltiples ventanas desplegadas
simultneamente en la pantalla
Representacin de informacin mediante
iconos
Seleccin de acciones va men
Sistema de ayuda en lnea (on-line)
Soporte de interacciones mediante
dilogos y botones
Uso de dispositivos apuntadores para
manipulacin directa de los objetos

Centro Ingeniera de Software y Sistemas (ISYS) 20


Roles de la Interfaz de Usuario

La IU de un producto de software:
media entre el producto y el
usuario...o entre distintos usuarios
integra la representacin de la parte
accesible del producto y las tcnicas
de interaccin
determina la usabilidad del producto
Adems... involucra a diferentes
especialistas en su diseo

Centro Ingeniera de Software y Sistemas (ISYS) 21


Evolucin de las Interfaces de Usuario

Centro Ingeniera de Software y Sistemas (ISYS) 22


Evolucin de las Interfaces

Centro Ingeniera de Software y Sistemas (ISYS) 23


Evolucin de las Interfaces

Centro Ingeniera de Software y Sistemas (ISYS) 24


Centro Ingeniera de Software y Sistemas (ISYS) 25
https://www.youtube.com/watch?v=ePsVVz1SUTA
Centro Ingeniera de Software y Sistemas (ISYS) 26
https://www.youtube.com/watch?v=rJ_VyXP6hyI
Centro Ingeniera de Software y Sistemas (ISYS) 27
Aspectos Generales de IHC: Contenido
Contexto: reto, rol, ondas, terminologa

Evolucin tecnolgica y Contexto


Tecnolgico

Definicin de IHC, IU. Diseo de la


interaccin

Importancia de la IHC

Relaciones con otras disciplinas

Tpicos y tendencias de la IHC

AgilUs
Centro Ingeniera de Software y Sistemas (ISYS) 28
IHC: Definicin

Es una disciplina que trata con el diseo,


evaluacin e implementacin de sistemas de
computacin interactivos que son usados por
los humanos y con el estudio de su contexto.
(ACM SIGCHI forCurricula HCI)

Centro Ingeniera de Software y Sistemas (ISYS) 29


Interfaz de Usuario
El componente interactivo
(hardware y/o software) de un
producto de software que le
permite a la gente realizar las
tareas para las cuales est
concebido, en su trabajo o en su
vida cotidiana

Centro Ingeniera de Software y Sistemas (ISYS) 30


Relaciones con otras disciplinas

Para el diseo de la interaccin se


requiere un equipo que incluya al
usuario, especialistas del dominio de
la aplicacin y a especialistas de
otras disciplinas

actividad interdisciplinaria
actividad multidisciplinaria
actividad transdisciplinaria
Centro Ingeniera de Software y Sistemas (ISYS) 31
Relaciones con otras disciplinas
Ciencias de la
Ciencias
Psicologa Humanas
......
Comunicacin Diseo Grfico

Ingeniera de Bases de Datos


software

Redes y
Comunicaciones

otrosComputacin
dominios, fuera del centrada
campo de laen Red
Informtica,
relacionadas con IHC
Centro Ingeniera de Software y Sistemas (ISYS) 32
El diseo de la interaccin
the design of spaces for human
communication and interaction
(Winograd, 1997)

Diseo de la interaccin / Diseo de la interfaz de usuario


Centro Ingeniera de Software y Sistemas (ISYS) 33
El diseo de la interaccin

Centro Ingeniera de Software y Sistemas (ISYS) 34


Disciplinas influyentes

Diseo de la interaccin

Psicologa Etnografa

Visualizacin de datos Sociologa

Cine, TV, Teatro, Arte Comunicacin Social

Diseo Grfico Educacin

Centro Ingeniera de Software y Sistemas (ISYS) 35


Disciplinas influyentes: Psicologa
Ciencia que estudia el comportamiento y los
estados de la conciencia de la persona humana,
considerada individualmente o como miembro de
un grupo social
Psicologa cognitiva
Trata de comprender el comportamiento humano y los procesos
mentales que comporta
Psicologa social
Trata de estudiar el origen y las causas del comportamiento humano en
un contexto social
Contribucin a la IHC:
Conocimientos y teoras sobre el comportamiento de las
personas y la forma en que procesan la informacin
Metodologas y herramientas para evaluar el grado de
satisfaccin de las personas con el diseo de la interfaz

Centro Ingeniera de Software y Sistemas (ISYS) 36


Disciplinas influyentes: Ergonoma

Es el estudio de las caractersticas fsicas de la


interaccin (por ejemplo, el entorno fsico donde
se produce)
Su propsito es definir y disear herramientas y
artefactos para diferentes tipos de ambientes
(trabajo, ocio, domstico)
El objetivo es maximizar la seguridad, eficiencia
y fiabilidad para simplificar las tareas e
incrementar la sensacin de confort y
satisfaccin

Centro Ingeniera de Software y Sistemas (ISYS) 37


Disciplinas influyentes: Ergonoma
Ejemplos de aspectos considerados por la
ergonoma:
Organizacin de los controles y pantallas
(para permitir una accin rpida del usuario,
que debe poder acceder a todos los controles
y ver toda la informacin sin mover
excesivamente el cuerpo)
Colocacin espaciada de los controles
Informacin ms importante situada a la altura de
los ojos
Prevencin de los reflejos
Entorno fsico de la interaccin
Aspectos de salud: posicin fsica, tiempo de
permanencia ante el ordenador, temperatura,
radiacin de las pantallas
Centro Ingeniera de Software y Sistemas (ISYS) 38
Recomendciones: Ergonoma Bsica

Centro Ingeniera de Software y Sistemas (ISYS) 39


Disc. influyentes: Sociologa-Etnografa
Es la ciencia que estudia las costumbres y las
tradiciones de los pueblos:
En los ltimos aos, algunas compaas estn
reclutando antroplogos para comprender
mejor a sus clientes y sus trabajadores y para
disear productos que reflejen mejor las
tendencias culturales emergentes
Las herramientas de investigacin etnogrfica
pueden responder a cuestiones sobre
organizaciones y mercados que otros mtodos
no pueden

Centro Ingeniera de Software y Sistemas (ISYS) 40


Disc. influyentes: Inteligencia Artificial

Trata de disear sistemas que simulen aspectos


del comportamiento humano inteligente
Ejemplos de uso en IHC:
Diseo de tutores y sistemas expertos en
interfaces inteligentes
Diseo de interfaces en lenguaje natural,
mediante voz
Diseo de agentes inteligentes para
simplificar la realizacin de tareas frecuentes

Centro Ingeniera de Software y Sistemas (ISYS) 41


TPICOS que trata la IHC

Centro Ingeniera de Software y Sistemas (ISYS) 42


TPICOS que trata la IHC

Adaptacin Humano-Computador
Los aspectos
- Mejorar organizacionales
el encaje y el diseado
entre el objeto trabajo, lay su uso:
naturaleza y calidad del trabajo, modelos de actividad
- Cmo el sistema
humana, secooperativa,
actividad adapta al usuario (personalizacin)
trabajo colaborativo,
impacto
- Cmo de la globalizacin...
el usuario se adapta al sistema (entrenamiento),
- Gua al usuario
reas de aplicacin
- Individual vs. Grupal; Propsito General vs. Especfico

Centro Ingeniera de Software y Sistemas (ISYS) 43


TPICOS que trata la IHC
La psicologa de los
Usuarios
El procesamiento de la
Informacin
Modelos cognitivos, la
memoria, la percepcin,
habilidades motoras, la
atencin, el aprendizaje ,
la motivacin, los
La comunicacin modelos conceptuales
El lenguaje como un
medio de comunicacin; Aspectos ergonmicos
lenguajes especializados, La relacin entre las
hipermedia, simbologa , caractersticas de las
personas y el ambiente y
su espacio de trabajo
Centro Ingeniera de Software y Sistemas (ISYS) 44
TPICOS que trata la IHC
Tcnicas del Dilogo
Tipo de dilogos y tcnicas
de manipulacin directa,
lenguaje natural,
navegacin, multimedia,
agentes, dilogos multi-
personas...
Dispositivos de Interaccin
Dispositivos actuales, Arquitectura del Dilogo
tendencias Estructuracin de
componentes, toolkits...
Semntica del Dilogo
Metforas de interaccin, Evolucin de las tecnologas
espacio de trabajo... Caractersticas, nuevas
formas de interaccin...
Centro Ingeniera de Software y Sistemas (ISYS) 45
TPICOS que trata la IHC
La Meta: desarrollar productos interactivos fciles de usar,
efectivos, tiles y seguros, desde la perspectiva del usuario
Modelos, Mtodos y Arquitecturas de Desarrollo
Tcnicas de Implementacin
Tcnicas de Evaluacin
Herramientas y Ambientes de Construccin
Principios de Diseo, Lineamientos y Patrones de Interaccin

Centro Ingeniera de Software y Sistemas (ISYS) 46


El mtodo AgilUs: Propuesta

Usuario

Centro Ingeniera de Software y Sistemas (ISYS)


47
El Mtodo AgilUs
Buenas prcticas DCU
Prototipaje
B Desarrollo gil
Usabilidad-calidad

Principios Ciclo de Vida


Integra IHC-IS A Requisitos
Usabilidad-inicio Anlisis
Usabilidad-utilidad
AgilUs C Prototipaje
Entrega

D
Errores Comunes No incluir al usuairo
Centro Ingeniera de Software y Sistemas (ISYS) Cliente Vs Usuario 48
AgilUs: usabilidad gil

Buenas prcticas giles


Se enfoca en la gente y los resultados
Se enfatiza las comunicaciones cara a cara
Ciclo de vida: requisitos, anlisis, prototipaje y
entrega

Centro Ingeniera de Software y Sistemas (ISYS)


49
AgilUs: usabilidad gil
En cada etapa del desarrollo se incluyen
actividades para la construccin de la usabilidad
Se busca proporcionar una manera de proceder
organizadamente para construir la usabilidad
durante el desarrollo de un producto
El proceso de desarrollo de software engloba la
definicin de requisitos, anlisis, prototipaje y
entrega
Se realiza en ciclos iterativos hasta conseguir
alcanzar el producto final prcticas giles

Centro Ingeniera de Software y Sistemas (ISYS)


50
El mtodo AgilUs
Tormenta de ideas Prototipos en papel
Encuestas, Gua de estilos
entrevistas, Modelo Casos de
cuestionarios Uso
Evaluacin de Modelo Objetos del
sistemas existentes Dominio
Perfiles de usuario Objetos de Interfaz
Requerimientos Patrones de
funcionales y no I Interaccin
funcionales

Requisitos Anlisis
Entrega Prototipaje

Protocolo de Prototipo rpido


preguntas Evaluacin
Pruebas de Heurstica
aceptacin Lista de
Aplicacin a liberar Comprobacin
Pensamiento en voz
alta
Prototipo ejecutable

Centro Ingeniera de Software y Sistemas (ISYS) 51


AgilUs: Requisitos

Identificar las necesidades de los usuarios


Determinar el perfil de los usuarios
Determinar los requerimientos funcionales
y no funcionales

Tormentas de ideas
Encuestas, cuestionarios, entrevistas
(sondeo)
Anlisis de sistemas existentes
Centro Ingeniera de Software y Sistemas (ISYS)
52
AgilUs: Anlisis

Modelado de la aplicacin en trminos de


funcionalidades (casos de uso)
Modelado de la aplicacin en trminos de objetos y
relaciones (objetos del dominio)
Modelado de la interfaz de usuario (patrones de
interaccin y objetos de interfaz)

Prototipos de papel
Gua de estilo
Patrones de interaccin
Centro Ingeniera de Software y Sistemas (ISYS)
53
AgilUs: Prototipaje

Maquetas
Prototipos de alta fidelidad a partir
de los patrones de interaccin
Refinamiento del prototipo hasta
lograr el producto final

Evaluacin heurstica
Lista de comprobacin
Pensamiento en voz alta
Prototipo ejecutable

Centro Ingeniera de Software y Sistemas (ISYS)


54
AgilUs: Entrega

Liberacin del software,


la puesta en produccin

Protocolo de preguntas
Pruebas de aceptacin

Centro Ingeniera de Software y Sistemas (ISYS)


55
El mtodo AgilUs
Tormenta de ideas Prototipos en papel
Encuestas, Gua de estilos
entrevistas, Modelo Casos de
cuestionarios Uso
Evaluacin de Modelo Objetos del
sistemas existentes Dominio
Perfiles de usuario Objetos de Interfaz
Requerimientos Patrones de
funcionales y no I Interaccin
funcionales

Requisitos Anlisis
Entrega Prototipaje

Protocolo de Prototipo rpido


preguntas Evaluacin
Pruebas de Heurstica
aceptacin Lista de
Aplicacin a liberar Comprobacin
Pensamiento en voz
alta
Prototipo ejecutable

Centro Ingeniera de Software y Sistemas (ISYS) 56


TPICOS que trata la IHC

Centro Ingeniera de Software y Sistemas (ISYS) 57


Tendencias de la IHC
COMPUTACIN MVIL

COMPUTACIN INALMBRICA

COMPUTACIN UBICUA

Interfaces Sociales
Interfaces Adaptativas
Interfaces Sensoriales
Interfaces Perceptuales
Interfaces Tangibles
Interfaces Basadas en AI

Centro Ingeniera de Software y Sistemas (ISYS) 58
Computacin Mvil

Centro Ingeniera de Software y Sistemas (ISYS) 59


Computacin Inalmbrica

Centro Ingeniera de Software y Sistemas (ISYS) 60


Computacin Ubicua

Centro Ingeniera de Software y Sistemas (ISYS) 61


Para finalizar: Actividad

La Interfaz de Usuario es a la
Interaccin Humano Computador
lo que _____________________
es a _______________________.

Centro Ingeniera de Software y Sistemas (ISYS) 62