Botones, enlaces y paginación
Botones
Los botones se utilizan para identificar las acciones principales de un formulario. Pueden contener íconos (impresión y enlace fuera del sitio) o estar en estado deshabilitado.
Botón primario
El botón primario se utiliza siempre para la acción principal.
Botón secundario
Los botones secundarios se utilizan para acciones de menor relevancia o de segundo orden. Hay cuatro variantes que pueden utilizarse según la relevancia de la acción:
Amarillo
El botón secundario amarillo tiene un destaque visual importante.
Inverso
El botón secundario inverso, por su fondo en blanco tiene menor peso visual.
Botón tipo enlace simple
El botón tipo enlace siemple es de menor jerarquía visual que los botones amarillo e inverso.
Botón tipo enlace con fondo
El botín tipo enlace con fondo tiene mayor destaque que el enlace simple.
Enlaces
Existen dos tipos de enlace, azules y negros. Se recomienda el uso del enlace azul, que es el estándar. El enlace negro es solo para vínculos que se requiera que tengan menor jerarquía visual. Los enlaces que conducen a un sitio externo llevan un ícono que indica esta acción.
Paginación
La paginación se usa para la presentación de datos, por ejemplo, una tabla.
Buenas prácticas
- Siempre es mejor que haya una única acción primaria.
- No incluir un botón "Reset" (“Limpiar” o “Borrar” el formulario). En caso de que el formulario conserve automáticamente los datos, incluir una opción “vaciar el formulario” con una jerarquía baja, y con una pantalla que explique que se perderá todo lo ingresado y si la acción es irreversible.
- Distinguir entre la acción primaria y las secundarias (“Volver”, “Imprimir”, etc.) de su formulario. Evitar las secundarias, pero si se necesita incluirlas, distinguirlas visualmente de forma inequívoca, destacando visualmente la primaria y otorgándoles menor jerarquía a las acciones secundarias. Por ejemplo, utilizar el botón azul para la acción primaria y para las secundarias, botones con jerarquía baja o enlaces.
- Colocar los botones o enlaces que realizan las acciones primarias (por ejemplo, el botón "Continuar al paso siguiente") debajo del último campo del formulario, ya sea alineado con éste o sobre la izquierda. Para los hablantes de español, por convención, en la derecha está el futuro, lo que implica avanzar en el formulario y en la izquierda está el pasado, lo que implica volver hacia atrás a los pasos anteriores.
- Utilizar un nombre adecuado para los botones del formulario, relacionado con su acción y no de carácter general. Por ejemplo, es mejor "Ir a datos personales" que los genéricos "Aceptar", “Guardar” o “Siguiente”.