14 min de lecturaProduct design
Ley de Hick en diseño web: por qué tu hero necesita un solo CTA que mande
Poner muchos botones en la primera pantalla parece darle opciones al visitante. En la práctica, lo obliga a comparar antes de actuar. Así funciona la ley de Hick y así se arregla un hero donde todos los botones gritan igual.
En este artículo
- 01 Qué dice la ley de Hick, explicada sin fórmulas
- 02 El mito de "mientras más opciones, mejor"
- 03 Cómo se ve el problema en un hero
- 04 Cómo resolverlo: un CTA que manda y otro que acompaña
- 05 Ejemplo 1: el hero de un SaaS B2B
- 06 Ejemplo 2: el hero de un restaurante
- 07 El mismo hero en Figma, Framer, código y WordPress
- 08 Cómo medir si funcionó
- 09 Cómo lo aplicaría en un proyecto real
- 10 Preguntas frecuentes
- 11 Conclusión
- 12 Fuentes consultadas
Abres la página de una tienda y en la primera pantalla hay dos botones idénticos: "Comprar ahora" y "Ver catálogo". Mismo tamaño, mismo color. En la esquina, la burbuja de WhatsApp. Nadie te obliga a elegir, pero igual te toca decidir por dónde empezar.
Ese momento dura poco. Aun así, es un momento en el que no avanzas. Y en una página web, cada pausa es una oportunidad para que el visitante se distraiga, dude o se vaya.
Detrás de ese diseño suele haber una idea razonable: "mientras más opciones le dé, más probable es que haga algo". Suena lógico. El problema es que la psicología de la decisión dice otra cosa.
La ley de Hick en diseño web explica por qué varias opciones con el mismo peso visual hacen más lenta la decisión. En este artículo vas a ver qué dice la ley, por qué el mito falla, cómo reconocer el problema en tu hero y cómo resolverlo sin quitarle opciones a nadie.
La promesa es simple: al terminar, vas a saber elegir el botón que manda en tu primera pantalla y cómo comprobar si el cambio funcionó. Lo vas a ver aplicado a un SaaS y a un restaurante, y construido en Figma, Framer, Webflow, código y WordPress.
- 11,00
- 21,58
- 32,00
- 42,32
- 52,58
- 62,81
Con 3 botones iguales: 2,00, +100 % frente a uno.
Valores relativos de log₂(n + 1), no datos de conversión.
Qué dice la ley de Hick, explicada sin fórmulas
Imagina a un niño frente a una heladera. Si hay dos sabores, elige rápido. Si hay veinte, se queda mirando. No es que no quiera helado: es que ahora tiene que comparar.
Eso es la ley de Hick. En 1952, el psicólogo británico William Edmund Hick publicó un experimento en el que el tiempo de reacción crecía a medida que aumentaba el número de opciones posibles (Hick, 1952 ). Un año después, Ray Hyman llegó a una conclusión parecida por su lado. Por eso a veces se llama ley de Hick-Hyman.
Laws of UX la resume así: el tiempo que toma una decisión aumenta con el número y la complejidad de las opciones.
Lo que dice la fórmula (sin asustarse)
Para opciones igual de probables, el tiempo de decisión crece según esta relación:
T = b · log2(n + 1)
No necesitas calcular nada. Lo útil es ver cómo crece el tiempo cuando sumas opciones:
| Botones con el mismo peso | log₂(n + 1) | Frente a 1 botón |
|---|---|---|
| 1 | 1,00 | base |
| 2 | 1,58 | +58 % |
| 3 | 2,00 | +100 % |
Qué significa: pasar de un botón a dos no duplica el tiempo, pero lo sube. Cada opción extra suma, aunque cada vez un poco menos.
Limitaciones del cálculo: la fórmula sale de experimentos de laboratorio con tiempos de reacción de milisegundos, no de páginas web. Solo sirve para comparar en proporción, no para predecir ventas.
Qué NO dice la ley de Hick
No dice que toda página deba tener un solo botón. Tampoco aplica igual en todos los casos: cuando las opciones están ordenadas y el usuario ya sabe lo que busca (por ejemplo, un menú alfabético), el efecto se reduce (Wikipedia, Hick's law ). Laws of UX advierte que simplificar de más también es un error, porque la interfaz se vuelve abstracta o confusa.
La ley habla de algo más específico: cuando todo compite al mismo nivel, decidir cuesta más. Y eso nos lleva al mito.
El mito de "mientras más opciones, mejor"
Por qué se cree
El razonamiento del dueño de negocio es comprensible: "no sé qué quiere cada visitante, así que le pongo todo a la mano". Comprar, cotizar, ver el catálogo, escribir por WhatsApp. Nadie se queda sin su puerta.
Por qué falla
El problema no son las opciones. Es que ninguna manda. Si todos los botones se ven igual de importantes, el visitante tiene que hacer el trabajo que el diseño no hizo: decidir cuál es el camino principal.
Hay un estudio famoso que muestra esto. En 2000, Sheena Iyengar y Mark Lepper montaron dos mesas de degustación de mermeladas en un supermercado: una con 24 sabores y otra con 6. La de 24 atrajo a más gente (60 % frente a 40 % de quienes pasaban), pero solo el 3 % de quienes se detuvieron compró, frente a casi el 30 % en la de 6 (resumen del estudio ).
Lo que el mito tampoco entiende bien
Aquí conviene ser honestos. Un metaanálisis de 50 experimentos con 5.036 participantes encontró que, en promedio, el efecto de "demasiadas opciones" fue prácticamente cero (ScienceDaily sobre Scheibehenne y colegas, 2010 ).
Entonces, ¿más opciones no molestan? Depende. Los mismos autores señalan cuándo sí aparece el problema: cuando la elección es compleja y no hay una alternativa dominante (Scheibehenne, Greifeneder y Todd, 2010 ).
Esa es la clave para tu hero. Tener dos o tres caminos no es el problema. El problema es que ninguno se vea como el principal. Un CTA dominante es exactamente esa "alternativa dominante" que le ahorra al visitante la comparación.
Cómo se ve el problema en un hero
El hero es la primera pantalla de tu página: titular, subtítulo, imagen y botones. Es donde el visitante decide si sigue o se va, así que ahí es donde más pesa la ley de Hick.
Tres señales de que tus CTA están compitiendo
- Mismo peso visual: dos o más botones con el mismo tamaño, color y relleno.
- Verbos que piden cosas distintas: "Comprar", "Cotizar" y "Agendar" en la misma franja, cada uno llevando a un lugar diferente.
- Todo arriba: acciones que tendrían más sentido más abajo (newsletter, blog, redes) metidas en la primera pantalla.
Por qué pasa
Casi nunca es descuido. Pasa porque cada área del negocio quiere su botón, o porque nadie definió cuál es la acción más valiosa de la página. El diseño termina reflejando esa indecisión.
Qué provoca
El artículo de Precision Consulting sobre la página de inicio lo explica bien: un hero con varios CTA que compiten obliga al visitante a una comparación que no pidió. En cambio, un CTA principal con uno secundario claramente subordinado produce clics más rápidos, porque la elección ya está hecha.
Ese mismo artículo menciona el caso de una plataforma de domicilios que reorganizó su hero, subió el módulo de categorías y quitó elementos que competían. Reporta que el paso de la home a una página de producto subió 40 % y el "agregar al carrito" desde la home, 25 %.
Tenlo en cuenta con cautela: el artículo no nombra a la empresa ni enlaza el estudio, y el cambio incluyó varias cosas a la vez. Sirve como referencia de dirección, no como resultado que puedas esperar.
Qué NO significa
No significa que un botón secundario sea un error. Muchas personas llegan con intenciones distintas: unas quieren comprar ya y otras quieren ver más antes. El error es que ambos caminos griten igual.
Cómo resolverlo: un CTA que manda y otro que acompaña
Paso 1: elige la acción más valiosa
Hazte una sola pregunta: si el visitante hiciera una sola cosa en esta página, ¿cuál me sirve más? En una tienda suele ser comprar o ver productos. En un servicio, agendar o cotizar. Esa es tu acción principal.
Paso 2: dale al principal lo que el secundario no tiene
El CTA principal lleva el color de acción, el relleno sólido y el primer lugar. El secundario baja de nivel:
| Aspecto | CTA principal | CTA secundario |
|---|---|---|
| Estilo | Botón sólido, color de acción | Botón de contorno (ghost) o enlace de texto |
| Posición | Primero en el orden de lectura | Al lado o debajo, nunca antes |
| Texto | Verbo concreto: "Ver productos", "Agendar cita" | Alternativa suave: "Cómo funciona", "Ver precios" |
| Cantidad | Uno | Máximo uno en la primera pantalla |
Precision Consulting recomienda no pasar de dos CTA visibles en la primera pantalla en móvil y bajar el resto más abajo en la página (fuente ).
Paso 3: manda el resto más abajo
Newsletter, redes, blog, "conócenos": todo eso tiene su lugar, pero no en la primera pantalla. No desaparece; solo deja de competir con la decisión principal.
Paso 4: haz la prueba de los 5 segundos
Muestra el hero a alguien que no conozca tu negocio durante cinco segundos y pregúntale: "¿qué harías primero?". Si duda o menciona dos botones distintos, todavía hay competencia.
Ejemplo 1: el hero de un SaaS B2B
Este caso y el siguiente son escenarios hipotéticos para ilustrar el principio. No son clientes reales.
El problema
Un software de facturación para pymes pone dos botones iguales en el hero: "Prueba gratis" y "Agenda una demo". Parecen cubrir a todos. En la práctica, obligan al visitante a clasificarse antes de entender el producto: ¿soy de los que prueban solos o de los que prefieren hablar con alguien?
Por qué pasa en SaaS
En software B2B suelen convivir dos formas de vender: el registro directo y la venta con acompañamiento. Cada una tiene su equipo y su meta, y ambas quieren estar arriba.
La solución
Elegir según el cliente que más te interesa hoy:
| Si tu cliente ideal... | CTA principal | CTA secundario |
|---|---|---|
| Se registra y prueba solo (plan mensual bajo) | Prueba gratis | Enlace de texto: "Prefiero ver una demo" |
| Necesita acompañamiento (contrato anual, varios usuarios) | Agenda una demo | Enlace de texto: "Ver precios" |
Qué NO significa: no estás eliminando la demo ni la prueba. Quien quiere el otro camino lo sigue encontrando, solo que no compite por la primera mirada.
Cómo verificarlo: compara la tasa de clic del botón principal antes y después, y revisa si bajaron los registros del camino secundario. Si bajan mucho, quizás elegiste el principal equivocado.
Ejemplo 2: el hero de un restaurante
El problema
"Reservar", "Pedir a domicilio" y "Ver menú": tres acciones razonables con el mismo peso visual. Encima, la burbuja de WhatsApp. El comensal con hambre tiene que decidir por dónde entrar antes de pensar en qué quiere comer.
Por qué pasa en negocios locales
El dueño de un restaurante atiende varios canales a la vez: mesas, domicilios, pedidos por WhatsApp y apps de delivery. Es natural querer mostrarlos todos.
La solución
Mirar qué canal deja más ingreso o cuál preguntan más los clientes, y darle el protagonismo:
- Si vive de los domicilios: "Pedir a domicilio" manda. "Ver menú" queda como botón de contorno.
- Si vive de las mesas: "Reservar" manda. El menú se muestra más abajo, en la misma página.
- Si todo pasa por WhatsApp: el CTA del hero es WhatsApp, y la burbuja flotante sobra.
Qué NO significa: "Reservar" no desaparece. Puede vivir en el menú de navegación o en una sección propia más abajo.
Cómo verificarlo: si el CTA principal es WhatsApp, cuenta los chats que llegan desde la web (un enlace con mensaje predefinido ayuda a identificarlos) antes y después del cambio.
El mismo hero en Figma, Framer, código y WordPress
El principio no depende de la herramienta. Un CTA principal y uno secundario se pueden construir igual de bien en cualquiera de estas herramientas. Lo que cambia es cómo defines la diferencia entre los dos para no tener que rehacerla en cada página.
| Herramienta | Cómo se define el secundario |
|---|---|
| Figma | Un componente de botón con una propiedad de variante (por ejemplo, Tipo: Principal / Secundario) |
| Framer | Un componente con dos variantes, reutilizable en todo el sitio |
| Webflow | Una clase base de botón y una clase combinada para el secundario |
| Código | Una clase base y un modificador (abajo) |
| WordPress con Elementor | Colores globales del sitio y estilos de botón en los ajustes del sitio; en el widget, fondo transparente y borde para el secundario |
En código, la idea cabe en pocas líneas:
<a class="btn btn--primary" href="/productos">Ver productos</a>
<a class="btn btn--secondary" href="/como-funciona">Cómo funciona</a>
.btn { padding: 14px 24px; border-radius: 8px; font-weight: 600; }
.btn--primary { background: var(--color-accion); color: #fff; }
.btn--secondary { background: transparent; border: 1.5px solid currentColor; }
Pasa el cursor o recórrelos con Tab: el estado lo resuelve el CSS, no otra variante.
Cómo medir si funcionó
Un cambio de diseño sin medición es solo una opinión. Esto es lo mínimo:
- Marca los clics de cada botón como evento en Google Analytics 4 (con Google Tag Manager o el plugin de tu CMS).
- Calcula la tasa de clic del CTA principal antes y después del cambio.
- Mira grabaciones de sesión con una herramienta gratuita como Microsoft Clarity . Precision Consulting recomienda ver al menos diez grabaciones de la home antes de tocar nada.
- Compara periodos parecidos, por ejemplo dos semanas antes y dos después, sin campañas grandes en medio.
Tasa de clic del CTA = (clics en el CTA principal ÷ sesiones en la página) × 100
Ejemplo hipotético: antes del cambio, 1.000 sesiones y 30 clics en el principal: 3 %. Después, 1.000 sesiones y 45 clics: 4,5 %. Es una mejora relativa del 50 %.
Limitaciones: con pocas visitas, la diferencia puede ser azar. Si tu página recibe pocas sesiones al mes, tómalo como señal, no como prueba, y suma lo que ves en las grabaciones.
Cómo lo aplicaría en un proyecto real
Así es el proceso que sigo al revisar el hero de un cliente:
- Pregunto cuál es la acción que más dinero o contactos le trae al negocio.
- Reviso las analíticas o grabaciones, si existen, para ver qué botón se usa de verdad.
- Diseño dos versiones del hero en Figma: la actual y una con un solo CTA dominante.
- Construyo la versión elegida en la plataforma del cliente, sea WordPress, Framer o Webflow.
- Mido durante dos a cuatro semanas antes de decidir el siguiente cambio.
Preguntas frecuentes
¿Cuántos CTA debe tener una landing page?
Uno principal. En la primera pantalla puedes sumar un secundario claramente subordinado, y más abajo puedes repetir el mismo principal. Repetir la misma acción no agrega una decisión nueva.
¿La ley de Hick aplica al menú de navegación?
Sí, pero con matices. Cuando el menú está ordenado y el usuario ya sabe qué busca, el efecto baja (Wikipedia ). Agrupar opciones en pocas categorías claras ayuda más que esconderlas.
¿Qué es un botón fantasma y cuándo usarlo?
Es un botón con borde y sin relleno. Funciona bien para el CTA secundario porque se ve clicable pero con menos peso. No lo uses para el principal.
¿La burbuja de WhatsApp compite con mi CTA principal?
Puede hacerlo. Si WhatsApp es tu canal principal de ventas, conviértelo en el CTA del hero y no dupliques. Si no lo es, déjalo flotante y discreto, fuera del bloque de botones.
¿Menos opciones siempre venden más?
No. Un metaanálisis de 50 experimentos encontró que, en promedio, tener más opciones no redujo la satisfacción ni la motivación (ScienceDaily ). El problema aparece cuando ninguna opción destaca.
¿En qué se diferencia la ley de Hick de la ley de Fitts?
La de Hick trata del tiempo para decidir según cuántas opciones hay. La de Fitts, del tiempo para alcanzar un botón según su tamaño y distancia. Lo veremos en un próximo artículo sobre la ley de Fitts.
Conclusión
El mito dice que más opciones dan más oportunidades. La ley de Hick y la investigación sobre elección dicen algo más preciso: el problema no es cuántas opciones hay, sino que ninguna mande.
La decisión más importante es elegir la acción más valiosa de tu página y darle el protagonismo. Todo lo demás baja de nivel o baja de lugar.
Siguiente paso: abre tu página en el celular, mira la primera pantalla y cuenta los botones con el mismo peso. Si son más de uno, ya sabes por dónde empezar.
Fuentes consultadas
- Precision Consulting — Homepage CRO : recomendación de un CTA principal y caso de la plataforma de domicilios.
- Laws of UX — Hick's Law : definición y advertencia sobre simplificar de más.
- Wikipedia — Hick's law : fórmula, estudios originales de Hick (1952) y Hyman (1953) y límites.
- Scheibehenne, Greifeneder y Todd (2010) : metaanálisis sobre sobrecarga de elección y la condición de "opción dominante".