Antes y después de una web: cómo evaluar qué mejoró

La nueva web ocupa la pantalla. Las fotografías ganaron espacio, cambió la tipografía y el movimiento llama la atención. La presentación termina con dos palabras conocidas: antes y después.

Queda una pregunta: ¿qué puede hacer la persona con más facilidad ahora? Un rediseño puede expresar mejor la marca y facilitar una decisión. Evaluarlo exige mirar el contenido y el uso. Proponemos tres criterios — entender, elegir y continuar — y una guía para pasar de la impresión visual a observaciones que se puedan comprobar.

Primero, identifica qué se está comparando

En el comparador de fieli studio mostramos una imagen ilustrativa de una plantilla junto a capturas de ENTREMA. La primera fue generada con IA; la segunda presenta nuestro hotel conceptual, también ficticio. Es una demostración de dirección creativa, no el historial de un cliente ni un experimento de conversión.¹

La comparación permite conversar sobre composición, presencia de marca y prioridades visuales. No permite medir el rendimiento técnico de dos implementaciones: el lado ilustrativo no es una web navegable. Tampoco revela la tecnología, la seguridad o los costos de una reserva detrás del diseño.

Una plantilla y un desarrollo a medida pueden estar bien o mal resueltos. Lo útil es preguntar qué decisiones responden al negocio, al público y a la tarea. Reemplazar un componente prediseñado por código propio no demuestra, por sí solo, una mejora.

Nielsen Norman Group relaciona la crítica de diseño con los objetivos del trabajo. Sin un problema y una necesidad claros, la evaluación depende del gusto de quien opina.² Esa distinción es la base de nuestra guía.

Entender: ¿el inicio ofrece contexto?

Quien todavía no conoce la empresa necesita reconocer dónde llegó y por qué puede interesarle. El nombre, las imágenes, el texto y la navegación deberían contribuir a esa lectura. En ENTREMA, la marca, el entorno costero y los capítulos del recorrido forman parte de la presentación.

Una pregunta práctica es cómo describiría la persona lo que encontró después de explorar el inicio. Pídele que lo explique con sus propias palabras, sin adelantar la respuesta. Observa si identifica el tipo de lugar, la propuesta y los caminos disponibles. Un elogio a la fotografía no responde todo eso.

En una empresa de servicios, la lectura puede centrarse en la oferta, el público y los ejemplos de trabajo. En un producto, puede centrarse en su finalidad, disponibilidad y qué parte es una demostración. El contenido cambia; la necesidad de contexto permanece.

Un recorte comentado puede hacer visible una decisión: ¿el título explica el tema? ¿El texto de la foto aclara una ambigüedad? ¿La navegación usa términos reconocibles? Registra la decisión por separado de lo que todavía necesita observarse con personas.

Elegir: ¿las diferencias aparecen cuando importan?

Después de entender la propuesta, alguien puede necesitar comparar opciones. La página de alojamiento de ENTREMA presenta una comparación entre Jardim, Horizonte y Encontro: huéspedes, camas, paisaje y privacidad.³ Es una decisión de contenido que organiza criterios equivalentes para preguntas diferentes.

Una tarea ilustrativa sería: “Viajas con otras tres personas. Encuentra una distribución que permita alojarse juntos y revisa cómo se distribuyen las camas”. Evita cambiarla por “haz clic en Encontro”: eso indica el camino que queremos evaluar.

Observa dónde busca la persona, qué compara y qué necesita deducir. Si encuentra la respuesta, registra qué información la sustentó. Si no la encuentra, anota el vacío. Una observación aislada no es una tasa de éxito de todo el público.

El criterio también sirve para planes, servicios y proyectos: las diferencias relevantes deben ayudar a elegir. En el artículo sobre web y WhatsApp profundizamos en las respuestas que pueden aparecer antes del contacto.

Continuar: ¿la llamada explica el siguiente paso?

Un botón visible necesita un destino coherente. “Conocer la casa”, “Planear la estancia” y “Conversar sobre un proyecto” crean expectativas distintas. Comprueba que el texto de la acción corresponda con lo que sucede después.

En el concepto ENTREMA, planear la estancia permite explorar preferencias. No confirma disponibilidad, tarifa ni reserva. Esa diferencia debe ser comprensible para quien usa la demostración. Lo mismo vale para un formulario real: ¿se envía una solicitud, se contrata algo o se inicia una conversación?

Revisa el recorrido completo sin realizar pagos o envíos innecesarios. Comprueba los mensajes de respuesta, las opciones para corregir información y qué sucede al volver atrás. Una captura del botón no demuestra que todo el recorrido funcione.

Lo que una imagen no puede demostrar

Una imagen estática no prueba el teclado, el tamaño de los controles, el texto ampliado, la respuesta al tacto ni el movimiento reducido. Eso requiere revisar la web en funcionamiento, en condiciones definidas.

El W3C explica que el foco visible permite a quienes usan teclado identificar el elemento seleccionado.⁴ Recorre los controles con Tab y observa el indicador. Es una comprobación útil, no una auditoría completa de accesibilidad.

El rendimiento también necesita medición. Core Web Vitals contempla carga, respuesta a la interacción y estabilidad visual.⁵ Una versión que parece más ligera no necesariamente carga más rápido. Registra la página, el dispositivo y las condiciones; distingue una prueba de laboratorio de los datos de uso real, cuando estén disponibles.

Preferir una versión y poder usarla son preguntas distintas

Nielsen Norman Group diferencia los métodos de percepción visual de los que observan el comportamiento.⁶ Preguntar qué versión gusta más puede orientar la expresión de marca. Para investigar el uso, hace falta observar una tarea.

Define el objetivo, utiliza versiones comparables y evita enseñar el camino durante la actividad. Si alguien ve dos versiones, la primera puede enseñarle a usar la segunda; el orden debe considerarse. La guía de pruebas de usabilidad de NN/g también aborda instrucciones que no conduzcan la respuesta.⁷

No necesitas un porcentaje llamativo para encontrar algo relevante. “La persona buscó la capacidad en la descripción y la encontró en la comparación” es una observación concreta. Puede generar una hipótesis para ajustar y comprobar. Afirmar una mejora de conversión requiere medición, contexto y una muestra adecuados.

Una guía para conversar sobre la próxima web

Descarga la guía de evaluación por tareas. Reúne entender, elegir y continuar, además de comprobaciones de interacción. Tiene campos para objetivo, evidencia observada, dudas y siguiente acción. No asigna una nota automática de bueno o malo.

Úsala con tu equipo, para preparar un brief o al evaluar una propuesta de rediseño. Separa lo que la comparación demuestra, lo que es una hipótesis y lo que todavía no se probó. Esa distinción ayuda a definir prioridades y conversar sobre inversión con claridad.

La apariencia merece cuidado. La pregunta que completa el antes y después es qué permite entender, elegir y hacer ese cuidado.