Wireframes y prototipos interactivos para sitios y aplicaciones

Un wireframe es un boceto esquemático de una pantalla, generalmente en escala de grises, que muestra qué elementos contiene y en qué orden, sin colores, tipografías ni imágenes finales. Un prototipo es una simulación navegable del producto: se puede hacer clic y pasar de una pantalla a otra como si fuera el sitio real.

Ambos forman parte de nuestro servicio de diseño UX/UI, y se trabajan con distintos niveles de detalle según el momento del proyecto:

• Vas a construir una aplicación o un panel con procesos de varios pasos, como un registro, una carga de datos o un checkout.
• Hay muchas personas involucradas en la decisión y cuesta ponerse de acuerdo con descripciones escritas.
• Necesitás presupuestos de desarrollo comparables entre proveedores.
• Vas a reorganizar la navegación de un sitio grande.
• Querés presentar el proyecto a socios o inversores antes de construirlo.

Una prueba de usabilidad consiste en pedirle a una persona que resuelva tareas concretas con el prototipo mientras la observamos. No se le pregunta qué opina del diseño: se mira qué hace.

1. Definimos tareas realistas, por ejemplo: "Encontrá el precio de este servicio y pedí un presupuesto".
2. Convocamos participantes con un perfil parecido al de tus clientes. Con pocas sesiones ya aparecen los problemas más importantes.
3. Observamos sin ayudar y registramos dónde dudan, qué no encuentran y qué interpretan distinto de lo previsto.
4. Ajustamos el prototipo y, si el cambio es grande, volvemos a probar.

Para organizar menús y secciones también usamos la clasificación de tarjetas, un ejercicio en el que las personas agrupan los contenidos como les resulta natural. Revela cómo piensan tus usuarios, que no siempre coincide con cómo está organizada tu empresa.

Una vez validada la estructura, el siguiente paso es el diseño de sitios web con la identidad de tu marca, o directamente el diseño visual de la aplicación. Cuando se trata de un sistema con muchas pantallas, el prototipo se convierte en la guía para desarrollar las interfaces para web apps, con cada flujo ya probado.

• Los wireframes de todas las pantallas acordadas, en Figma.
• Un prototipo navegable con los recorridos principales.
• Un informe de las pruebas con usuarios: qué se probó, qué problemas aparecieron y cómo se resolvieron.
• El mapa del sitio o de la aplicación con su navegación definitiva.