Unidad III Diseño y

Programación de
Interfaces HMI

M.C. Juan Carlos Olivares Rojas

1
 Agenda

3.1 Conceptos generales y elementos de

desarrollo.

3.2 Herramientas para el diseño de

interfaces HMI.

2
 Agenda

3.3 Sistemas de alarmas y eventos.

3.4 Configuración de alarmas y eventos.

3.5 Modelos de reconocimientos y

desplegado de alarmas.
3
3.1 Conceptos generales y elementos
de desarrollo.
• Desde el punto de vista del usuario. La
interfaz es el sistema.

• Las Interfaces Hombre Máquina (HMI) son

el estudio de las relaciones de interacción
entre los hombres y las máquinas (que
pueden ser computadoras)
4
 Introducción
• La HMI es un área interdisciplinaria ya que toma
de base a ciencias como filosofía, psicología,
lingüística, arte, computación, etc.

• Antes de diseñar una interfaz se deben tomar en

cuenta los factores humanos, ya que
dependiendo del agrado que tengan los usuarios
por las interfaces depende el éxito del sistema.

5
 Factores Humanos
• Algunos factores humanos son:
– La percepción visual
– Las formas de pensamiento
– El comportamiento del usuario

• Desafortunadamente estos factores son

variables de persona en persona, aun
teniendo características similares.
6
 Estilos de HMI
• Los estilos de HMI son la forma de realizar
interfaces. Las interfaces no
necesariamente son externas también
pueden estar a nivel interno de
arquitectura del software.

• Los estilos de interacción han evolucionado

con el paso del tiempo.
7
 Estilos HMI
• En las primeras generaciones el humano
tenía que conocer el lenguaje de la
máquina.

• Con la aparición del lenguaje ensamblador

y los sistemas de procesamiento por lotes,
se simplificó un poco.
8
 Estilos HMI
• El primer estilo real de interacción entre
un hombre y una computadora fue el modo
texto.

• En este estilo, el usuario tiene que

aprenderse una serie de comandos, los
cuales son difíciles de aprender y muy
propensos a errores.
9
 Estilos de HMI
• Este tipo de estilo aun sigue utilizando en
shells de Sistemas Operativos, en
intérpretes de Base de Datos, etc.

• Después apareció el estilo de menús en

donde se simplifica la ejecución de
órdenes pero puede ser muy molesto al
tener opciones muy anidadas. Se sigue
utilizando en muchos sistemas. 10
 Estilos de HMI
• Las Interfaces orientadas a Ventanas o
Modo Gráfico quizás es el estilo de interfaz
más utilizado actualmente. Generalmente
se basa en un esquema o filosofía de
escritorio. Dado que nos permite un
aprendizaje más intuitivo y libre de errores
ya que se dispone de un lenguaje
iconográfico útil.
11
 Estilos de HMI
• El siguiente paso es el uso de Hipertexto
como en los sistemas Web, en los cuales se
tienen documentos que ligan a otros
documentos.

• Los estilos de interacción no viven aislados,

se pueden encontrar combinados, así en
modo texto ponemos tener hipertexto y
menús de opciones. 12
 Estilos HMI
• Otro estilo de HMI es la multimedia que
nos permite combinar diversos tipos de
elementos en un solo canal. Para lograrlo
se necesita que el sistema pueda ejecutar
muchas tareas concurrentemente
(multitarea).

13
 Estilos de HMI
• Existen otros estilos como Realidad Virtual
y de Inteligencia Artificial que aun no
están desarrollados del todo.

14
 Estilos HMI
• A continuación se describe de manera más
amplia el estilo HMI de modo gráfico en
sistemas operativos.

• La metáfora del escritorio trata de hacer

una analogía con lo que es una oficina
física y tratar de implementarla en la
computadora, pero ¿por qué este
paradigma y no otro?
Metáfora del Escritorio
Metáfora del Escritorio

17
Estilos HMI
Estilos de HMI
 Metáfora del Escritorio

• 2005
 Ejemplos de otras metáforas
• Documentos: libros, capítulos, marcadores,
figuras; periódicos, secciones; revistas,
artículos; cartas; formularios.

• Música: disco compacto, cassette,

grabaciones, pistas, jukeboxes.
 Ejemplos de otras metáforas
• Después se deben seleccionar los verbos
que van a representar las acciones a
realizar en el sistema.
 Diseño de la Interfaz

• Las interfaces deben ser fáciles de

aprender, simples de utilizar, no restrictivas
y directas.

• Antes de comenzar con el diseño, se deben

realizar preguntas como: ¿Quién es el
usuario?, ¿Cómo aprende el usuario?, ¿Qué
espera el usuario del sistema?
 Diseño de la Interfaz
• Diseño de Interfaces no es poner pantallas
bonitas (aunque si importa).

• El verdadero diseño de HMI se debe centrar

en el humano ya que este es el que realiza
la interacción, pero existen otros modelos
como el de vista del diseñador.
24
 Directrices para el Diseño de
Interfaces
• Por este motivo se deben considerar
factores de los usuarios como:

• habilidades físicas, sensoriales y

cognitivas,

• diferencias de personalidad y de cultura,

etc.
 Directrices para el Diseño de
Interfaces

• Se pueden utilizar herramientas para

modelar el diseño de interfaces o bien
herramientas de prototipado para su
rápida implementación.

• Cualquier sistema de interfaz debe estar

basado en reglas ECA (Evento Condición y
Acción).
 Directrices para el Diseño de
Interfaces
• La principal directriz a tomar en cuenta es
la usabilidad, que es la capacidad de que
la interfaz pueda ser manejada por los
usuarios.

• Otra directriz a tomar en cuenta es la

accesibilidad, en donde se pretende que la
interfaz pueda ser accedida por usuarios
sin importar sus limitaciones.
 Estándares de Interfaz
• Los estándares nos sirven para tener un
mejor diseño de nuestras interfaces.

• Los estándares dependen del tipo de

aplicación que se esté desarrollando, por
ejemplo Web, aplicación en Windows,
Macintosh, aplicaciones en dispositivos
móviles, etc.
 HMI en Mecatrónica
• Tiene más relación en el diseño de
hardware y de instrumentos virtuales que
con el software.

• Diseño de la Interfaz para cambiar la hora

a un reloj despertador.

29
 HMI en Mecatrónica
• Esquemas de colores en instrumentos de
medición.

• Diseño de aviones resistentes: el problema

de la caja negra.

• Diseño de interfaces de instrumentos como

osciloscopios y radios de automóviles. 30
 Actividad
• Uno de los principales problemas de
accidentes automovilísticos ocurre cuando
una persona se distrae por tratar de
manipular algún objeto dentro del carro
como un autoestereo dado que tiene que
manipular una serie de controles a su
alrededor.

31
 Actividad
• Para resolver este problema en los
accidentes se piensa que con una nueva
interfaz y modo de acceso a las opciones
del autoestereo el conductor se puede
distraer menos.

• En equipos de tres personas deben diseñar

esta nueva interface y demostrar que
sirve. 32
 3.2 Herramientas para el diseño de
interfaces HMI.
• Existen muchas herramientas para la
programación de interfaces, tales como:

• Herramientas de Diagramación (Visio)

• IDEs de programación (Visual Basic, Java)
• Herramientas de Instrumentación
(LabVIEW, HMI Intouch, Mdraw Dessigner,
etc.) 33
 Referencias
• Ferreira, R. (2008) Curso de Ambientes
Gráficos, última consulta: marzo de 2008,
http://antares.itmorelia.edu.mx/~kaos
¿Preguntas, dudas y comentarios?

35