UX / UI
Jerarquía de botones
No pongas dos botones iguales.
La jerarquía de botones le dice a la gente cuál es la acción importante sin leer. Si dos botones pesan lo mismo, toca leerlos los dos para decidir.
3 demos interactivas
Guía gratis por DM
UX / UI
01
¿Aceptar o cancelar?
Sin jerarquía de botones, cada decisión se vuelve lectura. El clásico: un modal que dice «¿Estás seguro?» con «Aceptar» y «Cancelar» del mismo color y tamaño.
La persona no sabe de qué está segura, ni cuál de los dos es la acción importante. Si además la acción borra algo, un clic distraído sale caro.
Un buen par de botones se entiende de un vistazo: uno principal y otro secundario, cada uno con un verbo que dice lo que hace, y la consecuencia explicada antes del clic.
La regla de oro
Un solo botón principal por pantalla. Los demás, un escalón abajo.
02
Arregla el modal paso a paso
Mira la corrección completa o toca cada paso: jerarquiza, nombra, explica y advierte.
Antes
03
Así no / así sí
Comparación: tres botones con el mismo peso visual, frente a un botón principal Publicar relleno, un secundario Vista previa con borde y Guardar borrador como texto.
El ojo duda.
Tres botones rellenos y del mismo color: hay que leerlos todos para encontrar el importante.
El ojo va directo.
Principal relleno y en color, secundario con borde, lo menor como texto. Se decide sin leer.
04
La escala de botones
Cuatro niveles bastan: principal, secundario, terciario y destructivo.
La escala de botones
- 01Pagar ahoraPrincipalRelleno y en color de acento. Uno por pantalla.
- 02Ver detallesSecundarioCon borde, sin relleno. La alternativa razonable.
- 03Saltar por ahoraTerciarioSolo texto. Acciones menores o de escape.
- 04Eliminar cuentaDestructivoEn rojo, solo para lo que borra o no tiene vuelta atrás.
05
Cómo aplicarlo hoy
1
Jerarquiza
Elige la acción más importante de la pantalla y dale relleno y color. La alternativa va con borde; lo menor, como texto.
2
Nombra
Cambia «Aceptar» y «OK» por el verbo de la acción: «Eliminar proyecto», «Guardar cambios», «Pagar $489.900».
3
Explica
En las acciones delicadas, di qué pasa antes del clic: qué se pierde y si se puede deshacer.
4
Advierte
Si la acción destruye algo, el botón principal va en rojo. Solo ahí: el rojo pierde fuerza si lo usas para todo.
06
Antes de publicar
- ¿Hay un solo botón principal en esta pantalla?
- ¿Se distingue el principal del secundario sin leer el texto?
- ¿Cada botón dice con un verbo lo que hace?
- ¿Las acciones destructivas explican su consecuencia?
- ¿El rojo se usa solo para lo que borra?
COMENTA
“BOTONES”
y te envío
la guía
por DM
La guía de jerarquía de botones en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Qué es la jerarquía de botones en UX?
Es diferenciar visualmente los botones según su importancia: un principal (relleno y en color), uno o más secundarios (con borde) y terciarios (solo texto). Así la acción importante se encuentra sin leer.
¿El botón de cancelar va a la izquierda o a la derecha?
Lo más importante es la consistencia en todo tu producto. Una convención común en web es la acción principal a la derecha y cancelar a la izquierda, con menos peso visual.
¿De qué color debe ser un botón de eliminar?
Rojo, para señalar que la acción es destructiva. Acompáñalo de un texto claro («Eliminar proyecto») y de una explicación de lo que se pierde.
Sigue aprendiendo
