En un artículo anterior trataba sobre el orden adecuado en el que colocar los botones de acción principal (por ejemplo “Aceptar”) y de acción secundaria (por ejemplo “Cancelar”). Una cuestión directamente relacionada es la de, una vez decidido el orden, cuál debe ser la alineación recomendada para los botones.
Abajo a la izquierda
De acuerdo con uno de los estudios de eye-tracking más conocidos que se han publicado al respecto, la posición adecuada para el botón de acción principal sería a la izquierda y al final del formulario. De este modo se respeta el orden natural de lectura del usuario y se posiciona el botón en el eje vertical que siguen la mayoría de los formularios para ser completados.
En línea con las conclusiones del estudio, para la alineación a la izquierda, funciona mejor el botón de acción principal primero y el secundario después.
Además, también es la mejor posición para los usuarios con problemas de visión que utilizan herramientas de zoom para agrandar el tamaño del contenido.
Algunas excepciones
Como casi todas las cuestiones de usabilidad, no hay verdades absolutas y todo depende del contexto y las circunstancias concretas. Por ello, puede haber excepciones perfectamente justificadas para la recomendación anterior. Veamos algunos ejemplos.
El botón “volver”: mejor encima del formulario
Si el usuario se ha metido en la pantalla del formulario por error, es probable que lo perciba inmediatamente y desee salir de ella sin tener que desplazarse hasta el final del formulario.
Cuadros de diálogo: mejor alineados a la derecha
En los cuadros de diálogo, es mejor alinear los botones a la derecha. Se trata de una convención heredadas de casi todos los sistemas operativos y no interesa contravenirla (principio de consistencia).
Microsoft Windows
Apple MacOS
Google Android
Asistente por pasos (wizard): el botón para continuar mejor a la derecha
En los asistentes por pasos, se ha convertido en convención estandarizada el ubicar el botón de continuar al siguiente paso a la derecha. Quizá por la lógica del propio proceso, que avanza de izquierda a derecha. Alternativamente al ejemplo de la siguiente imagen, el botón de volver al paso anterior podría estar alineado a la izquierda.
Nota: este post se irá actualizando a medida que mis criterios sobre usabilidad de los formularios vayan evolucionando o los vaya enlazando a posts que desarrollan cada consejo. La fecha de publicación que figura en la cabecera se corresponde a la del post inicial.