Made on
Tilda
Prototype · Categoría: Diseño web y UX
Un prototipo es una versión interactiva de una web o aplicación que se puede pulsar y recorrer antes de programarla, para comprobar si funciona con usuarios reales. Jakob Nielsen mostró en 2000 que probar con unos cinco usuarios basta para descubrir la mayoría de los problemas de usabilidad de un diseño.
Un prototipo no es la web terminada: simula la interacción para probarla, pero no tiene el contenido definitivo, la programación ni los datos reales.
¿Qué prototipo necesitas?
Un prototipo sirve para descubrir problemas cuando todavía es barato corregirlos: si los usuarios no encuentran el botón de compra en el prototipo, se cambia en minutos; si se descubre con la web programada, cuesta días.
También sirve para alinear al equipo y al cliente: recorrer un prototipo deja claro cómo funcionará cada pantalla mucho mejor que una descripción o una imagen estática.
Un prototipo de baja fidelidad usa esquemas simples y enlaces entre pantallas para probar el flujo; uno de alta fidelidad parece la web final, con diseño, textos reales e interacciones detalladas.
La baja fidelidad se usa al principio, cuando lo que se decide es la estructura; la alta, al final, para probar detalles como el formulario, el proceso de compra o los textos de los botones.
Elegir mal la fidelidad tiene coste: un prototipo demasiado pulido al principio hace que todos discutan colores en lugar de estructura.
Un prototipo se prueba con una prueba de usabilidad: se pide a una persona que haga una tarea concreta —por ejemplo, pedir presupuesto— y se observa sin ayudarla dónde duda, se equivoca o se rinde.
Jakob Nielsen mostró en 2000 que con unos cinco usuarios se descubren la mayoría de los problemas, y que es mejor hacer varias rondas pequeñas que una grande. No hace falta un laboratorio: basta una videollamada y compartir el prototipo.
Las herramientas más usadas son Figma, que permite enlazar pantallas y simular interacciones, y, para prototipos de código, el propio navegador con HTML y CSS.
Para webs hechas con constructores como Tilda, a veces lo más rápido es montar una versión no publicada de la página con los bloques reales y probarla directamente: el prototipo y la web son casi lo mismo.
Cómo preparar y probar un prototipo:
En una web de servicios, el prototipo debería comprobar si el usuario entiende qué se ofrece, encuentra el precio, confía en la empresa y sabe cómo contactar.
Las preguntas típicas de la prueba son: «¿Qué ofrece esta empresa?», «¿Cuánto costaría?», «¿Cómo pedirías un presupuesto?». Si alguien tarda más de unos segundos en responder, la página necesita cambios.
Un prototipo de baja fidelidad para una web de servicios puede montarse en unas horas; uno de alta fidelidad con todas las pantallas e interacciones, en varios días.
La regla práctica es dedicar al prototipo el tiempo justo para responder la pregunta que preocupa: si la duda es el orden de las secciones, no hace falta animar cada botón. Prototipar de más es tan inútil como no prototipar.
En proyectos de tienda online, donde el proceso de compra decide gran parte de las ventas, merece la pena prototipar en alta fidelidad el carrito y el checkout aunque el resto de la web se pruebe con menos detalle.
El prototipo no influye directamente en el SEO, pero ayuda a detectar problemas de estructura y de navegación que después afectan al comportamiento de los usuarios y a la conversión.
Además, revisar el prototipo con criterios SEO —jerarquía de encabezados, texto real en lugar de imágenes, enlaces internos— evita tener que rediseñar la página después de publicarla.
El error más común es enseñar el prototipo solo al cliente o al equipo, que ya conocen el proyecto, en lugar de probarlo con usuarios reales.
| Tipo | Para qué | Cuándo |
|---|---|---|
| Baja fidelidad | Probar el flujo y la estructura | Al principio |
| Media fidelidad | Probar navegación y contenido | Tras el wireframe |
| Alta fidelidad | Probar detalles y textos | Antes de desarrollar |
Un prototipo reduce riesgos, pero no los elimina: los usuarios de una prueba no siempre se comportan como los clientes reales, y algunos problemas solo aparecen con tráfico, datos y velocidad reales.
Una versión interactiva de una web para probarla antes de programarla.
No: el mockup es estático; el prototipo, interactivo.
Unos cinco por ronda, según Jakob Nielsen.
Figma es la más habitual; también el propio código.
Baja para estructura; alta para detalles.
Mucho menos que rehacer una web programada.
No siempre; a veces basta una versión no publicada de la página.
Sí: basta una videollamada en la que la persona comparta pantalla mientras usa el prototipo.
Personas parecidas a tus clientes reales, no compañeros del proyecto que ya conocen la web.
¿Quieres aplicarlo a tu web? Estrategia 360 hace diseño web en Barcelona y en remoto.
Fuentes: Jakob Nielsen, «Why You Only Need to Test with 5 Users» (2000) · proceso de diseño de Estrategia 360
Escrito por Alena Shakina, CEO de Estrategia 360 · Conoce al equipo