Vous êtes sur la page 1sur 51

Fundamentos de HCI

Lic. Ivana Harari. iharari@info.unlp.edu.ar


Lic. Andrea Keillif Diego Paez

Universidad Nacional de La Plata

Licencia Creative Commons


Fundamentos de HCI por Esp.Lic.Ivana Harari se encuentra bajo una Licencia Creative Commons
Atribucin-NoComercial-CompartirIgual 3.0 Unported.

Fundamentos de HCI
Human Computer Interaction

Qu es HCI-Interaccin Hombre-Computadora?

El Dilogo o Interaccin Hombre-Computadora es el


intercambio observable de informacin, datos y acciones entre
un humano y la computadora o viceversa.
Dilogo o
Interaccin Hombre-Computadora
Bla Bla

Humano =
Un usuario
Un grupo de usuarios
Una organizacin
Pblico en general

Bla Bla

Computadora =
Una PC
Una LAN
Una WAN
Una workstation
Dispositivo mvil

Fundamentos de HCI
Human Computer Interaction

HCI en todos los contextos

Fundamentos de HCI
Human Computer Interaction

HCI para todos los usuarios

Fundamentos de HCI
Human Computer Interaction

HCI como disciplina

HCI es la disciplina dentro de las Cs. de Computacin que se encarga


del diseo, evaluacin e implementacin de sistemas de
computacin interactivos para el uso humano e incluye todos los
fenmenos concernientes a ello.

HCI es

multidisciplinar

Fundamentos de HCI
Human Computer Interaction
El

HCI y el Contexto

Muchos factores afectan la calidad de la interfaz del usuario: el


usuario, la tecnologa, los requerimientos funcionales, el entorno,
entre otros.

Fundamentos de HCI
Human Computer Interaction
Importancia

del HCI

La interfaz se convirti en un factor decisivo en la eleccin del software.


Alto ndice de software chatarra. Software desechado por causas de
proveer una interfaz de mala calidad.
En el entorno de Internet, se agrava la cantidad de sitios que caducan.

Evolucin

del HCI

Fuerte integracin de la Informtica a otras reas disciplinas


Aumento y heterogeneidad en el espectro de usuarios
Avance tecnolgico relativo a la interaccin hombre-mquina
Menor costo en hardware
Fuerte estandarizacin
Sistemas con gran componente funcional
Inclusin de la computacin en todos los ambientes
El auge de Internet
Multimedia, groupware, tele-conferencia, educacin a distancia
Comunicacin en todos los entornos y en todos los momentos
User tailorability

Fundamentos de HCI
Human Computer Interaction
El

HCI y los roles

Varios sujetos intervienen en la interaccin (usuarios) y en su


construccin (distintos profesionales). Cada uno con su
perspectiva, objetivos, contextos y finalidades diferentes.

Fundamentos de HCI
Tipos de Dilogo
Tipos

de dilogo humano-computadora [Hutchins 86]

En el Mundo Conversacional se pasa de una etapa de dilogo a la

siguiente de una manera predecible.


Permite tanto a los desarrolladores del software como a los usuarios
visualizar un secuenciamiento lgico y especfico del comportamiento.
Por tal motivo el dilogo que genera se denomina Dilogo Secuencial.
Este tipo de dilogo incluye interaccin pregunta-respuesta (requestresponse), lenguajes de comandos, comunicacin oral, navegacin a
travs de menes y entradas de datos.

Fundamentos de HCI
Tipos de Dilogo
Tipos

de dilogo humano-computadora [Hutchins 86]

En el Mundo Modal el usuario final muestra qu hacer mediante el

desplazamiento y manipulacin de representaciones visuales de los


objetos, o sea mediante Manipulacin Directa.
Permite un Dilogo Asincrnico con muchas opciones al mismo tiempo
y la secuenciacin de cada camino es independiente de los dems.
Dilogo asincrnico o dilogo basado en eventos, con acciones del
usuario que inician la secuencia del dilogos.
Tambin se encuentran los dilogos multi-thread (no lineales) que se
refieren a la multiplicidad de caminos de dilogo, de hilos de control, de
acciones alternativas disponibles para el usuario en un determinado
momento Ej.box de dilogoOtro tipo de dilogo es el concurrente que es un dilogo multi-thread en
el cul ms de un subdilogo puede ser desarrollado paralelamente -Ej.
un reloj funcionando mientras uno est dibujando-. Adems de haber
muchas alternativas de dilogo, estas estn abiertas simultneamente.

Fundamentos de HCI
Tipos de Dilogo
Tipos

de dilogo humano-computadora [Hutchins 86]

Ejemplo de dilogo secuencial en Python

nom=raw_input("Ingrese su Nombre o fin para finalizar:")


nom=nom.lower()
cantAdultos=0
cantPers=0
while nom!="zzz":
ape=raw_input("Apellido:")
edad=input("Edad:")
cantPers=cantPers+1
if edad>=18:
cantAdultos=cantAdultos+1
nom=raw_input("Ingrese otro Nombre o fin para finalizar:")
print "la cant de personas entrev es: ", cantPers
print "la cant de adultos es: ", cantAdultos

Fundamentos de HCI
Tipos de Dilogo
Tipos

de dilogo humano-computadora [Hutchins 86]

Ejemplo de dilogo basado en eventos en Python + Pilas

start=Pilas.Actor.Boton(start.png, x=100, y=200)


start.conectar_presionado(fcionApretarBoton)
start.conectar_sobre(fcionTocarBoton)
start.cuando_hace_doble_click(fcionDobleCliquearBoton)
#previamente definir las funciones de los eventos
def fcionApretarBoton:
.
def fcionTocarBoton:
.
def fcionDobleCliquearBoton:
.

Fundamentos de HCI
Tipos de Interfaz que soportan el HCI
Tipos

de interfaces del usuario

Interfaces Textuales
Uso del texto como medio de visualizacin y expresin
Interfaces Visuales e Icnicas
Visualizacin y Programacin Visual. WYSIWYG, WIMP Interfaces Hpticas
Uso de varios sentidos para la visualizacin e interaccin
Interfaces Colaborativas
Interaccin multiusuario grupal done se incluye coordinacin,
comunicacin y colaboracin entre los mismos. WYSIWIS Interfaces Adaptativas y Adaptables
Formas de interaccin y visualizacin parametrizables
Interfaces Inteligentes- Interfaces Evolutivas
Mecanismos de inferencia, de evolucin. Puede comportarse como
asistente humano
Interfaces Web Fija y Mviles- Mobile user Interface
HCI en la Web
HCI en dispositivos mviles

Fundamentos de HCI
Independencia de Dilogo

Independencia

de Dilogo

Desarrollo del Dilogo entremezclado con la Lgica Computacional

atenta con la calidad de la Interfaz del Usuario


La hace resistente a cambios
La oculta con el resto del cdigo

El flujo de dilogo est controlado por el flujo de control

La Interfaz del Usuario cuenta con su propia filosofa de desarrollo

UI

SELF-CORRECTING

Semntica de
Aplicacin

CORRECTENESS-DRIVEN

La Interfaz tiene sus propios objetivos, relacionados con Factores

Humanos como ser Usabilidad / Calidad de Uso.

Fundamentos de HCI
Independencia de Dilogo
Independencia

de dilogo

La Independencia de Dilogo es una definicin formal


[Ehrich y Hartson, 1981] que se basa en la separacin de la
Interfaz del Usuario del Sistema de Aplicacin desde el
inicio del desarrollo.

La Componente de Dilogo o
Interfaz del Usuario es el soft y
hardware que soporta y permite que
el dilogo hombre-mquina se lleve a
cabo.

La Componente de Cmputos o
Aplicacin permite la
transformacin funcional o
algortmica de las entradas en
salidas.

Fundamentos de HCI
Independencia de Dilogo
Independencia

de Dilogo

La Independencia de Dilogo se logra a travs de la separacin

explcita del Dilogo y de la Aplicacin en todas las etapas de


desarrollo.

La Independencia NO se logra nicamente separando el cdigo

de ambas componentes en la etapa de programacin.

La evolucin de la Interfaz como componente de software

independiente fue similar a la Independencia de Datos [Senko


1971]

La Interfaz del Usuario es considerada una componente de

software tan importante como la parte Aplicativa del sistema


interactivo.

La Aplicacin Semntica no tendr mecanismos propios para

dialogar con el usuario sino a travs de la Interfaz del Usuario.

Fundamentos de HCI
Independencia de Dilogo
Independencia

de Dilogo

Ventajas

Inclusin de Factores Humanos


Modularizacin
Toma de decisiones
Modificabilidad
Extensibilidad
Multiplexacin de la Interfaz (n a 1)
Estandarizacin de la Interfaz (1 a n)

Problemticas

Aumento del Grado de Comunicacin e Interaccin entre roles.


El usuario como partcipe del desarrollo de la UI.
Posible decrecimiento de la Performance del sistema final.
El Esquema de Vincularizacin y los Protocolos de
Comunicacin son crupciales para su efectividad

Fundamentos de HCI
Independencia de Dilogo
Independencia

de Dilogo

Otras ventajas
La Interfaz requiere de su propio Ciclo de Vida

Existen decisiones de diseo propias y un grado de participacin

de usuarios no existentes en el desarrollo de la Componente de


Cmputos.

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas de la interfaz del usuario
Esquema de Albert Green [1985]

Dispositivos de
entrada
Ventanas
Objetos de
interaccin

Es el motor de la UI
Control de la lgica y
sencuencia de
interaccin
Control de la sesin y
navegacin de dilogo
Manejo interno de
objetos de interaccin
Protocolos de
comunicacin

Es el dilogo
interno
Vistas de Interfaz
y Aplicacin
Objetos
exportados

Fundamentos de HCI
Independencia de Dilogo
Actividades involucradas en el diseo

Determinar estilo de
interaccin, tipos de
dilogo y de interfaz
Disear el look&feel
Hacer explcito el
sistema, identificando los
objetos de interaccin
Determinar el soporte
de hardware interactivo

Disear el look&feel
Disear control, secuenciacin y lgica del

Especificar

tipos de
mapeamiento
dilogo
entre objetos
Disear la navegacin
semnticos e
Identificar los objetos computacionales tales interactivos
como objetos sintcticos
Disear servicios propios de interfaz del usr
Modelar los datos propios de la interfaz del
usuario
Disear el manejo y control del hardware
interactivo
Especificar tipo de asistencia
Disear aspectos de adaptacin, inteligencia,

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas de la interfaz del usuario. (Cont.)
Esquema de Deborah Hix [1987]

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas de la interfaz del usuario. (Cont.)
Esquema de Deborah Hix [1987]

Enfatiza sobre
Roles
intervinientes

GREEN

Muestra
utilizacin de
Herramientas
propias

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas Monolticas de la interfaz del usuario

Descomponen a la UI en niveles lgicos o en capas, c/u con servicios

que provee a la capa superior y que requiere de la capa inferior.

La modularizacin en capas de abstraccin permite ocultamiento de

informacin e independencia.

Manejadores
de Dispositivos

Sistema de
Ventanas

Objetos de
Interaccin

Control de
Dilogo

Corazn
Funcional

Mayor nivel de
Abstraccin

Cada capa es cliente y servidora, y debe proveer un mapeo, un binding

y un protocolo entre las capas inferior y superior de sta.

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas Monolticas de la interfaz del usuario

Son modelos lingusticos que analizan a la UI como un lenguaje de

interaccin en vez de un lenguaje de programacin.

Detectan el nivel lxico, sintaxis y la semntica entre las componentes

de una interfaz.

Inicialmente se trat de transferir conocimiento de la generacin

automtica de compiladores en generacin automtica de la interfaz.

Se dependa de un Anlisis Secuencial de expresiones de entrada y de

una Dicotoma diferenciada entre la Entrada y la Salida

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas Monolticas de la interfaz del usuario

No son adecuadas para la Manipulacin Directa, ni cualquier otro

dilogo asincrnico, donde:


El usuario dialoga con componentes individuales ms que con el sistema
entero
Una expresin de entrada puede evolucionar en paralelo con una expresin de
salida
El proveer Feedback Inmediato obliga a interactuar entre las capas en forma
muy fluida, intensa y muy ligada entre s.
Se utilizan acciones fsicas como arrastres, reacciones interactivas, efectos
visuales que no tienen inherencia secuencial.

Se requiere de arquitecturas que descentralicen los niveles lgicos y que

construyan una organizacin modular de la Interfaz, alrededor de la


nocin de Agentes.

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas No Monolticas: Modelos Multiagentes

Un Agente es una entidad de procesamiento de informacin completa, incluye:

receptores de eventos,
transmisores de eventos,
una memoria para mantener su estado, y
un procesador que iterativamente procesa eventos de entrada, actualiza su propio
estado y produce eventos de salida.

Separan los conceptos y las tcnicas de interaccin dentro de cada nivel de

abstraccin especificado por un agente.

Modelan la Interfaz mediante la organizacin de agentes y la distribucin de

responsabilidades entre los agentes cooperantes.

Estos agentes reaccionan antes estmulos externos que a su vez provocan

reacciones. Funcionan con estmulo-respuesta.

Los agentes se comunican entre s. Aquellos que dialogan con el usuario son

denominados objetos de presentacin o interactivos

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas No Monolticas: Modelos Multiagentes
Modelo MVC. Model-View-Controller. [Golberg 84]

M
V

Modela algn aspecto de la realidad


Codifica la funcionalidad de la aplicacin

Define la interfaz entre una aplicacin especfica y


una clase de usuario va un dispositivo
Piden y dan a los Models informacin del usuario
Se responsabilida de la presentacin

Recepciona las entradas del


usuario
Provee un conjunto de
funciones independientes del
hardware

Versatilidad en el Manejo de los Objetos, por ej. N Views para 1 Model


La componte de Presentacin = View + Controller
La componente de Control de Dilogo sera un Model especial

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas No Monolticas: Modelos Multiagentes
Modelo PAC. Presentacin-Abstraccin y Control [Coutaz 98]

A
C

Es el corazn funcional del agente


Implementa el comportamiento del agente
independiente de los medios
Es la representacin de la imagen

Es el comportamiento
observable del agente
Codifica la entrada y salida
Liga una abstraccin a una
presentacin
Controla el comportamiento y el
dilogo
Mantiene secuencia de acciones y
de dilogo
Recuerda el estado local
Permite interrelacin entre agentes

La componte de Presentacin = Presentacin del Agente


La componente de Dilogo = Control del Agente
El corazn funcional = Abstraccin

Fundamentos de HCI
Independencia de Dilogo
Arquitecturas No Monolticas: Modelos Multiagentes
Modelo PAC. Presentacin-Abstraccin y Control [Coutaz 98]

Este modelo estructura recursivamente un sistema


interactivo como una jerarqua de agentes
A

Nivel Superior

Nivel
Intermedio o
de Interfaz
Nivel Inferior o Widgets

El nivel superior representa a la Componente de


Aplicacin

Fundamentos de HCI
UX

Diseo de Experiencia de Usuario UX

La Experiencia de Usuario se basa en la capacidad de


poder influir positivamente en el usuario de una
interfaz; persuadir y establecer una conexin con l a
travs de un diseo y una forma comunicacional
intencional para cada uno de los elementos de la
misma.
Generalmente se disea el producto pero no se disea
la experiencia de su uso. Se disea su funcionalidad y
su esttica; su funcionamiento y su forma, pero no se
disea para garantizar que estos sean percibidos
satisfactoriamente por el usuario en un contexto de
interaccin.

Fundamentos de HCI
UX
UX

y las reas involucradas


Existen varias reas dentro de UX :
Diseo de Interaccin, Experiencia de Usuario, Diseo
Visual, Diseo Grfico, Estrategia de Contenidos,
Arquitectura de la Informacin.

Fundamentos de DCU
UX
Diseo de Experiencia de Usuario UX

Todas las ramas del HCI se deben unir para lograr una
completa y funcional experiencia de usuario.
Ms all de las perspectivas especficas a cada rama,
debe haber un objetivo comn: optimizar UX

(El paragas de UX)

Fundamentos de DCU
UX
Diseo de la Experiencia de Usuario
Algunas componentes bsicas de UX:

Facilidad: Cuan fcil es para los usuarios entender tu interfaz?

Eficiencia: Una vez entendido el diseo, Cunto tardan en


cumplir las tareas bsicas?

Recordabilidad: Cuando un usuario regresa despus de un


periodo de tiempo Qu tan complicado les resulta volver a
conectarse con la interfaz?

Errores: Cuntos errores comenten tus usuarios, cun graves


son? y qu tan fcil pueden corregirse?

Satisfaccin: Qu tan bien y cmodos se sienten?

Utilidad o Productividad: Cunto de la aplicacin usan?

Fundamentos de HCI
DCU

Diseo centrado en el usuario DCU


El proceso de poner en prctica la creacin de ese
contacto/ enganche/engagement del usuario,
garantizado una experiencia UX eficiente, se llama DCU.

El concepto de DCU es: Tener en cuenta al usuario en


todas las etapas metodolgicas del desarrollo del
producto interactivo.

Como dice Garrett:


The implications of this
simple concept, however,
are surprisingly complex.

Fundamentos de HCI
Usabilidad
Usabilidad

Es la conjuncin de cualidades u objetivos que debe


cumplir la interfaz del usuario de un producto

Fundamentos de HCI
Usabilidad
Usabilidad

La Usabilidad es la medida de la calidad de la experiencia de


un usuario cuando interacta con un producto o sistema.
Se mide estudiando la relacin entre las herramientas (de
un Sitio Web sera el el sistema de navegacin, las
funcionalidades, servicios y los contenidos ofrecidos) y
quienes las utilizan, fijando la eficiencia en el uso de los
diferentes elementos ofrecidos en las pantallas y la
efectividad en el cumplimiento de las tareas que se pueden
llevar a cabo a travs de ellas.
La mejor forma de crear un Sitio Web usable es realizando
un diseo centrado en el usuario, diseando para y por el
usuario

Fundamentos de HCI
Usabilidad
Objetivos de la Interfaz del Usuario

CALIDAD
de USO

Simplicidad
Fcil aprendizaje y utilizacin
Forma de expresin entendible para el usuario
Flexibilidad de la Interfaz
Se considera a los dos agentes interactuantes equiparables
Forma de interaccin preestablecida y planteada en trminos del usuario,
no de la aplicacin

Confiabilidad
Consistencia en la presentacin y expresin de conceptos
Transparencia
Visualizacin permanente del estado y comportamiento del sistema

Ergonoma
Adaptacin al estilo y perfil del usuario

Fundamentos de HCI
Usabilidad
User
friendly
1980

Usability

Quality
in use

2005

Podemos definir la usabilidad como la medida en la cual un


producto puede ser usado por usuarios especficos para conseguir
objetivos especficos con efectividad, eficiencia y satisfaccin en
un contexto de uso especificado
Efectividad se entender la precisin y la plenitud con las que los

Usabilidad

usuarios alcanzan los objetivos especificados.

capacidad para lograr un fin empleando los


mejores mecanismos, medios y recursos posibles.

Eficiencia

Satisfaccin se entender la ausencia de incomodidad y la actitud

positiva en el uso del producto. Se trata, pues, de un factor subjetivo.

Fundamentos de HCI
Usabilidad
Calidad de uso (Usabilidad) significa que la gente que

utilice un producto pueda realizar rpida y facilmente sus tareas. Esta


definicin descansa en cuatro puntos:
(1) la usabilidad significa centrarse en el usuario;
(2) que la gente que use un producto lo haga de forma productiva;
(3) los usuarios son gente ocupada que tiene que hacer cosas; y
(4) son los usuarios los que deciden cuando un producto es fcil de

usar.
Dumas,

Janice (Ginny) Redish and Joseph


A Practical Guide to Usability Testing, 1999, p. 4

Fundamentos de HCI
ISO 9126
"La usabilidad se refiere a la capacidad de un software de ser
comprendido, aprendido, usado y ser atractivo para el
usuario, en condiciones especficas de uso"
-1 O
6
2
91 C T
ISO D U
O
R
P

Evaluacin
cualitativa

Fundamentos de HCI
ISO 9241-11
"Usabilidad es la efectividad, eficiencia y satisfaccin con la
que un producto permite alcanzar objetivos especficos a
usuarios especficos en un contexto de uso especfico"
-11 O
1
4
92 E S
ISO O C
PR

Evaluacin
cuantitativa

Fundamentos de HCI
De Usabilidad a Calidad de Uso

ISO 9126-1: usability

ISO 9241-11: usability

ISO 9126-4: quality in use

Fundamentos de HCI
Usabilidad- Mtricas

(ISO 9241-11, 1994)

Fundamentos de HCI
Usabilidad- Mtricas

(ISO 9126-4, 2004)

Fundamentos de HCI
Usabilidad- Mtricas
Principios de Nielsen
Dilogo simple y natural
Lenguaje del usuario
Minimizar el uso de la memoria del usuario
Consistencia
Feedback
Salidas evidentes
Mensajes de error
Prevencin de errores
Atajos
Ayudas

Fundamentos de HCI
Usabilidad
8 Reglas de oro para el diseo de la interfaz
(Shneiderman)

Consistencia
Shortcuts
Feedback informativo
Buen diseo del dilogo
Manejo de error simple
Reversa de acciones
Control por parte del usuario
Minimizar memoria del usuario

Fundamentos de HCI
Usabilidad
First Principles of Interaction design
(Tognazzini)

Anticipation
Autonomy
Color Blindness
Consistency
Defaults
Efficiency of the user
Explorable Interfaces
Fitts law
Human Interface Objects
Latency reduction

Track state

Visible navigation
Learnability
Use of metaphors
Protect users work
Readability

Fundamentos de HCI
Usabilidad
1. Guidance
1.1. Prompting
1.2. Grouping / Distinction between items
1.2.1. Grouping / Distinction by
location
1.2.2. Grouping / Distinction by
format
1.3. Immediate feedback
1.4. Legibility
2. Work load
2.1. Brevity
2.1.1. Concision
2.1.2. Minimal actions
2.2. Information density
3. Explicit control
3.1. Explicit actions
3.2. User control
4. Adaptability
4.1. Flexibility
4.2. User experience
5. Error management
5.1. Protection to errors
5.2. Quality of error messages
5.3. Error correction
6. Homogeneousness / Consistency
7. Significance of codes
8. Compatibility

(Bastien et al., 1993)

Vous aimerez peut-être aussi