9 errores de usabilidad y diseño web que frenan las conversiones, y cómo corregirlos

Un error de usabilidad es cualquier decisión de diseño que obliga al visitante a esforzarse más de lo que esperaba para conseguir lo que buscaba. Los errores de usabilidad y de diseño web más comunes rara vez llaman la atención. La página carga, los botones responden y la analítica muestra un tráfico estable, pero los registros y las ventas no se mueven. La lista de errores de diseño web más persistentes de Nielsen Norman Group muestra cuántos de estos problemas llevan décadas sin resolverse.

Esta guía repasa nueve errores de UX que frenan las conversiones en webs de empresa. Cinco son clásicos: llamadas a la acción, jerarquía, navegación, muros de texto y móvil. Cuatro faltan en la mayoría de las listas antiguas: formularios largos, respuestas lentas a toques y clics (medidas con INP), chats y pop-ups que tapan la página, y fallos de accesibilidad, que en España ya tienen consecuencias legales por la Ley 11/2023.

Para cada error verá cómo se manifiesta, por qué cuesta conversiones y cómo corregirlo, con datos enlazados de Baymard Institute, WebAIM, Google y NN/g.

Los pequeños problemas de usabilidad cuestan dinero porque afectan al visitante justo en el momento de decidir, y nadie los denuncia. Quien no entiende qué hace un botón no abre una incidencia. Duda, abre la pestaña de la competencia y se olvida de usted. La analítica registra un rebote sin motivo, y la pérdida parece un problema de tráfico cuando es de diseño.

Los datos más claros vienen del checkout. La investigación de Baymard Institute sobre el abandono del carrito sitúa la tasa media documentada de abandono en el 70,22%, a partir de 50 estudios. Según Baymard, una tienda online grande media podría subir su conversión un 35,26% solo rediseñando el checkout. Es una mejora relativa: una tasa de conversión del 3% pasaría a rondar el 4%.

Por qué estos problemas pasan desapercibidos

• Nada se rompe, así que la monitorización de errores sigue en verde.
• Los visitantes se van sin quejarse.
• Cada problema, visto por separado, parece menor.

La confianza es lo primero que se resiente

Una interfaz confusa hace dudar de la empresa que hay detrás. En la encuesta de Baymard, el 19% de los compradores estadounidenses que abandonaron un pedido (sin contar a quienes solo miraban) no confiaba en el sitio para darle los datos de su tarjeta. Ese juicio se forma antes de que el visitante lea sus precios o los detalles del servicio. El efecto de la mala UX en el posicionamiento lo analizamos en el artículo sobre la auditoría UX.

Una llamada a la acción débil es uno de los errores de UX más comunes porque en una revisión de diseño parece correcta. El botón respeta la marca y se ve bien. El problema está en el texto: "Enviar", "Más información" o "Empezar" no dicen qué pasará después del clic. Cuando hay tres botones con el mismo peso uno al lado del otro, el visitante tiene que elegir, y algunos eligen irse.

Cómo reconocer un CTA débil

• El texto describe una acción en lugar de un resultado ("Enviar" en vez de "Quiero mi presupuesto").
• Varias acciones compiten con el mismo peso visual en una sola pantalla.
• El CTA aparece antes de que la página haya dado algún motivo para hacer clic.
• Nada cerca del botón responde a la duda evidente sobre precio, compromiso o datos.

Cómo corregirlo

Dé a cada página una acción principal y deje el resto de enlaces en segundo plano. Redacte el texto como el resultado que busca el visitante y añada una línea que tranquilice, como "Respuesta en un día laborable", si es verdad en su caso. En páginas largas, repita el CTA principal tras cada bloque importante para que nadie tenga que volver arriba.

Pruebe los cambios de texto de uno en uno, como explicamos en nuestra guía de landing pages.

La jerarquía falla cuando todos los elementos de una página compiten por la atención con el mismo volumen. Titulares, listas de características, sellos, banners y botones tienen tamaños y colores parecidos, y la vista no sabe por dónde empezar. Los visitantes gastan los primeros segundos en averiguar dónde mirar, y muchos se rinden antes de llegar a lo que los habría convencido.

Señales de que la jerarquía no funciona

• El mensaje principal no queda claro en los primeros segundos.
• Logotipos de clientes o premios llaman tanto la atención como el titular.
• Se usan varios colores para resaltar, así que ninguno destaca.

Cómo corregirlo

La definición de jerarquía visual de NN/g cita tres herramientas: color y contraste, escala y agrupación. Use la escala para el mensaje que más importa, el contraste para la acción principal y los espacios para agrupar lo que va junto. Después haga la prueba de NN/g de entrecerrar los ojos: desenfoque la captura y compruebe si el titular y el CTA siguen destacando.

Decida el orden de la información antes de abrir cualquier herramienta de diseño. Un breve esquema por página, ordenado según lo que el visitante necesita primero, evita la mayoría de los problemas de jerarquía desde el wireframe.

Una navegación confusa perjudica cada visita, porque la gente usa el menú para decidir si su web tiene lo que necesita. Etiquetas con jerga interna, megamenús con cuarenta enlaces y páginas de servicio a las que solo se llega desde la portada obligan a adivinar. Cada intento fallido cuesta un clic y algo de confianza, y dos o tres fallos suelen poner fin a la sesión.

Dónde suele fallar la navegación

• Etiquetas que siguen el organigrama y no las palabras que buscan los visitantes.
• Demasiadas opciones en el primer nivel sin una agrupación clara.
• No hay una forma sencilla de volver tras tomar el camino equivocado.
• Menús móviles que esconden el enlace que más se usa, a menudo Contacto o Precios.

Cómo corregirlo

Use las palabras de sus clientes. Las búsquedas de Google Search Console y las preguntas que más oye su equipo comercial dan buenas etiquetas. Mantenga cortos los elementos del primer nivel, agrupe el resto bajo categorías claras y deje visible en todas las páginas la acción principal (contacto, presupuesto o demo). Si va a reestructurar la web, nuestra guía de estructura web explica cómo ordenar las páginas antes del diseño.

Los párrafos largos y sin cortes son un error de diseño UX porque la gente escanea las páginas web en lugar de leerlas. En el análisis de NN/g sobre lo poco que leen los usuarios, los visitantes tenían tiempo de leer como mucho el 28% de las palabras de una página media, y lo más probable era un 20%. El estudio es de 2008, pero los trabajos de eye tracking sobre el patrón de lectura en F apuntan en la misma dirección.

Qué necesita quien escanea

• Encabezados que digan qué contiene la sección.
• Párrafos cortos que empiecen por la idea principal.
• Listas para pasos, opciones y comparaciones.
• Datos importantes, como rangos de precio, plazos y garantías, separados del texto principal.

Cómo corregirlo

Reescriba la primera frase de cada sección para que responda por sí sola al encabezado. Reduzca los párrafos a tres o cuatro frases y pase las especificaciones a tablas. Después revise la página en un móvil: un párrafo razonable en el ordenador a menudo llena la pantalla del teléfono.

Algunos compradores quieren mucho detalle antes de contactar, así que recortar no siempre es la solución: con una buena estructura encuentran ese detalle y los demás se lo saltan.

La mayoría de las visitas ya llegan desde el móvil. Según los datos de StatCounter, en septiembre de 2026 el móvil generaba cerca del 59% del tráfico web mundial, frente a un 39% aproximado del escritorio. Aun así, muchas webs se diseñan en un monitor grande y se encogen después, de modo que diseños, zonas táctiles y formularios funcionan en la pantalla del diseñador y fallan en el móvil del visitante.

Fallos del desktop first en pantallas pequeñas

• Zonas táctiles demasiado pequeñas o demasiado juntas.
• Cabeceras fijas, avisos de cookies y botones de chat que tapan media pantalla.
• Interacciones que solo funcionan con hover y no tienen equivalente táctil.
• Formularios que abren el teclado equivocado en los campos de email o teléfono.

Cómo corregirlo

Diseñe primero la versión móvil de sus páginas de conversión y amplíela después. WCAG 2.2 fija en el criterio de conformidad 2.5.8 un tamaño mínimo de objetivo de 24 por 24 píxeles CSS, un buen punto de partida para botones y enlaces. Use los tipos de campo correctos para que el móvil muestre el teclado adecuado. Pruebe en un Android de gama media con una conexión móvil normal, no solo en un iPhone nuevo con el wifi de la oficina.

La usabilidad móvil es un requisito básico en nuestro proceso de diseño UX/UI: el flujo móvil se revisa como recorrido principal, no como adaptación del de escritorio.

En el formulario el interés se convierte en contacto o venta, y ahí muchas webs piden mucho más de lo necesario. Según la investigación de Baymard sobre los campos del checkout, el checkout medio en 2024 tenía 11,3 campos, cuando a la mayoría de las tiendas le bastarían 8. Cada campo de más es otro motivo para abandonar, y los que no guardan relación con la solicitud hacen que la gente se pregunte para qué quiere esos datos.

Fricciones habituales en formularios

• Pedir datos que podría obtener después de la primera respuesta, como el tamaño de la empresa o el NIF en un simple formulario de contacto.
• Obligar a crear una cuenta, motivo de abandono para el 18% de los compradores estadounidenses en la encuesta de Baymard (sin contar a quienes solo miraban).
• Errores que solo aparecen al enviar y no dicen qué cambiar.
• Placeholders en lugar de etiquetas, que desaparecen al empezar a escribir.

Cómo corregirlo

Revise cada campo y pregúntese quién usa la respuesta y cuándo. Si nadie la necesita antes de la primera conversación, elimine el campo. Mantenga las etiquetas visibles encima de los campos, valide mientras el usuario escribe y facilite el autocompletado con atributos autocomplete correctos. En muchos formularios B2B basta con nombre, email y una pregunta abierta para empezar a hablar. El análisis de formularios de una auditoría CRO muestra qué campo provoca más abandonos, para que corrija primero el peor.

Una página puede cargar rápido y aun así parecer rota si tarda en reaccionar cuando alguien toca un botón o abre un menú. Google lo mide con Interaction to Next Paint (INP), que sustituyó a First Input Delay como Core Web Vital el 12 de marzo de 2024. Según la documentación de INP en web.dev, un INP de 200 ms o menos es bueno y uno de más de 500 ms es deficiente, medido en el percentil 75 de las visitas reales.

Por qué el INP es un problema de conversión

Si un toque no produce respuesta visible, la gente vuelve a tocar, abre el elemento equivocado o cree que la web se ha colgado, y eso se nota en la facturación. En un caso de estudio de web.dev, la plataforma de viajes redBus mejoró un 72% el INP de su página de búsqueda y registró un aumento del 7% en las ventas totales.

Causas habituales

• JavaScript pesado que ocupa el hilo principal durante las interacciones.
• Gestores de etiquetas, herramientas de chat y scripts de test A/B que compiten por el mismo hilo.
• Filtros y buscadores que vuelven a renderizar toda la página con cada pulsación.

Cómo corregirlo

Consulte el INP en el informe de Core Web Vitals de Google Search Console o en los datos de campo de PageSpeed Insights. Muestre una respuesta visual inmediata en cada toque, aunque el trabajo aún no haya terminado. Divida las tareas largas, aplace los scripts que la primera interacción no necesita y revise las etiquetas de terceros cada trimestre. La parte técnica la detallamos en nuestra guía de webs de alto rendimiento.

Las capas superpuestas se han multiplicado desde que añadir un chat con IA cuesta poco. Un modal de newsletter nada más entrar, un aviso de cookies y un chat que se abre solo con un saludo pueden tapar juntos casi toda la pantalla del móvil antes de que el visitante haya leído una línea. Cada uno puede mejorar su métrica mientras la página convierte peor, porque la gente no llega al contenido que buscaba.

Qué recomienda Google

La guía de Google Search Central sobre intersticiales intrusivos advierte de que los diálogos intrusivos dificultan a los buscadores entender el contenido y empeoran la usabilidad, y recomienda banners pequeños en lugar de capas a pantalla completa. Los diálogos obligatorios, como la verificación de edad, son la excepción.

Cookies: aviso obligatorio, pero compacto

En España, el RGPD y la LSSI exigen consentimiento antes de instalar cookies no necesarias, y la guía de cookies de la AEPD pide que rechazar sea tan fácil como aceptar. Un banner compacto con Aceptar y Rechazar al mismo nivel cumple esa guía y deja ver el titular y el CTA.

Cómo corregirlo

• No abra chats ni modales al cargar la página: espere una señal de interés, como cierto scroll, o deje que el visitante los abra.
• En móvil, mantenga el botón del chat pequeño y lejos del CTA principal y del borde inferior.
• Muestre una sola capa a la vez y recuerde cuándo un visitante la ha cerrado.
• Haga que cada capa se cierre con un toque y con el teclado.

Un asistente con IA puede responder preguntas y cualificar contactos si espera a que se lo pidan, como explicamos en el artículo sobre chatbots para empresas.

Los problemas de accesibilidad son problemas de UX con una vertiente legal. El texto con poco contraste, los campos sin etiqueta y los botones sin nombre dificultan el uso a todo el mundo, también a quien nunca usa un lector de pantalla. El informe WebAIM Million 2026 detectó fallos de WCAG 2 en el 95,9% del millón de páginas de inicio analizadas, con una media de 56,1 errores por página.

Los fallos más comunes

• Texto con poco contraste, en el 83,9% de las páginas de inicio.
• Imágenes sin texto alternativo, en el 53,1%.
• Campos de formulario sin etiqueta, en el 51%.

Dos de esos tres afectan directamente a la conversión: textos de botón difíciles de leer y formularios que los lectores de pantalla no pueden anunciar.

La Ley 11/2023 ya se aplica

España incorporó la Directiva (UE) 2019/882, conocida como Ley Europea de Accesibilidad, mediante la Ley 11/2023, y sus requisitos se aplican desde el 28 de junio de 2025. Afectan al comercio electrónico y a otros servicios dirigidos a consumidores. Quedan exentas las microempresas que prestan servicios: menos de 10 empleados y un volumen de negocio o balance anual de hasta €2 millones. Si vende online a consumidores, la accesibilidad ya es también una cuestión de cumplimiento normativo.

Cómo corregirlo

Pase un validador automático por sus plantillas principales y después recorra el flujo de conversión solo con el teclado y con un lector de pantalla. Empiece por el contraste y las etiquetas de formulario: son baratos de cambiar y afectan a más personas. Nuestra guía de accesibilidad web explica los requisitos de WCAG con más detalle.

No todos los problemas tienen la misma urgencia. La tabla resume cómo priorizamos en webs de empresa según el impacto habitual en la conversión y el esfuerzo de la corrección. Es una valoración y no un benchmark medido, así que ajústela con su propia analítica: un problema en su página de conversión con más tráfico va antes que uno en una página poco visitada.

Los errores de UX reducen las conversiones porque añaden esfuerzo justo donde el visitante decide si sigue o no. Una etiqueta poco clara rara vez hace perder un cliente por sí sola. Las pérdidas vienen de la acumulación: un menú lento, luego una página sin un siguiente paso evidente y después un formulario de doce campos. Cada paso deja fuera a una parte de los visitantes, y esas partes se multiplican a lo largo del embudo.

Un ejemplo sencillo de embudo

Imagine 1000 visitantes en una página de servicio. Si el 40% pasa a la página de contacto y el 20% de ellos envía el formulario, obtiene 80 contactos. Mejore cada paso en una cuarta parte, hasta el 50% y el 25%, y el mismo tráfico genera 125 contactos. Ninguno de los dos cambios parece espectacular, pero juntos aportan un 56% más de contactos sin un solo visitante adicional.

Dónde mirar en sus datos

• La caída entre pasos en sus informes de embudo.
• Páginas con mucho tráfico y pocos clics hacia el siguiente paso.
• Clics de rabia, clics muertos y toques repetidos en las grabaciones de sesión.
• El abandono por campo, si su herramienta de formularios lo registra.

Para fijar objetivos, compare sus cifras con rangos realistas: el artículo sobre cómo calcular la tasa de conversión ofrece referencias, la guía de métricas UX explica qué más medir y la guía de optimización de la conversión cubre la disciplina completa.

La mayoría de los errores de UX cuesta menos prevenirlos que corregirlos. Cambiar una etiqueta del menú o un campo de formulario durante el wireframe lleva minutos, mientras que el mismo cambio tras el lanzamiento puede suponer nuevos diseños, desarrollo, pruebas y otra publicación. Por eso los buenos equipos revisan estructura y flujos antes del diseño visual y vuelven a probar la ruta de conversión antes del lanzamiento, en dispositivos reales y con contenido real.

Qué incluye una revisión previa al lanzamiento

• Flujos de usuario desde cada fuente de tráfico principal hasta el objetivo de conversión.
• Jerarquía de contenidos acordada por página antes del diseño visual.
• Una justificación para cada campo de formulario.
• Core Web Vitals, incluido el INP, medidos en un entorno de staging.
• Pruebas con teclado y lector de pantalla en la ruta de conversión principal.

Cómo trabaja Vezert

En Vezert, la estructura y el orden del contenido van antes que el diseño visual. Usamos IA para acelerar el análisis, como revisar mapas de calor o detectar componentes incoherentes, pero deciden diseñadores y desarrolladores. La misma revisión se aplica tanto si creamos una landing page como un sitio web corporativo o un portal web. Las landing pages cuestan desde €1.500, los sitios corporativos desde €4.500 y los portales desde €9.000. La página de precios detalla cada paquete y el portfolio muestra proyectos terminados.

Aplique esta lista a cada página de una ruta de conversión: portada, landing pages, servicios, precios y contacto o compra. Revise cada página primero en el móvil y después en el ordenador. Cada punto sin marcar es fricción, y la lista sirve de briefing si encarga las correcciones a sus diseñadores.

1. Una acción principal clara

• ¿Hay un siguiente paso evidente?
• ¿El CTA dice qué pasa tras el clic?

2. Jerarquía visible

• ¿Se entiende el mensaje principal en pocos segundos?
• ¿Titular y CTA destacan al entrecerrar los ojos?

3. Navegación previsible

• ¿El menú usa las palabras de sus clientes?
• ¿Se llega a contacto o precios desde cualquier página?

4. Contenido fácil de escanear

• ¿La primera frase de cada sección responde a su encabezado?
• ¿Los datos importantes están separados del texto?

5. Paridad en móvil

• ¿Las zonas táctiles miden al menos 24 por 24 píxeles CSS y están bien separadas?
• ¿El flujo móvil funciona sin zoom ni toques de precisión?

6. Formularios cortos

• ¿Hace falta cada campo antes de la primera conversación?
• ¿Los errores aparecen junto al campo y explican la solución?

7. Respuestas rápidas

• ¿El INP de campo es de 200 ms o menos en móvil y ordenador?
• ¿Cada toque muestra una respuesta inmediata?

8. Pantalla despejada

• ¿El contenido se ve al entrar, sin modales ni chats que se abren solos?
• ¿Se muestra solo una capa a la vez y el aviso de cookies es compacto?

9. Accesibilidad básica

• ¿El texto cumple los requisitos de contraste de WCAG?
• ¿Todos los campos tienen etiqueta y todos los botones tienen nombre?

Empiece por la página con más tráfico y siga con las demás.

Los errores de usabilidad más comunes rara vez son un gran fallo único. Son pequeñas decisiones tomadas sin comprobar cómo se comportan los visitantes reales, que se suman a lo largo del embudo. Si este trimestre solo tiene tiempo para tres correcciones, empiece por el CTA principal de su página con más tráfico, quite campos de su formulario principal y revise el INP y las capas superpuestas en el móvil. Son cambios baratos que llegan a la mayoría de sus visitantes.

Después trabaje la jerarquía, la navegación y la accesibilidad, y use su analítica para elegir las páginas que más importan. Si va a contar con un equipo de diseño para los cambios grandes, nuestra guía sobre trabajar con diseñadores web explica cada fase. O contacte con nuestro equipo y revisaremos con usted su ruta de conversión.