Botón con dos cursores, uno de cada tipo

Jeremy Keith, en el capítulo 2 de su libro Resilient Web Design menciona uno de los valores del mundo de la arquitectura: el principio de la honestidad de los materiales, el cual nos dice que un material no puede ser utilizado para sustituír e imitar a otro. La misma analogía la hace Kevin Goldman en Material Honesty on the Web, mencionando además esta cita de John Ruskin:

«Cubrir una pared de ladrillos con yeso y pintar un fresco sobre ese yeso es perfectamente legítimo… Pero cubrirla con cemento, y rayar el cemento para que parezca piedra es contar una falsedad; este procedimiento tiene lo mismo de despreciable como el anterior lo tiene de noble.»

En la web tenemos botones y enlaces. Muchas veces se usa uno u otro indistintamente, pero realmente son materiales diferentes y, si tenemos en cuenta el principio anterior, no deberíamos ser deshonestos a la hora de emplearlos. Da igual que con CSS podamos hacer que un enlace se parezca a un botón o al revés. Siempre van a ser diferentes, porque el navegador los va a interpretar de forma diferente.

Si hacemos clic con el botón secundario en un enlace, vemos que el menú contextual nos muestra opciones como abrir en una nueva pestaña, guardar en los favoritos, compartir o incluso enviar a otro dispositivo.

Menú contextual de un enlace

Un botón, por el contrario, se utiliza para enviar datos de un formulario o para realizar acciones puntuales dentro de la propia página. Por lo tanto, no tiene mucho sentido guardar esa acción ni mucho menos compartirla en redes sociales. El menú contextual de un botón no tiene nada que ver con el de un enlace:

Menú contextual de un botón

Estamos, por lo tanto, hablando de dos materiales diferentes, con comportamientos y características diferentes. En el mundo real estos dos elementos se mezclan constantemente y por medio de CSS podemos hacerlos practicamente indistinguibles a simple vista mediante un código como este:

<a href="#" class="button">Action 1</a>
<button class="button">Action 2</button>

Una forma de distinguir entre un elemento u otro es precisamente por el cursor. El tener la seguridad de que si el cursor tiene forma de dedo es un enlace que podemos compartir o abrir en otra pestaña, es devolver un poco de honestidad al diseño web.

Por supuesto, siempre habrá gente que no esté convencida y que exponga argumentos como:

«Es que si no tiene el dedo, no parece clicable!!»

Un botón bien diseñado no necesita cambiar el cursor para que el usuario se dé cuenta de que se puede pulsar. Es mucho mejor diseñar elementos que sean visualmente aparentes y no esperar a que la gente los descubra moviendo el ratón por la pantalla. Si así fuese, la gente que navega a través de un móvil no sabría cómo interactuar con la web.

Tenemos la posibilidad —muy recomendada, además— de cambiar el estilo del botón con el cursor encima (el estado :hover de CSS), no es necesario cambiar tambien el cursor. Dejémoslo, por lo tanto, para que el usuario sepa identificar los enlaces.