≡En resumen
- Cada campo que pides es una razón más para abandonar: pregunta solo lo imprescindible.
- La etiqueta va siempre visible fuera del campo; el placeholder no es una etiqueta.
- Valida al salir del campo, no mientras se escribe, y di qué falla y cómo arreglarlo.
- La pauta 3.3 de WCAG 2.2 convierte estos principios en requisitos comprobables de accesibilidad.
- Obligar a crear cuenta y los costes sorpresa son dos de las principales causas de abandono del checkout.
01 ¿Qué son los principios user-friendly aplicados a formularios?
El formulario es el punto del recorrido en el que la web deja de hablar y el usuario tiene que trabajar. Por eso concentra la mayoría de los errores y frustraciones, y por eso cada mejora se traduce casi sin intermediarios en más contactos, más altas o más pedidos. Un formulario de contacto de cuatro campos y un checkout de veinte siguen las mismas reglas; solo cambia lo que está en juego.
02 Por qué importan: abandono y conversión
70,22 %
Tasa media documentada de abandono del carrito en tiendas online (50 estudios)
Fuente: Baymard Institute, actualización de septiembre de 2025
18 %
De quienes abandonan el checkout lo hacen porque se les obliga a crear una cuenta
Fuente: Baymard Institute
17 %
Abandona por un proceso de pago demasiado largo o complicado
Fuente: Baymard Institute
23,48
Elementos de formulario de media en un checkout estadounidense, frente a 12-14 recomendados
Fuente: Baymard Institute
El primer motivo de abandono, con diferencia, son los costes extra que aparecen al final (40 % según el mismo estudio), que es también un problema de diseño: la información llega tarde. Si ya tienes pedidos a medias, la guía sobre el carrito abandonado explica cómo recuperarlos; aquí nos centramos en evitar que se produzcan.
03 Etiquetas, campos y orden: el formulario antes de escribir
- ✓Pide solo lo imprescindible: cada campo debe justificar su existencia en el proceso.
- ✓Etiqueta visible encima de cada campo; el texto de ejemplo dentro del campo desaparece al escribir y no sirve como etiqueta.
- ✓Una sola columna, en el orden lógico en que la persona tiene los datos (nombre, email, teléfono).
- ✓Marca lo opcional como «(opcional)» en vez de llenar todo de asteriscos.
- ✓Usa el tipo de campo correcto (email, tel, number) para que el móvil muestre el teclado adecuado.
- ✓Añade el atributo autocomplete a nombre, email, dirección y tarjeta para que el navegador rellene por el usuario.
- ✓Prefiere selectores, casillas y botones de opción cuando las respuestas posibles son pocas y conocidas.
- ✓Explica el formato antes de que se equivoquen: «DD/MM/AAAA» o «9 cifras, sin espacios».
04 Mensajes de error y validación en línea
La validación en línea comprueba cada campo en cuanto el usuario termina de rellenarlo y muestra el resultado junto al propio campo. Bien hecha, evita que el usuario descubra cinco errores al pulsar «Enviar»; mal hecha, le grita «email no válido» cuando aún va por la tercera letra.
| Aspecto | Evita | Haz esto |
|---|---|---|
| Momento | Validar a cada pulsación de tecla | Validar al salir del campo y al enviar |
| Ubicación | Solo un aviso general arriba | Mensaje junto al campo y resumen enlazado arriba si hay varios |
| Texto | «Error», «Campo inválido» | «Falta la @ en el email» o «La fecha de salida es anterior a la de llegada» |
| Señal | Solo borde rojo | Color más icono y texto, para que no dependa de la percepción del color |
| Datos | Vaciar el formulario tras un error | Conservar todo lo escrito, salvo campos sensibles como la contraseña |
| Éxito | Ningún aviso | Confirmación discreta de campo correcto en los que suelen fallar |
05 Qué exige WCAG 2.2 en los formularios: criterios 3.3.x
La pauta 3.3 de las WCAG 2.2, «Asistencia a la entrada de datos», traduce estos principios en criterios verificables. El W3C publicó WCAG 2.2 como recomendación en octubre de 2023, con una versión actualizada en diciembre de 2024. En España, los servicios de comercio electrónico dirigidos a consumidores deben ser accesibles desde el 28 de junio de 2025 salvo microempresas; lo explicamos en la guía sobre la normativa de accesibilidad web.
| Criterio | Nivel | En la práctica |
|---|---|---|
| 3.3.1 Identificación de errores | A | El error se detecta y se describe en texto, indicando el campo |
| 3.3.2 Etiquetas o instrucciones | A | Cada campo tiene etiqueta o instrucción que dice qué introducir |
| 3.3.3 Sugerencias ante errores | AA | Si se sabe cómo corregirlo, se sugiere (por ejemplo, el formato de fecha) |
| 3.3.4 Prevención de errores (legales, financieros, datos) | AA | Compras y contratos se pueden revisar, corregir o anular antes de confirmar |
| 3.3.5 Ayuda | AAA | Ayuda contextual disponible |
| 3.3.6 Prevención de errores (todos) | AAA | Revisión o anulación en cualquier envío |
| 3.3.7 Entrada redundante (nuevo en 2.2) | A | No pedir dos veces el mismo dato: casilla «misma dirección de facturación» |
| 3.3.8 Autenticación accesible, mínimo (nuevo en 2.2) | AA | Acceder sin pruebas cognitivas: permitir pegar, gestores de contraseñas o enlace mágico |
| 3.3.9 Autenticación accesible, mejorada (nuevo en 2.2) | AAA | Ni siquiera reconocer objetos o contenido propio como prueba |
06 Principios user-friendly en el checkout
Compra como invitado
Ofrece crear la cuenta después del pago, con los datos ya rellenados, en lugar de exigirla antes.
Costes desde el principio
Envío, impuestos y recargos visibles en el carrito o en la ficha, nunca por sorpresa en el último paso.
Progreso visible
Pasos numerados y un resumen del pedido siempre a la vista reducen la carga de memoria.
Menos escritura
Autocompletado de dirección, código postal que rellena la ciudad y métodos de pago rápidos.
Revisión antes de pagar
Un paso de confirmación que permite corregir datos cumple el criterio 3.3.4 y evita devoluciones.
Cierre claro
Página de confirmación con número de pedido, plazo de entrega y qué hacer si algo falla.
Estos principios hay que tenerlos en cuenta desde el principio del diseño de tienda online: plataformas como WooCommerce, Shopify o PrestaShop permiten compra como invitado y autocompletado, pero la configuración por defecto rara vez es la óptima para cada negocio.
07 Cómo medir y mejorar un formulario
-
1
Mide el embudo por pasos
Configura en tu analítica un embudo con cada paso del formulario o del checkout para ver dónde se pierde gente.
-
2
Analiza por campo
Grabaciones de sesión y analítica de formularios muestran qué campos se corrigen más veces o se dejan a medias.
-
3
Revisa con la pauta 3.3
Recorre el formulario solo con teclado y con un lector de pantalla, y provoca errores a propósito.
-
4
Prueba cambios de uno en uno
Quitar un campo o cambiar el texto del botón se valida con una prueba A/B, no con opiniones.
-
5
Repite
Cada mejora cambia el comportamiento; vuelve a medir antes de la siguiente.
Para decidir con datos qué versión funciona mejor, usa un test A/B con tráfico suficiente. Si prefieres que lo hagamos nosotros, nuestro servicio de optimización de la conversión empieza precisamente por formularios y checkout.
08 Ejemplo: rediseño de un checkout de cinco pasos
Antes: registro obligatorio, 22 campos, gastos de envío visibles solo en el último paso, errores mostrados todos juntos al final y contraseña con requisitos que solo aparecían al fallar.
Después: compra como invitado, 12 campos con autocomplete, coste de envío en el carrito, validación al salir de cada campo con mensajes concretos, casilla «usar la misma dirección para la factura» y un paso de revisión antes de pagar. Cada cambio corresponde a un principio: prevención de errores, reconocer mejor que recordar, control del usuario y cierre del diálogo.
Preguntas frecuentes sobre User-friendly design principles en formularios y checkout
Es comprobar cada campo en cuanto el usuario termina de rellenarlo y mostrar el error o la confirmación junto a él, en lugar de esperar al envío.
No es recomendable. Desaparece al escribir, obliga a recordar qué se pedía y suele tener poco contraste. Usa una etiqueta visible fuera del campo.
Principalmente los de la pauta 3.3 (3.3.1 a 3.3.9), además del 1.3.5 sobre autocomplete, el 3.2.2 sobre cambios al introducir datos y el 2.5.8 sobre tamaño de objetivos táctiles.
Si vendes a consumidores y no eres microempresa, sí: la Ley 11/2023 lo exige desde el 28 de junio de 2025 y usa WCAG nivel AA como referencia técnica.
Los menos posibles. Baymard Institute sitúa el ideal en 12-14 elementos de formulario, frente a los más de 23 que muestra de media un checkout estadounidense.
Depende del número de campos y del producto. Lo importante es que el progreso sea visible, que se pueda volver atrás sin perder datos y que haya revisión antes de pagar.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗