Jerarquía de botones: primario, secundario y terciario
La jerarquía de botones define la acción principal, las secundarias y las destructivas. Reglas de Carbon y PatternFly para usar, agrupar y ubicar los botones.
¿Qué niveles existen?
Carbon, el sistema de diseño de IBM, distingue varios niveles de énfasis (Carbon: Button usage):
| Nivel | Para qué sirve según Carbon |
|---|---|
| Primario | La acción principal de la página. |
| Secundario | La acción negativa del par, como «Cancelar» o «Atrás». Nunca solo ni para una acción positiva. |
| Terciario | Acciones menos prominentes. Puede ir solo o junto a un primario. |
| Fantasma | Las acciones menos prominentes y complementarias. |
| Peligro | Acciones con efectos destructivos sobre los datos de la persona. |
PatternFly, el sistema de Red Hat, lista sus estilos «en orden de jerarquía visual»: peligro, primario, secundario, terciario, enlace, ícono, llamado a la acción y progreso. Que el peligro aparezca primero muestra que los sistemas no coinciden en todo. Lo importante es que cada equipo defina su orden y lo use siempre igual.
¿Cuántos botones primarios?
Carbon es claro: cada página debe tener solo un botón primario, y admite excepciones en flujos temporales. El motivo es que varios botones con el mismo peso visual compiten, y la persona tiene que pensar cuál tocar. PatternFly pide lo mismo: limitar los botones primarios a uno por página y usar los llamados a la acción con moderación, idealmente uno por página o un par de llamado primario y secundario (PatternFly: Button design guidelines).
En un asistente de pasos, el botón «Siguiente» debe ser primario, y «Atrás» secundario. PatternFly añade que «Cancelar» suele ser un enlace, no un botón. Así la única acción fuerte es avanzar.
Si no sabes cuál es el botón primario, empieza por una pregunta: ¿qué quiere lograr la persona en esta pantalla? La respuesta es la acción principal. Lo demás compite por la atención y debe bajar un nivel. Si varias acciones parecen igual de importantes, probablemente la pantalla mezcla dos tareas y conviene separarlas.
¿Cómo se agrupan los botones?
Carbon recomienda grupos de dos o tres acciones relacionadas. Si hay más, conviene un menú. No debe haber dos botones de alto énfasis en el mismo grupo, y el secundario solo se usa junto a un primario. En su especificación de estilo, indica que el botón primario va en el exterior del conjunto y el secundario dentro, con 16 píxeles de separación, y que no se mezclan tamaños de botón en un grupo (Carbon: Button style).
PatternFly también fija 16 píxeles entre botones, incluidos los de peligro, y pide alinear a la izquierda los botones de formularios, modales y asistentes (PatternFly: Button design guidelines).
¿Dónde van las acciones destructivas?
Carbon reserva el estilo de peligro para acciones que pueden tener efectos destructivos sobre los datos de la persona, como eliminar o quitar. Puede aplicarse como primario, terciario o fantasma. La regla que propone es práctica: usa peligro primario cuando la acción es un paso obligatorio del flujo, y terciario o fantasma, de menor énfasis, cuando es una opción entre varias (Carbon: Button usage).
PatternFly pide usar el peligro para acciones potencialmente destructivas, y señala que aparece sobre todo en modales, donde enfatiza la acción destructiva que la persona está por realizar.
Un criterio de diseño (no una regla de Carbon ni de PatternFly): una acción destructiva no debería ser la acción principal por defecto de una pantalla ni ocupar el lugar donde la persona espera avanzar. Si confirma sin leer, el daño se hace en un segundo.
¿Dónde va el botón principal?
Carbon indica que en páginas completas el primario va a la izquierda, mientras que en asistentes y diálogos se alinea a la derecha, junto al secundario o terciario; en un asistente, la acción principal suele estar abajo a la derecha. PatternFly alinea a la izquierda los botones de formularios, modales y asistentes. Elige una convención y úsala en todo el producto.
En Carbon, cuando aparece un diálogo el botón primario suele tomar el foco, y en un formulario, si el foco está en un componente que no responde a Enter, pulsar Enter activa el primario. Por eso el primario debe ser la acción que la persona quiere hacer casi siempre. Como criterio adicional, si la acción primaria de un diálogo es irreversible conviene que el foco inicial caiga en la opción segura.
Ejemplo ilustrativo
Ejemplo ilustrativo: un editor de documentos muestra en la pantalla de un archivo cuatro botones: «Guardar» (primario), «Compartir» (terciario), «Descargar» (terciario) y «Eliminar» (peligro de bajo énfasis). En el diálogo de confirmación de eliminación, «Eliminar» es el botón de peligro y «Cancelar» el secundario. El equipo decide poner el foco inicial en «Cancelar», así que quien pulsa Enter sin leer no borra el archivo. También revisa que solo haya un primario por pantalla: si hubiera tres botones con el mismo color, la persona tendría que adivinar cuál es el importante.
Si el botón es la acción de un error, revisa cómo escribir mensajes de error. Para entender por qué el contraste y el peso visual ayudan a decidir, el artículo sobre efecto Von Restorff explica cómo lo distinto llama la atención. Y para que los nombres de los botones sean coherentes en todo el producto, revisa consistencia y estándares.
Errores comunes
- Tener tres o cuatro botones primarios en la misma pantalla.
- Dar el mismo peso visual a «Guardar» y «Eliminar».
- Poner la acción destructiva donde la persona espera avanzar.
- Usar un botón secundario sin una acción primaria al lado.
- Mezclar tamaños de botones dentro de un mismo grupo.
- Dejar que el foco por defecto caiga en una acción irreversible.
Qué puedes hacer mañana
- Cuenta los botones primarios de tu pantalla más usada. Si son más de uno, decide cuál es la acción principal.
- Revisa dónde está el botón de eliminar y confirma que no es el que se activa con Enter.
- Pide a dos personas que te digan cuál es el botón principal en menos de tres segundos.