← Volver al centro de investigaciones

Investigación de 4 agentes: la mejor forma de mostrar herramientas vivas en una presentación de ventas.

Recomendación: cómo mostrar las herramientas vivas en el partners-deck

Workflow 4 agentes (benchmarks + auditoría técnica + crítica de diseño + síntesis), 2026-07-23.

RECOMENDACIÓN EJECUTIVA — Cómo mostrar las 4 herramientas vivas en el deck de partners

1. LA RECOMENDACIÓN

Cambiamos los screenshots por videos cortos de las herramientas reales funcionando (grabados con robot del sitio en vivo, 4–8 segundos, silenciosos, en loop), presentados dentro de tarjetas con marco de navegador que dice "whatsincabo.com". Al tocar cualquier tarjeta se abre en grande (el visor que el deck ya tiene), y el botón "Pruébalo en vivo →" salta a la herramienta real ya abierta y animándose sola gracias a un "modo demo" de un solo clic. Esto gana porque cubre los dos usos a la vez: quien recibe el link ve el radar barriendo y la cámara volando el hoyo de golf sin hacer nada (cero fricción para dueños mayores), y en junta el video precargado funciona aunque el wifi falle — la herramienta viva queda como clímax opcional, no como apuesta. Los tres informes coinciden en este combo como #1 y #2; es lo que hacen hoy las mejores webs B2B (Linear, Stripe, Vercel): ya no muestran capturas, muestran el producto moviéndose.

2. OPCIONES EVALUADAS

Opción Veredicto
Video loops de la herramienta real (R2 + poster) GANADORA — único mecanismo que enseña el movimiento sin depender del wifi ni engordar el deck (~705 KB se mantiene; videos bajan solo al hacer clic).
Modo demo por link (la herramienta se abre sola) GANADORA (capa 2) — <1 hora de trabajo, convierte "saltar a la viva" de riesgo en un clic controlado.
Galería manual de capturas grandes en el visor SÍ, como complemento — 2–3 stills anotados por herramienta dentro del mismo visor; barata y ultra confiable.
Carrusel auto-rotativo de screenshots (idea original, parte 1) NO como automático — la evidencia es lapidaria (1% de clics, la gente lo ignora); solo sobrevive como galería manual bajo demanda.
Salto directo a la herramienta viva (idea original, parte 2) SÍ, pero mejorado — con el modo demo aterriza en la herramienta ya abierta, nunca en un home donde haya que buscar; y nunca como único camino (81% de vendedores ha perdido tratos por demos en vivo fallidas).
Iframes del sitio dentro del deck NO — multi-MB por herramienta, lámina en blanco con mal wifi, y el doble scroll rompe la navegación del deck.
Recrear las herramientas en miniatura dentro del deck NO — máximo esfuerzo, doble mantenimiento, y datos meteorológicos fabricados en un deck de ventas dañan credibilidad.
Plataformas de demo interactiva (Navattic/Arcade) NO — desde $500/mes por algo que replicamos gratis con visor + anotaciones.

Conflicto entre informes, resuelto: el informe de diseño propone dos conceptos de lámina; elijo el Concepto 1 (mismas 4 tarjetas, media arriba en grande) y descarto el carril horizontal del Concepto 2. Razón: el scroll horizontal anidado dentro del scroll vertical del deck es exactamente el tipo de riesgo en iPhone que la auditoría técnica señala en los iframes, y la audiencia mayor no descubre gestos de deslizar. El Concepto 1 da el 90% del impacto con el 30% del riesgo. La jerarquía sí se adopta: orden Weather → Golf 3D → Jellyfish → Eventos, con Weather como herramienta estrella.

3. STORYBOARD POR HERRAMIENTA

Regla transversal: ningún texto ilegible al tamaño final, ningún corte a mitad de palabra o componente (el defecto #1 de los shots actuales), y cada toma se aprueba viéndola en un teléfono antes de darla por buena.

1. Cabo Weather Planner — "el radar que barre" (5–6 s) Se graba el panel abierto con el radar de huracanes centrado: línea de barrido girando y espiral animada, cortando el loop en el mismo ángulo de la aguja para que se repita sin salto. Arriba asoma el borde de la escena de cielo. Nunca el formulario de dropdowns (la vista más aburrida de la herramienta más espectacular — eso es lo que muestra el shot actual). En el visor: still extra del sismógrafo EKG y del gauge UV.

2. Golf 3D — "el vuelo del hoyo" (6–8 s) Vista "Fly" del Hoyo 1 de Cabo Real: la cámara volando de tee a green completo. Es el asset más cinematográfico de todo el deck y hoy es un frame muerto. Se mantiene visible la botonera Aerial/Tee/Fairway/Green/Fly completa — demuestra que es producto, no un render.

3. Jellyfish Watch — "el estado, no el disclaimer" (4–5 s) Bloque de Médano Beach en marco de teléfono (su historia real: el turista lo consulta parado en la arena). Se graba el tap real en "View sightings" y la lista desplegándose. El encuadre incluye "Médano Beach" (lugar que el dueño conoce) y excluye la letra chica legal — el shot actual literalmente vende el descargo de responsabilidad.

4. What's on in Cabo — "la semana real" (estática o 6 s) Fila de 2–3 tarjetas de evento completas, con fechas cercanas a la fecha de envío (recapturar antes de cada ronda: eventos de julio en septiembre delatan deck viejo). Motion opcional suave; su argumento de venta es el contenido fresco, no la animación. Requiere añadirle un ancla al calendario del home (vía widget, respetando la regla del home).

4. PLAN DE IMPLEMENTACIÓN

Fase 1 — Modo demo + links buenos (medio día). Añadir ~10 líneas al script del clima para que #wic-demo=weather abra el panel solo (por hash: no toca el cache del sitio). Actualizar los 4 links "Pruébalo en vivo" del deck para aterrizar directo: clima abierto, golf en #course-explorer, jellyfish en su ancla de Médano, eventos en el ancla nueva del home. Esto solo ya mejora la junta, y hace deterministas las grabaciones de la Fase 2.

Fase 2 — Grabar y montar los videos (1–2 días). Playwright graba las 4 secuencias con interacciones reales (regla del proyecto: punteros reales); ffmpeg recorta, hace zoom donde importa y comprime a MP4 H.264 de 300–500 KB por clip + poster WebP del frame exacto. Subir a R2 en carpeta versionada (deck/tools/v1/), mismo patrón probado del video hero del home.

Fase 3 — Rediseñar la lámina (1 día). Tarjetas con media arriba a ancho completo (60/40 media/texto — hoy está invertido), marco de navegador CSS con "whatsincabo.com" en la barra (el dominio en el marco ES argumento de venta), Jellyfish en marco de teléfono, badge de Weather como estrella, CTA en botón grande de 48 px. Extender el visor existente para reproducir video y galería con flechas grandes. Arreglar de paso el encimado de "Ver los eventos →" en móvil (bug visible hoy).

Fase 4 — QA y mantenimiento (medio día + recurrente). Verificar en teléfono real y con el checklist del proyecto. Recapturar el clip/still de Eventos antes de cada ronda de envíos.

Riesgos a vigilar: - Peso: el deck se queda en ~705 KB + ~160 KB de posters; los ~1.8 MB de video viven en R2 y solo bajan al ver la lámina o abrir el visor. Tope: 500 KB por clip. - Scroll-snap: todo media declara su proporción en CSS antes de cargar; el visor es overlay fijo, así que no puede romper los puntos de snap. - Reduced-motion: con la preferencia activa no se carga video — queda el poster con botón de play manual. - Móvil: playsinline obligatorio (iOS), H.264 por compatibilidad universal (dispositivos desconocidos de audiencia mayor), y aprobación de cada toma en pantalla de teléfono.

5. QUÉ DESCARTAMOS Y POR QUÉ

← Volver al centro de investigaciones