Cinco obstáculos que están en casi todas las webs

Después de un cierto número de auditorías, los patrones se repiten. Estos cinco aparecen en webs de todos los tamaños, en todos los mercados y todos los idiomas en los que trabajamos. Ninguno es exótico, ninguno obliga a reconstruir nada.

Tampoco son intuiciones nuestras. Cada uno está documentado en investigación publicada sobre usabilidad, y las fuentes están al final. Lo que aportan nuestras auditorías no es descubrir el problema, sino saber cuál está en tu web y en qué paso.

1. Un botón con el nombre del mecanismo, no del resultado

Enviar. Aceptar. Confirmar. Continuar. Cada uno describe lo que hace el software. Ninguno describe lo que obtiene el visitante. Los probadores se paran ante estos botones y dicen siempre lo mismo: ¿qué pasa si hago clic, y puedo volver atrás?

El fenómeno tiene nombre en la bibliografía, duda ante el clic, y se observa desde las primeras rondas de test de Baymard, donde tres participantes de cada diez interpretaban mal un botón que ponía simplemente Continuar. ¿Continuar comprando, o continuar hacia el pago? Quince años después la recomendación no ha cambiado: el botón principal debe anunciar la pantalla siguiente, no la operación técnica.

La corrección. Nombra el botón por su resultado. Ir al pago. Ver el resumen. Enviar mi solicitud. La duda desaparece, y desaparece de forma especialmente útil cuando el visitante se acerca al pago, el momento en que más cara sale.

Caso vecino, para revisar a la vez: los botones Aplicar colocados junto a un campo, para un código de descuento o un cálculo de envío. Los tests muestran que los visitantes los confunden con el botón principal, y que ni cambiarles el estilo ni cambiarles el nombre resuelve nada. Lo único que funciona es eliminar el botón y guardar lo introducido automáticamente.

2. Un mensaje de error que acusa sin explicar

Entrada no válida. ¿Qué entrada, y no válida por qué? Un visitante que no ve qué falla lo repetirá igual y luego se irá.

Es una de las diez heurísticas de Nielsen (1994), y probablemente la más incumplida de todas: un mensaje de error debe estar en lenguaje claro, señalar el problema con precisión y sugerir una salida. Entrada no válida falla en los tres puntos.

La corrección. Decir qué se esperaba. El código postal debe tener cinco cifras no cuesta nada y termina con el bucle. Van con ello tres reglas.

• Coloca el mensaje junto al campo afectado, no en la parte superior de la página. En celular, un aviso de error en la cabecera de un formulario largo es sencillamente invisible.
• Valida al salir del campo, no solo al enviar. El visitante corrige mientras aún tiene el contexto en la cabeza.
• Nunca vacíes los campos ya rellenados. Un error que borra el formulario no se perdona.

3. Un campo obligatorio sin razón visible

Cualquier campo que el visitante no esperaba despierta desconfianza, y la desconfianza en el momento de pagar sale cara.

El campo de teléfono es el caso de manual, y está cuantificado.

No es rechazo al campo en sí. Quienes no abandonan suelen introducir un número falso, lo que te cuesta dos veces: el dato es incorrecto y la confianza queda tocada.

La corrección, por orden de preferencia.

1. Elimina el campo si la atención al cliente puede funcionar por correo electrónico.
2. Márcalo explícitamente como opcional si solo lo usas de vez en cuando.
3. Si no, justifícalo junto al campo: solo para incidencias con el repartidor. Una línea de texto convierte una intromisión en un servicio.

Y ya que estás, cuenta tus campos. Baymard mide una media de 14,88 campos en un proceso de compra corriente, cuando siete bastan en una implementación optimizada. Cada campo retirado es un obstáculo retirado, sin contrapartida.

4. Un precio que solo es definitivo en la última pantalla

Lo tratamos con más detalle en nuestro artículo sobre los carritos abandonados, y aun así sigue encabezando los motivos de abandono sobre los que puedes actuar.

El matiz importa, y muchos artículos se lo saltan. El motivo más frecuente, contando todo, es «solo estaba mirando», más de cuatro abandonos de cada diez, y ahí no hay nada que corregir.

En España y en la Unión Europea la cuestión no es el IVA, ya que los precios mostrados al consumidor lo incluyen por obligación legal. Es todo lo demás: gastos de envío, gastos de preparación, recargo por una modalidad de entrega preseleccionada, suplemento según el método de pago.

La corrección. Sea cual sea el total real, el visitante debería encontrárselo antes de invertir diez minutos en llegar hasta él. El importe completo, con todos los costes incluidos, debe verse antes de pedir los datos bancarios. Si no puedes dar un total exacto porque el envío depende de la dirección, da una estimación y explica cómo se calcula. Una horquilla anunciada pronto hace mucho menos daño que una sorpresa anunciada tarde.

5. Un teclado celular que tapa el campo que se está rellenando

Este es invisible desde un computadora. En un celular el teclado ocupa media pantalla, y en ciertos diseños el campo que acaba de abrir queda detrás. El visitante escribe a ciegas, no ve el mensaje de error que aparece encima y abandona.

No es raro ni teórico. Baymard describe exactamente este escenario en el paso de elección de cuenta, donde la opción de comprar como invitado, colocada al final de la página, desaparece por completo tras el teclado en cuanto el visitante toca el campo de correo. El visitante concluye que hay que crear una cuenta, y se va.

Dos causas técnicas, casi siempre: una barra de acción fijada al fondo de la pantalla con position: fixed que ignora el teclado, y un diseño calculado sobre la altura total de la ventana en lugar de sobre la zona realmente visible. La API visualViewport y la propiedad scroll-padding resuelven lo esencial.

Una precisión sobre las normas. El criterio de accesibilidad que aborda el asunto (WCAG 2.2, criterio 2.4.11 Focus Not Obscured, nivel AA) se refiere al contenido añadido por la web, como banners fijos, avisos de cookies o widgets de chat, y no al teclado del sistema. Pero en la práctica casi siempre es la combinación de ambos lo que tapa el campo, y una web conforme con el 2.4.11 está en buena medida inmunizada.

Es un problema de visualización, no de concepción, y lo encuentra en diez segundos cualquiera que tenga un celular en la mano de verdad.

Lo que dice esta lista

Ninguno de estos puntos exige una nueva identidad visual, una nueva agencia ni una nueva plataforma. Ninguno lleva más de media jornada de trabajo. Solo hace falta que alguien se dé cuenta, que es más difícil de lo que parece cuando has construido tú la web y ya sabes dónde está todo.

No puedes releer tu propia interfaz con ojos nuevos, por la misma razón por la que no se corrigen las erratas propias: lees lo que querías escribir.

En eso consiste todo el valor de un desconocido. No sabe, y por eso te enseña lo que no saber te está costando.

Fuentes

Todas las cifras anteriores proceden del Baymard Institute o de una referencia profesional y normativa. Ningún agregador de estadísticas, ningún blog de proveedor. Baymard es un organismo de investigación independiente especializado en usabilidad del comercio electrónico, fundado en 2009; sus conclusiones proceden de tests de usabilidad moderados individualmente y de una base de referencia de webs evaluadas manualmente.

Investigación primaria en usabilidad de comercio electrónico

• UI: Getting the Details Right. La ambigüedad de la etiqueta Continue, y los tres participantes de cada diez.
• Checkout UX: Avoid "Apply" Buttons. El caso vecino de los botones pegados a un campo.
• Explain Why the "Phone Field" Is Required. 14 % de abandono sin explicación, 39 % de las webs no la ofrecen.
• Ecommerce Checkout UX Guide. Los 14,88 campos medidos, frente a siete en una implementación optimizada.
• Reasons for Cart Abandonment. La parte de «solo estaba mirando» y el resto corregible.
• How to Reduce Cart Abandonment. Costes añadidos 39 %, entrega lenta 21 %, creación de cuenta obligatoria 19 %.
• Make "Guest Checkout" Prominent. La opción de invitado tapada por el teclado celular.

Referencias profesionales y normativas

• Nielsen, J., 10 Usability Heuristics for User Interface Design, Nielsen Norman Group, 1994, revisado en 2020. Heurística n.º 9, ayudar a reconocer y corregir los errores.
• W3C, Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum), WCAG 2.2.

Datos comprobados en agosto de 2026. Los porcentajes de motivos de abandono proceden de encuestas cuantitativas a compradores en línea estadounidenses, calculados tras excluir a quienes declararon que solo estaban mirando. Léelos como órdenes de magnitud sectoriales, no como valores trasladables tal cual a una web concreta.