Salxo

Diseño y Desarrollo web al palo.

Feed

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/

Next post arrow-right
100 Tips para tus Vender mas con tus Landing Pages

arrow-left Previous post
Proba NodeJS desde tu navegador con Runnable

  • Miguel

    6 agosto, 2013 at 14:43 | Responder

    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

    • Gerardo Lagger

      8 agosto, 2013 at 11:23 | Responder

      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.

Deja un comentario