Qué es un prototipo navegable y por qué te ahorra plata

Imaginate construir una casa sin ver los planos: recién cuando están las paredes descubrís que la cocina quedó lejos del comedor. Con las webs y las aplicaciones pasa lo mismo. El prototipo navegable es el plano que podés recorrer antes de construir.

Qué es un prototipo navegable

Es una simulación de tu web o app en la que podés hacer clic, pasar de una pantalla a otra y recorrer el proceso como si fuera real. No tiene programación detrás: los botones llevan a la pantalla siguiente, pero no se guarda ni se procesa nada.

Sirve para que vos, tu equipo y tus usuarios prueben la experiencia antes de que se escriba una sola línea de código.

Wireframe, diseño y prototipo: las diferencias

Wireframe: un esquema en blanco y negro que muestra la estructura de cada pantalla: qué va arriba, dónde están los botones, cómo se ordena la información. Sin colores ni imágenes.

Diseño visual (UI): las pantallas con la identidad de tu marca: colores, tipografías, imágenes, íconos.

Prototipo navegable: cualquiera de los dos anteriores, conectado para que se pueda recorrer. Puede ser de baja fidelidad (con wireframes) o de alta fidelidad (con el diseño final).

Por qué te ahorra plata

La regla es simple: cuanto más tarde se detecta un problema, más cuesta corregirlo.

• Cambiar un botón de lugar en un wireframe lleva minutos.
• Cambiarlo en el diseño final, un rato.
• Cambiarlo cuando ya está programado y conectado con todo lo demás puede llevar días.

El prototipo hace que los cambios grandes pasen en la etapa barata.

Qué se descubre con un prototipo

• Pasos que sobran en una compra o una reserva.
• Información que falta donde el usuario la necesita.
• Botones que no se entienden o no se encuentran.
• Diferencias de criterio dentro de tu propio equipo, antes de que sean un problema.
• Funciones que nadie usa y que no vale la pena programar.

Cómo se prueba

1. Definí tareas concretas: «comprá este producto», «reservá una noche para dos personas».
2. Pedile a cinco personas de tu público que las hagan en el prototipo, sin ayuda.
3. Observá, no expliques: dónde dudan, dónde hacen clic, qué preguntan.
4. Anotá los problemas que se repiten y corregilos.

Con cinco personas ya aparecen la mayoría de los problemas importantes.

Cuándo conviene hacer un prototipo

• Sistemas y aplicaciones con procesos de varios pasos.
• Tiendas online con procesos de compra particulares.
• Rediseños de webs que ya tienen usuarios.
• Productos nuevos que necesitás validar o presentar a inversores.

Para una landing simple, a veces alcanza con el diseño visual. Para un sistema a medida, el prototipo es casi obligatorio. Te contamos más en sistema a medida o software enlatado.

Y si tu objetivo es vender más en una tienda que ya existe, estas 7 mejoras de UX son un buen punto de partida.

Qué necesitás preparar antes

Para que el prototipo refleje tu negocio, conviene tener a mano:

• Objetivos claros: qué tiene que lograr la web o la app.
• Quiénes la van a usar y qué necesita cada tipo de usuario.
• El contenido principal: textos, servicios, productos, aunque sean borradores.
• Referencias: sitios o apps que te gustan y por qué.
• Tu identidad visual: logo, colores y tipografías, si ya los tenés.

Un ejemplo de flujo

Para una tienda online, el prototipo suele cubrir este recorrido:

1. Inicio con categorías destacadas y ofertas.
2. Listado de una categoría, con filtros.
3. Ficha de producto, con fotos, precio, cuotas y envío.
4. Carrito, con el total y el costo de envío.
5. Checkout, con datos, envío y pago.
6. Confirmación del pedido.

Recorrerlo en un prototipo antes de programar permite detectar si sobra un paso, si falta un dato o si algo no se entiende, cuando corregirlo todavía es barato.

Herramientas

Los prototipos se hacen con herramientas de diseño de interfaces que permiten conectar pantallas y compartir un enlace. Vos no necesitás instalar nada: lo abrís desde el navegador o el celular y lo recorrés como si fuera real.

Preguntas frecuentes