Diseño gráfico para aplicaciones de usuario

Diseño gráfico para aplicaciones de usuario de software industrial

Escrito por

Esther Claravalls

Categoría

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.

El color no debe usarse de manera indiscriminada. Tampoco se trata de pasar del gris al arcoíris, convirtiendo las aplicaciones de usuario en circos de colores. Debes usar el color de manera significativa y con moderación para resaltar elementos importantes, ayudando a crear una interfaz de usuario que sea fluida e intuitiva.

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:

W

Verde

Naturaleza, ética, crecimiento, esperanza, frescura, serenidad, orgánico.

Marcha, movimiento, OK, ON, agua

W

Rojo

Dinamismo, calidez, agresividad, pasión, energía, peligro.

Alarma, avería, paro, OFF, contra incendios

 

W

Azul

Seriedad, seguridad, integridad, sinceridad, calma, armonía.

Datos, información, aire

W

Amarillo

Calidez, amabilidad, optimismo, celos, alegría, luminosidad

Aviso, alerta, elemento de seguridad, gases

W

Naranja

Innovación, modernidad, juventud, creatividad, exotismo

Manual, semiautomático, elementos móviles, ácidos

W

Marrón

Masculino, rural, tierra, rústico, pereza, comfortable

Deshabilitado, OFF, parado, aceites vegetales y animales

 

 

W

Púrpura

Lujo, realeza, sabiduría, dignidad, misterio, espiritualidad

Enlace ya visitado, alcalís

W

Rosa

Encanto, cortesía, inocencia, femenino, delicadeza, romántico

?

W

Gris

Aburrimiento, anticuado, modestia, elegancia, inteligencia

Deshabilitado, OFF, parado, vapor de agua, electricidad

 

W

Blanco

Inocencia, pureza, limpieza, suavidad, ingenuidad

Aviso, alerta, sustancias alimenticias

W

Negro

Poder, prestigio, sofistificación, elegancia, eternidad, muerte

Manual, semiautomático, aguas negras

Pero debes tener en cuenta que este significado varía según el entorno cultural. Por ejemplo, en algunas culturas el color azul se asocia con el frío, mientras que en otras representa el amor.
psicologia color culturas
Si quieres aprender más sobre la teoría del color, te recomiendo visites esta página

 

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.

B7cWRIVroduc9tSxqWaCyCGQ M9bfsmFQKMlVfnuR2BIh eR35gz3hO 45QKnItqA wuXqAcmBNFVRam4Upw5Nwqhsmo6FJgMWoW=w1064 v0
Para seleccionar el color primario, yo suelo utilizar el siguiente criterio:

  1. 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.
  2. 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.
  3. 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.

windows controls

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.

segoe sample
Juega con el tamaño de la fuente para inducir jerarquía entre los elementos y facilitar la lectura. No te recomiendo que utilices un tamaño de letra inferior a 12px ya que se dificulta mucho su lectura.
type ramp
 

 

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

info tipos
Fuente: websa100

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.

icon shopping cart
icon bad
Determina que fuente de iconos vas a utilizar en tu aplicación. Actualmente existen muchas, quizás la más conocida sea Font Awesome y en entorno Windows, dispones de la fuente Segoe MDL2 Assets.

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.

Espero que el contenido del artículo te sea de utilidad para que tus aplicaciones de usuario para la industria empiecen a tener un aspecto diferencial con respecto a tu competencia.
SoftInd Tool Box

¿Dispuesto a rentabilizar tu negocio?

"

Al suscribirte también me estás autorizando a enviarte contenidos sobre software industrial de tu interés. Respeto tu privacidad y no hago spam. Conoce mi Política de Privacidad . 🙂

Los secretos del Software Industrial

Únete a Nuestra Comunidad

Colaboración

Accede al grupo privado de facebook y empieza a compartir conocimiento con otros empresarios como tú.

Sumérgete en el Blog

El departamento de OT

En este artículo te presentamos la misión, funciones y organigrama que debería tener el departamento de OT para asegurar la productividad de nuestra empresa.

Ciberseguridad en Entornos Industriales

Con este artículo introductorio inauguramos la sección de ciberseguridad en entornos industriales. Los sistemas industriales deben contemplar de manera obligada aspectos de Ciberseguridad que hasta ahora siquiera se tenían en mente, y deben adaptarse para hacer frente a cualquier tipo de amenaza.

Pin It on Pinterest

Share This
Software Industrial Logo

¿Listo para hacer el cambio?

Únete al clan y accede a recursos, guías y tutoriales sólo para suscriptores

¡Bienvenido! Revisa tu correo para obtener las instrucciones de acceso