La pregunta es bastante simple: ¿los links/hipervínculos deberían abrirse en la misma pestaña/ventana, en una nueva ficha, o una nueva ventana? la respuesta, en cambio, no es tan simple… (a lo largo del resto del artículo llamaré vínculo al elemento HTML <a>, para no confundirlo con el elemento HTML <link>).

He leído en comentarios de blogs o en sitios de preguntas y respuestas como UX Stack Exchange, y muchos desarrolladores y diseñadores web coinciden en que los vínculos deben abrirse donde el navegador lo indique; por defecto los navegadores más populares abren los vínculos en la misma pestaña/ventana, a menos que el usuario haya indicado lo contrario en la configuración del navegador (pero sabemos que los usuarios nunca tocan la configuración, a menos que sean desarrolladores o diseñadores web… en fin). Yo daré la respuesta que considero más sensata: depende del caso.

Navegando en tu Sitio Web

Para evitar ambigüedades, llamaremos Sitio Web al conjunto de páginas web (estáticas o dinámicas) destinadas principalmente a mostrar información al usuario; aun cuando estas puedan tener formularios, cuadros de búsqueda, o permitan hacer compras online. En tu sitio web personal o el de tu empresa normalmente habrá varios vínculos internos que te llevarán de un lugar a otro dentro del mismo sitio web: vínculos a la página principal, a la sección de productos y servicios, a la sección de contacto, a la galería de imágenes… estos vínculos de navegación interna deberían siempre abrirse en la misma ventana porque el usuario espera permanecer en tu sitio web, y podría ser incómodo tener varias ventanas del mismo sito abiertas a la vez.

Para ilustrar este caso imagina que te encuentras en la sección de productos de un sitio web de una empresa: al hacer clic en un producto se abre la página de detalle de ese artículo en la misma ventana; una vez que el usuario haya leído la información presionará el botón Atrás del navegador para volver a la página del catálogo. Lo mismo ocurre en los sitios web de noticias, donde los lectores se sitúan en la portada o página principal, abren uno a uno los artículos con titulares interesantes, y presionan el botón Atrás del navegador para regresar a la portada.

En estos dos escenarios lo más natural parece ser que el usuario tenga abierta una sola página del sitio web a la vez, para lo cual el desarrollador/diseñador web debe crear los vínculos de este modo:

<a href="productos/linea-blanca"
   alt="Catálogo de Línea Blanca"
   >Catálogo de Línea Blanca</a>

Así, los vínculos se abrirán por defecto en la misma ventana; esto, además deja abierta la posibilidad de que el usuario abra el vínculo en una nueva ventana presionando Ctrl o command al hacer clic sobre él, si lo desea.

Si los vínculos son solo para navegación interna lo más recomendable es que los urls sean relativos; esto es en parte porque no puedes saber de antemano si tendrás que cambiar dominio de tu web más adelante; adicionalmente será más fácil probar la navegación tu web en un servidor local antes de montarlo en el definitivo.

Buscando más Información

Ahora bien, no todos los vínculos internos son para navegación. Por ejemplo, puedes tener vínculos que muestren información de ayuda para llenar el formulario que estés viendo. En ese caso el vínculo no debería abrirse en la misma ventana porque haría perder tiempo al usuario: esta es una situación en la cual el usuario necesitará tener dos páginas del mismo sitio web abiertas a la vez.

Para ello, el vínculo debe tener establecido el atributo target como se muestra a continuación:

<a href="ayuda/formulario-soporte"
   target="_blank"
   alt="Ayuda del formulario de soporte"
   >¿Cómo registrar una solicitud de soporte?</a>

Con esto, el vinculo se abrirá normalmente en una nueva pestaña en la misma ventana del navegador.

Otro caso relacionado al anterior se refiere a los vínculos externos, por ejemplo este <a title=»Elemento » href=»http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element» target=»_blank» rel=»noopener»><a>; si haces clic en él verás que se abre en una nueva ventana, pero con una diferencia importante respecto al ejemplo anterior: no es una página dentro de mi blog, sino un sitio web diferente.

Personalmente creo que la mayoría de los vínculos externos deberían abrirse en una nueva ventana, o de otro modo el usuario tendrá que presionar atrás frecuentemente para regresar. Ahora, esto no tiene porqué ser considerado una regla; veamos por ejemplo a Google: por ser un buscador, la mayoría de sus resultados serán vínculos externos, pero considerando que es muy bueno filtrando resultados es de esperarse que cuando el usuario abra un vínculo éste tenga la información que necesita, por lo cual la página de resultados ya no es necesaria y es lógico reemplazarla con la nueva url. Lo mismo puede aplicarse a las páginas a las que llegas luego de cerrar tu sesión en algún sitio web.

Un tercer caso para incluir en esta sección se refiere a los vínculos de descarga de archivos. Si se le ofrece al usuario un archivo (por ejemplo un pdf) para su descarga mediante un vínculo, lo correcto según la especificación será indicar en la definición del vínculo que se desea que el usuario descargue el archivo.

<a href="archivos/manual-1078.pdf"
   download="manual-de-usuario-v2.pdf"
   alt="Manual de usuario"
   >Descargar manual de usuario</a>

Si el atributo download no está presente, normalmente el navegador intentará abrir el archivo en la misma página (si cuenta con un visualizados apropiado); pero cuando el atributo download está presente éste le indica al navegador que el url de destino es un archivo que «probablemente» el usuario desea descargar, por lo que al hacer clic podría preguntar al usuario si desea abrir el archivo o descargarlo, o tal vez comience la descarga inmediatamente (aunque el comportamiento exacto dependerá de cada navegador y de las preferencias del usuario, ya que este atributo es solo una sugerencia para el navegador). Adicionalmente, si el atributo tiene un valor asignado, ese valor podría ser usado por el navegador como nombre por defecto del archivo a descargar.

Los casos explicados en esta segunda sección aplican tanto para sitios web como para aplicaciones web, aunque para estas últimas debemos considerar un último caso… pero primero veamos un poco de historia.

Una breve historia sobre los atributos target y rel

El atributo target fue creado originalmente para ser usado en conjunto con los <frameset> para indicar en cual <frame> debían abrir los vínculos, y era perfectamente aceptable usarlo en HTML4, pero en HTML4 Strict y XHTML 1 Strict los <frame> eran considerados obsoletos, por lo que el atributo target de los vínculos perdió su utilidad inicial. Por un tiempo en HTML5 también se consideró obsoleto, pero fue re-introducido poco después y actualmente forma parte de la especificación oficial.

Hasta no hace mucho, en HTML5 el atributo rel podía tener el valor especial external para indicar que el vínculo apunta a una url fuera del sitio web actual; pero actualmente el valor external ya no forma parte de la especificación. Aparentemente fue retirado porque era usado principalmente para dar un estilo diferente a los vínculos externos (por ejemplo: colocándoles una pequeña flecha o un color diferente, como lo hace Wikipedia), aunque no pude encontrar ninguna referencia de apoyo.

Trabajando en tu Aplicación Web

Llamaremos Aplicación Web, al conjunto de páginas (casi exclusivamente dinámicas) destinadas principalmente a proporcionar al usuario herramientas para ejecutar acciones.

Para aclarar esta definición, consideremos los sitios de venta como Amazon o Mercado Libre; Si bien estas webs proporcionan mucha información en pantalla, la principal utilidad que tienen para los usuarios es que permiten ubicar, comparar y comprar productos, hacer preguntas a los vendedores, o promocionar y vender tus propios productos, pagar tus cuentas, participar en subastas, etc. En algunos casos, algunas empresas o instituciones cuentan tanto con un sitio web (e.g. el sitio web principal de tu banco) como una aplicación web (e.g. una web del mismo banco donde los clientes registrados pueden realizar transacciones bancarias).

Si bien, en las aplicaciones web podemos encontrar todos los casos de vínculos antes mencionados, en este caso será muy común tener que abrir temporalmente una página en una nueva ventana (no una nueva pestaña) y usualmente será deseable que tenga un tamaño especifico apropiado para el contenido.

Un ejemplo de esto se encuentra en la página web de mi banco: dentro del sitio web principal se encuentra un vínculo para abrir la aplicación web donde se realizan las operaciones bancarias. Si bien, es un vínculo interno común (como lo describo en la primera sección), el clic del usuario es interceptado por Javascript para hacer que se abra en una nueva ventana que cubre aproximadamente el tamaño de la pantalla. Veamos el html:

<a href="aplicacion-banco/login"
   id="link-app-banco"
   alt="Acceso de clientes"
   >Acceso de clientes</a>

y el Javascript:

document.getElementById('link-app-banco').addEventListener('click', function(e){
  e.preventDefault();
  window.open('aplicacion-banco/login', '_blank', 'width=1000,height=750');
}, false);

De este modo, al hacer clic sobre el vínculo se abrirá una nueva ventana del tamaño indicado en la función window.open; un vínculo como este sigue siendo válido, por cuanto el código Javascript solo le agrega una funcionalidad adicional (el tamaño) sin cambiar la semántica original.

Otra situación por la cual querrías abrir varias ventanas a la vez en una aplicación web (como si fuera una aplicación de escritorio) se presenta cuando el usuario necesita consultar una o más fuentes de información en la misma aplicación para completar una tarea; por ejemplo, si el usuario necesita ver un listado de artículos disponibles mientras registra un nuevo pedido, a la vez que consulta su estado de cuenta para ver cuando se vencerá su última factura pendiente.

Ahora bien, si tu aplicación web va a dar soporte a varias ventanas abiertas a la vez, tal vez debas considerar cambiar los vínculos por botones; así, el usuario podrá diferenciar entre los vínculos «reales» (usados para navegar) y los botones (usados para ejecutar acciones, como abrir o guardar un formulario).

En líneas generales, creo que es importante detenerse un momento y hacerte a ti mismo unas preguntas antes de decidir que hacer con un vínculo:

• ¿Para qué querría el usuario hacer clic en un vínculo?
• ¿Que espera el usuario que ocurra al hacer clic?
• ¿Que hará el usuario luego de hacer clic?
• ¿Debería cambiar el vínculo por un botón?
• Si envío al usuario a otra página u otro sitio web ¿querrá regresar? ¿sabrá como hacerlo?

La idea principal no es seguir reglas rígidas, como abrir todos los vínculos locales en la misma ventana y los externos en una nueva (¿para que no abandonen tu sitio web?), ni tomar decisiones al azar, sino que decidas conscientemente la estrategia de navegación que mejor se adapte a las necesidades de los usuarios de tu sitio o aplicación web.

Derecho de uso

Los contenidos generados por el autor de este artículo (explicaciones, código fuente, y archivos adjuntos creados por el autor) están disponibles bajo licencia CC BY-SA 3.0, y pueden ser usados, derivados y compartidos bajo los términos indicados en la misma. Los contenidos no generados por el autor de este artículo son propiedad de sus respectivos dueños y están regidos por las licencias que estos hayan dispuesto.

Cita del día

It is easy to ignore responsibility when one is only an intermediate link in a chain of action.Stanley_Milgram