Dar feedback de diseño web sin saber lo que haces puede ser una pesadilla para todos

Acertar con el diseño de tu sitio es clave para dar la mejor impresión Un buen diseño web transmite credibilidad y fomenta la confianza, mientras que un diseño pobre y una mala UX hacen que los usuarios abandonen antes de que se cargue el sitio (especialmente si tarda más de 2-3 segundos en cargar). Y hablando de confianza, ¿sabías que al juzgar la credibilidad de un sitio, el 46% de los consumidores presta más atención a los elementos visuales que al contenido? Si necesitas servicios de diseño de nivel experto, explora lo que ofrece la empresa de diseño web ARCC.

La triste verdad es que la gente sí juzga un libro — ejem, un sitio web — por su portada. Y lo hacen rápido. Estudios han concluido que solo se necesitan 50 milisegundos (o 0,05 segundos) para que los usuarios formen una opinión sobre tu sitio.

Si consideras cuántas plataformas nos animan a juzgar y decidir rápido basándose solo en la estética (te miro a ti, Tinder y TikTok), parece que el margen para causar esa primera impresión vital se reduce aún más.

¿Qué significa todo esto para ti?

En resumen, más vale que te asegures totalmente de que tu sitio web luzca genial y funcione bien.‍

Desde hojas de cálculo con códigos de color hasta comentarios extensos, correos infinitos y capturas de pantalla anotadas, nombres de contenido tipo Real_Final_FINAL_version o notificaciones de Slack a deshoras — debe haber una mejor manera.

La hay.

En esta guía aprenderás a dar feedback de diseño web eficaz, ya seas un novato total, un diseñador revisando a otro colega, o un líder de negocio.

Sigue leyendo para descubrir cómo lograr un producto final de calidad sin traumatizar a tu diseñador ni acabar en la lista negra de la agencia de diseño web.

Esto es lo que cubriremos:

• Dónde encaja el feedback en el proceso general de diseño web,
• Por qué es importante dar buen feedback de diseño web
• Buenas prácticas para ofrecer feedback de diseño web, y
• Cómo dar feedback de diseño web eficiente.

¡Vamos allá!

El proceso de diseño web

Antes de entrar en detalles, pongamos en perspectiva dónde encaja el feedback dentro del proceso de diseño web.

Como ves en la imagen, hay muchos pasos para construir un sitio, y algunos —como investigación de usuarios, feedback, creación de contenido y pruebas— pueden repetirse varias veces antes de finalizarlo.

Antes de dar tu feedback, conviene conocer las otras fases para dar indicaciones fundamentadas y evitar meter la pata.

A continuación, ofrecemos un breve resumen de cada paso en el proceso de diseño web.

1. Brief, investigación e ideación

Antes de diseñar un sitio (o app), se realiza la fase de investigación e ideación, en la que los involucrados establecen la ‘gran idea’ y definen el brief o el problema de diseño.

En esta fase, el equipo delimita las funciones previstas del sitio y su público objetivo. Luego, harán investigación de usuarios para entender cómo el diseño de la interfaz de usuario (UI) y la experiencia de usuario (UX) puede satisfacer mejor sus necesidades.

Para más información, consulta esta práctica guía de investigación UX de Think with Google.

2. Creación del sitemap y wireframes

El siguiente paso es crear un sitemap —el plano de las páginas principales, funcionalidades y navegación— y el wireframe.

El wireframe sirve de base para plasmar los elementos visuales del sitio, como la estructura de páginas, secciones y componentes como cabeceras y pies de página.

Como muestra la imagen, los wireframes pueden ser de baja o alta fidelidad, según su nivel de detalle o ‘acabado’.

3. Mockups de diseño y creación de contenido

Con los wireframes listos, los diseñadores pueden empezar a diseñar y los creadores de contenido a producir textos, imágenes, ilustraciones, animaciones y vídeos.

Tu diseñador usará su experiencia para aplicar tu branding y estilo al contenido, mediante logos, paleta de colores, tipografía (fuentes, tamaños, interlineado, espacios), espaciado, imágenes y otros elementos visuales.

Su primer objetivo es definir el aspecto y la sensación general del sitio. Una vez aprobado, afinan los detalles.

El diseñador suele usar marcadores de contenido, p. ej.: lorem ipsum donde el copywriter hará su magia y fotos genéricas donde irán las imágenes de la marca (una vez que ese maldito fotógrafo envíe las fotos editadas).

Al igual que los wireframes, los mockups pueden ser de baja o alta fidelidad, como se ve a continuación.

Si usas una plataforma CMS (p. ej., WordPress, Wix, Squarespace o Shopify), tu diseñador puede montar los mockups directamente en el CMS en lugar de usar herramientas como Sketch, Figma, Photoshop o InVision. Pero no te preocupes, nadie verá el sitio hasta que se publique.

4. Revisión y feedback de diseño y contenido

Esta es la etapa donde los stakeholders (¡incluyéndote a ti!) aportan feedback constructivo sobre el look & feel y ayudan a ajustar el contenido del sitio.

La mayoría de los diseños y contenidos pasan por varias rondas de feedback y revisiones, mejorando y acercándose a la aprobación final en cada iteración.

5. Prototipado, pruebas y rediseño

La etapa de prototipado consiste en convertir el mockup y el contenido en un modelo interactivo y de alta fidelidad del sitio.

Aunque no suele ser la versión final, el prototipo muestra el aspecto y comportamiento del sitio antes de la codificación definitiva.

El prototipo se usa para pruebas de usuario y recopilar datos y feedback sobre la usabilidad mediante herramientas como mapas de calor de atención y encuestas.

A veces, las pruebas de usabilidad conducen a rediseños parciales y ciclos adicionales de revisión y prueba para asegurar que la experiencia del usuario sea la mejor posible.

Existen excelentes herramientas para reclutar testers de usabilidad.

Una vez aprobado el prototipo, el diseño se entrega al equipo de desarrollo web para programar el sitio y dejarlo listo para el lanzamiento. Por supuesto, si usas un CMS con constructor visual de arrastrar y soltar, puede que no necesites casi nada (o nada) de código.

6. Lanzamiento del sitio

Si llegaste hasta aquí, ¡felicidades!

Tu sitio está listo para publicarse, lo que significa que ¡es hora de celebrar! O lanzar tu campaña de lanzamiento. ¿O ambos?

Sin duda ambos.

¿Qué puede salir mal? Por qué importa el buen feedback de diseño web

El feedback eficaz de diseño web marca la diferencia. ¿No me crees? Esto puede pasar si das mal feedback —o das buen feedback de forma pésima—:

• Tu feedback se pierde y nunca se atiende
• Tu feedback es confuso y el diseñador no te entiende, se desvía y lo hace totalmente mal
• Se genera mucho ida y vuelta
• Todos frustrados, quemándose las pestañas hasta la madrugada
• Alguien amenaza con renunciar
• La fecha de lanzamiento se pospone (costo de oportunidad incalculable)

Consejos y buenas prácticas para el feedback de diseño web

Sigue estos consejos para dar mejor feedback de diseño web.

1. Prepárate bien

Familiarízate con los conceptos básicos de diseño UI y UX. Leer este blog es un buen primer paso.

Obviamente no necesitas convertirte en experto en diseño web, pero entender lo básico y manejar el lenguaje del diseño web hará que dar feedback sea mucho más fácil.

Tener un conocimiento básico de los principios básicos del diseño te ayudará a distinguir qué hace un buen diseño web desde el inicio. Estos principios son pautas que los diseñadores modernos aplican para crear productos que combinan usabilidad y atractivo estético.

Las guías de Material Design de Google son un recurso excelente si quieres profundizar y conocer las mejores prácticas del sector.

2. Sé curioso y haz preguntas

Interésate por la perspectiva y las decisiones del diseñador para entender sus motivos. Probablemente hay buenas razones detrás de cada elección de diseño, aunque no sean evidentes al principio.

Pídele a tu diseñador que explique su razonamiento y comente las decisiones de diseño que no te encanten. Esto te ayudará a determinar si lo que no te gusta es una preferencia subjetiva o un problema real que debe corregirse.

3. Empieza observando el panorama general antes de entrar en detalles

Antes de dar feedback detallado sobre cada línea, color o sombra, aleja la vista y observa el panorama general. Me refiero a la estructura, el aspecto y la sensación general. No sirve arreglar detalles si el panorama general aún puede cambiar.

Los contenidos como texto e imágenes se pueden cambiar después (muchos son marcadores por ahora), así que empieza por fijarte en dónde van las palabras e imágenes y si funcionan en conjunto.

4. Explica el problema, pero no impongas la solución

Confía en la experiencia de tu diseñador. Señala el inconveniente, pero no digas cómo hacer su trabajo. A menos que seas diseñador web experimentado, lo más probable es que tu diseñador sepa mejor.

Si te cuesta identificar exactamente el problema, describe lo que sientes para que el diseñador sepa lo que debe cambiar. En última instancia, el diseño busca impactar las emociones del usuario, y si no evoca el ambiente adecuado, el diseñador puede ajustarlo modificando tipografías, colores, imágenes o aumentando espacios en blanco.

Si el diseño no cumple tus expectativas, es útil mostrar ejemplos visuales del estilo o efecto que deseas para dar feedback claro. Behance, Awwwards, Dribbble y Pinterest son buenos para inspirarte. No dejes de explorar otros sitios, dentro y fuera de tu sector, para descubrir qué te gusta y qué no.

5. Sé claro, conciso y específico

Cuanto más claro expreses tu feedback, mejor lo comprenderá tu diseñador y podrá hacer los cambios que imaginas.

Piensa qué quieres transmitir con tu feedback antes de empezar para mantenerlo breve y al grano. Evita comentarios extensos tipo ensayo.

Cuando sea posible, da feedback en contexto anotándolo directamente sobre el elemento de diseño al que te refieres. Así podrás ser claro, específico y lograr una alineación pixel-perfect.

Muchas organizaciones siguen usando Google Sheets para feedback, pero eso genera caos si cada miembro usa convenciones de nombres o versiones diferentes. Además, el feedback está lejos del contexto, dificultando la claridad y brevedad y provocando mucho ida y vuelta.

6. Registra tu feedback en el lugar adecuado

Usar las herramientas adecuadas hace que dar buen feedback de diseño web sea mucho más fácil.

Para un diseñador puede ser difícil saber qué feedback pertenece a qué aspecto de qué parte del diseño, especialmente cuando llega en un medio totalmente separado del diseño.

El feedback en reuniones se pierde fácilmente en la traducción. Recibir feedback por decenas (o cientos) de correos, llamadas y Slack exige mucho trabajo de detective para enlazar la información. Por no hablar de que ese cambio constante de tareas no es bueno para un trabajo creativo profundo y concentrado.

Para evitar estas frustraciones, anexa tu feedback al propio diseño para que inmediatamente quede claro a qué te refieres. Toma una captura de pantalla y anota tus comentarios allí.

Así, todo queda en un solo lugar y, si algo no está claro, tus colaboradores pueden agregar comentarios o preguntas en el mismo hilo. Ahora esto es feedback contextual.

Cómo dar feedback de diseño web eficiente: usa Bubbles

Con una herramienta como Bubbles, dar feedback puede ser una experiencia mucho más eficiente y agradable para todos.

La mayoría de las herramientas de revisión de diseño web actuales dependen de capturas de pantalla y anotaciones. Aunque supone una gran mejora sobre dar feedback en Google Sheets, aún deja mucho que desear, sobre todo para equipos remotos y asíncronos.

Cuando cada revisor toma sus propias capturas y da feedback de forma aislada, el diseñador suele recibir el mismo comentario varias veces —o peor, comentarios contradictorios sobre lo mismo— y tener que volver atrás una y otra vez para alinear a todos. No es un método eficiente y desperdicia gran parte del valioso tiempo del diseñador.

Incluso las herramientas especializadas para revisión de diseño web como InVision carecen seriamente de colaboración.

La mejor manera de dar feedback de diseño web es usar una herramienta que combine el potencial colaborativo de reunirse en persona con la comodidad de la comunicación asíncrona mientras agrupa el feedback de todos en un solo lugar. 

‍

A continuación describimos cómo usar Bubbles para optimizar tu flujo de feedback de diseño web en cuatro pasos sencillos.

Paso 1: Captura pantalla y anota tu feedback

Para ello, ve al sitio de Bubbles y haz clic en “Get bubbles” o instala la extensión de Chrome gratuita y pulsa el icono de la burbuja para crear una nueva. 

La interfaz simple de Bubbles facilita empezar de forma rápida y fácil.

A continuación, selecciona “Screenshot” y elige si quieres crear una nueva captura o usar un archivo para anotar con Bubbles. También puedes activar “scroll to select the full page” (esta función solo está disponible al usar la extensión).

Con Bubbles puedes capturar capturas estáticas o desplazarte para capturar páginas enteras y anotar el feedback sobre elementos de diseño específicos.

¡Listo! Captura realizada. Ahora puedes hacer clic en cualquier parte de la captura para crear un punto rojo (o burbuja) y dejar feedback contextualizado que muestre exactamente lo que quieres decir.

Puedes comentar con texto, vídeo o adjuntar una imagen. O, si quieres compartir una referencia de algo que viste en otra web, puedes dejar un comentario compartiendo tu pantalla.

Bubbles te permite dar feedback en contexto en cualquier formato que te ayude a expresar tu punto con claridad.

Paso 2: Comparte tu captura anotada

Para compartir tu captura con el diseñador (y/o el resto del equipo para centralizar el feedback), simplemente envía el enlace de la burbuja a los involucrados.

Con hilos de comentarios y @menciones, Bubbles convierte el feedback de diseño web pixel-perfect en un proceso colaborativo.

Paso 3: Otros revisores añaden su feedback

Cada revisor ve la burbuja al hacer clic en el enlace (¡ni siquiera necesita crear cuenta!) y aporta sus comentarios anotándolos en la captura.

Otros revisores pueden añadir feedback en la misma captura, interactuar con tus comentarios al hacer clic en los puntos o explorar y clicar tu marcación para ver a qué punto corresponde cada comentario.

Esto permite a los equipos mantener discusiones asíncronas y resolver problemas en contexto, sin importar dónde estén o la zona horaria.

Paso 4: El diseñador responde al feedback y resuelve las tareas

El diseñador puede revisar todo el feedback en un solo lugar y responder comentarios y dudas. Cuando se alcanza consenso en puntos conflictivos, puede aplicar los cambios al diseño.

También puede alternar entre comentarios “Active” y “Resolved”, marcarlos según avance o @mencionar colaboradores para pedir más información.

Con la herramienta gratuita de grabación de pantalla de Bubbles, el diseñador puede también facilitar una revisión de diseño del sitio. 

La única herramienta de feedback de diseño que necesitas

Bubbles es la herramienta imprescindible para un feedback colaborativo, contextualizado y bidireccional.

Ya trabajes en oficina o en un equipo remoto disperso, el trabajo asíncrono minimiza interrupciones y facilita el trabajo profundo — y Bubbles es la herramienta de colaboración asíncrona que ni sabías que necesitabas.

En este GIF puedes ver cómo se usa Bubbles para una revisión de diseño web. Fíjate en los pequeños iconos de burbuja en la barra de reproducción que muestran los comentarios anotados.

No más silos de información, feedback duplicado ni caos de control de versiones.

No más reuniones donde la mitad de los responsables de la decisión no pueden asistir.

No más preguntarte “¿De qué demonios están hablando?”

No más feedback improvisado y sin fundamento.

Solo colaboración real y creativa.

Regístrate en bubbles en segundos y empieza a proporcionar a tu equipo comentarios de diseño web más efectivos y significativos.

‍