Tip Usabilidad UX

¿Le hice click?: Una guía para mejorar tus links

Muchas veces al navegar, y por razones varias, al hacer click sobre un link nos preguntamos: ¿Le hice click? – Problema de Usabilidad e Interacción a la vista!
Esto no escapa a los usuarios que visitan nuestro sitio o utilizan nuestra aplicación.Por y para esto les dejo un pequeño snippet que podrán utilizar en sus sitios y/o aplicaciones para dar una sensación “presión” sobre sus links y mejorar la interacción con estos elementos.



a:active {
position: relative;
top: 1px;
}

Ejemplo: Click me

Así lo que lograremos es que al hacer click sobre un elemento (Pseudo elemento o estado “:active”) el texto bajará 1px y dará la impresión de que el texto se “hunde” y nos informará rápidamente que la acción fue realizada.
Otro complemento para que esto sea aún más evidente es utilizar diferentes colores para links visitados y no visitados.

/* Para links NO VISITADOS */
a {
color: #03C;
}

/* Para links VISITADOS */
a:visited {
color: #639;
}

Ejemplo: Visitado

Y no lo olvides:
Utiliza colores diferentes para los links ni quites el subrayado, así tampoco utilices subrayado o color azul para texto “común”. Esto podría reducir o anular la affordance (la funcionalidad que presenta a través de su imagen).
Más sobre links (Ingles): http://www.nngroup.com/articles/guidelines-for-visualizing-links/

2 Comments

  1. Hola,
    me ha gustado el primer efecto, ¿hay alguna forma de que al hacer click el scroll se quede donde está y no vuelva al inicio de la página?

    Gracias

    1. Los casos que muestro son para la presentación de los links y los ejemplos no son más que ejemplos. Solo con utilizar los snippets CSS ya lograrás este efecto, el hecho de donde apunten es en necesidad del caso.

Leave a Reply

Your email address will not be published. Required fields are marked *