Cuando se comienza un proyecto técnico, se suele subestimar el impacto de un buen planteamiento de diseño de interfaz: por mi propia experiencia, se suele recurrir al diseño cuando toda la arquitectura está montada, cuando los flujos ya están creados o incluso cuando el proyecto ya está en marcha. En este artículo no quiero hablar sobre la importancia de los colores, las tipografías o incluso la armonía visual. Quiero compartir los principios más básicos del diseño para mejorar exponencialmente la usabilidad y accesibilidad de nuestro proyecto sin tener que ser diseñadores y, por supuesto, las ventajas y el retorno que tiene darle prioridad a este aspecto en cualquier desarrollo.
Estos principios son las 10 leyes heurísticas de Nielsen y Molich, que voy a explicar mientras las aplico a un flujo que he creado para tramitar un pedido online. No vamos a entrar en materia de diseño, solo vamos a darle mayor usabilidad a un proceso bastante común que cuenta con varios formularios para el envío y los pagos de los productos de la cesta.
1. Visibilidad del estado del sistema:
El sistema debe mantener al usuario al tanto de lo que está ocurriendo en todo momento. Es decir, el usuario debe poder ver de alguna manera que la acción que ha tomado ha tenido algún efecto en el estado de nuestro sistema. Para aplicar esta ley, sería tan sencillo como incorporar un spinner al pulsar “Continuar” para que el usuario sepa que se está aplicando el cambio.
2. Correspondencia entre el sistema y el mundo real:
Establece que el diseño debe hablar el lenguaje del usuario y ser coherente con sus expectativas y experiencias. Esto implica que la interfaz debe usar palabras, conceptos, y estructuras que le resulten familiares, haciendo que las interacciones sean naturales y entendibles sin un esfuerzo extra. En resumen, que el flujo se perciba intuitivo, como si no hubiera barreras entre el usuario y el sistema. Para aplicar esta ley, he incorporado el proceso de compra representado con iconos en la zona superior, que indicarán en qué punto del proceso se encuentra el usuario.
3. Control y libertad del usuario:
Como es natural, las personas cometen errores y en vez de negar esta realidad, lo que debemos hacer al servicio del usuario como creadores es facilitar sistemas que proporcionen “salidas de emergencia”. El sistema debe prever que el usuario necesite volver atrás, cambiar algún dato o deshacer la acción que acaba de realizar de manera sencilla y accesible. Lo aplico en nuestro flujo incorporando unos botones que te dejen volver al paso anterior, en este caso, “Volver a la cesta”.
4. Consistencia y estándares:
Solemos cometer el error de pensar que lo que estamos haciendo es comprensible para cualquiera, pero eso no es nada más que un sesgo procedente de conocer el sistema mejor que la palma de nuestra mano. Todo usuario nuevo, incluso el más experimentado, pasa por un proceso de aprendizaje, por eso no podemos obviar lo que conoce y lo que no, por mucho que pensemos que es el flujo más simple del mundo. Entonces, para aplicar esta norma, podemos ir mostrando errores en tiempo real conforme el usuario va completando el formulario, y deshabilitar el botón de “Continuar” hasta que haya introducido todos los campos obligatorios correctamente.
5. Prevención de errores:
Es mejor diseñar el sistema para prevenir errores antes de que ocurran, con avisos o alertas para notificar al usuario. Por ejemplo, en nuestro flujo, he incorporado un mensaje de alerta porque el usuario no ha introducido algunos datos en la dirección de envío. Puede ser que su casa no sea un portal de pisos, es decir que viva en una casa y solo necesite el número de la calle, o puede ser que sí, pero que se le haya olvidado introducirlo.
6. Reconocimiento en lugar de recuerdo:
Los elementos de la interfaz deben ser fáciles de reconocer y no exigir demasiada carga cognitiva y de memoria al usuario. Aquí entran en acción los campos que se autocompletan, el uso de palabras que el usuario reconozca, etc. Las instrucciones para el uso de la herramienta o sistema deben ser visibles o fácilmente recuperables cuando sean necesarias. Por ejemplo, en nuestro flujo podemos apoyar esto con información en los placeholders sobre qué formato requiere ese input (correo, número de teléfono, etc.) y que, al empezar a escribir, nunca desaparezca la información que te están pidiendo en ese campo. En definitiva que el label siempre sea visible. En el caso de la pantalla de información de envío o de información de pago, podemos mostrar cómo se vería introducido el email, número de tarjeta, la fecha de caducidad o el código de seguridad con la ayuda de los placeholders.
7. Flexibilidad y eficiencia de uso:
El diseño debe satisfacer tanto a usuarios principiantes como a usuarios con una mayor experiencia. En nuestro flujo es complicado porque no interviene una funcionalidad muy compleja, pero habrá usuarios que estén muy familiarizados con las compras online y usuarios recién llegados a esta práctica. Es quizá la ley más complicada de implementar. Pero, en este caso, aplicando el resto de las leyes, estamos haciendo que cualquier usuario se sienta guiado.
8. Estética y diseño minimalista:
Las interfaces no deben contener información irrelevante o que no sea absolutamente necesaria. Todo elemento extra compite por la atención del usuario y reduce la eficiencia de la interfaz. Esto es simple, todo lo que aporte información y usabilidad tiene que estar, todo lo demás va a hacer que se pierda todo el esfuerzo que hemos dedicado a simplificar el flujo. Esta ley la hemos aplicado desde el principio.
9. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores:
Los mensajes de error deben expresarse en lenguaje claro (sin códigos) e indicar con precisión el problema, proponiendo una solución constructiva. Es decir, debemos propiciar que nuestro usuario tenga independencia, darle las herramientas para solucionar lo que pueda solucionar y hacerle saber qué errores quedan fuera de su control. En este caso, incorporamos mensajes de error en los inputs y explicamos qué falla, en el campo de email aparece un error porque se ha introducido un formato incorrecto y se puede complementar con un ejemplo del formato que debe introducirse. En el código postal aparece un error porque la numeración no coincide con la ciudad introducida.
10. Ayuda y documentación:
Aunque el sistema debería ser usable sin ella, puede ser necesario proveer ayuda o documentación accesible, fácil de buscar y enfocada en las tareas del usuario. Como el flujo que estamos poniendo de ejemplo es bastante sencillo, bastaría con incorporar algún tooltip en opciones sensibles de generar confusión. Por ejemplo:
Estas prácticas no son detalles estéticos; son cimientos esenciales que permiten al usuario sentirse guiado y respaldado. Aplicando estas prácticas hemos mejorado mucho la usabilidad, está claro que hay que detenerse y dedicarle más tiempo para ver qué aspectos hay que mejorar para facilitar la navegación, resolver problemas y de qué manera podemos anticiparnos a las necesidades de un usuario, pero, sin lugar a dudas, todo el tiempo que inviertas antes es tiempo y deuda que te ahorras después. Para visualizar mejor los beneficios que aporta todo esto, voy a enumerar unos cuantos:
- Optimización del tiempo de desarrollo: Define requisitos claros que guían el desarrollo y reducen la necesidad de correcciones durante la implementación.
- Mejor conversión y retención: Un UX bien diseñado facilita los pasos hacia la conversión, ya sea una compra, registro, suscripción, etc., evitando frustraciones y abandonos. Los usuarios tienen más probabilidades de completar acciones cuando la experiencia es fluida y sin fricciones.
- Ahorro en costes de rediseño o ajustes futuros: Un proyecto con una base sólida en UX minimiza la necesidad de rediseños o ajustes importantes en el futuro, lo que ahorra tiempo y recursos a largo plazo.
- Reducción de costes en soporte y asistencia: Un diseño claro y bien pensado reduce la cantidad de errores y preguntas frecuentes, lo que a su vez disminuye la necesidad de un equipo de soporte o al menos reduce su carga de trabajo.
Y para cerrar, solo quería recordar que no hace falta ser diseñador para aplicar todas estas mejoras y que implementarlas va a reducir la posibilidad de tener que volver sobre lo que ya tenemos hecho para resolver errores que solo aparecen cuando se empieza a testear con usuarios. Es decir, vamos a poder adelantarnos a los acontecimientos y prevenir errores antes de que sucedan, mejorando la eficiencia operativa tanto de los usuarios como de las personas involucradas en el desarrollo del proyecto.
¿Te interesan más temas como este? Aquí te dejamos una lista de entradas que pueden interesarte:
