Prototipación de UX

¿Qué es la prototipación de UX?

La prototipación de UX consiste en construir una versión preliminar de la interfaz de un producto, desde bocetos en papel hasta pantallas clicables, para que las personas la prueben antes de que se desarrolle. El objetivo es aprender barato: si los usuarios entienden la estructura, encuentran lo que buscan y completan su tarea. Cambiar un prototipo lleva horas; cambiar código ya publicado lleva sprints.

Cómo funciona la fidelidad del prototipo

Nielsen Norman Group define la fidelidad como lo parecido que es un prototipo al aspecto y comportamiento del sistema final, y la divide en tres dimensiones que se pueden ajustar por separado:

• Interactividad: desde elementos que no funcionan, con una persona que hace de ordenador, hasta enlaces y menús clicables.
• Aspecto visual: desde bocetos en blanco y negro o wireframes hasta un diseño, espaciado y jerarquía realistas.
• Contenido: desde textos de relleno y resúmenes hasta textos e imágenes reales.

La baja fidelidad es rápida, fácil de modificar durante la sesión y invita a críticas sinceras, así que encaja en las primeras fases. La alta fidelidad sirve para probar un flujo, un componente concreto o la jerarquía visual, porque los usuarios reaccionan como ante un software real.

Un ejemplo sencillo

Un equipo que diseña un proceso de pago dibuja cinco pantallas en papel y pide a cuatro personas que compren algo. Dos dudan en el paso de envío porque el coste solo aparece al final. El equipo adelanta el coste, redibuja una hoja y vuelve a probar esa misma tarde. Más tarde crean una versión clicable en una herramienta de diseño para revisar los estados de los botones y los mensajes de error.

Cómo prototipar bien

1. Elige primero la pregunta: navegación, textos, un formulario, un flujo de usuario completo.
2. Usa la fidelidad más baja que pueda responderla.
3. Prototipa solo el recorrido que necesita la prueba, no todo el producto.
4. Prueba con usuarios reales y itera en rondas pequeñas. Según el modelo de NN/g, un estudio con cinco usuarios detecta alrededor del 85 % de los problemas de usabilidad, pero recomiendan varias rondas pequeñas, porque cada rediseño puede introducir problemas nuevos.
5. Revisa el prototipo en una pantalla de móvil, en línea con el diseño mobile-first, e incluye desde el principio el orden de navegación con teclado y los formularios accesibles.

Errores comunes

• Pulir lo visual antes de validar la estructura.
• Probar con compañeros en lugar de con quienes usarán el producto.
• Tratar el prototipo como una especificación: muestra la intención, no los casos límite, los errores ni el rendimiento.
• Preguntar "¿te gusta?" en vez de dar una tarea y observar.

Del prototipo a producción

Un prototipo no dice cómo se comporta el producto real bajo carga o en un navegador que no probaste. Cuando el flujo está en producción, conviene comprobar que sigue funcionando. La monitorización de API y sintética de LoadFocus incluye en los planes de pago comprobaciones de navegador y de varios pasos, que repiten un inicio de sesión o un pago de forma programada. Consulta la guía sobre cómo mejorar la experiencia de usuario con monitorización sintética (en inglés). Para el contexto general, lee qué es la experiencia de usuario (UX).

Preguntas frecuentes

¿Cuál es la diferencia entre prototipos de baja y alta fidelidad?

La fidelidad indica cuánto se parece el prototipo al sistema final. Baja fidelidad son bocetos, wireframes y contenido de relleno con poca o ninguna interacción. Alta fidelidad son visuales realistas, contenido real y comportamiento clicable.

¿Cuándo uso un prototipo de baja fidelidad?

Al principio, cuando la estructura sigue abierta. Es rápido de hacer, fácil de cambiar durante la sesión y la gente lo critica con más libertad porque no parece terminado.

¿Cuántos usuarios necesito para probar un prototipo?

Según el modelo de Nielsen Norman Group, cinco usuarios en un estudio detectan alrededor del 85 % de los problemas de usabilidad. Aconsejan varias rondas pequeñas y de 3 a 4 usuarios por grupo si tu público tiene grupos claramente distintos.

¿Un prototipo es lo mismo que un wireframe?

No. Un wireframe es un esquema de la estructura y es un tipo de material de baja fidelidad. Un prototipo añade interacción, de modo que se puede navegar por las pantallas e intentar una tarea.

¿La prototipación sustituye las pruebas del producto terminado?

No. Reduce el riesgo de diseño desde el principio. Siguen haciendo falta pruebas funcionales, de accesibilidad y de rendimiento sobre la versión real.