TECNOLOGICO NACIONAL DE MEXICO.
INSTITUTO TECNOLOGICO DE AGUA
PRIETA.
CREACION DE INTERFACES VISUALES.
Presenta (n)
Edgar Arturo Mireles Félix.
Numero de Control
16750047.
Maestro
Alonso Sandoval Enríquez.
Agua Prieta, Son., 02 de Noviembre de 2020
Contenido
HMI.............................................................................................................................3
Modelos.....................................................................................................................3
1. Modelo del usuario..........................................................................................3
2. Modelo del programador..................................................................................3
3. Modelo del diseñador......................................................................................3
Reglas o recomendaciones para el diseño de interfaces.........................................4
Dar control al usuario.............................................................................................4
Reducir la carga de memoria del usuario..............................................................5
Consistencia...........................................................................................................5
Consideraciones del diseño.......................................................................................6
Bibliografía.................................................................................................................7
HMI.
Una planta automatizada necesita de HMI, su apariencia puede ser visual, de
pantalla táctil con botones que permitan interactuar al operario con la máquina.
Los HMI modernos pueden monitorizar varias máquinas del proceso productivo y
controlarlo desde un HMI central.
Se conectan mediante PLCs que a su vez se conectan con elementos de
sensórica y actuadores y utilizan un software en el que los programadores
decidirán que tiene que ver el operario en la pantalla, y que operaciones pueden
realizar.
Modelos.
Existen tres puntos de vista distintos en una HMI: el del usuario, el del
programador y el del diseñador. Cada uno tiene un modelo mental propio de la
interfaz, que contiene los conceptos y expectativas acerca de la interfaz,
desarrollados a través de su experiencia.
1. Modelo del usuario.
El usuario tiene su visión personal del sistema, y espera que éste se comporte de
una cierta forma, que se puede conocer estudiando al usuario (realizando tests de
usabilidad, entrevistas, o a través de una realimentación). Una interfaz debe
facilitar el proceso de crear un modelo mental efectivo. Para ello son de gran
utilidad las metáforas, que asocian un dominio nuevo a uno ya conocido por el
usuario. Las metáforas relacionan el sistema con algo ya conocido por el usuario.
2. Modelo del programador.
Es el más fácil de visualizar, al poderse especificar formalmente. Está constituido
por los objetos que manipula el programador (ejemplo: base de datos - agenda
telefónica). Estos objetos se deben esconder del usuario.
3. Modelo del diseñador.
El diseñador mezcla las necesidades, ideas, deseos del usuario y los materiales
de que dispone el programador para diseñar un producto de software. Es un
intermediario entre ambos.
El modelo del diseñador describe los objetos que utiliza el usuario, su
presentación al mismo y las técnicas de interacción para su manipulación.
El modelo tiene tres partes: presentación, interacción y relaciones entre los
objetos.
Presentación: es lo que primero capta la atención del usuario, pero más tarde
pasa a un segundo plano. La presentación no es lo más relevante, y un abuso en
la misma (por ejemplo, en el color) puede ser contraproducente, distrayendo al
usuario.
Interacción: a través de diversos dispositivos que utiliza el usuario.
Relaciones entre los objetos: es donde el diseñador determina la metáfora
adecuada que encaja con el modelo mental del usuario.
Reglas o recomendaciones para el diseño de interfaces.
Dar control al usuario.
El diseñador debe dar al usuario la posibilidad de hacer su trabajo, en lugar de
suponer qué es lo que éste desea hacer. La interfaz debe ser suficientemente
flexible para adaptarse a las exigencias de los distintos usuarios del programa.
Principios:
1. Usar adecuadamente los modos de trabajo.
2. Permitir a los usuarios utilizar el teclado o el mouse.
3. Permitir al usuario interrumpir su tarea y continuarla más tarde.
4. Utilizar mensajes y textos descriptivos.
5. Permitir deshacer las acciones, e informar de su resultado.
6. Permitir una cómoda navegación dentro del producto y una fácil salida del
mismo.
7. Permitir distintos niveles de uso del producto para usuarios con distintos niveles
de experiencia.
8. Hacer transparente la interfaz al usuario, que debe tener la impresión de
manipular directamente los objetos con los que está trabajando.
9. Permitir al usuario personalizar la interfaz (presentación, comportamiento e
interacción).
10. Permitir al usuario manipular directamente los objetos de la interfaz.
En suma, el usuario debe sentir que tiene el control del sistema
Reducir la carga de memoria del usuario.
La interfaz debe evitar que el usuario tenga que almacenar y recordar información.
Principios:
1. Aliviar la carga de la memoria de corto alcance (permitir deshacer, copiar y
pegar; mantener los últimos datos introducidos).
2. Basarse en el reconocimiento antes que en el recuerdo (ejemplo: elegir de entre
una lista en lugar de teclear de nuevo).
3. Proporcionar indicaciones visuales de dónde está el usuario, qué está haciendo
y qué puede hacer a continuación.
4. Proporcionar funciones deshacer, rehacer y acciones por defecto.
5. Proporcionar atajos de teclado (iniciales en menús, teclas rápidas).
6. Asociar acciones a los objetos (menú contextual).
7. Utilizar metáforas del mundo real (sistema telefónico, agenda, Figura 3).
Ejemplo de mala metáfora: iconos de Lotus Organizer (Figura 4).
8. Presentar al usuario sólo la información que necesita (menús
simples/avanzados, wizards, asistentes).
9. Hacer clara la presentación visual (colocación/agrupación de objetos, evitar la
presentación de excesiva información.
Consistencia.
Permite al usuario utilizar conocimiento adquirido en otros programas. Ejemplo:
mostrar siempre el mismo mensaje ante un mismo tipo de situación, aunque se
produzca en distintos lugares.
Principios:
1. Consistencia en la realización de las tareas: proporcionar al usuario
indicaciones sobre el proceso que está siguiendo.
2. Consistencia dentro del propio producto y de un producto a otro. La consistencia
se aplica a la presentación (lo que es igual debe aparecer igual: color del texto
estático), el comportamiento (un objeto se comporta igual en todas partes) y la
interacción (los atajos y operaciones con el mouse se mantienen).
3. Consistencia en los resultados de las interacciones: misma respuesta ante la
misma acción. Los elementos estándar del interfaz deben comportarse siempre de
la misma forma (las barras de menús despliegan menús al seleccionarse).
4. Consistencia de la apariencia estética (iconos, fuentes, colores, distribución de
pantallas).
5. Fomentar la libre exploración de la interfaz, sin miedo a consecuencias
negativas.
Consideraciones del diseño.
Existen diversas guías de diseño sacadas de expertos y comités, que
complementan a las reglas de oro estudiadas anteriormente. Por citar algunas de
ellas:
No se deben colocar demasiados objetos en la pantalla, y los que existen
deben estar bien distribuidos.
Cada elemento visual influye en el usuario no sólo por sí mismo, sino
también por su combinación con el resto de elementos presentes en la
pantalla.
Demasiada simetría puede hacer las pantallas difíciles de leer.
Si se ponen objetos sin alinear, hacerlo drásticamente.
Asimetría = activo, simetría = sereno.
Elementos de tamaño y color similares se perciben como pertenecientes a
un grupo.
Asumir errores en la entrada del usuario.
Diseñar para el usuario, no para demostrar los propios conocimientos
tecnológicos.
Unos gráficos espectaculares no salvarán a una mala interfaz.
No se deben colocar demasiados objetos en la pantalla, y los que existen
deben estar bien distribuidos.
Cada elemento visual influye en el usuario no sólo por sí mismo, sino
también por su combinación con el resto de elementos presentes en la
pantalla.
Bibliografía.
Thomas Punzenberger. (2018). ¿Qué es una HMI?, 2 de noviembre del 2020, de
Copadata Sitio web: [Link]
platform/visualizacion-control/que-significa-hmi-interfaz-humano-maquina-copa-
data/
Patricio Rodríguez. (2017). Diseño de Interfaces Hombre - Máquina (HMI). 2 de
noviembre del 2020, de Universidad Austral de Chile Sitio web:
[Link]