Vínculos

Nota

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual.

Con un vínculo, los usuarios pueden navegar a otra página, ventana o tema de Ayuda; mostrar una definición; iniciar un comando; o elija una opción. Un vínculo es texto o un gráfico que indica que se puede hacer clic en él, normalmente mediante el uso de los colores del sistema de vínculos visitados o no visibles. Tradicionalmente, los vínculos también se subrayan, pero ese enfoque a menudo no es necesario y no tiene preferencia para reducir el desorden visual.

Cuando los usuarios mantienen el puntero sobre un vínculo, el texto del vínculo aparece como subrayado (si aún no lo estaba) y la forma del puntero cambia a una mano.

Un vínculo de texto es el control más ligero en el que se puede hacer clic y a menudo se usa para reducir la complejidad visual de un diseño.

Nota

Las directrices relacionadas con los vínculos de comandos y el diseño se presentan en artículos independientes.

¿Es este el control adecuado?

Para decidirte, intenta responder a estas preguntas:

• Es el vínculo que se usa para navegar a otra página, ventana o tema de Ayuda; mostrar una definición; iniciar un comando; o elegir una opción? Si no es así, usa otro control.
• ¿Sería mejor elegir un botón de comando? Use un botón de comando si:
  • El control inicia una acción inmediata, incluida la visualización de una ventana, y ese comando se relaciona con el propósito principal de la ventana.
  • Se muestra una ventana para recopilar la entrada o tomar decisiones, incluso si se trata de un comando secundario.
  • La etiqueta es corta, que consta de cuatro o menos palabras, evitando así la apariencia torpe de los botones largos.
  • El comando no está alineado.
  • El control aparece dentro de un grupo de otros botones de comando relacionados.
  • La acción es destructiva o irreversible. Dado que los usuarios asocian vínculos con la navegación (y la capacidad de volver a salir), los vínculos no son adecuados para los comandos con consecuencias significativas.
  • Del mismo modo, en un flujo de tareaso asistente, el comando representa el compromiso. En estas ventanas, los botones de comando sugieren compromiso, mientras que los vínculos sugieren navegar al paso siguiente.

Conceptos de diseño

Hacer que los vínculos sean reconocibles

Los vínculos carecen de prestaciones, lo que significa que sus propiedades visuales no sugieren cómo se usan y solo se comprenden a través de la experiencia. Los vínculos sin un subrayado y los colores del sistema de vínculos aparecen como texto normal; la única manera de determinar su comportamiento procede de su presentación, su contexto o colocando el puntero sobre ellos.

Sorprendentemente, esta falta de prestación suele ser una motivación para usar vínculos porque aparecen tan ligeras, lo que reduce la complejidad visual de un diseño. Los vínculos eliminan el marco visualmente pesado usado por los botones de comando y el borde utilizados por otros controles. Por ejemplo, aunque puede usar botones de comando para que los comandos principales sean obvios, puede elegir vínculos para los comandos secundarios para anular su énfasis.

Después, el desafío es mantener suficientes pistas visuales para que los usuarios puedan reconocer los vínculos. La guía fundamental es que los usuarios deben ser capaces de reconocer vínculos por inspección visual por sí solos que no deben tener que mantener el puntero sobre un objeto o hacer clic en él para determinar si es un vínculo.

Los usuarios pueden reconocer un vínculo por inspección visual solo si el vínculo usa los colores del sistema de vínculos y al menos una de las siguientes pistas visuales:

• Texto subrayado.
• Gráfico o viñeta, como con el texto con el patrón de vínculo de icono .
• Colocación dentro de una ubicación de navegación, opción o comando estándar, como el área de contenido de una ventana, o en una barra de navegación, barra de menús, barra de herramientas o pie de página.

Los usuarios también pueden reconocer un vínculo mediante la inspección visual con las siguientes pistas visuales, pero estas pistas no son suficientes por sí mismos:

• Texto que sugiere hacer clic, como un comando que comienza con un verbo imperativo como Mostrar, Imprimir, Copiar o Eliminar.
• Colocación dentro de un bloque de texto normal.

Por supuesto, los usuarios siempre pueden determinar un vínculo a través de la interacción al mantener el puntero o hacer clic. Si la detección de un vínculo no es necesaria para ninguna tarea significativa, puede desacentar dichos vínculos.

En este ejemplo, Contact Us, Terms of Use, Trademarks, and Privacy Statement son vínculos. Se desacentan intencionadamente porque no son necesarios para ninguna tarea importante. Las únicas pistas de que son vínculos son que tienen un puntero del mouse sobre el mouse y se colocan en un área de navegación estándar en la parte inferior de la ventana.

Hacer vínculos específicos, relevantes y predecibles

El texto del vínculo debe indicar el resultado de hacer clic en el vínculo.

Los vínculos específicos son más atractivos para los usuarios que los vínculos generales, por lo que usa etiquetas de vínculo que proporcionan información descriptiva específica sobre el resultado de hacer clic en el vínculo. Sin embargo, asegúrese de que el texto del vínculo no sea tan específico que sea engañoso y desaliente el uso adecuado.

Es más probable que los vínculos concisos sean leídos que los vínculos detallados. Elimine texto y detalles innecesarios. Las etiquetas de vínculo no tienen que ser completas.

Para evaluar el texto del vínculo:

• Asegúrese de que el texto del vínculo refleja los escenarios que admite el vínculo.
• Asegúrese de que los resultados del vínculo son predecibles. Los usuarios no deben sorprenderse por los resultados.

Si sólo haces dos cosas...

1. Hacer que los vínculos se puedan detectar solo mediante la inspección visual. Los usuarios no deben tener que interactuar con el programa para encontrar vínculos.

2. Use vínculos que proporcionen información descriptiva específica sobre el resultado de hacer clic en el vínculo, utilizando tanto texto como sea necesario. Los usuarios deben poder predecir con precisión el resultado de un vínculo a partir de su texto de vínculo y información sobre información opcional.

Patrones de uso

Los vínculos tienen varios patrones funcionales:

Uso	Ejemplo
Vínculos de navegación Vínculo usado para navegar a otra página o ventana.	Al hacer clic en el vínculo, se desplaza a otra página, como en una ventana o asistente del explorador; o muestra una nueva ventana. A diferencia de los vínculos de tareas, la navegación no inicia una tarea, sino que simplemente navega a otro lugar o continúa con una tarea ya en curso. La navegación implica seguridad porque el usuario siempre puede volver. Titulares de noticias En este ejemplo, al hacer clic en el vínculo, se desplaza a la página Noticias de titulares.
Vínculos de tareas Vínculo que se usa para iniciar un nuevo comando.	Al hacer clic en el vínculo, se realiza un comando inmediatamente o se muestra un cuadro de diálogo o una página para recopilar más entradas. A diferencia de los vínculos de navegación, los vínculos de tareas inician una nueva tarea en lugar de continuar con una tarea existente. Las tareas no implican que los usuarios de seguridad no puedan revertir al estado anterior con un comando Back. Los vínculos de tareas se denominan para evitar confusiones con los vínculos de comandos. Iniciar sesión En este ejemplo, al hacer clic en el vínculo se inicia un comando de inicio de sesión.
Vínculos a la Ayuda Vínculo de texto usado para mostrar un tema de Ayuda.	Al hacer clic en el vínculo se muestra un artículo de Ayuda en una ventana independiente. ¿Qué es una contraseña segura? En este ejemplo, al hacer clic en el vínculo se muestra una ventana de Ayuda con el tema especificado.
Vínculos de definición un vínculo de texto usado para mostrar una definición en una información sobre información cuando el usuario hace clic o mantiene el puntero sobre el vínculo.	este patrón es útil para definir términos que pueden no conocerse a los usuarios sin agregar desorden de pantalla. En este ejemplo, se muestra la definición de información sobre información.
Vínculos de menú un conjunto de vínculos de tareas usados para crear un menú.	dado que el contexto del menú indica un conjunto de vínculos, el texto no suele estar subrayado (excepto al mantener el puntero) y podría no usar los colores del sistema de vínculos. En este ejemplo, un conjunto de vínculos crea un menú.
Vínculos de opción una opción seleccionada o su marcador de posición, donde al hacer clic en el vínculo se invoca un comando para cambiar esa opción.	a diferencia de los vínculos de texto normales, el vínculo cambia su texto para reflejar la opción seleccionada actualmente y siempre se dibuja con el color del vínculo no visualizado. en el ejemplo de la izquierda se muestra una regla del Asistente para reglas de Microsoft Outlook con opciones de marcador de posición. después de que los usuarios hagan clic en los vínculos y seleccionen algunas opciones, el ejemplo derecho actualiza el texto del vínculo para mostrar los resultados. usar vínculos de opción es especialmente adecuado si las opciones tienen un formato variable. en el ejemplo de la derecha se muestra que las reglas de Outlook tienen un formato de variable. En el ejemplo de la izquierda se muestra un vínculo de opción. Se convierte en una lista desplegable cuando se selecciona, como se muestra a la derecha.

Los vínculos también tienen varios patrones de presentación:

Uso	Ejemplo
Vínculos de texto sin formato solo constan de texto.	esta presentación es la más flexible, ya que se puede usar en cualquier lugar, incluida la línea. En este ejemplo, el color del texto identifica claramente un vínculo insertado.
Texto con vínculos de icono texto con un icono anterior que indica su función.	dado que el gráfico proporciona una indicación visual adicional de un vínculo, es más fácil reconocerlo como un vínculo que un vínculo de texto sin formato que no está subrayado. Este patrón suele usar un icono de 16 x 16 píxeles. en este ejemplo, los iconos proporcionan una indicación visual adicional de un vínculo. En este ejemplo, el símbolo de reproducción triangular estándar indica que este texto es un comando.
Vínculos de solo gráficos consta solo de un gráfico.	dada la falta de un vínculo de texto, no hay ningún color de vínculo ni subrayado para indicar el vínculo. Estos vínculos dependen del diseño gráfico para sugerir clic o texto dentro del gráfico que sugiere una acción cuando los usuarios hacen clic. los vínculos de solo gráfico a veces tienen un efecto sobre el mouse para indicar el vínculo. este enfoque ayuda, pero no se puede detectar solo mediante la inspección visual. En este ejemplo, la inspección visual no puede detectar el vínculo por sí solo. Debido a sus posibles problemas de reconocimiento y localización, no se recomiendan vínculos de solo gráficos como la única manera de realizar una tarea.

Instrucciones

Interacción

• Muestra un puntero ocupado si el resultado de hacer clic en un vínculo no es instantáneo. Sin comentarios, los usuarios pueden suponer que el clic no se ha producido y que vuelve a hacer clic.

Color

• Use los colores del sistema de temas o vínculos para los vínculos visitados y no supervisados. El significado de estos colores es coherente en todos los programas. Si por alguna razón los usuarios no les gustan estos colores (quizás por motivos de accesibilidad), pueden cambiarlos por sí mismos.

• Para los vínculos de navegación, use diferentes colores para los vínculos visitados y no supervisados. Mantenga el historial de vínculos visitados solo durante la duración de la instancia del programa. El color visitado es importante para indicar dónde ya han estado los usuarios, lo que impide que vuelvan a visitar involuntariamente las mismas páginas repetidamente.

• Para otros tipos de vínculos, no use el color del vínculo visitado. Por ejemplo, no hay un valor suficiente para identificar los comandos "visitados".

• No colorear el texto que no es un vínculo porque los usuarios pueden suponer que es un vínculo. Use negrita o un tono de gris en el que, de lo contrario, usaría texto coloreado.

• Excepción: puede usar texto coloreado si todos los vínculos están subrayados o se colocan dentro de las ubicaciones de navegación o comandos estándar.

  Incorrecto:

  

  En este ejemplo, el texto azul se usa incorrectamente para el texto que no es un vínculo.

• Use colores de fondo que contrastan con los colores del vínculo. El color del sistema de ventanas siempre es una buena opción.

  Incorrecto:

  

  En este ejemplo, el color de fondo proporciona un contraste deficiente con el color del vínculo.

Subrayando

• En el caso de los vínculos necesarios para realizar una tarea principal, proporcione pistas visuales para que los usuarios puedan reconocer vínculos por inspección visual por sí solo. Estas pistas incluyen esquematización, gráficos o viñetas y ubicaciones de vínculos estándar. Los usuarios no deben tener que mantener el puntero sobre un objeto o intentar hacer clic en él para determinar si es un vínculo. Use texto subrayado si el vínculo no es obvio desde su contexto.
• No subrayado el texto que no es un vínculo porque los usuarios pueden suponer que es un vínculo. Use cursiva donde, de lo contrario, usaría texto subrayado. Reserve la inclusión solo para los vínculos.
• Al imprimir, no imprima subrayados ni colores de vínculo. Los vínculos impresos no tienen ningún valor y son potencialmente confusos.

Texto con vínculos de icono

• Use el icono de flecha solo para los vínculos de comandos. Los vínculos normales no deben usar el icono de flecha a menos que se usen como sustituto de los vínculos de comandos en Windows XP.
• Coloque el icono a la izquierda del texto. El icono debe conducir al texto visualmente.

Correcto:

Incorrecto:

En el ejemplo incorrecto, el icono no conduce al texto.

• Haga que el resultado de hacer clic en el icono sea el mismo que hacer clic en el texto. De lo contrario, sería inesperado y confuso.

Vínculos de solo gráficos

• No use vínculos de solo gráficos. Los usuarios tienen dificultades para reconocerlos como vínculos y cualquier texto dentro del gráfico (que se usa para indicar su acción al hacer clic) crea un problema de localización.

Vínculos de navegación

• Asegúrese de que los vínculos de navegación no requieren compromiso. Los usuarios siempre deben poder volver al estado inicial, ya sea usando Atrás para la navegación en el lugar o Cancelar para cerrar una nueva ventana.

• Vincular a contenido específico en lugar de contenido general. Por ejemplo, es mejor vincular a la sección pertinente de un documento que vincular al principio.

• Use un vínculo solo si el material vinculado es relevante, útil y no redundante. El uso de restricciones en los vínculos de navegación no los usa solo porque puede.

• Si un vínculo navega a un sitio externo, coloque la dirección URL en la información sobre información para que los usuarios puedan determinar el destino del vínculo.

• Vincule solo la primera aparición del texto del vínculo. Los vínculos redundantes son innecesarios y pueden dificultar la lectura del texto.

  Correcto:

  La carpeta Imágenes facilita el uso compartido de las imágenes. Puede usar las tareas de Imágenes para enviar sus imágenes por correo electrónico o publicarlas en una ubicación segura y privada en la Web. También puede imprimir las imágenes directamente desde la carpeta Imágenes.

  Incorrecto:

  La carpeta Imágenes facilita el uso compartido de las imágenes. Puede usar las tareas de Imágenes para enviar sus imágenes por correo electrónico o publicarlas en una ubicación segura y privada en la Web. También puede imprimir las imágenes directamente desde la carpeta Imágenes.

  En el ejemplo correcto, solo se vincula la primera aparición del texto pertinente.

  Excepciones:

  • Si una instrucción tiene un vínculo, coloque el vínculo en la instrucción .

    El uso de contraseñas seguras es muy importante. Para obtener más información, consulte Contraseñas seguras.

    En este ejemplo, el vínculo está en la instrucción en lugar de en la primera aparición.

  • Vincule a apariciones posteriores si están lejos de la primera. Por ejemplo, puede vincular redundantemente en diferentes secciones dentro de un tema de Ayuda.

Vínculos de tareas

• Use vínculos de tareas para comandos que no sean destructivos o que sean fácilmente reversibles. Dado que los usuarios asocian vínculos con la navegación (y la capacidad de volver a salir), los vínculos no son adecuados para los comandos con consecuencias significativas. Los comandos que muestran un cuadro de diálogo o una confirmación son una buena opción.

  Correcto:

  Inicio

  Stop

  Incorrecto:

  Eliminar archivo

  En el ejemplo incorrecto, el comando es destructivo.

Vínculos de menú

• Agrupar vínculos de navegación y tareas relacionados en menús. Un menú de vínculos relacionados colocados dentro de una ubicación de comandos o navegación estándar facilita la búsqueda y comprensión de los vínculos que cuando se colocan por separado.

• Para los menús dependientes de la selección, quite los vínculos de menú que no se aplican. No los deshabilites. Al hacerlo, se elimina el desorden y los usuarios no perderán los vínculos que requieren selección.

• Para los menús independientes de selección, deshabilite los vínculos de menú que no se aplican. No los quite. Al hacerlo, los menús son más estables y estos vínculos son más fáciles de encontrar.

  

  En este ejemplo de Windows Update, se realiza una actualización, por lo que el comando Buscar actualizaciones está deshabilitado en lugar de quitarlo.

Información sobre vínculos

• Si un vínculo requiere una explicación adicional, proporcione la explicación en una explicación complementaria en un control de texto independiente o en unainformación sobre información, pero no en ambas. Use oraciones completas y puntuación final. Proporcionar ambos es innecesario si el texto es el mismo y confuso si el texto es diferente.

  

  En este ejemplo, una explicación complementaria proporciona más información sobre el vínculo.

  

  En este ejemplo, una información sobre información proporciona más información.

• No proporcione información sobre información que sea simplemente una restaplicación del texto del vínculo.

  Incorrecto:

  

  En este ejemplo, la información sobre información corre el riesgo de molestar a los usuarios por su repetición.

Texto

• No asigne una clave de acceso. Se accede a los vínculos mediante la tecla Tab.

• Use vínculos que proporcionen información descriptiva específica sobre el resultado de hacer clic en el vínculo, utilizando tanto texto como sea necesario. El texto del vínculo debe indicar el resultado de hacer clic en el vínculo. Los usuarios deben poder predecir con precisión el resultado de un vínculo a partir de su texto de vínculo y información sobre información opcional.

  Incorrecto:

  

  En este ejemplo, aunque el vínculo parezca importante, su etiqueta es demasiado general. Es más probable que los usuarios hagan clic en un vínculo más específico.

• Para los vínculos insertados:

  • Conserve las mayúsculas y los signos de puntuación del texto.

  • No incluya signos de puntuación final en el vínculo a menos que el texto sea una pregunta.

  • Vincular en la parte más relevante del texto y elegir texto de vínculo lo suficientemente grande como para ser fácil de hacer clic.

    Correcto:

    Vaya a un grupo de noticias.

    Incorrecto:

    Vaya a un grupo de noticias.

    En estos ejemplos, "Go" no es la parte más relevante del texto y no es lo suficientemente grande como para hacer un buen destino de clic, mientras que "grupo de noticias" es.

  • Evite colocar dos vínculos insertados diferentes entre sí. Es probable que los usuarios creen que son un único vínculo.

    Incorrecto:

    Para más información, consulte Instrucciones de experiencia de usuario.

    En este ejemplo, "UX" y "guidelines" son dos vínculos diferentes.

• Para vínculos independientes (no insertados):

  • Use mayúsculas de estilo de oración.
  • No use la puntuación final a menos que el vínculo sea una pregunta.
  • Use todo el texto como vínculo.

• Use vínculos que se diferencian claramente de los demás vínculos en la pantalla. Los usuarios deben poder predecir y diferenciar con precisión entre los destinos de vínculo.

  Incorrecto:

  Búsqueda de software antivirus

  Obtener software antivirus

  Correcto:

  Cómo saber si está instalado el software antivirus

  Instalación de software antivirus

  En el ejemplo incorrecto, la distinción entre los dos vínculos no está clara.

• No agregue Clic o Haga clic aquí para el texto del vínculo. No es necesario porque un vínculo implica hacer clic. Además, haga clic aquí y aquí solo no transmita información sobre el vínculo cuando lo lea un lector de pantalla.

  Incorrecto:

  Haga clic aquí para obtener una descripción.

  Correcto:

  Descripción

  En los ejemplos incorrectos, "haga clic aquí" sin decir y no transmite información sobre el vínculo.

Vínculos de navegación

• Inicie el vínculo con un sustantivo y describa claramente dónde irá haciendo clic en el vínculo. No uses puntuación final. En ocasiones, es posible que tenga que iniciar vínculos de navegación con un verbo, pero no use verbos que reiteran la navegación que ya está implícita por el hecho de vincular, como Ver, Abrir o Ir a.

• Presente un vínculo de navegación como una dirección URL si navega a una página web y espera que los usuarios de destino recuperen la dirección URL y lo escriban en un explorador. Si es posible, diseñe estas direcciones URL para que sean cortas y fáciles de recordar.

• Si el vínculo incluye una dirección URL a un sitio web a partir de "www", omita el nombre del protocolo https:// y use texto en minúsculas.

  Incorrecto:

  https://www.microsoft.com

  www.microsoft.com

  Correcto:

  microsoft.com

  En los ejemplos incorrectos, los "https://" y "www" van sin decir.

Vínculos de tareas

• Inicie el vínculo con un verbo imperativo y describa claramente la tarea que realiza el vínculo. No uses puntuación final.

• Finalice el vínculo con puntos suspensivos si el comando necesita información adicional (incluida una confirmación) para completarse correctamente. No use puntos suspensivos cuando la finalización correcta de la tarea sea mostrar otra ventana solo cuando se necesite información adicional para realizar la tarea.

  Imprimir...

  En este ejemplo, print... Vínculo de comando muestra un cuadro de diálogo Imprimir para recopilar más información.

  Imprimir

  Por el contrario, en este ejemplo, un vínculo de comando Imprimir imprime una sola copia de un documento en la impresora predeterminada sin ninguna interacción adicional del usuario.

  El uso adecuado de los puntos suspensivos es importante para indicar que los usuarios pueden tomar más decisiones antes de realizar la tarea o cancelar la tarea por completo. La indicación visual que ofrece un botón de puntos suspensivos permite a los usuarios explorar el software sin miedo.

• Si es necesario, finalice un vínculo de tarea con "now" para distinguirlo de un vínculo de navegación.

  Descarga de archivos

  Descargar archivos ahora

  En este ejemplo, "Descargar archivos" navega a una página para descargar archivos, mientras que "Descargar archivos ahora" realiza realmente el comando .

Vínculos a la Ayuda

Para obtener instrucciones y ejemplos, consulte Ayuda.

Información sobre vínculos

• Use oraciones completas y puntuación final.

Para obtener más instrucciones y ejemplos, consulte Información sobre herramientas e información.

Documentación

Al hacer referencia a vínculos:

• Use el texto exacto del vínculo, incluida su mayúscula, pero no incluya los puntos suspensivos.
• Para describir la interacción del usuario, use haga clic.
• Cuando sea posible, dé formato al texto del vínculo con texto en negrita. De lo contrario, coloque el texto del vínculo entre comillas solo si es necesario para evitar confusiones.

Ejemplo: para iniciar el examen, haga clic en Examinar un equipo.