BLOG

10 + 1 Consejos para mejorar el diseño de tu aplicación de gestión empresarial

Por [N4] azgonzalez el | 2 Comments

El diseño, una asignatura pendiente

Como creadores de aplicaciones de gestión empresarial lo que nos gusta es sumergirnos cuanto antes en el editor de código para desarrollar software útil y eficiente. Priorizamos que nuestro programa funcione y la estética es algo secundario, pero… ¿qué pasaría si le diéramos más importancia a la parte visual?

Una interfaz visualmente agradable y sin estridencias no sólo conseguirá que el usuario trabaje de manera más confortable, si no que transmitirá profesionalidad y nuestra atención a los detalles.

Porque una buena aplicación no sólo debe serlo, si no que también debe parecerlo.

Por eso os vamos a contar 10 sencillos trucos que os ayudarán a mejorar el diseño de vuestra aplicación de gestión empresarial… Aunque también los podrás aplicar a las presentaciones de tu producto o empresa.

¿Vas a dejar que este año el diseño siga siendo tu asignatura pendiente?

1 Inspiración

Olvídate de la inspiración como un momento mágico en el que aparece una musa que te proporcionará de forma espontánea esa gran idea o diseño que todo el mundo aplaudirá.
Piensa en inspiración como documentación, investigación… recopila diseños que te influencian o en ver cosas nuevas que te dan una visión más fresca del sector.

Analiza interfaces de aplicaciones de gestión de la competencia, ¿por qué utilizan un color o una tipografía determinada? Y, lo que es más importante aprende a evaluar porqué te gusta lo que te gusta. Interiorízalo, hazlo tuyo, eso se reflejará en tus diseños y te será de ayuda a la hora de crear un producto con personalidad.

2 Identidad visual y coherencia

Éste es uno de los pilares básicos que tienes que tener en cuenta: cuando diseñas una interfaz para tu aplicación no sólo estás “poniéndola bonita” si no que estás ayudando a construir la identidad de tu producto y de tu marca como desarrollador.

Por ello es importante el ponerse limitaciones que no diluyan esa personalidad. En la gran mayoría de los casos, con una paleta de dos colores y una familia tipográfica bien escogida, podrás resolver una gran cantidad de situaciones.

El objetivo de mantener un diseño consistente es el de evitar que cada pantalla o formulario parezcan pensados por personas diferentes. De esta forma crearemos sensación de solidez y seguridad en el usuario, que no se encontrará con “sorpresas” que interrumpan su flujo de trabajo.

3 Boceta, prototipa y testea

Antes de elegir colores, tipografía, o directamente lanzar el editor y empezar a programar, te aconsejo que hagas un boceto de la interfaz. Empezar con lápiz y papel puede parecer un poco anacrónico hoy en día pero te permitirá distanciarte del ordenador y jugar con tu idea de la aplicación sin tomártelo muy serio, lo que puede que te ofrezca nuevas perspectivas sobre la interfaz. Quien sabe, puede que incluso se te ocurran nuevas funcionalidades.

Cuando te enfrentes al papel en blanco piensa con calma:

¿Cuáles son los elementos principales de tu aplicación? ¿Dónde crees que deberían ir? ¿Cuánto espacio deberían ocupar? ¿Cómo lo resuelven otras aplicaciones de la competencia?

Una vez tengas definido un par de bocetos puedes pasar a un programa de diseño como Adobe XD o Sketch. Estas herramientas te permitirán dar un paso más allá, como el wireframing y el prototipado, lo que te permitirá hacer pequeños tests en los que, a veces, puede ser bueno involucrar a tus clientes y que se sientan partícipes del proyecto.

https://www.sketch.com/

4 Jerarquía

Ten en cuenta lo siguiente: cuando todo es importante, nada lo es. Así que prioriza y dale a cada cosa la importancia que le corresponda.

Establecer una jerarquía entre los elementos ayudará al usuario a diferenciar lo que es importante de lo que no, a establecer relaciones entre diferentes zonas de contenido… resumiendo, le facilitará saber donde está aquello que necesita en cada momento.

Si tienes muchos elementos y no te decides sobre la prioridad que debe tener cada uno, te recomendamos escribir una lista de todos los componentes y ordenarla para tener una mejor percepción de qué es aquello que realmente tiene que tener un lugar destacado en tu aplicación.

Una herramienta muy útil que te puede ayudar a jerarquizar los diferentes elementos es Coggle.

5 Retícula

Una retícula es una estructura invisible que nos ayuda a organizar los elementos y los espacios entre ellos, así como a jerarquizarlos y darles un orden y consistencia visual. El uso de una retícula nos ayuda a crear un ritmo y una coherencia en las proporciones que el usuario percibirá de manera inconsciente.

Casi todos los diseños profesionales que te rodean están basados en retículas, desde el periódico impreso que lees por las mañanas a tu blog de desarrollo favorito.

Este concepto es muy fácil de entender y aplicar y, una vez te acostumbres a trabajar con ellas tus diseño darán un gran salto cualitativo.

Creo que la siguiente imagen deja el concepto claro de manera muy sencilla:

Si quieres profundizar en el tema te recomiendo un libro como Sistemas reticulares de Kimberly Elam o Sistemas de retículas de Josef Müller-Brockmann. Ambos son lecturas de una tarde y te darán una nueva perspectiva del diseño.

6 Color

Como consejo general: escoge un par de colores y cíñete a ellos. Esto te ayudará a mantener esa percepción de solidez de la que hablábamos en el apartado anterior.

Cuando elijas colores asegúrate de que tienen un buen contraste para que tengan una legibilidad óptima y sean accesibles para la mayoría de usuarios (AA como mínimo).

Probablemente con un color principal (que puede ser el de la identidad de tu empresa o producto) y uno o dos adicionales para mensajes de alerta o destacados sean más que suficientes.

Además sé consistente en su uso: ¿te has acordado de ponerle el mismo tono de azul a todos los botones de aceptar de la aplicación?

Ejemplos prácticos:

  • Google Docs: grises y azul
  • Adobe Photoshop: grises y azul
  • Visual Studio Code: grises y azul
  • Microsoft Excel: grises y verde

Verás además que de estos cuatro el azul se repite, esto se debe a que es un color que transmite tranquilidad y paz, piensa en el color del mar o el del cielo despejado. Perfecto para el trabajo diario delante de un ordenador.

Tener unos conocimientos básicos en psicología del color no te llevará más que un par de horas y será una buena ayuda a la hora de tomar decisiones.

7 Tipografía

Como ya sabrás la tipografía elegida influye en la facilidad de lectura, pero no sólo eso, también tienes que tener en cuenta que, al igual que el color, comunica y transmite sensaciones.

En todo caso ten en cuenta que los usuarios de tu aplicación de gestión la utilizarán para trabajar, todos los días, muchas horas seguidas, así que prioriza la legibilidad sobre la forma. Aunque estés desarrollando un producto para una empresa de organización de eventos infantiles puede que no sea buena idea utilizar 20 colores y la Comic Sans.

Tipografías como Roboto, Helvetica, Segoe UI o San Francisco tienen una legibilidad óptima para pantallas y poseen una familia amplia, que te permitirá cubrir una gran variedad de situaciones sin tener que recurrir a otra fuente.

Con una gran familia me refiero a que no se limite a “regular” y “negrita”, si no que disponga de cursiva y otros pesos adicionales como “light”, “condensed”, etc.

Esta imagen en la que puedes ver parte de la familia de Helvetica te ayudará a entender a qué me refiero con un solo vistazo:

Un consejo extra, si vas a utilizar dos tipografías intenta que sean lo suficientemente diferentes y se complementen o funcionen por contraste. Por ejemplo, Montserrat funciona muy bien para títulos con una Roboto para los textos más largos, pero utilizar Helvetica y Arial juntas no es una buena idea ya que son prácticamente iguales. En ese caso cíñete a una sola familia.

8 Iconos

Es realmente fácil hacer una búsqueda de iconos en internet y sentirse completamente abrumado por la infinita cantidad de opciones que existen.

Olvídate de la gran mayoría, busca únicamente iconos pixel perfect. Estos se visualizarán perfectamente en tamaños pequeños. Si los usas en las proporciones indicadas se adaptarán perfectamente al píxel y se verán totalmente nítidos. Además, con las versiones x2 o incluso x3 obtendrás la mayor calidad y definición en pantallas de alta densidad.

Si además te limitas a una sola librería te asegurarás consistencia visual en tu iconografía, contribuyendo a la identidad y la coherencia de la que te hablaba anteriormente. Unas bastante completas son la de Material Design (gratuita) o la de Nucleo (pago único).

9 Espacio en blanco

El espacio en blanco es al diseño lo que el silencio lo es a la música o a una conversación: un breve descanso.

Uno de los errores más comunes en todos los estudiantes de diseño primerizos es llenar todo el espacio disponible: no dejar márgenes, elementos pegados uno al lado del otro, textos “sin aire”…

No caigas en estos errores y utiliza el espacio en blanco, deja que la interfaz respire… evita que se perciba como saturada y abigarrada. Si utilizas una retícula base te resultará mucho más sencillo percibir el espacio en blanco como parte del diseño.

10 Simplifica

Es tentador colocar a la vista un montón de herramientas, toolbars, treewidgets, docks y botones pero, en general, suele generar confusión en el usuario. Además, sabemos que cuando se le dedica mucho tiempo a programar una funcionalidad lo que queremos todos es darle mucha visibilidad ya que estamos orgullosos de ella, aunque luego prácticamente el usuario no la utilice en su día a día.

Sin embargo piensa en las herramientas que realmente va a utilizar y en cómo las va a utilizar. Quédate con lo esencial, elimina todo aquello que sea accesorio. De esta forma conseguirás una interfaz mucho más limpia y agradable, más útil y funcional.

Esto no sólo se aplica a los componentes generales de la interfaz, si no también a los detalles. Por ejemplo, ¿es necesario poner el texto “eliminar” al lado del icono de papelera? ¿El botón de aceptar tiene que llevar un fondo con color en degradado, sombra y una línea de otro color rodeándolo o es suficiente con un color plano?

Seguro que utilizas algún sistema para medir el uso de la aplicación por parte de los usuarios. Esto te puede ayudar a detectar los botones o herramientas que casi (o nada) se utilizan. Ocultar estas funciones en un menú contextual te permitirá tener una interfaz más limpia y ordenada.

Probablemente puedas ocultar muchos elementos que no hayas podido (o querido) simplificar.

10+1 El sistema de diseño

¿Tienes varias aplicaciones bajo una misma marca? ¿Quieres que todo tu trabajo sea consistente visualmente como parte de tu identidad laboral?

Probablemente ha llegado el momento en el que quieras crear un Sistema de diseño.

El Sistema de diseño consiste en una serie de reglas para dar consistencia y coherencia visual a todo tu trabajo. Además, al tener los diferentes elementos sistematizados podrás reutilizarlos y ganar tiempo de desarrollo ya que la mayoría de decisiones están tomadas.

Material Design de Google, Fluent Design de Microsoft… son ejemplos de sistemas creados por grandes compañías que te pueden servir de ayuda e inspiración a la hora de crear el tuyo.

Simplemente añadir que, si quieres mejorar el diseño de tus aplicaciones, presentaciones, etc. lo mejor que puedes hacer es ver muchas cosas, coger inspiración de grandes diseñadores y empezar a sentir pasión y gusto por el diseño. No tienes porqué limitarte sólo a diseño gráfico, diseño de aplicaciones o diseño web, si no que muchas veces la arquitectura o el diseño industrial o de producto contribuirán a cambiar tu percepción sobre el entorno.

Finalizo con un vídeo de Dieter Rahms, una gran influencia entre los que formamos parte del equipo de diseño de Velneo:

¿Qué te ha parecido este artículo? ¿Te gustaría que sigamos escribiendo sobre diseño de aplicaciones de gestión empresarial? Háznoslo saber en los comentarios.

Velneo es el entorno ágil para el desarrollo
de aplicaciones empresariales

DESCARGAR VELNEO

2 Responses to "10 + 1 Consejos para mejorar el diseño de tu aplicación de gestión empresarial"
  1. Muy bueno, sigan escribiendo sobre diseño para apps Velneo.
    Saludos

  2. [N4] azgonzalez dice:

    Hola Matcas! Me alegra que te haya gustado el tema.

    La verdad que el diseño de aplicaciones de gestión empresarial es bastante complejo pero es fundamental: es un elemento diferenciador de tu producto.

    Una aplicación no sólo ha de ser funcional, si no que ha de ser usable y agradable para el usuario!

Deja un comentario

Esta web utiliza cookies. Si continúa navegando acepta dichas cookies y nuestra política de cookies. Gracias. ACEPTAR

Aviso de cookies