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

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>