BLOG

Los 10 errores más comunes a la hora de diseñar una interfaz de usuario

Por [N1] azur gonzalez el | 2 Comments

Durante varios años compaginé el diseño de aplicaciones empresariales con la enseñanza, siendo profesor de diseño en un máster. Esta experiencia fue muy enriquecedora, yo también aprendí mucho de mis alumnos y me hizo ver de una manera diferente el diseño. Aunque lo que enseñaba estaba orientado al diseño web, hay muchas cosas que se pueden extrapolar al de aplicaciones. Además, me hizo localizar una serie de errores comunes que todos los alumnos cometían durante sus primeros años meses de carrera profesional.

Os los detallo a continuación para que podáis evitarlos y, de esa manera, mejorar el diseño de vuestras aplicaciones de gestión empresarial desde el primer momento.

1. Demasiados elementos en la aplicación

Puedes pensar que es genial que tus usuarios tengan a su alcance botones para absolutamente todas las funcionalidades que tiene tu aplicación. Sin embargo esto hará que la interfaz esté abigarrada, llena de elementos que la hacen poca intuitiva y que dificultan que se forme una memoria muscular que agilice su uso.

Antes de empezar a crear botones y formularios párate a pensar con que frecuencia va a utilizarlos el usuario y el impacto que tiene sobre su flujo de trabajo. Si no es una acción “vital”, deberías proceder a pasarlo a un menú contextual o a Edición, Archivo, etc. Recuerda, es importante que hagas un boceto en papel o en algún programa de diseño (XD, Illustrator, Sketch, Photoshop) antes de ponerte a programar. La herramienta no importa, pero sí el tener una base donde organizar el diseño.

Por otra parte, si tu aplicación ya ha sido publicada y está siendo utilizada por una base de usuarios, mide el uso de los diferentes elementos y toma decisiones en función de los resultados. Igual descubres que ese botón que creías indispensable solo es utilizado por un 1% de usuarios y, a lo mejor, sería conveniente que lo eliminaras.

2. La aplicación tiene un uso poco intuitivo

Una aplicación de gestión empresarial debe ser sencilla de utilizar y muy intuitiva y, aunque decir esto parezca una obviedad, los botones deben parecer botones, los formularios han de ser fáciles de cubrir, etc.

Extraído del clásico libro “No me hagas pensar”, de Steve Krug. Una lectura indispensable para el diseño web que se puede aplicar a tus aplicaciones de gestión empresarial.

Cada vez que un usuario duda de si un elemento de la aplicación va a ejecutar una acción concreta está sintiéndose frustrado y su trabajo se retrasa. Algunos de vosotros pensaréis:

“Es por la curva de aprendizaje, el usuario aún no sabe utilizar la herramienta.”

Puede que esto sea cierto o no, en todo caso no debes trasladar toda la responsabilidad a los usuarios. Párate a analizar tu aplicación y, tal vez, encuentres formas de hacer que tu aplicación sea más intuitiva, su funcionamiento más sencillo y que tus usuarios se encuentren más a gusto utilizándola.

Otro pensamiento habitual:

“Mi aplicación está bien, el problema es que aún no se ha leído la documentación.”

Es un punto de vista similar al anterior pero hay una gran diferencia. Si un usuario ha de leerse un manual para poder utilizar una aplicación puede que ésta no sea lo suficientemente intuitiva. Puede que un programa para resolver problemas complejos y muy específicos requiera de una alta formación, pero una aplicación para gestionar un restaurante ha de ser algo extremadamente sencillo de manejar.

Los elementos no sólo deben ser aquellos necesarios, sino que su uso debe ser intuitivo. Se debe minimizar la curva de aprendizaje todo lo posible y ceñirse a estándares ya existentes.

Por ejemplo, si pongo un icono de una papelera, éste se asociará a la acción “eliminar”. En muchos casos ya hay soluciones definidas a las que los usuarios están acostumbrados. En más ocasiones de las que parece no hay que inventar nada nuevo, si no investigar e inspirarse en lo que ya está hecho. Te puede ayudar el revisar sistemas de diseño como el de Google, Adobe, Microsoft o IBM, por citar unos pocos.

Aunque en muchos casos es bueno ocultar una acción tras un menú contextual hay que intentar que todo sea accesible y que el usuario no tenga que hacer 20 clics y dar mil vueltas para realizar una acción.

3. No hacer tests

Es muy habitual pecar de confiado y pensar que esa nueva funcionalidad que acabas de programar está hecha de manera perfecta y que todo el mundo va a entender su funcionamiento a la primera. Puedo asegurarte que esto no es así en muchos casos más de los que imaginas, especialmente cuando tu base de usuarios es variada en su perfil socio-demográfico. Testéala tú mismo hasta asegurarte que todo está correcto, cuando termines, pásasela a algunos usuarios para que te den su feedback, recopila sus impresiones y, a partir de ahí, púlela hasta que brille.

Si quieres ahorrar tiempo empieza los tests en las primeras fases, aunque sea en bocetos hechos en papeles. Esto te evitará tener que estar corrigiendo errores posteriormente cuando ya la hayas pasado a producción.

Recuerda que desarrollar y diseñar una aplicación de gestión empresarial no es algo unilateral, si no que requerirá la participación de diferentes actores (inversores y usuarios entre ellos).

4. Elementos sin alinear

Este punto ya lo toqué en el post  “10 + 1 consejos para mejorar el diseño de tu aplicación de gestión empresarial”, concretamente en el apartado de la retícula. Uno de los errores más comunes (y más fáciles de solucionar) de una persona que no tiene conocimientos de diseño es la de colocar los elementos de la interfaz sin ningún criterio: un botón por allí, un menú por allá… todo desordenado, generando una sensación de caos en el usuario, provocando ruido y que el utilizar la aplicación sea todo un reto.

Podríamos hacer fácilmente una comparación con un cajón: ¿Cómo te sientes cuando abres un cajón completamente desordenado con todo tirado dentro? ¿No preferirías uno que haya sido organizado por Marie Kondo?

Mi consejo para solucionar esto es sencillo: documéntate sobre el uso de retículas y, siempre, alinea los elementos de la interfaz.

5. Poco contraste

Éste es un tema delicado, aunque tú no sufras miopía, ni daltonismo, ni astigmatismo… hay muchas otras personas que sí y recuerda, trabajo no es de uso exclusivo para ti, es para tus usuarios. Hay que intentar que la aplicación pueda ser utilizada por cuantas más personas mejor, eso incluye a aquellas que sufren problemas de visión.

La W3C tiene publicada una guía con información y consejos al respecto, de los cuales me parece importante resaltar el que se refiere al contraste.

Básicamente establece un ratio entre el color de fondo y el color del texto que asegura una legibilidad óptima y que te ayudarán a cumplir normas de accesibilidad AA o AAA. Existen herramientas que te pueden ayudar al respecto (https://contrast-ratio.com/ por poner un ejemplo)

6. Iconos de mala calidad

Internet está llena de iconos, tanto de buena calidad como de mala calidad, el problema es: ¿cómo los diferencio?

Fundamentalmente un icono de buena calidad ha de transmitir correctamente aquello que sea necesario (por continuar con un ejemplo anterior: la papelera indica al usuario la acción de eliminar).

Pero no sólo eso, un icono ha de estar bien hecho ténicamente hablando y esto quiere decir que es pixel perfect. Un icono con estas características es aquel que está diseñado para ajustarse perfectamente a la “parrilla” de píxeles que configuran las pantallas y, por lo tanto, consigue bordes bien definidos y nítidos. Por el contrario, un icono que no es píxel perfect generará ruido e imperfecciones a su alrededor, provocando que se vea borroso en algunas pantallas.

Recuerda que, a partir de la versión 27 de Velneo,  tienes una extensión con la que puedes añadir fácilmente iconos de la librería de Google Material a tu aplicación. De este modo siempre estarás seguro de que usas un icono de buena calidad.

7. Programar solo para una resolución de pantalla

Llegas a tu oficina y te sientas en tu silla, enciendes el ordenador, conectado a tu estupenda pantalla de 27” y te pones a programar esa fantástica aplicación en resolución 4K. Todo se ve maravilloso, ¿verdad?

Estoy seguro de que, si no has tenido en cuenta al resto de usuarios, es más que probable que no se vea tan bien en un portátil de 13” conectado a un monitor externo de 21” con resolución Full HD.

Piensa que no diseñas para ti, si no para tus usuarios. Te aconsejo que, con una herramienta tipo Kissmetrics, obtengas datos que te permitan tomar decisiones objetivas respecto al tamaño de pantalla y resolución que vayas a usar de referencia. Si la mayoría de tus usuarios utilizan una resolución de 1280×800 te centres en ella, intentando dejar fuera a la menor parte de personas posibles.

Sin datos no te será posible diseñar la mejor experiencia de usuario para tu aplicación de gestión empresarial. La iteración y la mejora constantes son básicos y para eso es fundamental recopilar información de uso.

8. No dejar márgenes ni espacios en blanco

Probablemente este es uno de los errores más habituales entre los diseñadores primerizos y es de los más fáciles de solucionar. Es muy habitual que, al empezar a diseñar, no se dejen márgenes ni espacios por lo que los elementos llegan al borde del espacio de trabajo y prácticamente se rocen entre ellos o incluso que lleguen a solaparse.

Psicológicamente los márgenes marcan el respeto que se tiene con el lector/usuario. Si bien el espacio en pantalla es limitado y tampoco hay que lanzarse a dejar 200px en los márgenes laterales, hay que intentar dejar algo de espacio para que la interfaz respire y sea más agradable.

9. Formularios demasiado complejos

Partamos de una premisa básica: a las personas no les gusta cubrir formularios. Cuando tengas que preparar los de tu aplicación reduce al mínimo los campos a cubrir por el usuario, sólo lo indispensable. Si aún así el formulario es muy extenso intenta dividirlo en partes o que se le solicite al usuario en diferentes momentos, eso sí, intentando no romper nunca el flow de trabajo que tengan.

Otra buena práctica es que, siempre que se posible, si el usuario ha introducido algún dato previamente, aparezcan pre-cubiertos los los campos de los formularios cuyo dato ya tengamos. De este modo agilizamos procesos tediosos.

Velneo tiene una fabulosa herramienta de creación de formularios, úsala sabiamente.

10. Mensajes de error frustrantes

“Error 29USJS91238-UX”

Intrigante, ¿verdad? A todos nos gusta saber qué está pasando y que nos hablen en un idioma que conocemos. Te animo a redactar los errores producidos por la aplicación de una manera descriptiva y tranquilizadora.

“La aplicación ha dejado de funcionar por un consumo excesivo de RAM. Por favor, reiníciala.”

Es posible que quieras incluir un número que identifique el error cuando el usuario se ponga en contacto contigo para que le des soporte. Puedes probar algo como:

“Se ha producido el error 29USJS91238-UX provocado por un consumo excesivo de RAM. Por favor, reinicia la aplicación.”

Conclusión

Espero que estos consejos te ayuden a mejorar el diseño de tus aplicaciones de gestión empresarial. Aunque son muy básicos estoy seguro de que son muy fáciles de implementar y se notará una gran diferencia de resultados.

Te animo a que leas el post 10 consejos para mejorar el diseño de tu aplicación de gestión empresarial (o que le pegues una relectura, el tiempo y la experiencia nos hacen ver las cosas con nuevas perspectivas).

Como todo en esta vida el diseño requiere práctica, así que no te frustres y sigue mejorando un poco cada día. Estoy seguro de que, con algo de esfuerzo, conseguirás crear la experiencia de usuario que buscas para tu aplicación.

 

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

DESCARGAR VELNEO

2 Responses to "Los 10 errores más comunes a la hora de diseñar una interfaz de usuario"
  1. [N3] carlosan dice:

    Gracias. Es una buena guía básica.

  2. [N4] azgonzalez dice:

    Muchas gracias a ti por confiar en Velneo. Espero que te sea de ayuda a la hora de diseñar la interfaz de tu software de gestión 🙂

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