Introducción
En mi anterior artículo “Diseño UI/UX en software industrial” hice una introducción a las diferentes herramientas que puedes utilizar para el diseño inicial de tus aplicaciones de usuario.
Hoy voy a dar un paso más y voy a hablarte de los conceptos básicos del diseño gráfico para aplicaciones de usuario de software industrial.
Hoy en día, el diseño gráfico forma parte de nuestras vidas. Páginas web, redes sociales, presentaciones comerciales, folletos, etc., pero por alguna razón que no consigo entender, todavía se ven aplicaciones de usuario industriales HORRIBLES. Y lo más curioso es que mucha gente lo acepta con una cierta resignación, como si fuera natural, como si austero o minimalista fuera sinónimo de feo (el estilo Zen demostró que no es así). ¿Es que los usuarios industriales no tienen derecho a utilizar aplicaciones pensadas desde la usabilidad y con cierto estilo y gusto?
Yo creo que sí. Que se debe hacer un esfuerzo para erradicar esa mentalidad y asumir que, igual que la usabilidad y el diseño gráfico hicieron una entrada triunfal en el desarrollo web, debe hacerlo en las aplicaciones industriales.
Si has visitado Material Design y Fluent Design System verás que ambos definen su propio estilo, aunque con algunas coincidencias. No es mi objetivo el reproducir o traducir el contenido de estos sistemas pero sí me gustaría repasar algunos conceptos básicos en los que ambos coinciden.
El Color en las Aplicaciones de Usuario
El color es una forma intuitiva que tiene tu aplicación de transmitir información al usuario. Quien más, quien menos asocia el verde a un estado correcto o de marcha, el rojo a un estado de alarma o de paro, el naranja a un aviso o modo de funcionamiento manual, etc.
Es una buena idea elegir un color para indicarle al usuario con qué elementos de la aplicación puede interactuar. Por ejemplo, estamos acostumbrados que los enlaces de una página web aparezcan en azul y subrayados (aunque hay otras muchas variantes). Los elementos más importantes deberían destacar más que el resto.
Cuidado con la legibilidad y el contraste. El texto y los elementos importantes, como los iconos, deben cumplir con los estándares de legibilidad cuando aparecen sobre fondos de color. Te recomiendo que visites la página de Web Content Accessibility Guidelines (WCAG) donde encontrarás requisitos y técnicas para asegurar la accesibilidad de tus aplicaciones de usuario. Aunque está escrito para la web, la mayoría de las cuestiones son perfectamente aplicables a las aplicaciones de escritorio. Otro aspecto a tener en cuenta en este sentido son las personas con anomalías visuales, como el daltonismo. En la web paletton.com, entre otras cosas, dispones de un simulador de anomalías visuales para que te hagas una idea de cómo verán tus usuarios la aplicación.
Los colores están asociados a emociones y conceptos, tal cual puedes ver en la siguiente figura:
Verde
Marcha, movimiento, OK, ON, agua
Rojo
Alarma, avería, paro, OFF, contra incendios
Azul
Datos, información, aire
Amarillo
Aviso, alerta, elemento de seguridad, gases
Naranja
Manual, semiautomático, elementos móviles, ácidos
Marrón
Deshabilitado, OFF, parado, aceites vegetales y animales
Púrpura
Enlace ya visitado, alcalís
Rosa
?
Gris
Deshabilitado, OFF, parado, vapor de agua, electricidad
Blanco
Aviso, alerta, sustancias alimenticias
Negro
Manual, semiautomático, aguas negras
A la hora de diseñar la aplicación, elige un color principal y prepara un gradiente de oscuro a claro, para poder resaltar la jerarquía de los diferentes elementos.
- Si la aplicación de usuario es un desarrollo llaves en mano para un cliente determinado, el color principal será el color corporativo del cliente. Por ejemplo: SEAT, rojo; Volkswagen, azul.
- Si la aplicación está vinculada a varios clientes de un mismo sector, elijo un color representativo de dicho sector. Por ejemplo: ecología, verde; spa, rosa.
- Si la aplicación es multicliente y multisector entonces elijo el color corporativo de mi compañía.
Una vez has determinado el color principal, deberás determinar el color de fondo de la aplicación. Personalmente me inclino por los fondos blancos ya que, como hemos visto, el blanco es un color que transmite nitidez y sobre el que resaltan todos los demás colores. Intento huir, siempre que puedo, del color gris, ya que entristece el entorno.
A continuación, determina los colores para los elementos comunes como botón de aceptar, de cancelar, elementos en marcha, en paro, en manual, etc., y sé consistente en toda la aplicación.
La Tipografía de la Aplicación
La tipografía es la representación visual del lenguaje y su principal tarea transmitir información, por tanto, su estilo nunca debería interferir en ese objetivo. Piensa que una aplicación industrial se puede llegar a utilizar de forma intensiva durante las 8 horas que dura un turno. Por tanto, intenta minimizar el cansancio visual de tus usuarios.
Deberías utilizar una única fuente en toda tu aplicación, que ofrezca una estética limpia, ligera y que asegure una legibilidad óptima en todos los tamaños y densidades de píxeles y que, preferentemente, sea de tipo Sans Serif. En los entornos Windows, la fuente Segoe UI es una muy buena elección, aunque también puedes instalar alguna fuente de Google Fonts.
Al igual que el color, la tipografía también lleva implícito un significado psicológico, como puedes observar en la siguiente infografía
Los Iconos en las Aplicaciones Industriales
Los iconos son un elemento muy importante en tus aplicaciones de usuario ya que proporcionan un atajo visual de una acción, concepto o producto. Al comprimir el significado en una imagen simbólica, los iconos pueden cruzar las barreras del idioma y ayudar a conservar un recurso extremadamente valioso: el espacio en la pantalla.
Utiliza iconos para acciones o para los elementos de navegación existentes en el menú, siempre que sea fácil para el usuario entender lo que significa y que sea lo suficientemente simple como para ser apreciado en tamaños pequeños. Evita los iconos con trazados complejos, clipart o fotografías.
Lo más probable es que estas fuentes no cubran las necesidades de tu aplicación industrial, ya que te harán falta iconos específicos (códigos de barras, pallets, motores, etc.). Yo hace años que descubrí FlatIcon y desde entonces lo utilizo en todos los desarrollos. Disponen de un amplio catálogo y con la suscripción de pago adquiero la licencia de uso comercial, evitándome así problemas de derechos de autor. Piensa que la calidad de los iconos que utilices determinarán en gran medida la calidad gráfica de tus aplicaciones de usurio.
Imágenes
Aunque las imágenes y las ilustraciones no son muy frecuentes en las aplicaciones industriales, si que es probable que necesites alguna, por ejemplo, en el formulario de login.
Para que tus aplicaciones y manuales de usuario sean de calidad es importante contar con un buen repositorio de imágenes e ilustraciones, también de calidad.
De la mano de FlatIcon conocí Freepik, un repositorio que te proporciona un sin fin de imágenes e ilustraciones de gran calidad y en múltiples formatos. Con la suscripción anual tendrás acceso a contenido premium y licencia de uso comercial.
