Inclusión. Accesibilidad y Usabilidad web.

Diseño de enlaces en nuestra página web

El diseño de los enlaces son un el elemento fundamental a la hora de diseñar una web, no solo hay que conseguir que los identifique con facilidad el usuario sino que se pueden, y se debería, utilizar para aportar la máxima información al usuario de a donde nos dirije, que tipo de información vamos a encontrar.

La identificación de los enlaces

El usuario tiene que ser capaz de identificar un enlace sin dudar. Las CSS nos aportan distintos mecanismos para poder identificarlos.

• Color: Utilización de colores diferenciados:
• Decoraciones como subrayados, cursivas
• Tipografías: Una fuente diferenciada para los vínculos
• Grosor
• Tamaño

Jugar con estas variables nos permitirá identificar los enlaces. La utilización de combinaciones de estos dos parámetros nos permitirá identificar claramente un enlace

• Color+Decoración: Azul y subrayado (¿nos suena esta combinación?)
• Color+ Negrita
• Tamaño + negrita
• Fuente + color
• etc

Enlaces activos

Un recurso gráfico muy utilizado es el el cambio de aspecto de un enlace al pasar el ratón por encima: cambios de color, aprición o desaparición del subrayado, colores de fondo…

Estos comportamientos aportan al usuario seguridad sobre la identificación de un enlace y permiten darle atractivo a la página

Evitar cambios de tamaño y fuente

A veces podemos utilizar cambios de tamaño, grosor, tipografías etc. Este tipo de recursos pueden provocar que los enlaces textuales este cambio provoque cambios en la maquetación del texto que viene a continuación como cambios de líneas que puede resultar desconcertante para el usuario.

Enlaces visitados

Transmitir la información de la páginas que ya ha visitado el usuario puede ayudarle en gran medida en la navegación de nuestra web. Avisar al usuario, ¡oye, que esto ya lo vistaste!, puede servir para que no visite dos veces la misma página de manera innecesario, o que pueda servirle de orientación para volver a ver algo que ya visitó.

Información de destino

Podemos diferenciar tres destinos de un enlace:

1. Un enlace externo a otra página de otro dominio.
2. Un enlace interno dentro de nuestro sitio web.
3. Un enlace a una ubicación dentro de la página actual (En desuso)

Existen tendencias para diferenciarlos.

• Por ejemplo la wikipedia utliza un icono para indicar los enlaces a otros sites
• Se puede aportar informacion textual adicional en el enlace. “La usabilidad (wikipedia.org) es fundamental”

Tipo de información y documento

A veces desde nuestra página web enlazamos documentos como pueden ser PDFs, archivos de textos o otro tipo de archivos específico. Indicar la naturaleza de ellos será algo que seguramente nos agradecerá el usuario y le evitará molestias.

Un archivo PDF

Indicar además el peso del documaento puede ayudar l usaurio a decidir a priori si desea o no descargar el archivo. Es un detalle no olvidarnos de cuestiones básicas de accesibilidad web como es aportar la información gráfica tambien de manera textual “el formulario de inscripción (PDF, 40Kb) a las jornadas”

Un detalle final

Si os fijais en la colocación de los iconos, el enlace externo lo puse a la derecha del enlace, y del PDF a la derecha. ¿Porqué? Porque normalmete me lo encuentro así.

---

Lo más leído

• ¿Cómo adapto un interfaz web para móvil?
• Landing Page. La primera impresión es lo que cuenta. 30 Tips
• Diseño de botones call-to-action, las claves del éxito
• Reducir el porcentaje de rebote, 10 consejos

¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscríbes a mi feed y obtienes los artículos como este enviados automáticamente cada día hacia tu lector de feeds.

Inclusión. Accesibilidad y Usabilidad web.