> Manuales > Usabilidad en la web

Discusión sobre cómo enlazar las noticias de portada de los portales.


Resumen.
  1. Sumarios donde se presentan varias noticias, deben contener un enlace por bloque.
  2. Si el parrafo esta contenido dentro de una seccion, debemos incluir ese enlace.
  3. La foto debe enlazarse pero indicando el destino en un "pie de foto".
  4. Los enlacen de palabras dentro de un cuerpo de texto no siempres son claros sobre su destino, mejor ofrecer los enlaces de tal forma que tengan sentido por si mismos.

1. Sumarios donde se presentan varias noticias, deben contener un enlace por bloque.
Si tienes una pagina donde se presenta un sumario con noticias (o productos), presenta un enlace por bloque. El enlace ira subrayado (el color importa menos) para que sea claro el elementos a pinchar.

El elemento mas propicio para crear el enlace es el titular. El titular define el significado de la pagina que vamos a abrir y suele tener un tamaño suficiente como para llamar la atencion y generar un boton solido y facil de pulsar.

No uses el mismo boton para abrir diferentes secciones. Si usamos un boton llamado "ampliar notica" para todas las noticias, se crea una cierta redundancia que no tiene sentido y hace que el usuario se sienta confuso.

Evita el uso de iconos y efectos (tipo descubir el subrayado cuando se pasa por encima del texto) para destacar los enlaces. Por lo general crean inconsistencia (ya que no siempre se usa el mismo efecto) y obligan al usuario a pasar por encima de diferentes areas para descubrir donde esta el enlace.


2. Si la noticia esta dentro de una seccion mas amplia, debemos incluir ese enlace.
Si tenemos una noticia que se presenta dentro de una seccion mas amplia, debemos incluir ambos enlaces de forma clara para que el usuario interesado en el tema, pero no en la noticia destacada, pueda acceder a una pagina con mas opciones.

Igualmente el usar subrayados es algo obligatorio y sera el diseño del site el que creara el estilo para poder diferenciar ambos botones y saber que parte es un titular y que parte es una seccion.


3. La foto debe enlazarse pero indicando el destino en un "pie de foto".
Hay 2 problemas con el uso de las fotos dentro de sumarios de noticias.

  • Identificar a que noticia pertenece la foto. Muchas veces la maquetacion de las noticias y el uso de fotos genericas hace que sea dificil identificar que titular es el que va con la foto. En algunos casos la foto suele ser mucho mas grande que la suma de los titulares, en otros casos el no usar un "pie de foto" hace que se pierda el sentido de la foto dentro del contexto, etc. Es bueno maquetar el documento de tal forma que quede clara la relacion de elementos y sobre todo usar el "pie de foto".

  • Si la foto tiene un enlace, a donde nos lleva?. Una foto no es el mejor elemento para poner un enlace por ser ambiguo. Hay 2 posibles destinos: "mas informacion" sobre el articulo o "ver una foto mas grande" con mas informacion sobre el "motivo". Sea cual sea, se debe indicar en el "pie de foto" y asi el usuario entendera que es lo que pasa si pincha.

    En el caso de las fotos, esta algo pasado de moda, pero el marco de color azul suele ser un buen motivo para identificar el enlace, pero es mejor si utilizamos un "pie de foto" subrayado.


    4. Los enlacen de palabras dentro de un cuerpo de texto no siempres son claros sobre su destino, mejor ofrecer los enlaces de tal forma que tengan sentido por si mismos.
    Por lo general se recomienda poner enlaces de forma que tengan sentido por si mismos. Es decir, si en un texto sobre cine, enlazamos la palabra "Kubrick", se puede entender que ese enlace lleva a una pagina con mas informacion sobre el director, pero, es la pagina de un fan?, es su pagina oficial?, es una biografia?.

    Cuando mas avanzado sea el formato del link mas claro quedara.

    Podemos dejar el articulo sin enlaces y ponerlos todos al final con una pequeña descripcion o usar algun tipo de tabla para incluirlos cerca del cuerpo de texto al que hacen referencia, pero el incuir una pequeña descripcion ayudaran a darle mas claridad a los enlaces.

    El objetivo de crear enlaces mas avanzados hara que nuestro site tenga mas sentido, sea mas claro y ofrezca mejor informacion al usuario.
    Donde esta el enlace?
    Este ejemplo de NBC [web: NBC.com] muestra como un bloque de texto sin subrayar no ayuda a saber donde esta el enlace. En este caso, el enlace se encuentra unicamente en la palabra "ED", haciendo que el area donde se puede pinchar sea muy pequeña comparada con el espacio total.






    En este ejemplo de eresmas [web: eresmas.com] se ve como el rollover descubre el enlace que solo existe en la parte del texto, dejando el "titular" en negrita sin enlace. Debemos evitar este tipo de juegos. Es mejor poner el enlace subrayado, dejando elementos secundarios (como es en este caso la seccion de la noticia que no presenta enlace) sin destacar y en un segundo plano.





    En este caso, terra.es presenta una grupo de noticias donde la palabra "NOTICIAS" se encuentra sin enlazar.








    Esta foto se muetra dentro de una variedad de titulares que hace algo dificil entender a cual pertenece, quien es el personaje de la foto y sobre todo que pasa si pincho en la foto.
  • César Martín

    Especializado en usabilidad, hoy César es gerente de marketing y ventas de Docxp...

    Manual