Evitando el “click aquí”: el arte de enlazar
Publicado el Lunes 05 de Noviembre del 2007 @ 15:28 por Armonth.
En Coding Horror han escrito “Don’t Click Here: The Art of Hyperlinking” un artículo sobre las mejores formas de enlazar.
El artículo contiene una introducción al “hyperlink” — normalmente traducido como hiperenlace en castellano pero sinceramente suena horrible — que, aunque no está mal, creo que es más interesante los once puntos que tratan (las imágenes que sirven de ejemplo en cada punto también son de ahí):
Asegurate que los enlaces son lo suficiente grandes para que sea fácil hacer click en ellos. Cuando se construyen enlaces hay que evitar la “Fitt’s Law. Si lo que estás enlazando es pequeño, hazlo grande. Si no puedes hacerlo más grande, al menos añade bordes para que sea más fácil a la gente hacer click.
En la imagen siguiente sólo los números están enlazados, una pena:
El primer enlace es el más importante. El primer enlace va a llevarse la mayor parte de la atención del lector y el mayor porcentaje de clicks. Elige tu primer enlace cuidadosamente. Empieza por lo importante y no lo malgastes en una trivialidad. La imagen siguiente es un buen ejemplo de enlazar primero lo relevante:
No enlaces todo. Usar demasiados enlaces convertirá el texto en ruido. Esto funciona en dos dimensiones: enlazar excesivamente hace el texto difícil de leer y además devalúa el valor de los otros enlaces. Enlaza con moderación. Enlaza sólo las cosas lo suficiente importantes para merecerlo. Un ejemplo de lo que nunca hay que hacer:
No alternes radicalmente el comportamiento de los enlaces. Los enlaces son la piedra angular de la web. Los usuarios se han formado durante años unas expectativas basadas en el comportamiento existente en sus navegadores. Cuando cambias la forma en que los enlaces funcionan, estás redefiniendo una parte fundamental de la web. ¿Es eso lo que realmente quieres? ¿Es eso lo que realmente tus lectores quieren?.
Veamos un ejemplo de un “gadget” que altera radicalmente el comportamiento de los enlaces:
No titules tu enlace como “Click aquí”. No uses las palabras “Click” o “aquí” en ninguna parte del texto del enlace. Describe lo que el enlace hace cuando el usuario hace click en él. Un ejemplo de un “Click aquí” innecesario:
No enlaces cosas que el usuario puede querer seleccionar y copiar. Pobre usuario el que tenga que seleccionar y copiar texto enlazado. Esto requiere de un complejo conjunto de movimientos precisos del ratón para funcionar correctamente. Aquí estoy intentando seleccionar el nombre “Ralph Waldo Emerson” que forma parte del enlace:
Por suerte no es un escenario muy habitual. Pero cuando pasa no es nada agradable y requiere algo de consideración.
No incluyas iconos en cada enlace. Si debemos usar los enlaces con moderación, debemos usar los iconos con extrema moderación. Si todos los enlaces tienen un icono, es ruido. Sólo los enlaces muy poco habituales deben incluir iconos. Pienso que un texto bien escrito puede comunicar fácilmente qué tipo de enlace es, tanto o más que un icono, pero esto entra en el reino de las preferencias de cada uno.
No hagas el contenido dependiente de los enlaces para funcionar. No todo el mundo va a pulsar en tus enlaces. Pueden estar muy ocupados para hacer click en cada uno de los enlaces que pongas delante suya, o quizá están leyendo el artículo en otro formato en el cual no pueden hacerlo: imprimido, offline, en un móvil. De todas formas es importante ofrecer el contexto necesario para hacer el contenido entendible sin la necesidad de visitar todo lo que está detrás de los enlaces.
No ocultes tus enlaces. Los enlaces deben parecer enlaces. Dales un estilo distintivo que no pueda ser confundido con ningún otro elemento o texto de la página. Usa un color único no usado en ninguna otra parte de la página y considera usar la bien gastada convención de un enlace subrayado. En el siguiente ejemplo ¿qué es un enlace y qué no lo es?:
No mezcles anuncios y enlaces. Aparentan ser enlaces pero son anuncios. ¿Cual es el anuncio y cual es el enlace? De nuevo: ¿qué es un enlace y qué no lo es? Y… ¿qué va a pensar acerca de esto el usuario?…
No ofusques tus URLs. Los usuarios pueden querer ver previamente dónde van a ser enviados con tu enlace poniendo el ratón encima y viendo la URL en la barra de estado. Evita utilizar redirecciones y servicios acortadores de URLs que hacen la URL totalmente opaca. Los usuarios no deberían tener que lanzarse al vacío y tener fe de que irán donde creen cuando hacen click en tus enlaces.
30 Comentarios (feed)
-
Fernando nos comenta:
Son muy buenos consejos todos, gracias por traducirlo y el trabajo del artículo ;)
Eso si, los amantes del MFA no estarán de acuerdo con lo de los enlaces patrocinados y lo de mezclar publicidad y enlaces :D
-
nadie nos comenta:
no hagas esto , no hagas lo otro, quien lo dice la iglesia ? jajajaa
y el libre albedrio ?
todos tenemos derecho a aprender de los errores :D -
jorgerock nos comenta:
Hace tiempo, no se si fuiste tú, el que me dio un link a la web de la W3C donde salían consejos similares, los cuales he intentado poner en práctica.
Aunque a veces cuando estás escribiendo un fast-post se me pasan algunos click aquí, o al menos eso creo.
-
Armonth nos comenta:
nadie: así está el original, obviamente cada uno debe coger estos consejos como crea más oportuno…
Jorgerock pues ahora mismo no me suena, pero sí: hay otros artículos parecidos…
-
Almorca nos comenta:
La verdad es que la mayoría de problemas que comenta el artículo yo los he padecido y es muy molesto por eso ahora intento evitarlos en los diseños web que realizo.
-
xotengo nos comenta:
Gracias por el trabajo y por su contenido. Intentaré recordar…..
-
Hannah nos comenta:
Por lo que he leido en este post, los artículos que escribo para mi blog son la muestra perfecta de todo lo que no se debe hacer, así que me aplico el cuento y te agradezco los consejos.
Un saludo muy cordial
Hannah -
Kids nos comenta:
Microsiervos tienen un clásico en este tema también:
http://www.microsiervos.com/archivo/weblogs/enlazar-es-importante.html
Sustituir el “click aquí” por otra cosa es lo que más complicado le resulta a la gente. Primero porque hay que darle a la cabeza y claro, eso cansa. Segundo porque se ha usado tantas veces que hay muchas personas que si ven el nombre de un programa enlazado a la web oficial no lo perciben y buscan por todo el texto el “haz click aquí para descargarlo” (¡juro que lo he visto!)
En este sentido para mí los reyes son la mayoría de los blogs comerciales. Son capacez de soltarte 5 párrafos hablando de un programa y ponerte el enlace al final y después de la fuente.
-
ayreonauta nos comenta:
¡Muerte a SnapShots!
-
jorgerock nos comenta:
Por cierto Armonth, no recuerdo un post tuyo con tantas imágenes :P
-
Aloriel nos comenta:
Y aun mejor si evitamos el uso de la palabra “click” por otra como “pulsar”.
-
Joxe nos comenta:
Muy buen artículo.
En el punto 8 creo que falta un “clic”, dónde dice “No todo el mundo va a hacer ¿?¿?¿? en tus enlaces”. -
Armonth nos comenta:
Kids muy cierto, mucha gente es vaga pero para pensar es vaga al cuadrado…
Jorgerock es cierto que no suelo poner aunque alguna hay con un número parecido de imágenes ;)
ayreonauta: uno más a bloquear… como no tenía ya bastante con los de ContentLink, Websnapr, Snap, etcétera…
Aloriel: en algunos casos pues sí, o al menos variar un poco y no todo el rato “click aquí, click allá” o “pulsa aquí, pulsa allá”…
Joxe: corregido.
-
jose nos comenta:
al hilo de este tema:
http://www.seisdeagosto.com/indica/affordance-un-boton-es-un-boton/ -
Doctor Lecter nos comenta:
Una de las grandes dudas: ¿Enlazo en esta misma ventana o en una nueva?
Cuando metemos 3 o 4 links, está claro que o se hace en otra ventana o el usuario se perderá navegando.
Pero si metemos siempre en una ventana nueva, puede resultar molesto para quien quiera ir diréctamente al link.Menos mal que Firefox nos ha resuelto la vida con sus pestañas (e IE le ha copiado)
-
Felipe nos comenta:
Podrías predicar con el ejemplo y ampliar/enmarcar el link hacia los comentarios de una noticia.
Es solo una sugerencia, no te lo tomes a mal. Seguiremos leyéndote ;-)
-
Jumber nos comenta:
Yo “peco” continuamente en lo que se refiere al punto 8.
Comparto la duda del Dr. Lecter respecto a enlazar en una nueva ventana o en la misma. Siempre opto por enlazar a una nueva ventana, temiendo que de otra manera el lector se pueda enredar y olvidar de leer mi entrada hasta el final. También porque yo acostumbro a abrir los enlaces en una nueva pestaña (firefox). Pero me pregunto si no estaré tratando de imponer mis costumbres al resto de usuarios…
-
Necesario nos comenta:
Lo mejor es llenar de boton tipo input type button, tu pagina y se vera estilo Windows 3.1 , Guindous suena a vomito… GUUUIIINDOOWWSS
-
totu nos comenta:
Doctor Lecter, no uses el argumento target, ya que acostumbra a evitar que el código pase el visto bueno del chequeador de código html del w3c.
El usuario se hace responsable de apretar “shift” si quiere una ventana nueva, “ctrl” si quiere una pestaña o nada si lo quiere en el mismo lugar que está navegando actualmente. -
juan carlos nos comenta:
No encuentro sufucientes argumentos para decir que poner un click esta mal, alguien podria ampliar este punto???
-
Gonzalo nos comenta:
Genial, yo escribí hace tiempo un artículo sobre los enlaces, pero éste está muy cerca de ser el definitivo :)
Gracias por la traducción. -
Iñaky Berzal nos comenta:
Buen post, enhorabuena. Creo que recopila lo que sería un manual de mejores prácticas de lo que es postear.
-
Beatriz López nos comenta:
Muy bueno este post, tanto para bloggers neófitos como yo. Muchas gracias por la traducción.
-
Sergio nos comenta:
Buenas,
Encontré este post y… aunque no acostumbro mucho a dejar comentarios me ha parecido interesante y quizás… puedo aportar algo.
Los enlaces son elementos muy importantes dentro de un documento web, por ello han de tratarse cómo se merecen.
Desde el punto de vista de la Accesibilidad, se toma especial cuidado y se establecen varias pautas importantes para hacer uso de ellos de una forma lógica.
El literal de un enlace, debe ser claro y conciso. No deben utilizarse enlaces de varias líneas ó con un texto excesivamente largo. Tampoco enlaces con el literal “pulsa este enlace” “pulsa aqui” “click aqui” … etc.
Un ejemplo: entre comillas el enlace.
Mal: Si quieres contactar con nosotros, “pulsa aquí”.
Bien: Si quieres contactar con nosotros, utilice el “formulario de contacto”.Un enlace debe indicar de forma clara cuál es la página a la que apunta. “Intrucciones de uso del producto RR”
Intentando responder a una de las preguntas de los comentarios, ¿qué razón debe convencerme de que el uso de “click” no es recomendado? Bien, siguiendo los puntos anteriores, qué un enlace debe ser claro y conciso, el hecho de que no sea recomendable se basa sobre todo en, sí el usuario pierde el contexto en el que se encuentra, le resultará mucho más complicado identificar el objetivo del enlace. El contexto se puede perder si el terminal con el que se navega es relativamente pequeño ó si el usuario utiliza algún tipo de ayudas técnicas, entiéndase por lectores de pantalla para gente con problemas de visualización, entre otros casos.
Debe utilizarse de forma razonable lo qué la etiqueta “a” nos permite, por ejemplo con el title. Sí tenemos enlaces que van a páginas externas a la nuestra, deberíamos indicarselo al usuario, en el title de ese enlace incluiríamos “enlace externo”. Sí se abre en nueva ventana… añadir al title “Se abre en una nueva ventana” …
Utilizar el title de forma que aporte información adicional, no sirve de mucho sí nuestro enlace lleva el literal “Contacto” y en el title de ese enlace ponemos “Ir a la página de Contacto”.
Respecto al subrayado, sobre todo a áquellos enlaces que se encuentran intercalados con contenido. En casos de enlaces de navegación o que pertenecen a la estructura de la web, son fácilmente identificables por los usuarios, siempre y cuando estén bien identificados los bloques de navegación de la página… menú principal, menú secundario, menú de migas…, etc etc
Espero con este comentario aportar algo más de luz al tema de los enlaces. Mientras tanto… a seguir enlazando! :)
Saludos -
tasssd nos comenta:
Lo del click aquí, se debe tener en cuenta que no todo el mundo maneja bien lo que es internet y que son los links, en según que casos yo lo veo bien
-
Lucía nos comenta:
Un artículo muy interesante, sobre todo para aquellos que estamos empezando en el mundo de los blogs. Gracias por la traducción!
-
klan nos comenta:
Me parece bn. lo pondre en mi blog, pondre el enlace acia aki (como fuente). si existe algun inconveniente porfavor avisarme para quitarlo.
saludos.
Atte:
klan -
Antonio nos comenta:
Yo usaría el target “_none”, el usuario debe de tener el control siempre, quiere ir a ese sitio, no quiere que le habran otra ventana y que lo relíen.
Si el contenido es bueno, volverá atrás para seguir leyendo, te agreagará a favoritos o lo que sea.
Si el contenido no es bueno… piénsatelo antes de enlazar o pon el enlace casi al final del post, es otra solución.
Yo lo veo así. Saludos a todos!!
-
Carlos Miragaya nos comenta:
A mí, Totu, en su correo del miércoles 7 de noviembre dw 2007, en este documento, me soluciona de una vez por todas la cuestión del target, la cuestión de lo que yo llamo para mí ‘navegación plana’. Antes abría ventana nueva siempre. Lo seguiría haciendo por siemple comodidad y sentido práctico: uno sale a ver x cosa y regresa, cierra la ventana, está donde estaba. Pero otros navegadores bastante usados no hacen esto y sin esto, la verdad, a mi personal entender, es tocar los co, y mucho.
El único punto que no comprendo pero lo he padecido mucho en mi navegación es el punto 6 No enölaces cosas que el usuario puede querer seleccionar y copiar. No lo comprendo. La persona es Ralph Waldo Emerson, ése es su nombre, ésa es su referencia, y de hecho al citar cosas concretas deben ser citadas completas porque evidentemente puede haber muchísimos otros Waldo Emerson pero que no son Ralph. Kids, de Microsiervos, tiene razón respecto a que “pensar” cansa. Yo soy de los que opina como Totu: el usuario debe hacerse responsable, debe ‘mover el culo’. A fin de cuestas, la WWW es lo que nosotros mismos hacemos de ella.
Gracias por la traducción.
Gracias por la publicación.
Gracias por esta charla. -
Armonth nos comenta:
Carlos el punto 6 se refiere a enlazar información de tal forma que, siendo atractiva como para ser copiada y posteriormente pegada, entorpezca dicha acción.
En el ejemplo, el nombre es difícil de enlazar porque está en una lista no numerada, sin punto al final de la misma ni texto entremedio del enlace lo cual hace que seleccionar ese texto sin activar el enlace sea molesto y/o complejo.
