Errores de diseño web: Los 10 que restan conversión y cómo corregirlos

Una web con errores de diseño pierde contactos sin que te des cuenta. Este artículo recoge diez errores habituales en webs de pymes y autónomos, cómo comprobar si los tienes y qué corregir primero. Si buscas el panorama completo, el diseño es uno de los siete elementos esenciales de una web profesional.

Última actualización: 21 de octubre de 2026.

Por qué un error de diseño te cuesta clientes

Un error de diseño no avisa: Se nota en que el visitante llega, no encuentra lo que busca y se marcha sin escribirte. El coste real de un error de diseño es el cliente que no te contactó y del que nunca te enteras. Si pagas por atraer visitas, el efecto se nota más, porque el coste por contacto es la inversión dividida entre los contactos que llegan: Si con las mismas visitas tu web consigue la mitad de contactos, cada contacto te cuesta el doble. La publicidad no ha cambiado, pero la web convierte peor. Por eso conviene revisar el diseño antes de gastar más en traer tráfico. En este artículo verás pocas cifras, porque muchos porcentajes que circulan por internet no remiten a un estudio que se pueda comprobar. Solo uso datos con fuente y te indico dónde está cada una.

Los diez errores que siguen son patrones frecuentes de diseño, no el resultado de una medición propia. No puedo decirte cuántas webs los tienen ni cuánto sube la conversión al corregirlos, porque eso depende de cada web. Sí puedo explicarte cómo detectarlos y en qué orden conviene corregirlos.

Los diez errores de diseño que más restan conversión

Cada uno de los diez errores se explica igual: Qué ocurre, por qué perjudica y qué cambiar. Los más caros son los que impiden dar el siguiente paso: Un botón que no se ve, un formulario demasiado largo o una web que se rompe en el móvil. Otros, como la jerarquía visual o el contraste, no bloquean el contacto por sí solos, pero cansan al visitante y restan credibilidad. En la mayoría de los casos ninguno exige un rediseño completo, porque casi todos se corrigen con ajustes de texto, tamaño, color o estructura. Léelos con tu web abierta en otra pestaña y, mejor aún, en el móvil. Si reconoces tu página en alguno, apúntalo y sigue leyendo: Más abajo tienes una tabla para comprobarlos y una propuesta de orden para corregirlos sin abarcar demasiado a la vez.

Error 1: Carrusel de imágenes en la cabecera

El problema: Varias imágenes rotando en lo primero que se ve, cada una con un mensaje distinto. Nielsen Norman Group advierte en su análisis de carruseles (publicado en 2013) de que mucha gente pasa de largo estas imágenes y de que algunos visitantes solo ven el primer fotograma, así que el mensaje de los demás puede no llegar. También reconoce que algunos carruseles sí reciben clics, de modo que no es una prohibición: Es una razón para no poner en él lo único importante.

Cómo corregirlo: Usa una imagen principal con un mensaje de una frase y un botón visible sin desplazarte. Si necesitas mostrar varios servicios, dedica a cada uno su propia sección más abajo. Si mantienes el carrusel, limítalo a cinco fotogramas como máximo, con controles grandes y sin avance automático demasiado rápido, como recomienda la misma fuente.

Error 2: Exceso de pop-ups y elementos flotantes

El problema: Un descuento emergente, el aviso de cookies, un chat abierto y una barra superior a la vez. El visitante tiene que cerrar varias cosas antes de leer nada. La documentación de Google sobre intersticiales y ventanas de diálogo explica que las ventanas que tapan el contenido pueden perjudicar el rendimiento en búsqueda y recomienda usar banners pequeños en su lugar.

Cómo corregirlo: Deja un único elemento prioritario cada vez. Si necesitas lanzar una oferta o una suscripción, usa un banner pequeño que deje ver el contenido, en lugar de una ventana que cubra la página. Reduce el chat a un icono pequeño en la esquina. El aviso de cookies suele ser obligatorio, pero puede ser discreto sin esconder las opciones del usuario.

Error 3: Formularios demasiado largos

El problema: Una lista larga de campos obligatorios, muchos innecesarios para un primer contacto. Cada campo es un esfuerzo para quien rellena. Baymard Institute midió en 2024 que el proceso de pago medio de las tiendas online tiene 11,3 campos de formulario, cuando según su investigación la mayoría de las webs necesitaría unos 8. Son datos de pago en tiendas, no de formularios de contacto, pero la idea sirve igual: Pide solo lo que necesitas para dar el siguiente paso.

11,3 campos de formulario de media en el pago de una tienda online, y unos 8 bastarían para la mayoría de las webs.

Baymard Institute, 2024. Ver la fuente.

Cómo corregirlo: En un formulario de contacto, nombre, email y mensaje suelen bastar. Deja el teléfono y la empresa como opcionales, y pide el resto cuando ya haya conversación. No tengo un estudio que diga cuánto sube la conversión por cada campo que quites, así que prueba el cambio en tu web y compara.

Error 4: Textos genéricos sin personalidad

El problema: Frases como «Somos líderes en soluciones innovadoras» valdrían para cualquier negocio. No dicen qué haces, para quién ni en qué te diferencias. Un ejemplo ilustrativo: Antes, «Comprometidos con la excelencia»; después, «Diseño webs para pymes y autónomos que quieren vender online».

Cómo corregirlo: La primera frase debe decir qué haces y para quién. La segunda, qué gana el cliente. Escribe como hablarías con un cliente, no como un comunicado. Tienes más técnicas en el artículo sobre copywriting web.

Error 5: Ninguna prueba social visible

El problema: Pides que confíen en ti sin enseñar nada que lo respalde, ni reseñas, ni testimonios, ni trabajos anteriores. La persona que no te conoce necesita alguna señal de que otros han trabajado contigo y han quedado satisfechos.

Cómo corregirlo: Muestra reseñas reales de tu Perfil de empresa de Google, testimonios con nombre y con permiso de quien los da, y trabajos que puedas enseñar. Añade logos de clientes solo si tienes su autorización. Si no tienes un dato que puedas demostrar, no lo inventes: Una reseña real pesa más que una cifra redonda que nadie puede comprobar.

Error 6: Botones de acción invisibles o genéricos

El problema: Un «Contacto» en gris claro que se confunde con el fondo, o un botón que solo aparece tras mucho desplazamiento. Si el visitante no ve qué hacer a continuación, no lo hace. Una prueba informal: Enseña tu web a alguien unos segundos y pregúntale qué haría después.

Cómo corregirlo: Coloca el botón principal visible sin desplazarte y con un contraste alto. Cambia el texto genérico por uno específico, como «Pedir auditoría gratuita» en lugar de «Contacto». Repite el botón cada pocas pantallas. En móvil, las pautas WCAG 2.2 exigen objetivos táctiles de al menos 24 por 24 píxeles CSS en el nivel AA y, en el nivel AAA, de 44 por 44. Para los botones importantes, yo apuntaría a 44 o más.

Error 7: Velocidad de carga lenta

El problema: Una web que tarda en mostrar su contenido principal hace esperar a quien tiene prisa. Google considera bueno un LCP, el tiempo que tarda en aparecer el elemento principal, de 2,5 segundos o menos, según su documentación sobre Core Web Vitals.

Cómo corregirlo: Mide tu web en PageSpeed Insights, comprime las imágenes, activa una caché y revisa los plugins que no uses. Los datos con fuente sobre velocidad y ventas, y el detalle paso a paso, están en el artículo sobre velocidad web y conversión.

Error 8: Diseño roto o incómodo en el móvil

El problema: Textos diminutos, botones difíciles de tocar, un menú que no abre o una página que se desplaza hacia los lados. Cuánta gente te visita desde el móvil depende de tu negocio, así que míralo en tu propio Google Analytics o en Search Console en lugar de fiarte de una media.

Cómo corregirlo: Usa un tamaño de texto cómodo, y 16 píxeles es un buen punto de partida, aunque es criterio mío y no una norma. Haz los botones fáciles de tocar y comprueba que el menú abre y cierra. Prueba la web en un móvil real, no solo en la vista previa del navegador, y diseña pensando primero en el móvil.

Error 9: Jerarquía visual confusa

El problema: Todo en negrita, todo en mayúsculas, todo del mismo tamaño. Cuando todo destaca, nada destaca, y el visitante no sabe por dónde empezar a leer.

Cómo corregirlo: Deja un único elemento principal por sección, con tamaños que bajen del título al subtítulo y al párrafo. Reserva la negrita para los conceptos clave y deja espacio en blanco alrededor de los bloques para que el contenido respire.

Error 10: Poco contraste y mala legibilidad

El problema: Texto gris claro sobre fondo blanco, o letras blancas sobre un amarillo. Las pautas WCAG 2.2 piden un contraste de al menos 4,5 a 1 para el texto normal y de 3 a 1 para el texto grande, es decir, de 18 puntos o más, o de 14 puntos en negrita. A modo de referencia, un gris #cccccc sobre blanco da un contraste de aproximadamente 1,6 a 1, y un #333333 sobre blanco, de aproximadamente 12,6 a 1.

Cómo corregirlo: Comprueba cada combinación de texto y fondo con el WebAIM Contrast Checker. Usa texto oscuro sobre fondo claro o texto blanco sobre fondo oscuro, y evita los grises claros para texto. Si quieres saber más, lo trato en el artículo sobre accesibilidad web para pymes y en el de colores y formas en el diseño web.

Tabla de revisión: Cómo comprobar cada error

Saber que existen los diez errores no sirve de mucho si no los buscas en tu propia web, y la mayoría se detectan en pocos minutos y sin herramientas de pago. La tabla resume qué mirar y con qué ayuda para cada error, de modo que puedas repasarla con tu web abierta en el ordenador y en el móvil. Anota los que reconozcas, sin pretender resolver nada todavía: El objetivo de esta primera pasada es saber cuáles tienes. Algunas comprobaciones dependen de tu criterio, como la jerarquía o los textos genéricos, y conviene que las haga también alguien que no conozca tu negocio, porque tú ya sabes lo que quieres decir y no lees tu web como un cliente nuevo. Para las demás, como la velocidad o el contraste, hay herramientas gratuitas que dan un resultado objetivo y repetible, útil para comparar antes y después de cada cambio.

Por dónde empezar a corregir

No hace falta corregir los diez errores a la vez, y hacerlo así dificulta saber qué ha funcionado. Empieza por lo que impide que alguien te contacte y deja para después lo que solo mejora la comodidad. Un orden razonable, que es criterio mío y no una regla, sería este: Primero el botón principal, el formulario y el funcionamiento en el móvil, porque bloquean el contacto. Después los textos y la prueba social, que influyen en si el visitante se fía de ti. Al final la jerarquía, el contraste, los pop-ups y la velocidad, que pulen la experiencia. Cambia una cosa cada vez, apunta la fecha y compara lo que ocurre en Google Analytics en las semanas siguientes. Si tu web recibe pocas visitas, las diferencias serán pequeñas y costará ver causas claras, así que valora cada cambio también por criterio de usabilidad y no solo por números.

Un ejemplo ilustrativo, sin cifras: Una web de reformas con un carrusel en la cabecera, un formulario de once campos y un menú que no abre en el móvil. Yo corregiría primero el menú, porque impide navegar, después el formulario y, por último, el carrusel.

Preguntas frecuentes sobre errores de diseño web

¿Cuál es el error de diseño web más grave?

Depende de cada web, pero el más costoso suele ser que el visitante no sepa qué hacer a continuación: Un botón poco visible o un formulario largo. Empieza por comprobar que el botón principal se ve y que el formulario pide lo mínimo.

¿Cuántos campos debe tener un formulario de contacto?

Los imprescindibles: Nombre, email y mensaje. Baymard cifra en unos 8 los campos que bastarían en el pago de una tienda online, así que un formulario de contacto necesita bastantes menos. Pide el resto cuando ya haya conversación.

¿Los carruseles de imágenes funcionan?

A veces reciben clics, pero Nielsen Norman Group advierte de que mucha gente los pasa por alto y de que algunos solo ven el primer fotograma. No pongas ahí lo único importante: Repite el mensaje clave fuera del carrusel.

¿Cómo sé qué errores tiene mi web?

Repasa la tabla de este artículo con tu web abierta en el móvil y en el ordenador, y pide a alguien ajeno a tu sector que te diga qué ofreces y qué hacer a continuación. En Google Analytics, mira en qué páginas se marchan más visitas.