Seguro que tras leer el título no tienes ni idea de lo que va a tratar el tema de este artículo, no se me ocurría ninguno mejor xD.

Es muy común ,tanto en diseño web como en diseño de aplicaciones de escritorio, el uso de botones de bi-estado o de reacciones contrarias, esto son botones que al pulsarlos realizan una acción concreta y al volverlos a pulsar realizan la acción opuesta.

Suelen emplearse para tareas como bloquear/desbloquear usuarios, abrir/cerrar elementos, …

Normalmente esos botones se acompañan de una imagen gráfica que obviamente cambiar al pulsar el botón.

On Botón Botón Off
Tras ver la imagen, los habrás reconocido y podrías decirme muchos más ejemplos.

El problema del uso de imagenes en los botones reside en el mal uso de estos, y la confusión que pueden presentarle a los usuarios.

Obviando el tema de la elección correcta de las imagenes, la principal confusión reside en usar correctamente ambas imágenes para representar un estado o el otro.

¿Qué estado debe representar la imágen, el estado actual del sistema o el estado que se conseguirá al pulsar el botón?

Pues los estudios y el sentido común (el mío) me dicen que la imagen del botón debe representar el estado en que se encontrará el sistema tras pulsar el sistema.

Si sobre un botón empleamos una imagen de una marca de validación el usuario pensará que al pulsar ese botón se activará o desbloqueará “algo”.

Si por el contrario empleamos una aspa el usuario pensará que al pulsar el botón se bloqueará o desactivara “algo”.