Qué es el feedback visual y por qué agiliza tus proyectos web

El feedback visual es la forma de comentar una web o un diseño enseñando el problema, con una captura de pantalla marcada, un vídeo corto o una nota pegada a la página, en vez de describirlo solo con palabras. Para agencias, freelance y project managers es la diferencia entre «el botón de la página de servicios se ve raro» y una imagen de ese botón con un recuadro rojo, junto con la URL, el navegador y el tamaño de pantalla. Con la captura y los datos del navegador adjuntos, casi todos los comentarios se pueden resolver sin una sola pregunta de vuelta.

¿Qué es el feedback visual?

El feedback visual es cualquier comentario sobre una web, una aplicación o un diseño que incluye una referencia visual al problema: quien revisa lo señala en lugar de explicar dónde está. En proyectos web adopta una de estas tres formas, y las versiones más útiles llevan además el contexto técnico que necesita el desarrollador para reproducir lo que vio el cliente.

• Captura anotada: una imagen de la página con flechas, recuadros, subrayados o texto encima.
• Vídeo corto: una grabación de la pantalla, a menudo con el cliente explicando los pasos en voz alta.
• Nota pegada: un comentario fijado a un elemento concreto de la web publicada o de pruebas.

El contexto es lo que convierte una imagen en algo que un desarrollador puede resolver: la URL de la página, el navegador y su versión, el sistema operativo y el tamaño de pantalla. Sin eso, una captura sigue dejando al desarrollador adivinando cómo reproducir el fallo.

En diseño UX, «feedback visual» también es la respuesta de la interfaz a una acción, como un botón que cambia de color al pulsarlo. Aquí hablamos del otro: los comentarios que se hacen sobre un proyecto web.

¿Por qué el feedback visual funciona mejor que el texto?

El desarrollador ve exactamente lo que vio el cliente, así que desaparecen las preguntas de vuelta. Con solo texto, el cliente tiene que describir ubicaciones y problemas con palabras que muchas veces no conoce, y cada línea ambigua cuesta un correo. Una captura con el fallo marcado y los datos del navegador se puede corregir el mismo día.

Un mensaje típico de un cliente, solo con texto:

«¡Hola! Unas cosillas: la foto de la página de quiénes somos no es esa, el menú hace algo raro en el móvil, ¿podemos poner el azul un poco más oscuro? Ah, y a mi compañero no le funcionó el formulario.»

Cada línea necesita una pregunta de vuelta. ¿Qué foto? ¿Qué es «algo raro»? ¿Qué azul, el de los botones o el de la cabecera? ¿Qué formulario, y con qué navegador? Tres correos después ya sabes lo suficiente para empezar. El mismo feedback, en versión visual:

Las ventajas son muy concretas:

1. Menos rondas de aclaraciones: el desarrollador ve lo mismo que vio el cliente y se acaban los correos de «¿en qué página?».
2. Menos interpretación: «arriba a la derecha» o «el botón grande» significan cosas distintas para cada persona; una flecha, no.
3. Errores más fáciles de reproducir: con la URL, el navegador y la resolución, el desarrollador abre la misma página en las mismas condiciones.
4. Más fácil para clientes no técnicos: señalar algo es más sencillo que describirlo con un vocabulario que no conocen.
5. Un registro ordenado: cada incidencia es un elemento con su imagen y su estado, no un párrafo perdido en un hilo de correos.

¿Qué tipos de feedback visual hay?

Hay cinco: las capturas anotadas, las grabaciones de pantalla, las notas pegadas en la web, la grabación de sesión y los comentarios sobre el diseño. En la mayoría de proyectos web, las capturas anotadas con los datos técnicos automáticos cubren casi todo el feedback del cliente; el vídeo compensa en errores que dependen de una secuencia de clics.

Si prefieres hacer las capturas a mano, nuestra guía para anotar capturas de pantalla de una web repasa las opciones que traen Windows, Mac y el propio navegador.

¿Cómo ayuda el feedback visual al project manager?

El feedback visual cambia el trabajo del project manager: pasa de copiar a clasificar. Sin un sistema, el PM recoge comentarios del correo, de WhatsApp, de llamadas y de PDF, y luego los reescribe en la herramienta de tareas del equipo adjuntando capturas a mano. Con una herramienta de feedback visual, cada comentario llega como un elemento ordenado con su captura, tipo, página y datos del navegador, listo para asignar.

La diferencia crece cuando la herramienta se conecta con el gestor de proyectos que ya usa el equipo. Cada aviso se crea allí como tarea, con la captura adjunta, y con algunas herramientas el estado se sincroniza en los dos sentidos. En GiveFeedback.io eso significa una incidencia en Jira, una tarjeta en Trello, una tarea en Asana, ClickUp o Wrike, un elemento en monday.com, una página en Notion o un mensaje en Slack o Discord.

¿Qué pedirle a una herramienta de feedback visual?

Debería permitir que el cliente envíe avisos sin cuenta ni extensión, funcionar sobre la web real o de pruebas, ofrecer herramientas básicas de anotación, adjuntar la URL y los datos del navegador solos, llevar el estado de cada aviso, conectarse con lo que ya usa tu equipo y tener un precio que encaje con el número de proyectos de una agencia.

• Cero fricción para el cliente: ¿necesita cuenta, extensión del navegador o formación? Cada paso extra hace que algunos clientes vuelvan al correo.
• Que funcione sobre la web real: el feedback tiene que darse donde está el problema, no sobre una imagen subida a otro sitio.
• Herramientas de anotación: flechas, recuadros, texto y subrayador, como mínimo.
• Datos técnicos automáticos: URL, navegador y versión, sistema operativo y resolución.
• Estados y filtros: abierto, resuelto y archivado, para saber qué queda antes del lanzamiento.
• Integraciones que funcionen hoy: con lo que ya usa tu equipo. Comprueba cuáles funcionan ya y cuáles están «próximamente».
• Extras para desarrolladores: logs de consola y de red o grabación de sesión, si haces aplicaciones y no solo webs.
• Un precio que encaje con tu volumen: por usuario, por proyecto o por aviso cambia mucho la cuenta para una agencia.
• Idioma: si tus clientes no se manejan en inglés, mira en qué idioma está la interfaz que van a ver.

Si quieres convertir esta lista en una comparación con puntuaciones, lee cómo elegir una herramienta de feedback visual, que incluye una plantilla.

¿Cómo funciona el feedback visual en GiveFeedback.io?

GiveFeedback.io añade un botón «Give Feedback» a tu web con un script. El cliente lo pulsa, el navegador captura la parte visible de la página, el cliente la marca y añade un título, una descripción y un tipo, y el aviso llega a tu panel con la captura, la URL, el navegador, el sistema operativo, la resolución, el idioma y la zona horaria. El cliente no necesita cuenta.

1. Instalar: creas un proyecto y pegas un script en el <head> de la web; la ayuda tiene guías para WordPress, Shopify, Wix, Squarespace, PrestaShop y más.
2. Pulsar: aparece un botón «Give Feedback» en la web y el cliente lo pulsa, sin crearse cuenta.
3. Capturar: en un ordenador el navegador pide permiso para capturar la pestaña (en el móvil no hace falta) y la parte visible de la página se abre en un editor con flechas, rectángulos, elipses, marcadores numerados, dibujo libre, texto, subrayador y difuminado, en cinco colores.
4. Describir: el cliente añade un título, una descripción y un tipo (por defecto Propuesta, Error, Recomendación o Funcionalidad) y lo envía.
5. Actuar: el aviso aparece en tu panel y, si conectas una, en tu herramienta de tareas.

Cada aviso guarda la captura marcada junto a los datos que dio el navegador, así que el desarrollador sabe el tamaño de pantalla, el sistema y la versión del navegador sin preguntar.

El plan gratuito incluye 5 proyectos y 50 avisos; el plan Pro cuesta 19,95 € al mes, o 199,50 € al año, para hasta 100 proyectos. Mira los precios.

¿Cómo conseguir mejor feedback visual de tus clientes?

Explica al cliente cómo enviar avisos antes de empezar la revisión, pide una incidencia por aviso, pide el resultado esperado y no solo el problema, separa errores de peticiones nuevas con los tipos de feedback y marca lo resuelto para que vea el avance. La herramienta hace fácil señalar; estos hábitos hacen que lo que señala sea útil.

• Explícaselo antes: un correo corto con el enlace de pruebas, la fecha límite y «pulsa el botón de feedback, marca el problema y di qué esperabas». En nuestra guía sobre cómo pedir feedback a un cliente sobre su web tienes un correo para copiar.
• Una incidencia por aviso: es más fácil de asignar, corregir y cerrar.
• Pide el resultado esperado: «el logo debería llevar a la home» se puede resolver; «el logo está mal» necesita una llamada.
• Separa errores de peticiones nuevas: los tipos de feedback hacen visible el crecimiento del alcance antes de que se coma el presupuesto.
• Cierra el círculo: marca lo resuelto para que el cliente revise solo lo que ha cambiado.

Para la parte escrita de cada aviso, nuestra plantilla de informe de bugs recoge los campos que hacen que un aviso se pueda resolver. Señalar el problema es algo de siempre; lo que cambia es convertirlo en la forma normal en que tus clientes avisan. Pon un botón de feedback en la web de pruebas de tu próximo proyecto y cuenta cuántos correos de «¿en qué página?» te ahorras.