Errores Comunes en Diseño Web que Pierden Clientes

Es el error más caro y el más frecuente. El visitante llega, ve un titular ingenioso sobre transformar realidades y una foto de un equipo sonriendo, y a los cinco segundos sigue sin saber si vendes software, formación o consultoría. Se va, y en la analítica eso aparece como una visita rebotada más.

La solución es poco glamurosa: decir en la primera pantalla qué haces, para quién y qué problema resuelves, con las palabras que usa tu cliente y no las de tu sector. Un titular literal convierte mejor que uno creativo casi siempre, y se puede comprobar en dos semanas.

• Qué haces, para quién y qué resuelves, en la primera pantalla
• Las palabras del cliente, no la jerga del sector
• Un titular literal antes que uno ingenioso
• Prueba: enseña la portada a alguien de fuera cinco segundos
• Si no sabe decir a qué te dedicas, el titular está mal

La mayoría del tráfico de una web local llega desde el móvil, pero casi todos los diseños se aprueban mirando una pantalla grande. El resultado son menús que tapan el contenido, botones demasiado juntos para un dedo, tablas que obligan a desplazarse en horizontal y formularios donde el teclado esconde el campo que estás rellenando.

Diseñar primero para móvil no es una moda: obliga a decidir qué es imprescindible, porque no cabe todo. Lo que sobrevive a esa criba suele ser también lo que funciona en escritorio, y no al revés.

• Prueba en un móvil real, no solo redimensionando el navegador
• Zonas pulsables amplias y separadas entre sí
• Nada de tablas que obliguen a desplazamiento horizontal
• Formularios con el tipo de teclado correcto por campo
• Comprueba con una mano y con la pantalla al sol

Un carrusel de imágenes a tamaño original, tres tipografías cargadas desde fuera, un vídeo de fondo y cuatro scripts de terceros hacen que la portada pese varios megas. En una conexión de escritorio no se nota; en 4G en movimiento, el visitante se va antes de ver el diseño por el que se pagó.

Lo que más peso quita casi siempre son las imágenes: servirlas en formatos modernos, al tamaño real en que se muestran y con carga diferida por debajo del pliegue. Es un trabajo aburrido y suele valer más que cualquier optimización sofisticada.

• Imágenes en formato moderno y al tamaño real de uso
• Carga diferida de todo lo que está bajo el pliegue
• Una o dos tipografías como máximo, con alternativa del sistema
• Revisa cada script de terceros: cada uno cuesta velocidad
• Mide en móvil y en red lenta, que es donde duele

Un teléfono que no se puede pulsar, una dirección en una imagen, un formulario de doce campos obligatorios y ninguna indicación de cuándo van a responder. Cada uno de esos detalles cuesta contactos, y juntos convierten una web que atrae visitas en una web que no genera negocio.

La versión corta: pide lo mínimo para poder responder, ofrece más de un canal y di cuándo contestarás. Un formulario de tres campos con una frase que promete respuesta en 24 horas convierte mucho más que uno completo sin ninguna promesa.

• Teléfono pulsable y correo en texto, no en una imagen
• El mínimo de campos obligatorios para poder responder
• Di explícitamente en cuánto tiempo vas a contestar
• Más de un canal: formulario, teléfono y correo
• Confirmación visible al enviar, no una página en blanco

El gris claro sobre blanco queda elegante en la presentación del diseño y resulta ilegible en un móvil al sol o para alguien de más de cincuenta años. Lo mismo pasa con los textos de doce píxeles, los campos de formulario sin etiqueta visible y los enlaces que solo se distinguen por el color.

La accesibilidad no es solo una cuestión legal, aunque en España también lo sea para determinados sitios: es que arreglarla mejora la experiencia de todo el mundo. Contraste suficiente, texto legible, foco visible al navegar con teclado y descripciones en las imágenes cubren la mayor parte del problema.

• Contraste suficiente entre texto y fondo, comprobado
• Cuerpo de texto legible sin tener que acercar el móvil
• Etiquetas visibles en los campos, no solo texto de ejemplo
• Foco visible al navegar con el teclado
• Texto alternativo en imágenes que aportan información

El error que engloba a todos los anteriores es rediseñar por gusto. Se cambia la web entera porque la anterior "estaba anticuada", sin saber qué páginas traían tráfico, cuáles convertían ni qué buscaba la gente que llegaba. A veces el rediseño mejora la estética y empeora los números.

Antes de tocar nada hay que anotar de dónde viene el tráfico, qué páginas generan contactos y cuáles son los diez términos de búsqueda que traen visitas. Y al migrar, redirigir las URLs antiguas: cambiar la estructura sin redirecciones tira el posicionamiento acumulado durante años.

• Anota tráfico y conversiones antes de empezar el rediseño
• Identifica las páginas que ya funcionan y no las toques a ciegas
• Redirige con 301 todas las URLs que cambien de dirección
• Compara los números a los dos meses, no a la semana
• Cambia una cosa cada vez si quieres saber qué la mejoró