Diseño de Interfaz de Usuario
Diseño de Interfaz de Usuario
Diseño de Interfaz de Usuario
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
INTERFAZ DE USUARIO
La interfaz de usuario es el medio con que el usuario puede comunicarse con una máquina
(HMI, Human Machine Interfa
Interface, por sus siglas en inglés), equipo, computadora o dispositivo y
comprende todos los puntos de contacto entre el usuario y el equipo.
Normalmente suelen ser fáciles de entender y fáciles de accionar, aunque en el ámbito de la
ingeniería es preferible referirse y resumir en que sean "útiles”.
La interfaz de usuario es el espacio donde se producen las interacciones entre seres
se humanos y
máquinas. El objetivo de esta interacción es permitir el funcionamiento y control más efectivo de la
máquina desde la interacción con el humano.
El objetivo del diseño de una interfaz es producir una interfaz que sea fácil de usar (explicarse por sí
misma), eficiente y agradable para que al operar la máquina dé el resultado deseado.
El Estándar ANSI/ISA-101.01-2015:
2015: Interfaces Humano-Máquina
Máquina para Sistemas de Automatización
de Procesos es la norma aplicable en los casos de los sistemas scadas https://es.wikipedia.org/wiki/SCADA,
pero nada impide que podamos aplicar y adaptar algun
algunosos de sus preceptos en nuestro diseños más
sencillos.
La interacción Hombre-Máquina
Máquina cada vez es más compleja
compleja,, lo que no necesariamente significa más
difícil de implementar. Actualmente
ctualmente son “normales” los sistemas de reconocimiento de voz, voz e
incluirlos en nuestro diseño puede ser tan sencillo como incluir una tarjeta con hardware
prediseñada e incluir una librería dentro del mismo. https://www.youtube.com/watch?v=HLHT2W_Q4uk.
https://www.youtube.com/watch?v=HLHT2W_Q4uk
Como diseñadores de las HMI de sus proyectos, ustedes son los únicos responsables de lo “exitosa o
no” de las mismas. No deben esperar a que se les plasme en un papel como debe ser, usen su
criterio, y no piensen en su facilidad, piensen en la facilidad del usuario.
Funciones principales
incipales
Las funciones principales de una HMI son las siguientes:
1
Prof: Carlos A. Blanchard
Ver: U-2021-1
UNIVERSIDAD DE CARABOBO
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
Según
egún la forma de interactuar del usuario
Atendiendo a cómo el usuario puede interactuar con una interfa
interfaz,
z, existen varios tipos de interfaces
de usuario:
Interfaz
nterfaz de línea de comandos (Command-Line Interface, CLI): ): Interfaces alfanuméricas
(intérpretes de comandos) que solo presentan texto. Es un tipo de interfaz de usuario que
permite a los usuarios dar ins
instrucciones
trucciones o cargar datos por medio de una línea de texto simple.
Estas interfaces son fáciles de usar, sin embargo se necesita un amplio conocimiento de la
persona que las utiliza. Por lo que, tanto su curva de aprendizaje, como el conocimiento técnico
previo
evio a su uso impiden que puedan ser utilizadas por cualquier persona. Esta interfaces
requieren que el diseñador explique totalmente mediante un display o mediante un manual de
usuario el tipo de información que se puede introducir y requiere de un mecanismo
mecani que valide
que la información introducida cumpla con el formato deseado o sea un comando o dato valido
aceptado por el sistema.
2
Prof: Carlos A. Blanchard
Ver: U-2021-1
UNIVERSIDAD DE CARABOBO
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
La evolución de las HMI ha pasado de las interfaces de comando a las interfaces graficas a las
interfaces naturales de usuario.
o. En la medida en que se avanza es más complejo el hardware
necesario para su implementación.
Actualmente son muy comunes las interfaces mixtas, por ejemplo interfaces graficas que al hacer
click en algunos iconos activan una interfaz en línea de coman
comando,
do, para permitir el ingreso de datos.
Otra practica muy común es emplear diversos dispositivos para realizar diversas tareas, por ejemplo
emplear un Arduino, un Raspberry
aspberry o cualquier otra computadora de placa única como elemento
remoto
oto que se encuentra en campo y que posee una interfaz austera y limitada, y emplear un
computador (PC o Mac), o un n dispositivo A
Android (celular, tablet etc.) como dispositivo remoto en
el cual se desarrolla una interfaz grafica mucho más amigable y con más opciones.
Tipos
En las interfaces de usuario se pueden distinguir básicamente tres tipos:
3
Prof: Carlos A. Blanchard
Ver: U-2021-1
UNIVERSIDAD DE CARABOBO
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
KERNEL
A
P U
L S
I U
C D A
SENSOR SALIDAS A E R
C L I
I O
Ó
N
LIBRERIAS DEL
FABRICANTE
KERNEL
4
Prof: Carlos A. Blanchard
Ver: U-2021-1
UNIVERSIDAD DE CARABOBO
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
Si bien el diseño de la interfaz es crítico para el manejo del dispositivo, los diseñadores al momento
de su creación ponen especial énfasis en determinar el tipo de usuario, su conocimiento y su
experiencia.
El diseño de la interfaz de usuario comienza con la identificación de los requerimientos del usuario,
las tareas y el ambiente. Una vez identificadas las tareas del usuario, se crean y analizan los
escenarios
arios para éste y se define un conjunto de acciones de la interfaz. Esto forma la base para crear
nuestra interfaz, y nos dará una idea de que elementos requerimos y que herramientas emplear,
luego de eso se hace el prototipo, se implementa en definitiva eell modelo del diseño y se evalúa la
calidad.
5
Prof: Carlos A. Blanchard
Ver: U-2021-1
UNIVERSIDAD DE CARABOBO
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
Este es el botón de Play de los aparatos de música usado por casi todos ellos desde hace
muchos años, pero podemos usarlo como botón arranque o reproducción de una secuencia de
números que vayamos a mostrar.
Otro ejemplo lo constituyen los botones de arranque (pulsador verde) y parada (pulsador
rojo) de la gran mayoría de las maquinas industriales. Aunque estos colores están estandarizados en
muchas normas de un gran número de países, las normas se circuns
circunscriben
criben al área industrial, pero
estos colores has sido aceptados y adoptados en otras áreas como el hogar o los automóviles incluso
en algunas apps para los celulares, en las cuales encontramos un botón verde para la activación y
este cambia a rojo cuando la acción esperada es la desactivación.
Por tanto diseñar una HMI para nuestro equipo no puede ser solo agregar unos pulsadores o
pantallas para lograr el funcionamiento con lo mínimo o en exceso.. Diseñar un HMI requiere de:
1. Planificar.
2. Adaptarse al usuario.
3. Diseñar para ser eficientes.
4. Solo añadir gráficos, si son relevantes.
5. Más datos en pantalla no es siempre mejor.
6. Pocos dispositivos de entrada n no significa sencillez.
7. Usar los colores de forma adecuada.
8. Ser coherente en todas tus máquinas.
9. Dejar los datos
atos importantes siempre visibles.
10. Usar los controles visuales.
11. Ser coherente en el funcionamiento de tu dispositivo
dispositivo.
1. Planificar: Poner por escrito qué cosas debe cumplir y qué no, que esperan los usuarios, que
es relevante y que no, eso ayuda a aclarar ideas, ayuda a crear un boceto.
2. Adaptarse al usuario: trata de hablar con los usuarios finales, los operarios de producción.
Ellos son los que van a usar la máquina y los controles que diseñes para ella. Tus usuarios
son tus clientes y tus clientes son ge generalmente tus usuarios, así que nada mejor y más
lucrativo que mantenerlos contentos. Un sistema que sea difícil de operar incluso para otro
ingeniero, es un sistema que casi seguro está condenado al fracaso. Lo mismo ocurre en una
sala de control (https://g.co/kgs/qbDKqY
https://g.co/kgs/qbDKqY)) en ellas no todos poseen el mismo nivel
intelectual, ni la misma experticia, se debe diseñar para que el eslabón más débil de la
cadena pueda entender cómo funciona nuestro dispositivo. Si estamos sustituyendo
su un
dispositivo analógico por uno digital, ¿podemos crear una interfaz que sea similar a la del
dispositivo analógico? (esto nos aseguraría casi un éxito).
3. Diseñar para ser eficientes
eficientes: La eficiencia cubre muchos aspectos, económicos, velocidad de
respuesta, aprovechamiento de los recursos, etc. Incluir en nuestro diseño una pantalla de
Ultra Alta Definición (UHD) para mostrar un mensaje como: “temperatura=18.5°C” no es
ser eficientes. ¿Agregar un pulsador mas a nuestro diseño es necesario o podemos pode
multiplexar el uso de uno que ya existe?
4. Solo añadir gráficos, si son relevantes
relevantes: Es sabido que una imagen vale más que mil palabras.
Pero eso no es verdad necesariamente
necesariamente, se debe añadir solo las imágenes y gráficos que sean
relevantes para el operario
operario, que
ue le muestren datos o indicaciones claros para él. Recuerden
lo que ya se dijo, si podemos agregar una pantalla con un grafico que emule el
comportamiento de un dispositivo ya conocido, es mejor.
6
Prof: Carlos A. Blanchard
Ver: U-2021-1
UNIVERSIDAD DE CARABOBO
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
Existen otras reglas pensadas para el ámbito del desarrollo del software pero que fácilmente
podemos extrapolar al diseño
eño de dispositivos digitales:
7
Prof: Carlos A. Blanchard
Ver: U-2021-1
UNIVERSIDAD DE CARABOBO
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
Definir los modos de interacción de manera que no obligue a que el usuario realice acciones
innecesarias o no deseadas. Por ejemplo: Si el usuario debe ingresar un valor, ¿es necesario
que el usuario introduzca todos los números? o ¿se se puede implementar una lista de valores
predeterminados y que el usuario seleccione alguno de ahí?.
Tener en consideración una interacción flexible. Por ejemplo incluir un teclado o pulsadores
a un sistema pensado paara usar principalmente los comandos de voz, para lo os momentos en
que el usuario este afónico
afónico.
Permitir
rmitir que la interacción del usuario sea interrumpible y también reversible. Por ejemplo:
Si se selecciono un valor ¿podemos cambiarlo?
cambiarlo?, ¿Es necesario llegar al final de la
configuración aunque no se desee cambiar mas nada?
Facilitar la interacción a medida que aumenta la habilidad y permitir que aquella se
personalice. Por ejemplo:
jemplo: Proveer atajos a funciones.
Ocultar los tecnicismos internos al usuario ocasional. Por ejemplo:
jemplo: Si estamos diseñando un
termómetro digital, no es necesario mostrar el valor que arrojo el convertidor ADC.
Diseñar la interacción directa con objetos que aparezcan en la pantalla. Por ejemplo: Si
estamos mostrando un valor en pantalla, ¿podemos modificarlo? ¿¿cómo?
Reducir la demanda de memoria a corto plazo. Cuando los usuarios se ven involucrados en
tareas complejas, exigir una memoria a corto plazplazo
o puede ser significativo. La interfaz se
deberá diseñar para reducir los requisitos y recordar acciones y resultados anteriores.
Hacer que lo preestablecido sea significativo. El conjunto inicial de valores por defecto
tendrá que ser de utilidad para al u usuario,
suario, pero un usuario también deberá tener la
capacidad de especificar sus propias preferencias. Por ejemplo: Si se va a establecer una
comunicación RS-232,232, preestablecer unos valores de configuración e informárselo al
usuario y darle la potestad de cam
cambiar uno o todos los que desee.
La distribución visual de la interfaz debe basarse en una metáfora del mundo real. Por
ejemplo, en un sistema de control se pudiera hacer un esquema del proceso, y mostrar
dentro de cada componente los valores representati
representativos.
Revelar información de manera progresiva.
La interfaz debe estar organizada de manera jerárquica. Es decir, la información acerca de
una tarea, objeto o comportamiento debe presentarse primero en un nivel de generalización
elevado.
8
Prof: Carlos A. Blanchard
Ver: U-2021-1
UNIVERSIDAD DE CARABOBO
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
1) que toda la información se organice de acuerdo con reglas de diseño que se respeten en todas las
pantallas desplegadas,
2) que los mecanismoss de entrada se limiten a un conjunto pequeño usado en forma consistente en
toda la aplicación.
cación. Los botones deben cumplir la misma función en distintas pantallas de ser
posible.
3) que los mecanismos para pasar de una tarea a otra se definan e implementen de modo
consistente.
Estas reglas de oro forman en realidad la base para los principios del diseño de la interfaz de usuario
que servirán de guía para el diseño.
9
Prof: Carlos A. Blanchard
Ver: U-2021-1
UNIVERSIDAD DE CARABOBO
FACULTAD DE INGENIERIA
ESCUELA DE INGENIERIA ELECTRICA
Conceptos:
Computadora de placa única: Una computadora de una sola placa es una computadoraa completa en un solo circuito. El diseño
se centra en un solo microprocesador con la RAM, E/S y todas las demás características de tamaño reducido y que tiene todo lo que necesita en la placa
base. Wikipedia
Framework: Un framework es un esquema o marco de trabajo que ofrece una estructura base para elaborar un proyecto con objetivos específicos,
específi una
especie de plantilla que sirve como punto de partida para la organización y desarrollo de soft
software.
Utilizar frameworks puede simplificar (y mucho) una tarea o proceso, de ahí que se trate de una de las herramientas habituale
habituales,
s, porque les ayuda a ser más ágiles y
productivos. https://www.edix.com/es/instituto/framework/
x.com/es/instituto/framework/
Toma forma como un proceso en el que se utilizan una serie de técnicas multi disciplinares y donde cada decisión tomada debe estar basada en las necesidades,
objetivos, expectativas, motivaciones y capacidades
des de los usuarios.
La mayoría de los procesos que hacen Diseño Centrado en el Usuario suponen las siguientes etapas:
1. Conocer a fondo a los usuarios finales, normalmente usando investigación cualitativa o investigación cuantitativa.
2. Diseñar un producto quee resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones.
3. Poner a prueba lo diseñado, normalmente usando test de usuarios.
Teclado QWERTY: El teclado QWERTY es la distribución de teclado más común. Su nombre proviene de las primeras
imeras seis letras de su fila
superior de teclas.
Árbol: un árbol es un tipo de organización que imita la estructura jerárquica de un árbol,, con un valor en la raíz y subárboles con un nodo padre,
representado como un conjunto de nodos enlazados. https://es.w
https://es.wikipedia.org/wiki/%C3%81rbol_(inform%C3%A1tica)
10
Prof: Carlos A. Blanchard
Ver: U-2021-1