Guía de UX/UI para ecommerce: las leyes que explican por qué la gente compra o se va

Cuando alguien dice que una tienda “se ve mejor” que otra, casi siempre está describiendo algo que no es estético. Está describiendo que entendió más rápido dónde estaba parado, qué tenía que hacer y qué iba a pasar después.

Esa sensación no es misteriosa. Hay un conjunto de regularidades bien documentadas sobre cómo las personas perciben y usan una interfaz, que en diseño se conocen como leyes de UX. No son reglas morales ni recetas: son observaciones que se repiten, y por eso sirven para anticipar cómo va a comportarse alguien antes de gastar plata en descubrirlo.

Esta guía las recorre aplicadas a un ecommerce. No es un catálogo teórico: cada ley viene con la decisión concreta que cambia en tu tienda.

Las leyes, de un vistazo

Ley de Hick: cada opción cuesta tiempo

El tiempo que tarda alguien en decidir crece con la cantidad y complejidad de las opciones. Parece obvio dicho así, pero se viola todo el tiempo: menús con catorce categorías, listados con nueve filtros, checkouts con seis formas de pago sin jerarquía.

En ecommerce esto se traduce en algo incómodo de aceptar: mostrar todo lo que tenés puede vender menos que mostrar una parte bien elegida. No porque la variedad sea mala, sino porque una decisión difícil se pospone, y posponer en internet es irse.

• Limitá el menú principal a lo que realmente rota. El resto vive en el catálogo completo.
• Agrupá los filtros y mostrá primero los tres que más se usan; el resto, desplegables.
• Si tenés muchos medios de pago, destacá el más usado y agrupá los demás.
• En productos con muchas variantes, ofrecé un camino guiado además de la lista completa.

La excepción importante: reducir opciones ayuda a decidir, pero esconder información no. Menos opciones sí; menos datos sobre cada opción, no.

Ley de Fitts: tamaño y distancia

El esfuerzo para alcanzar un objetivo depende de su tamaño y de la distancia hasta él. Un botón chico y lejos del pulgar cuesta más que uno grande y cerca. En un celular, donde el pulgar tiene un radio de alcance limitado, esto deja de ser sutil.

• El área táctil mínima es de 44 píxeles de lado. Un enlace de 17 píxeles de alto se falla seguido.
• En el celular, las acciones importantes van en la mitad inferior de la pantalla, donde llega el pulgar.
• El botón de compra tiene que ser el elemento más grande de la ficha de producto.
• Dos acciones opuestas —comprar y eliminar— nunca deberían estar pegadas.

Ley de Jakob: no reinventes lo que ya saben usar

Tus visitantes pasan la mayor parte de su tiempo en otras tiendas. Eso significa que llegan con expectativas ya formadas sobre dónde está el carrito, cómo se ve un botón y qué pasa al hacer clic en el logo.

Es la ley que más se rompe por buenas intenciones. Alguien quiere que su tienda “se destaque” y mueve el carrito a la izquierda, reemplaza el ícono por uno original o convierte el menú en una animación. Cada una de esas decisiones cobra un peaje en confusión.

Diferenciate en el producto, en las fotos, en el tono y en la atención. En los patrones de navegación conviene ser aburrido: es lo que hace que la tienda se sienta fácil.

Ley de Miller: la memoria de trabajo es chica

Una persona puede retener pocos elementos a la vez —el número exacto se discute, pero el orden de magnitud es de unos pocos, no de decenas—. Todo lo que le pidas recordar de una pantalla a la otra es carga que compite con la decisión de compra.

• El costo de envío tiene que estar visible cuando se decide, no recordado desde otra pantalla.
• Agrupá los campos del formulario en bloques con sentido: datos de contacto, entrega, pago.
• Mostrá siempre en qué paso está la persona y cuántos faltan.
• En el checkout, dejá visible el resumen del pedido: no obligues a recordar qué se estaba comprando.

Von Restorff y posición serial: qué se ve y qué se recuerda

El efecto Von Restorff dice que un elemento que rompe el patrón se recuerda mejor. De ahí una regla práctica: una sola acción principal por pantalla, y que sea la única con ese tratamiento visual. Si tenés cinco botones del mismo color, no destacaste ninguno.

El efecto de posición serial dice que de una lista se recuerdan mejor el principio y el final. En un listado de productos eso significa que el primer y el último elemento visible tienen más peso del que parece, y que el orden por defecto es una decisión comercial, no técnica.

Ordenar el listado por fecha de carga es entregarle esa ventaja al azar. Ordenar por lo que más rota, o por lo que mejor margen deja, es usarla.

Ley de Tesler: alguien va a hacer el trabajo

También llamada ley de la conservación de la complejidad: todo sistema tiene una complejidad mínima irreductible. No se puede eliminar; solo se puede decidir quién la absorbe, si el negocio o el cliente.

Es la ley más útil para discutir prioridades, porque convierte una pregunta vaga en una concreta: ¿este trabajo lo hacemos nosotros una vez, o lo hace cada cliente cada vez?

• Cargar bien los atributos de cada producto es trabajo tuyo, una vez. No cargarlos es trabajo del cliente, cada vez que busca.
• Completar el código postal para estimar el envío puede resolverse detectando la ubicación en lugar de preguntando.
• Una tabla de talles bien hecha te cuesta una tarde y le ahorra una duda a cada comprador.

Umbral de Doherty: la velocidad es diseño

Cuando el sistema responde en menos de unos 400 milisegundos, la atención no se corta y la persona sigue en el flujo. Por encima de eso, la espera se vuelve consciente y aparece la posibilidad de abandonar.

Por eso la velocidad no es un tema de infraestructura separado del diseño: es parte de la experiencia. Y en ecommerce se juega casi siempre en el mismo lugar, las imágenes de producto, que son pesadas por naturaleza.

• Comprimí las fotos y serví el tamaño que corresponde a cada pantalla, no el original.
• Mostrá algo mientras carga: un esqueleto de la página se percibe más rápido que una pantalla en blanco.
• Si una acción tarda, dejalo explícito. Una espera avisada se tolera; una silenciosa parece un error.

Regla del pico-final: cómo se recuerda la compra

De una experiencia no se recuerda el promedio, sino el momento más intenso y el final. Para un ecommerce esto tiene una consecuencia directa: la experiencia no termina cuando la persona paga.

El final real es cuando abre el paquete. Y ahí es donde se decide si vuelve a comprarte, que es la variable que más impacta en tu rentabilidad a largo plazo.

• El seguimiento del envío es parte del producto: informar bien reduce ansiedad y consultas.
• El desempaque es el momento pico de la mayoría de las compras. Un detalle chico ahí rinde más que un descuento.
• Un problema resuelto rápido puede dejar mejor recuerdo que una compra sin incidentes.

Efecto estética-usabilidad: lo lindo parece más fácil

Las personas perciben como más usable aquello que les parece más cuidado. Es un sesgo, pero es real y opera fuerte en la primera impresión, especialmente donde hay que confiar plata a un desconocido.

Tiene un lado bueno y uno peligroso. El bueno: una tienda prolija compra paciencia, y esa paciencia te da margen para que el resto funcione. El peligroso: la estética puede tapar problemas de usabilidad en las pruebas, porque la gente los tolera sin reportarlos, pero igual no compra.

Que se vea bien no prueba que funcione. Por eso las decisiones se validan con la conversión, no con opiniones sobre el diseño.

Gestalt: cómo se agrupan las cosas sin que lo pienses

Los principios de Gestalt describen cómo el ojo agrupa elementos automáticamente. Son la base de por qué un layout se entiende o no.

• Proximidad: lo que está cerca se lee como relacionado. Si el precio está más cerca del producto de al lado que del suyo, se malinterpreta.
• Similitud: lo que se ve parecido se asume que funciona parecido. Si algo no es clicable, que no parezca botón.
• Región común: un borde o un fondo compartido agrupa con más fuerza que la cercanía.
• Continuidad: el ojo sigue las líneas. Alinear no es prolijidad, es guiar la lectura.

El error más común en tiendas es de proximidad: márgenes uniformes entre todos los elementos, de modo que nada se agrupa. El espacio en blanco no es decorativo, es el que dice qué va con qué.

Buenas prácticas por pantalla

Bajando todo lo anterior a lo concreto, esto es lo que reviso en una auditoría, pantalla por pantalla.

1. 01Portada. Que en cinco segundos se entienda qué vendés y a quién. Un solo camino principal. Acceso al catálogo sin scroll en el celular.
2. 02Listado. Fotos parejas, precio visible sin pasar el mouse, orden por defecto elegido a propósito, filtros que nunca dejen el listado vacío.
3. 03Ficha. Botón de compra como elemento dominante, varias fotos con referencia de escala, envío y plazo visibles, política de cambios a la vista.
4. 04Carrito. Resumen siempre presente, edición de cantidades sin recargar, costo total antes de pedir datos.
5. 05Checkout. Compra como invitado, campos mínimos, progreso visible, errores explicados junto al campo y no en un cartel arriba.
6. 06Postventa. Confirmación inmediata, seguimiento proactivo, un canal claro para consultar.

Cómo usar esto sin volverse loco

Una guía así puede paralizar: son muchas cosas y ninguna tienda las cumple todas. El orden que recomiendo es el de siempre, del final hacia atrás.

1. 01Arrancá por el checkout: es donde se pierde gente que ya decidió comprar.
2. 02Seguí por la ficha de producto: es el tramo con más caída en la mayoría de las tiendas.
3. 03Después el listado y los filtros.
4. 04La portada al final: es la que más se mira y la que menos decide.

Y una advertencia sobre las leyes en general: describen tendencias, no certezas. Sirven para elegir qué probar primero y para explicar por qué algo no funcionó. La validación siempre es la misma —un cambio por vez, volumen suficiente, y mirar la conversión— porque tu público puede no comportarse como el promedio.