tentándote.com

Aceptar y cancelar, Guardar o cancelar…  son algunos de los ejemplos típicos de acciones que más se suelen utilizar en cualquier cuadro o formulario modal. Una buena práctica para centrar el foco de atención en la que interesa y evitar errores es distinguir entre ambas, y una buena forma de hacerlo en la Web es representándolas de distinta forma.

Una posibilidad es representar una acción en forma de botón y la otra como enlace. Así, entre otras cosas se evita que, debido a que la confirmación se convierte en un hábito adquirido cuya tarea ejecutamos en un gran número de ocasiones de manera automática, se produzcan errores seleccionando una acción que no corresponda (si utilizamos dos botones de igual tamaño y apariencia pero diferente rótulo y no utilizamos un espaciado correcto entre ambos o un adecuado posicionamiento para diferenciarlos es posible equivocarse con relativa facilidad).

CuadroModal - Distinguir acciones en cuadros modales - Uso no recomendado de los botones de Cancelar y Guardar evento

Cuadro modal - Mejora de usabilidad: "Cancelar" en enlace y "Guardar evento" como botón

Una buena práctica es por ejemplo, el uso que hacen en Linkedin:

Google va más allá y distingue radicalmente entre las acciones de confirmación y cancelación. En Calendar, pone en el botón “Crear evento” y para cancelar se utiliza la [x] del bocadillo:

Google Calendar - Cuadro diálogo modal - Botón de "Crear evento" y "Cancelar"

En cuanto a la posición de los botones / enlaces y su orden no entro en ello. Hay mucho escrito al respecto y bastante polémica (la más conocida la controversia Windows / Mac).

Por cierto, este post está inspirado en el comentario que me hizo en su día E. (gracias ;-)