Prueba Velneo Gratis

Te ofrecemos todo el poder de Velneo durante 1 mes para desarrollar la aplicación que tu empresa necesita.

Saber más
Thank you! Check your email for confirmation.

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

En el diseño de interfaces de usuario (UI), la experiencia del usuario juega un papel crucial en el éxito de cualquier producto digital. Sin embargo, incluso los diseñadores más experimentados pueden cometer errores que afectan la usabilidad y la satisfacción del usuario. En este artículo, exploraremos los 10 errores más comunes en el diseño de interfaces de usuario y ofreceremos consejos para evitarlos, garantizando así una experiencia óptima y atractiva para los usuarios de su aplicación o sitio web.

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 1280x800 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.”

El panorama del diseño de interfaces en 2023

En 2023, el panorama del diseño de interfaces de usuario sigue evolucionando, y es esencial tener en cuenta varios factores clave para garantizar la mejor experiencia de usuario posible. Aquí hay algunas consideraciones importantes:

  1. Diseño inclusivo y accesibilidad: Asegúrese de que su interfaz sea accesible para todos los usuarios, incluidas las personas con discapacidades visuales, auditivas o motoras, adaptando el diseño y las funcionalidades según las pautas de accesibilidad.
  2. Adaptabilidad a múltiples dispositivos: Las interfaces de usuario deben ser responsivas y adaptables a diferentes tamaños de pantalla, especialmente con la creciente variedad de dispositivos móviles y la popularidad de wearables y pantallas plegables.
  3. Integración de IA y asistentes virtuales: Los usuarios esperan cada vez más que las interfaces de usuario sean inteligentes y personalizadas. Considere la posibilidad de incorporar inteligencia artificial y asistentes virtuales para mejorar la experiencia del usuario.
  4. Diseño orientado a la privacidad: La privacidad y la protección de datos son preocupaciones cada vez mayores para los usuarios. Asegúrese de que su interfaz esté diseñada teniendo en cuenta la privacidad, con opciones claras para administrar y proteger la información personal.
  5. Estética y tendencias de diseño: Manténgase actualizado sobre las últimas tendencias de diseño, como el minimalismo, el neumorfismo y el diseño de materiales, y aplique estos estilos de manera efectiva y coherente en su interfaz de usuario.
  6. Interacción por voz y gestos: El uso de la interacción por voz y gestos está en aumento, por lo que es fundamental adaptar su interfaz a estas modalidades de interacción, ofreciendo una experiencia de usuario más fluida y natural.
  7. Integración de realidad aumentada y virtual: La realidad aumentada y virtual están ganando terreno en el diseño de interfaces de usuario, lo que permite experiencias inmersivas y contextuales. Considere cómo estas tecnologías podrían mejorar la experiencia del usuario en su aplicación o sitio web.
  8. Diseño sostenible y ecológico: El impacto ambiental de la tecnología digital es una preocupación creciente. Aborde este tema mediante el diseño de interfaces de usuario eficientes en términos de recursos y energía y promueva prácticas sostenibles.
  9. Microinteracciones y retroalimentación: Las microinteracciones y una retroalimentación clara y efectiva son fundamentales para mejorar la experiencia del usuario, al proporcionar información instantánea y mantener a los usuarios comprometidos.
  10. Diseño centrado en el usuario: Por último, pero no menos importante, siempre centre su diseño en las necesidades y preferencias de los usuarios, investigando y comprendiendo sus expectativas y comportamientos para crear interfaces de usuario que sean verdaderamente efectivas y agradables de usar.

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
17/3/2023
Regístrate ahora y nuestro equipo se pondrá en contacto muy pronto