Usabilidad, cómo crear un enlace

Vinculación Link

Los vínculos constituyen una parte importante del hipertexto y podemos dividirlos en 3 tipos principales:

De navegación.

Aquellos vínculos que te permiten moverte por las páginas de una web, botones de menú principal, vínculos de páginas secundarias etc…

De contenido de la pagina.

Aquellos vínculos que te llevan a más contenido de la página, suelen ser texto subrayado o img (más info).

Listas de referencia externa.

Son listas que Ayudan el usuario a encontrar lo que quiere si la página no es la adecuada.

Reglas básica de como debería ser un vínculo.


Páginas enlazadas cortas.

Las páginas enlazadas desde un vínculo no deberían ser muy largas, porque como en una revista impresa, estas páginas son un sitio donde descansar la vista mientras examinas un artículo.

Ejemplo:
página enlazada corta

No usar “Haga clic aquí”.

Evitar enlazar un vínculo con el texto “Haga clic aquí” utilizado como hipertexto.
La razón es que sólo los usuarios que usan los ratones harán clic, mientras que los discapacitados que tengan dispositivos especiales no harán clic.
Otra razón que las palabras “Haga clic aquí” no aportan mucha información, como tal no hay que aplicarlas como elemento de diseño.

Ejemplo:
Incorrecto > Para saber más sobre Namron, haga clic aquí
Correcto > Tenemos más información sobre Namron

Un link de hipertexto no debe contener más de 4 palabras

Dato que debería tener sólo 4 palabras*, se aconseja añadir texto sin ancla que explique el vínculo.

Ejemplo:
Incorrecto >Tenemos más información sobre Namron
Correcto > Tenemos más información sobre Namron


*Este punto es muy debatido en usabilidad, esa es la versión de Jacob Nielsen, pero sobre la “longitud” de un vínculo y el “número de palabras” hay diversas opiniones. Desde mi punto de vista, lo que dice Nielsen tiene sentido, pero hay que añadir siempre, un poco de sentido común dependiendo del caso específico.

Diferenciar los vínculos iguales.

Si los vínculos con ancla se parecen, hay que diferenciarlos con textos descriptivos.
De esa forma el usuario, antes de acceder, ya sabrá previamente lo que va a encontrar.

Ejemplo:
Para ir a la página principal > …podemos verlo en la página de inicio de Jakob Nielsen
Para ir a la biografía > Jakob Nielsen es una de las personas más respetadas en el ámbito mundial sobre usabilidad

La costumbre del Title.

Una buena costumbre a la hora de maquetar código html para crear un vínculo, es describir correctamente el comando “title” para denominar nuestro vínculo.

Ejemplo:
<a href=”https://namron.es/2009/11/22/usabilidad-como-crear-un-enlace” title=”Como crear un enlace”>Este artículo</a>
Con este código si pasamos el cursor encima del vínculo, transcurrido un segundo, nos aparecerá “Como crear un enlace” indicando dónde enlaza, podéis probarlo: Este artículo

Colorear los vínculos

Azul aquellos vínculos que el usuario nunca ha visto
Morado o rojo los vínculos que un usuario ha visto antes.

Ejemplo:
Vínculo nunca visto > Vínculo
Vínculo ya visto > Vínculo

* Jacob Nielsen aconseja no utilizar colores no estándar, pero está claro que desde que Nielsen dijo eso, los tiempo evolucionaron y las web cada vez son más variadas. Así aconsejo más que utilizar estos colores, intentar mantener una coherencia: si en vuestra web en la “pagina de inicio” los enlaces son de color naranja (cuando no están visitados) y de color verde (cuando están visitados), mantener esta gramática en todas la páginas de vuestra web, para facilitar el aprendizaje a los usuarios.

Utilizar la misma URL

Es un fallo bastante común, hago una web de contenido y hago una vez un vínculo a una pagina con una URL, después hago otro vínculo que enlaza a la misma página con URL diferente. Por ese pequeño fallo, el enlace nos aparecerá como (no visitado, color azul por ejemplo) cuando seguramente ya lo hemos visitado anteriormente.

Ejemplo:
<a href=”https://www.namron.es/”> o <a href=”https://namron.es/”> enlaza a la misma página, pero por el simple echo de estar escrito de formas diferentes, los lee como dos vínculos distintos.
Prueba 1
Prueba 2

Vínculos externos

  • Si hacemos un vínculo externo asegurarnos que la calidad de la página valga la pena para salir de nuestra web.
  • Asegurarnos de no vincular páginas temporales.
  • No utilizar en código html target=”blank”, se ha estudiado que hacer que al pinchar en un vínculo se abra otra ventana o pestaña, resulta incómodo a la hora de volver atrás, porque es más simple volver atrás si lo carga en la misma ventana.

Vínculos internos (o entrantes)

Es cuando otro sitio enlaza al tuyo, esa es una de las mejores formas para generar tráfico en tu web.
Una de las formas para provocar que tu web sea enlazada es no creando páginas temporales para que se puedan enlazar.
Reallizar contenidos de calidad, para que las personas te utilicen como referencia.
Otra forma es especializarse en un tema, así mucha gente hará referencia a tus páginas

Vínculos publicitarios

Caso especial de vinculo entrantes.
Se aconseja crear un vínculo con páginas que sigan el mensaje del anuncio en vez de crear vínculos directos con su página de inicio.
Los estudios de publicidad web han descubierto que entre el 20% y el 30% de los usuarios web que hacen clic en un banner y comprueban que están conectados con una página corporativa de inicio, hacen clic en el botón Atrás.

P.D.
Es una buena norma, utilizar las cosas que funcionan a la hora de generar vínculos, más es un estándar mejor es…

Se vemos que en muchas web ponen para acceder a más informaciones de esa forma “más info” o “saber más”, ¿por qué tenemos que re-inventar la rueda y llamarlo “descubre más”? utilizar lo que ya la gente conoce es una gran ventaja.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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