Diseño UX: en el e-commerce, la excelencia no es una opción

Cuando alguien no puede terminar un pedido en tu tienda, no piensa "la arquitectura de la información podría ser más clara". Piensa que el sitio está roto.

Eso no es una metáfora. En la encuesta del Baymard Institute sobre por qué la gente abandona el carrito (dejando aparte a los que solo miran), el 17% dice que se fue porque el sitio web tenía errores o se había caído. Algunos eran caídas reales. Muchos no lo eran: un formulario que borró el número de tarjeta tras un error tipográfico, un mensaje de error fijado en la parte superior de la página mientras el campo defectuoso quedaba por debajo del pliegue, una búsqueda que no devolvía nada para un producto que sí vendes, un modal que no podían cerrar con el pulgar.

Tú ves una decisión de diseño. Ellos ven un bug. Y a diferencia de un bug real, este nunca aparece en tu monitorización de errores. Solo aparece como una caída silenciosa de la conversión.

Antes de nada: la UX no es la UI

Una aclaración antes de seguir, porque las dos palabras se confunden constantemente. La UI, user interface, es lo que ve tu cliente: colores, botones, tipografía, espaciado. La UX, user experience, es lo que le ocurre: si encuentra el producto, entiende la fecha de entrega, se recupera de un error tipográfico y consigue pagar sin tener que pensarlo. Una tienda puede tener una UI preciosa y una UX rota: un checkout magnífico que borra tu número de tarjeta sigue siendo un checkout roto. Todo lo que sigue trata de UX: no de cómo se ve tu tienda, sino de cómo se comporta cuando un cliente real la usa, con una mano, con prisa.

El único error bueno es el que nunca ocurre

Las heurísticas de usabilidad de Jakob Nielsen tienen treinta años y siguen siendo la lista de comprobación más honesta del comercio digital. Dos de ellas pesan más que el resto en cuanto hay dinero en juego:

• Evita el error (heurística n.º 5). Restricciones, valores por defecto sensatos, el teclado correcto, una confirmación antes de cualquier acción destructiva.
• Si aun así ocurre, ayuda a la gente a recuperarse (heurística n.º 9). Lenguaje claro, el problema exacto, un siguiente paso evidente.

Un borde rojo sin texto falla en las dos. Un mensaje que dice Invalid input también. Y un checkout que grita "el correo es obligatorio" en el milisegundo en que alguien toca el campo también: NN/g lo compara con corregir el examen antes de que el alumno haya respondido a una sola pregunta.

El benchmark de checkout 2025 de Baymard es una lectura incómoda si dabas por hecho que "las grandes webs lo tienen resuelto": el 64% de los checkouts de escritorio y el 63% de los checkouts móviles de las principales tiendas de EE. UU. y la UE se califican como mediocres o peores. Un dos por ciento obtiene un "bien". Ninguno, perfecto (Baymard).

Cómo es en realidad un error útil

Tomemos un código postal francés que no coincide con la ciudad. La versión perezosa es un cartel rojo: "Dirección no válida". La versión útil se sitúa bajo el campo, en el idioma del cliente, y ofrece una solución: "Este código postal no corresponde a Lyon. ¿Querías decir 69001 (Lyon 1er)?"

Eso no es refinamiento. Es la regla de eficiencia de NN/g más el criterio WCAG 3.3.3 (sugerir una corrección cuando el sistema conoce una). En la práctica:

• Pon el mensaje junto al campo, no en un toast a mil doscientos píxeles de distancia.
• Usa icono + borde + texto. El color por sí solo es invisible para una parte importante de tus clientes, y falla la accesibilidad por diseño.
• No les culpes. "No válido", "ilegal", "incorrecto" suenan a que el cliente hizo algo mal. El sistema no aceptó una entrada; la frase debe asumirlo.
• Nunca borres lo que ya han escrito, incluido el número de tarjeta tras un error en el CVV. Borrar el formulario significa pedirles que decidan la compra una segunda vez.
• Valida cuando salen del campo (o cuando un código postal, un teléfono o un número de tarjeta está completo), no mientras siguen escribiendo, y nunca al primer foco.

Baymard descubrió que el 31% de los sitios todavía no tiene ninguna validación en línea, y una parte del resto la aplica de forma tan agresiva que los probadores creyeron haber roto la página. Tres detalles deciden de qué lado estás: sin avisos prematuros, el error desaparece en el momento en que se corrige el valor, y una pequeña marca verde en los campos válidos para que los clientes ansiosos dejen de releer todo el formulario.

Si este mes solo puedes reescribir cinco mensajes, mide primero. ¿Qué errores de validación ocurren con más frecuencia y cuáles de ellos preceden a un abandono? Esos son los que merecen una frase humana. Baymard lo llama adaptive error messaging. Tú puedes llamarlo "deja de escribir textos para errores que nadie llega a encontrar".

Un pago rechazado es otra especie. El cliente necesita saber si le han cobrado, si el stock sigue reservado para él y qué puede probar en su lugar. "Pago fallido" más un botón de reintentar que se queda en bucle es el camino más corto de un error de UX a un contracargo.

Si la tienda no dice nada, creen que se ha congelado

La "visibilidad del estado del sistema" es la heurística n.º 1, y en realidad es una regla de confianza. La retroalimentación predecible es lo que hace que el siguiente toque se sienta seguro.

Algunos patrones que se leen como una avería aunque el backend esté perfectamente sano:

• "Añadir al carrito" sin insignia, sin panel, sin aviso, así que tocan dos veces y piden dos.
• Un botón de Pagar que sigue siendo clicable mientras el banco piensa, así que tocan dos veces y creas una doble autorización.
• Un spinner sin timeout en una redirección 3-D Secure. Al cabo de unos segundos, para un pulgar en un tranvía, eso es una congelación.
• Un "Paso 2 de 4" que luego saca por sorpresa la creación de una cuenta o un paso por SMS.

Ajusta el indicador a lo que está en juego: una confirmación discreta para "añadido al carrito", un bloqueo solo cuando el usuario tiene que parar de verdad. Y cuando el diseño ya se conoce, una pantalla esqueleto supera a un spinner infinito.

Tu menú está en la esquina equivocada de su mano

Steven Hoober observó a 1.333 personas usando el móvil en público. Casi la mitad lo manejaba con una sola mano; la mayoría del resto sostenía el teléfono y aun así pulsaba con el pulgar. Cambian de agarre cada pocos segundos según la tarea. No están sentados en un escritorio con un ratón.

Así que un menú hamburguesa en la esquina superior izquierda, una "X" microscópica en la superior derecha de un popup a pantalla completa o un botón principal atrapado bajo un banner de cookies no son "la versión móvil del sitio de escritorio". Son errores de alcance. Las acciones principales pertenecen donde ya está el pulgar: navegación inferior, un "Añadir al carrito" sticky que sea realmente pulsable, un menú en la zona del pulgar en lugar de encajado contra la barra de estado.

El primo de escritorio de esa idea es el color de acento. Un solo color debería significar "esta es la acción que importa". Si los filtros, los chips, los enlaces secundarios y "Pagar ahora" comparten el mismo rojo, la gente tiene que leer la interfaz en lugar de reconocerla. Eso no es branding. Es camuflaje.

Los teléfonos no han hecho más que crecer en altura desde 2013. La parte superior de la pantalla no se ha vuelto más fácil de alcanzar.

Deja de dibujar campos de entrada falsos

El sistema operativo ya sabe cómo recoger un número de teléfono. type="tel" abre un teclado numérico, type="email" ofrece la @, y un selector de fecha nativo siempre superará a un calendario a medida que rompe el autocompletado. Bloquear el pegado en los campos de tarjeta no te hace más conforme con PCI; fabrica errores tipográficos.

La misma lógica se aplica a cómo se nombran los campos. El atributo HTML autocomplete es un contrato con el navegador: shipping street-address, shipping postal-code, email, tel. Rellénalo bien y Safari, Chrome y el gestor de contraseñas escribirán la dirección por tu cliente. Déjalo vacío, o peor, fuerza autocomplete="off" "por seguridad", y habrás inventado un impuesto de cuarenta segundos a cada cliente que vuelve. Esto también es un requisito de accesibilidad (WCAG 1.3.5), no un truco de desarrollador.

Un nivel por encima, la búsqueda de direcciones mientras se escribe (la BAN o La Poste en Francia, o cualquier proveedor serio) es la versión adulta del autocompletado. Solo mantén un respaldo manual para los días en que la API va lenta: un widget que gira sin fin es, una vez más, "el sitio está roto".

Dales una salida y un camino de vuelta

La gente pulsa lo que no debe constantemente. La heurística n.º 3 es la salida de emergencia claramente señalizada: deshacer, cancelar, hacer clic fuera, la tecla Escape, un botón de cierre lo bastante grande para acertarlo.

La regla de NN/g sobre los modales es tajante. Úsalos para evitar daños irreversibles, o para pedir información sin la cual el flujo no puede continuar. No para una newsletter, no para un upsell de cookies y no para nada en mitad del checkout. Un modal en el checkout es la forma más segura de mandar a un cliente que estaba listo para pagar a la madriguera de la restauración de contraseña.

En móvil, vigila también el bug contrario: un dedo un poco ancho que descarta un diálogo que en realidad necesitaban. Las confirmaciones destructivas nunca deberían cerrarse con un toque fuera; los modales no críticos deberían cerrarse de tres formas (botón, Esc, clic fuera). Si tu "no modal" de escritorio se convierte en una trampa a pantalla completa en un iPhone, no tienes un overlay responsive. Tienes un secuestro.

La reanudabilidad es la misma heurística estirada en el tiempo. Un carrito debería sobrevivir al cierre de la pestaña. Un checkout de doce campos no debería reiniciarse porque se rechazó el código postal. Si el flujo es largo, envía un magic link para retomarlo. En el e-commerce europeo, el cliente interrumpido a mitad de compra en su móvil no es un caso límite: es lo normal.

Y la compra como invitado no es un extra: el 18% de los compradores ha abandonado porque el sitio exigía una cuenta, y el 62% de los sitios todavía esconde "Continuar como invitado" bajo una etiqueta de "Cliente nuevo" (Baymard 2025). Si tienen que buscarlo, no lo ofreces. Recoge la cuenta después del pedido, con un magic link, no como un peaje antes de la venta.

Habla como alguien que espera un paquete, no como un ERP

"2 a 3 días laborables" es una frase escrita por la logística. "Llega el jueves" es una frase escrita para un humano. Según Baymard, casi la mitad de las tiendas líderes todavía hacen que el cliente haga el cálculo del calendario, festivos incluidos. Una cuenta atrás hasta el corte ("pide en los próximos 43 minutos para recibirlo el jueves") supera a un "pide antes de las 11:00 PST" estático que nadie convertirá desde una zona horaria en la que no vive.

Otros errores de vocabulario que parecen triviales y se comportan como bugs:

• Marcar solo los campos opcionales, o solo los obligatorios: el 61% de los sitios lo hace mal, y en las pruebas de usuario el 32% de los participantes se saltó al menos un campo obligatorio (a menudo el teléfono) antes de chocar contra un muro.
• Reglas de contraseña dignas de un banco central para una cuenta de tienda. Las reglas demasiado estrictas provocaron hasta un 19% de abandono entre personas que ya tenían cuenta, y luego fallaron en el correo de restablecimiento. Un mínimo de 6 a 8 caracteres más un magic link es más que suficiente para vender zapatos.
• Fugas de back-office: SKU, 3PL, "fulfillment", "preautorización", "challenge 3-D Secure". Tradúcelas. "Comprobamos tu tarjeta ahora, se te cobra cuando enviamos" es un mensaje de estado. "RUM" no lo es.

El minimalismo es el mismo respeto aplicado a la estructura. Baymard cuenta 23,48 elementos de formulario en el checkout medio estadounidense, frente a un ideal de 12 a 14 (7 a 8 campos reales). Casi uno de cada cinco abandonadores dijo que el checkout le pareció demasiado largo. La mayoría de esos campos extra nunca fueron necesarios para enviar un paquete.

Si no lo encuentran, no lo vendes

La búsqueda no es un widget. Para un catálogo que no se puede explorar en quince segundos, es la tienda. Una página de "sin resultados" que se encoge de hombros es una persiana bajada, y cerca de la mitad de los sitios todavía no ofrece ninguna salida. "Revisa tu ortografía" no es una salida; nadie lee esa frase. Categorías relacionadas, una consulta ampliada con cinco vistas previas de productos, artículos vistos recientemente, un número de teléfono, los más vendidos: eso es una salida.

Lo mismo vale para una navegación construida sobre los nombres de tu almacén en lugar de las palabras del cliente, y para recomendaciones que son aleatorias o ligeramente inquietantes. "Vistos recientemente" y "comprados juntos" se ganan su sitio; "nos dimos cuenta de que mirabas anillos de boda" no.

Las listas, por último, respetan el hecho de que el carrito ya sirve como memoria externa. NN/g observó que la gente evita todo lo etiquetado como "Wishlist" (suena a lista de regalos, y suena a trabajo) y rechaza todo lo que exige una cuenta para guardar un artículo. "Guardar para más tarde": visible, sin iniciar sesión. El beneficio operativo es real: una lista es un motivo legítimo para enviar un correo de "esto se va a agotar", pero en la UE ese correo sigue requiriendo un consentimiento opt-in adecuado. El error de UX y el error de RGPD suelen ser el mismo campo.

Un último error poco glamuroso: tus artículos son ilegibles

Si publicas un blog, el modo lectura del navegador es una prueba que tu marcado aprueba o suspende. Encabezados jerárquicos de verdad, un título de página de verdad, texto que es realmente texto. Una página de marketing hecha de imágenes y divs suspende el modo lectura, suspende la tecnología de asistencia y suspende a los lectores que simplemente querían guardar el artículo para más tarde. Es poca cosa al lado del checkout. También es una fuga de credibilidad.

Preguntas frecuentes

Audítalo como un cliente: en un móvil, con una errata

No verás estos errores desde el escritorio de la oficina, con sesión de administrador. Los verás en un tranvía, con 4G, con una letra de más en el código postal y un banner de cookies tapando el botón de Pagar.

Empieza por ahí esta semana: texto de error junto a los campos, entradas que conservan sus valores, compra como invitado a la vista, el type y el autocomplete correctos en cada campo, un control de cierre que funcione en cada overlay, una fecha de entrega en lugar de "días laborables", una página sin resultados que ofrezca un siguiente paso. Nada de eso requiere un replatform. La mayor parte ni siquiera requiere un sprint completo.

Las tiendas que pierden menos clientes no son las que tienen más animaciones. Son aquellas cuyos errores se leen como frases, cuyos botones están donde ya está el pulgar, y cuyos clientes nunca tienen que preguntarse si el sitio acaba de caerse.

En Saphes IT-Systems, auditamos ese recorrido exactamente como lo vive un visitante primerizo: errores, estados vacíos, búsqueda, checkout, hasta el modal que ya no puedes cerrar y que has dejado de notar, y corregimos los fallos que ya parecen bugs. Si quieres saber cuáles de tus "decisiones de diseño" tus clientes ya han archivado como "roto", hablemos.