Texto de la interfaz de usuario

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.

El texto de la interfaz de usuario aparece en las superficies de la interfaz de usuario. Este texto incluye etiquetas de control y texto estático:

  • Las etiquetas de control identifican los controles y se colocan directamente en los controles o junto a los controles.
  • Texto estático, que se denomina porque no forma parte de un control interactivo, proporciona a los usuarios instrucciones detalladas o explicaciones para que puedan tomar decisiones informadas.

Nota: Las directrices relacionadas con el estilo y el tono, las fuentes y las etiquetas de control de comon se presentan en artículos independientes.

Patrones de uso

El texto de la interfaz de usuario tiene varios patrones de uso:

Uso Descripción
Texto de la barra de título
use el texto de la barra de título para identificar una ventana o el origen de un cuadro de diálogo.
captura de pantalla de la barra de título de las opciones de carpeta
En este ejemplo, el texto de la barra de título identifica una ventana.
Instrucciones principales
use la instrucción principal destacada para explicar concisamente qué hacer en la ventana o página.
La instrucción debe ser una instrucción específica, una dirección imperativa o una pregunta. Las buenas instrucciones principales comunican el objetivo del usuario en lugar de centrarse solo en manipular la interfaz de usuario.
captura de pantalla de la pregunta: ¿desea obtener ayuda más reciente?
En este ejemplo, el texto de la instrucción principal interactúa directamente con el usuario con una pregunta en términos de beneficio o interés del usuario.
Instrucciones complementarias
cuando sea necesario, use una instrucción complementaria para presentar información adicional útil para comprender o usar la ventana o la página.
Puede proporcionar información más detallada, proporcionar contexto y definir terminología. Las instrucciones complementarias se elaboran sobre la instrucción principal sin simplemente volver a formular su redacción.
captura de pantalla del texto al cambiar a la cuenta de administrador
En este ejemplo, las instrucciones complementarias proporcionan dos posibles cursos de acción que se realizarán en respuesta a la información presentada en la instrucción principal.
Etiquetas de control
etiquetas directamente en o junto a controles.
captura de pantalla de las opciones del reloj de escritorio
En este ejemplo, las etiquetas de control identifican la configuración del reloj de escritorio que los usuarios pueden seleccionar o modificar.
Explicaciones complementarias
una elaboración de las etiquetas de control (normalmente para vínculos de comandos, botones de radio y casillas).
Captura de pantalla que muestra un cuadro de diálogo de configuración de seguridad.
En este ejemplo, las explicaciones complementarias aclaran las opciones.

Conceptos de diseño

A menudo, los desarrolladores de software piensan en texto como relegados a la documentación del producto y al soporte técnico. "Primero escribiremos el código y, a continuación, contrataremos a alguien para ayudarnos a explicar lo que hemos desarrollado". Sin embargo, en realidad, el texto importante se escribe anteriormente en el proceso, ya que la interfaz de usuario se ha concebido y codificado. Este texto es, después de todo, visto con más frecuencia y por más personas que tal vez cualquier otro tipo de escritura técnica.

El texto comprensible es fundamental para una interfaz de usuario eficaz. Los escritores y editores profesionales deben trabajar con desarrolladores de software en texto de la interfaz de usuario como parte integral del proceso de diseño. Hacer que funcionen con texto temprano porque los problemas de texto a menudo revelan problemas de diseño. Si su equipo tiene problemas para explicar un diseño, a menudo es el diseño, no la explicación, que necesita mejorar.

Un modelo de diseño para el texto de la interfaz de usuario

A medida que piense en el texto de la interfaz de usuario y su colocación en las superficies de la interfaz de usuario, tenga en cuenta estos hechos:

  • Durante la lectura inmersiva, las personas leen en un orden de izquierda a derecha y de arriba abajo (en las culturas occidentales).
  • Al usar software, los usuarios no se sumergen en la propia interfaz de usuario, sino en su trabajo. Por lo tanto, los usuarios no leen el texto de la interfaz de usuario que examinan.
  • Al examinar una ventana, es posible que los usuarios parezcan leer texto cuando en realidad lo están filtrando. A menudo no comprenden realmente el texto de la interfaz de usuario a menos que perciban la necesidad de hacerlo.
  • Dentro de una ventana, los distintos elementos de la interfaz de usuario reciben distintos niveles de atención. Los usuarios tienden a leer primero las etiquetas de control, especialmente aquellas que parecen relevantes para completar la tarea a mano. Por el contrario, los usuarios tienden a leer texto estático solo cuando creen que necesitan.

En el caso de un modelo de diseño general, no suponga que los usuarios lean cuidadosamente el texto en un orden de izquierda a derecha y de arriba abajo. En su lugar, supongamos que los usuarios comienzan por examinar rápidamente toda la ventana y, a continuación, leer texto de la interfaz de usuario en aproximadamente el orden siguiente:

  • Controles interactivos en el centro
  • Botones de confirmación
  • Controles interactivos encontrados en otro lugar
  • Instrucción principal
  • Explicaciones complementarias
  • Título de la ventana
  • Otro texto estático en el cuerpo principal
  • Notas al pie

También debe suponer que una vez que los usuarios han decidido qué hacer, dejarán de leerlo y lo harán inmediatamente.

Eliminación de la redundancia

El texto redundante no solo toma un espacio de pantalla valioso, sino que debilita la eficacia de las ideas o acciones importantes que intenta transmitir. También es un desperdicio del tiempo del lector, y todo más en un contexto en el que el examen es la norma. Windows se esfuerza por explicar lo que los usuarios deben hacer una vez bien y concisamente.

Revise cada ventana y elimine palabras e instrucciones duplicadas, tanto dentro como entre controles. No evite texto importante; sea explícito siempre que sea necesario, pero no sea redundante y no explique lo obvio.

Evitar la comunicación excesiva

Incluso si el texto no es redundante, simplemente puede ser demasiado wordy en un esfuerzo para explicar cada detalle. Demasiado texto desalenta la lectura; el ojo tiende a omitirse hacia la derecha sobre ella, lo que da lugar a menos comunicación en lugar de más. En el texto de la interfaz de usuario, comunique concisamente la información esencial. Si es necesario obtener más información para algunos usuarios o algunos escenarios, proporcione un vínculo a contenido de ayuda más detallado, o quizás a una entrada del glosario para aclarar un término.

Incorrecto:

captura de pantalla del cuadro de diálogo con 6 párrafos

En este ejemplo, hay demasiado texto para escanear fácilmente. Aunque el diseñador no está pensado, hay tanto texto que los usuarios probablemente harán clic en Siguiente sin leer nada.

Para evitar texto que desaconseja la lectura, cree el texto para hacer que cada recuento de palabras. Lo que no agrega resta, así que use texto simple y conciso.

Uso de la pirámide invertida

La escritura académica utiliza normalmente un estilo estructural "piramidal" que establece una base de hechos, trabaja con esos hechos y se construye hasta una conclusión que forma una estructura de tipo piramidal. Por el contrario, los periodistas utilizan un estilo "pirámide invertida" que comienza con la conclusión como la "conclusión" fundamental que los lectores deben tener. A continuación, rellena progresivamente más detalles que los lectores pueden estar interesados en tal vez solo para escanear. La ventaja de este estilo es que llega directamente al punto, y permite a los lectores dejar de leer en cualquier momento que elijan y aún comprendan la información esencial.

Debe aplicar la estructura piramidal invertida al texto de la interfaz de usuario. Acceda directamente al punto con la información esencial, permita a los usuarios dejar de leer en cualquier momento que elijan y usar un vínculo de Ayuda para presentar el resto de la pirámide.

captura de pantalla del mensaje al unirse al programa de Windows

En este ejemplo, la información esencial se encuentra en la consulta del texto de la instrucción principal, la información útil adicional se encuentra en las instrucciones complementarias y los detalles están disponibles haciendo clic en un vínculo de Ayuda.

Si haces solo cinco cosas...

  1. Trabajar en texto temprano porque los problemas de texto a menudo revelan problemas de diseño.
  2. Diseñe el texto para examinarlo.
  3. Elimine el texto redundante.
  4. Usar texto fácil de entender; no se comuniquen por encima.
  5. Cuando sea necesario, proporcione vínculos al contenido de ayuda para obtener información más detallada.

Directrices

General

  • Quitar texto redundante. Busque texto redundante en títulos de ventana, instrucciones principales, instrucciones complementarias, áreas de contenido, vínculos de comandos y botones de confirmación. Por lo general, deje el texto completo en las instrucciones principales y los controles interactivos, y quite cualquier redundancia de los demás lugares.

  • Evite bloques grandes de texto de la interfaz de usuario. Entre las formas de hacerlo se incluyen las siguientes:

    • Fragmentación de texto en frases y párrafos más cortos.
    • Cuando sea necesario, proporcionar vínculos de Ayuda a información útil, pero no esencial.
  • Elija nombres de objeto y etiquetas que comuniquen claramente y diferencien lo que hace el objeto. Los usuarios no deben tener que averiguar qué significa realmente el objeto o cómo difiere de otros objetos.

    Incorrecto:

    captura de pantalla de la lista de monitores sin nombre

    Mejor:

    captura de pantalla de la lista de adaptadores de red específicos

    En el ejemplo incorrecto, los nombres de objeto no se diferencian en absoluto; en el mejor ejemplo se muestra una diferenciación fuerte por nombre de producto.

  • Si desea asegurarse de que los usuarios lean texto específico relacionado con una acción, colóquelo en un control interactivo.

    • Aceptable:
    • captura de pantalla de la advertencia de formato con el botón Aceptar
    • En este ejemplo, existe la posibilidad de que los usuarios no lean el texto que explica lo que están confirmando.
    • Mejor:
    • captura de pantalla del botón de formato y advertencia de formato
    • En este ejemplo, puede estar seguro de que al menos los usuarios entienden que están a punto de dar formato a un disco.
  • Use un espacio entre oraciones. No dos.

Fuentes de texto, tamaños y colores

  • Use texto azul solo para vínculos e instrucciones principales.
  • Use texto verde solo para las direcciones URL en los resultados de la búsqueda.

Las siguientes fuentes y colores son valores predeterminados para Windows.

Patrón Símbolo del tema Fuente, color
primera columna: texto de la barra de título
CaptionFont
9 pt. negro (#000000) Segoe UI
primera columna: instrucciones principales
MainInstruction
12 pt. azul (#003399) Interfaz de usuario de Segoe
primera columna: instrucciones secundarias
Instrucción
9 pt. negro (#000000) Segoe UI
primera columna: texto normal
BodyText
9 pt. negro (#000000) Segoe UI
primera columna: texto resaltado
BodyText
9 pt. negro (#000000) Segoe UI, negrita o cursiva
primera columna: texto editable
BodyText
9 pt. negro (#000000) Segoe UI, en un cuadro
primera columna: texto deshabilitado
Disabled
9 pt. gris oscuro (#323232) Interfaz de usuario de Segoe
primera columna: vínculo
HyperLinkText
9 pt. azul (#0066CC) Segoe UI
primera columna: vínculos (mantener el puntero)
Acceso frecuente
9 pt. azul claro (#3399FF) Segoe UI
primera columna: encabezado de grupo

11 pt. azul (#003399) Interfaz de usuario de Segoe
primera columna: nombre de archivo (en la vista de contenido)

11 pt. negro (#000000) Segoe UI
primera columna: texto del documento
(ninguno)
9 pt. negro (#000000) Calibri
primera columna: encabezados de documento
(ninguno)
17 pt. negro (#000000) Calibri

Para obtener más información y ejemplos, vea Fuentes y colores.

Otras características de texto

Negrita

  • Use negrita con moderación para llamar la atención a los usuarios de texto que deben leer. Por ejemplo, los usuarios que examinan una lista de opciones de botón de radio pueden apreciar ver las etiquetas en negrita para destacar del texto que agrega información complementaria sobre cada opción. Tenga en cuenta que el uso de demasiada negrita reduce su impacto.

  • Con los datos etiquetados, use negrita para resaltar lo que sea más importante para los datos en su conjunto.

    • Para datos principalmente genéricos (donde los datos tienen poco significado sin sus etiquetas, como con números o fechas), use etiquetas en negrita y datos sin formato para que los usuarios puedan examinar y comprender más fácilmente los tipos de datos.

    • Para la mayoría de los datos autoexplicativos, use etiquetas sin formato y datos en negrita para que los usuarios puedan centrarse en los propios datos.

    • Como alternativa, puede usar texto gris oscuro para desacentar la información menos importante en lugar de usar negrita para resaltar la información más importante.

      captura de pantalla de la vista en miniatura del Explorador de Windows

      En este ejemplo, en lugar de resaltar los datos con negrita, las etiquetas se desmarcan mediante gris oscuro.

  • No todas las fuentes admiten negrita, por lo que nunca debe ser fundamental comprender el texto.

Cursiva

  • Use para hacer referencia al texto literalmente. No use comillas para este propósito.

    Correcto:

    Los términos documento y archivo se usan a menudo indistintamente.

  • Use para solicitudes en cuadros de texto y listas desplegables editables.

    captura de pantalla del cuadro de texto de búsqueda

    En este ejemplo, el símbolo del sistema en el cuadro Buscar tiene el formato de texto cursiva.

  • Use con moderación para resaltar palabras específicas para ayudar a comprender.

  • No todas las fuentes admiten cursiva, por lo que nunca debe ser fundamental comprender el texto.

Cursiva en negrita

  • No use en el texto de la interfaz de usuario.

Subrayar

  • No use, excepto los vínculos.
  • No use para el énfasis. En su lugar, use cursiva.

Signos de puntuación

Puntos

  • No coloque al final de las etiquetas de control, las instrucciones principales ni los vínculos de Ayuda.
  • Coloque al final de instrucciones complementarias, explicaciones complementarias o cualquier otro texto estático que forme una oración completa.

Signos de interrogación

  • Coloque al final de todas las preguntas. A diferencia de los puntos, los signos de interrogación se usan para todos los tipos de texto.

Signos de exclamación

  • En las aplicaciones empresariales, evite.
    • Excepciones: A veces, los puntos de exclamación se usan en el contexto de finalización de la descarga ("Listo!") y para llamar la atención al contenido web ("Nuevo!").

Comas

  • En una lista de tres o más elementos, coloque siempre una coma después del elemento siguiente a último de la lista.

Colones

  • Use dos puntos al final de las etiquetas de control externo. Esto es especialmente importante para la accesibilidad, ya que algunas tecnologías de asistencia buscan dos puntos para identificar las etiquetas de control.
  • Use dos puntos para introducir una lista de elementos.

Elipses

  • Los puntos suspensivos significan integridad. Use puntos suspensivos en el texto de la interfaz de usuario de la siguiente manera:

    • Comandos: Indique que un comando necesita información adicional. No use puntos suspensivos cada vez que una acción muestre otra ventana solo cuando se requiera información adicional. Para obtener más información, vea Botones de comando.

    • Datos: Indique que el texto está truncado.

    • Etiquetas: Indique que una tarea está en curso (por ejemplo, "Buscando...").

      Propina: El texto truncado en una ventana o página con espacio sin usar indica un diseño deficiente o un tamaño de ventana predeterminado demasiado pequeño. Busque diseños y tamaños de ventana predeterminados que eliminen o reduzcan la cantidad de texto truncado. Para obtener más información, vea Diseño.

  • No hagas puntos suspensivos interactivos. Para mostrar texto truncado, permita a los usuarios cambiar el tamaño del control para ver más texto o usar un control de divulgación progresiva en su lugar.

Comillas y apóstrofos

  • Para hacer referencia al texto literalmente, use formato cursiva en lugar de comillas.

  • Coloque los títulos de ventana y las etiquetas de control entre comillas solo si es necesario para evitar confusiones y no puede dar formato al uso de negrita en su lugar.

  • Para comillas, se prefieren comillas dobles (" "); evite comillas simples.

    Correcto:

    ¿Confirma que desea eliminar la carpeta cat de Sparky?

    Incorrecto:

    ¿Está seguro de que desea eliminar la carpeta cat de Sparky?

Uso de mayúsculas

  • Use mayúsculas de estilo de título para títulos, mayúsculas de estilo de oración para todos los demás elementos de la interfaz de usuario. Esto es más adecuado para el tono de Windows.

    • Excepción: En el caso de las aplicaciones heredadas, puede usar mayúsculas de estilo título para botones de comandos, menús y encabezados de columna si es necesario para evitar mezclar estilos de mayúsculas.

      captura de pantalla de la hoja de propiedades genéricas

    En este ejemplo genérico se muestran las mayúsculas y minúsculas correctas para las hojas de propiedades.

    captura de pantalla del cuadro de diálogo genérico

    En este ejemplo genérico se muestran las mayúsculas y minúsculas correctas para los diálogos.

  • Para los nombres de características y tecnología, sea conservador en mayúsculas. Normalmente, solo los componentes principales deben incluirse en mayúsculas (con mayúsculas de estilo de título).

    Correcto:

    Analysis Services, cubos, dimensiones

    Analysis Services es un componente principal de SQL Server, por lo que la capitalización de estilo de título es adecuada; los cubos y dimensiones son elementos comunes del software de análisis de bases de datos, por lo que no es necesario capitalizarlos.

  • En el caso de los nombres de características y tecnología, sea coherente en mayúsculas. Si el nombre aparece más de una vez en una pantalla de interfaz de usuario, siempre debería aparecer de la misma manera. Del mismo modo, en todas las pantallas de la interfaz de usuario del programa, el nombre debe presentarse de forma coherente.

  • No escriba mayúsculas los nombres de elementos genéricos de la interfaz de usuario, como la barra de herramientas, el menú, la barra de desplazamiento, el botón y el icono.

    • Excepciones: Barra de direcciones, Barra de vínculos.
  • No use todas las letras mayúsculas para las teclas de teclado. En su lugar, siga la mayúscula que usan los teclados estándar o minúsculas si la tecla no está etiquetada en el teclado.

    Correcto:

    barra espaciadora, Tab, Entrar, Subir página, Ctrl+Alt+Supr

    Incorrecto:

    BARRA ESPACIADORA, TAB, ENTRAR, PG UP, CTRL+ALT+SUPR

  • No use todas las letras mayúsculas para el énfasis. Los estudios han demostrado que esto es difícil de leer, y los usuarios tienden a considerarlo como "gritando". Para las advertencias, use un icono de advertencia y una explicación clara de la situación. No es necesario agregar, por ejemplo, el término WARNING en todas las letras mayúsculas.

Para obtener más información, consulte la sección "Texto" o "Etiquetas" en las directrices específicas del componente de interfaz de usuario.

Fechas y horas

  • No codifique de forma rígida el formato de fechas y horas. Respeta la elección de la configuración regional y las opciones de personalización del usuario para los formatos de fecha y hora. El usuario selecciona estos elementos en el elemento del panel de control Región y idioma.

    captura de pantalla del formato de fecha: captura de pantalla del lunes, 6 de julio de 2009con formato de fecha: 06 de julio de 2009

    En estos ejemplos de Microsoft Outlook, ambos formatos para la fecha larga son correctos. Reflejan diferentes opciones que los usuarios han realizado en el elemento del panel de control región y idioma.

  • Use el formato de fecha larga para escenarios que se benefician de tener información adicional. Use el formato de fecha corta para contextos que no tengan suficiente espacio para el formato largo. Aunque los usuarios eligen qué información desea incluir en los formatos largos y cortos, los diseñadores eligen el formato que se va a mostrar en sus programas en función del escenario y del contexto.

    captura de pantalla del formato con fechas de inicio y vencimiento

    En este ejemplo, el formato de fecha larga ayuda a los usuarios a organizar tareas y fechas límite.

Globalización y localización

La globalización significa crear documentos o productos que se puedan usar en cualquier país, región o cultura. La localización significa adaptar documentos o productos para su uso en una configuración regional distinta del país o región de origen. Considere la globalización y la localización al escribir texto de la interfaz de usuario. Tu programa puede traducirse a otros idiomas y usarse en culturas muy diferentes de tu propia.

  • Para los controles con contenido variable (como vistas de lista y vistas de árbol), elija un ancho adecuado para los datos válidos más largos.

  • Incluya espacio suficiente en la superficie de la interfaz de usuario para un 30 % adicional (hasta un 200 % para texto más corto) para cualquier texto (pero no números) que se localice. La traducción de un idioma a otro suele cambiar la longitud de línea del texto.

  • No cree cadenas de subcadenas en tiempo de ejecución. En su lugar, use oraciones completas para que no haya ambigüedad para el traductor.

  • No use un control subordinado, los valores que contiene o su etiqueta de unidades para crear una frase o frase. Este diseño no es localizable porque la estructura de oraciones varía con el lenguaje.

    Incorrecto:

    captura de pantalla del cuadro de texto dentro de una etiqueta de casilla

    Correcto:

    captura de pantalla del cuadro de texto después de una etiqueta de casilla

    En el ejemplo incorrecto, el cuadro de texto se coloca dentro de la etiqueta de casilla.

  • No convierta solo una parte de una frase en un vínculo, ya que, cuando se traduce, es posible que ese texto no permanezca juntos. Por lo tanto, el texto del vínculo debe formar una oración completa por sí misma.

    • Excepción: Los vínculos del glosario se pueden insertar insertados, como parte de una oración.

Para obtener más información, consulte el Centro para desarrolladores globales de Go.

Texto de la barra de título

  • Elija el texto de la barra de título en función del tipo de ventana:
    • Ventanas de programa centradas en documentos de nivel superior: Use un formato de "nombre de programa de nombre de documento". Los nombres de documento se muestran primero para dar una sensación centrada en documentos.
    • Ventanas de programa de nivel superior que no están centradas en documentos: Mostrar solo el nombre del programa.
    • Cuadros de diálogo: Muestra el comando, la característica o el programa desde el que vino el cuadro de diálogo. No use el título para explicar el propósito del cuadro de diálogo que es el propósito de las instrucciones principales. Para obtener más instrucciones, consulte Cuadros de diálogo.
    • Asistentes: Muestra el nombre del asistente. Tenga en cuenta que la palabra "wizard" no debe incluirse en los nombres del asistente. Para obtener más instrucciones, consulte Asistentes.
  • Para las ventanas de programa de nivel superior, si el título y el icono de la barra de título se muestran de forma destacada cerca de la parte superior de la ventana, puede ocultar el título y el icono de la barra de título para evitar redundancia. Sin embargo, todavía tiene que establecer un título adecuado internamente para su uso por Parte de Windows.
  • Para los cuadros de diálogo, no incluya las palabras "dialog" o "progress" en los títulos. Estos conceptos están implícitos y dejar estas palabras desactivadas hace que los títulos sean más fáciles de examinar para los usuarios.

Instrucciones principales

  • Use la instrucción principal para explicar concisamente lo que los usuarios deben hacer en una ventana o página determinada. Las buenas instrucciones principales comunican el objetivo del usuario en lugar de centrarse solo en manipular la interfaz de usuario.

  • Expresar la instrucción principal en forma de una dirección imperativa o una pregunta específica.

    Incorrecto:

    captura de pantalla del nombre del programa como instrucción principal

    En este ejemplo, la instrucción principal simplemente indica el nombre del programa; no invita explícitamente a un curso de acción para que el usuario realice.

    Excepciones: Los mensajes de error, los mensajes de advertencia y las confirmaciones pueden usar estructuras de oraciones diferentes en sus instrucciones principales.

  • Use verbos específicos siempre que sea posible. Los verbos específicos (ejemplos: conectar, guardar, instalar) son más significativos para los usuarios que los genéricos (ejemplos: configurar, administrar, establecer).

    • En el caso de las páginas del panel de control y las páginas del asistente, si no puede usar un verbo específico, es posible que prefiera omitir el verbo por completo.

      Aceptable:

      Escriba la configuración regional, la región y el idioma.

      Mejor:

      Configuración regional, región e idioma

    • En el caso de los diálogos, como los mensajes de error y las advertencias, no omita el verbo.

  • No se sienta obligado a usar texto de instrucción principal si agregarlo solo sería redundante o obvio desde el contexto de la interfaz de usuario.

    captura de pantalla del cuadro de diálogo Guardar como

    En este ejemplo, el contexto de la interfaz de usuario ya está muy claro; no es necesario agregar texto de instrucción principal.

  • Use solo una frase completa y concisa. Pare la instrucción principal hasta la información esencial. Si debe explicar algo más, considere la posibilidad de usar una instrucción complementaria.

  • Use mayúsculas de estilo de frase.

  • No incluya puntos finales si la instrucción es una instrucción . Si la instrucción es una pregunta, incluya un signo de interrogación final.

  • En el caso de los diálogos de progreso, use una frase gerundia que explique brevemente la operación en curso y termine con puntos suspensivos. Ejemplo: "Imprimir sus imágenes..."

  • Propina: Puedes evaluar una instrucción principal imaginando lo que dirías a un amigo al explicar qué hacer con la ventana o página. Si responder con la instrucción principal sería poco natural, poco útil o incómodo, volver a trabajar la instrucción.

Para obtener más información, consulte la sección "Instrucción principal" en las directrices específicas del componente de interfaz de usuario.

Instrucciones complementarias

  • Cuando sea necesario, use una instrucción complementaria para presentar información adicional útil para comprender o usar la ventana o página, como:
    • Proporcionar contexto para explicar por qué se muestra la ventana si se inicia el programa o el sistema.
    • Información apta que ayuda a los usuarios a decidir cómo actuar sobre la instrucción principal.
    • Definición de terminología importante.
  • No use una instrucción complementaria si no es necesario. Prefiere comunicar todo con la instrucción principal si puede hacerlo de forma concisa.
  • No repita la instrucción principal con palabras ligeramente diferentes. En su lugar, omita la instrucción complementaria si no hay nada más que agregar.
  • Use oraciones completas y mayúsculas de estilo de oración.

Etiquetas de control

  • Etiquete cada control o grupo de controles. Excepciones:

    • Los cuadros de texto y las listas desplegables se pueden etiquetar mediante avisos.

    • Por lo general, los controles de divulgación progresivas no están etiquetados.

    • Los controles subordinados usan la etiqueta de su control asociado. Los controles de número siempre son controles subordinados.

    • Omita las etiquetas de control que restan la instrucción principal. En este caso, la instrucción principal toma la clave de acceso.

      Aceptable:

      captura de pantalla del cuadro de texto con instrucciones y etiqueta

      En este ejemplo, la etiqueta del cuadro de texto es simplemente una restamento de la instrucción principal.

      Mejor:

      captura de pantalla del cuadro de texto con solo instrucciones

      En este ejemplo, se quita la etiqueta redundante, por lo que la instrucción principal toma la clave de acceso.

  • Colocación de etiquetas:

    • Los globos, casillas, botones de comando, cuadros de grupo, vínculos, pestañas y sugerencias se etiquetan directamente mediante el propio control.
    • Las listas desplegables, los cuadros de lista, las vistas de lista, las barras de progreso, los controles deslizantes, los cuadros de texto y las vistas de árbol se etiquetan encima, se vacían a la izquierda o a la izquierda.
    • Normalmente, los controles de divulgación progresivas no están etiquetados. Los botones de botón de contenido adicional están etiquetados a la derecha.
  • Asigne una clave de acceso única para cada control interactivo , excepto para los vínculos. Para obtener más información, vea Teclado.

  • Mantenga las etiquetas breves. Sin embargo, tenga en cuenta que agregar una palabra o dos a una etiqueta puede ayudar a la claridad y, a veces, elimina la necesidad de explicaciones complementarias.

  • Prefiere etiquetas específicas sobre las genéricas. Lo ideal es que los usuarios no tengan que leer nada más para comprender la etiqueta.

    Incorrecto:

    captura de pantalla del botón aceptar comando

    Correcto:

    captura de pantalla del botón publicar comando

    En el ejemplo correcto, se usa una etiqueta específica para el botón confirmar.

  • Para obtener listas de etiquetas, como botones de radio, use expresiones paralelas e intente mantener la longitud aproximadamente igual para todas las etiquetas.

  • En las listas de etiquetas, centre el texto de la etiqueta en las diferencias entre las opciones. Si todas las opciones tienen el mismo texto introductorio, mueva ese texto a la etiqueta de grupo.

    Incorrecto:

    captura de pantalla de etiquetas con frases duplicadas

    Correcto:

    captura de pantalla de la primera frase movida a la etiqueta de grupo

    En el ejemplo correcto se mueve la expresión introductoria idéntica a la etiqueta, por lo que las dos opciones se diferencian más limpiamente.

  • En general, prefiere expresiones positivas. Por ejemplo, use do en lugar de no, y notifique en lugar de no notificar.

    • Excepción: La etiqueta de casilla "No volver a mostrar este mensaje", se usa ampliamente.
  • Omita verbos informativos que se aplican a todos los controles del tipo especificado. En su lugar, centre las etiquetas en lo que es único sobre los controles. Por ejemplo, no dice que los usuarios necesitan escribir en un control de cuadro de texto o que los usuarios necesitan hacer clic en un vínculo.

    Incorrecto:

    captura de pantalla de la etiqueta:

    Correcto:

    captura de pantalla de la etiqueta:

    En los ejemplos incorrectos, las etiquetas de control tienen verbos informativos que se aplican a todos los controles de su tipo.

  • En algunos casos, las siguientes anotaciones entre paréntesis para controlar etiquetas pueden ser útiles:

    • Si una opción es opcional, considere la posibilidad de agregar "(opcional)" a la etiqueta.
    • Si se recomienda encarecidamente una opción, agregue "(recomendado)" a la etiqueta. Si lo hace, significa que la configuración es opcional, pero debe establecerse de todos modos.
    • Si una opción solo está pensada para usuarios avanzados, considere la posibilidad de agregar "(avanzado)" a la etiqueta.
  • Puede especificar unidades (segundos, conexiones, etc.) entre paréntesis después de la etiqueta.

    captura de pantalla de la etiqueta: tamaño inicial (mb)

    En este ejemplo se muestra que la unidad de medida es megabytes (MB).

Para obtener más información, consulte la sección "Texto" o "Etiquetas" en las directrices específicas del componente de interfaz de usuario.

Explicaciones complementarias

  • Use explicaciones complementarias cuando los controles requieran más información de la que puede transmitir su etiqueta. Pero no use una explicación complementaria si no es necesario prefiere comunicar todo con la etiqueta de control si puede hacerlo concisamente. Normalmente, se usan explicaciones complementarias con vínculos de comandos, botones de radio y casillas.

  • Cuando sea necesario, use negrita en las etiquetas de control para facilitar el examen del texto cuando haya explicaciones complementarias.

    captura de pantalla del cuadro de diálogo configuración de seguridad

    En este ejemplo, las etiquetas del botón de radio están en negrita para que sean más fáciles de examinar.

  • Agregar una explicación complementaria a un control de un grupo no significa que tenga que proporcionar explicaciones para todos los demás controles del grupo. Proporcione la información pertinente en la etiqueta si puede y usar explicaciones solo cuando sea necesario. No tenga explicaciones complementarias que simplemente restablezen la etiqueta para la coherencia.

    captura de pantalla de tres botones de radio

    En este ejemplo, dos controles del grupo incluyen explicaciones complementarias, pero la tercera no.

  • Si una explicación complementaria sigue un vínculo de comando, escriba el texto complementario en segunda persona.

    Ejemplo: Vínculo de comando: Crear la configuración de red inalámbrica y guardar en la unidad flash USB

    Explicación complementaria: esto creará la configuración que puede transferir al enrutador con una unidad flash USB. Haz esto solo si tienes un router inalámbrico que admita la configuración de la unidad flash USB.

  • Use oraciones completas y puntuación final.

Confirmar etiquetas de botón

En la tabla siguiente se muestran las etiquetas de botón de confirmación más comunes y su uso.

Etiqueta de botón Cuándo se usa
OK (CORRECTO)
  • En los cuadros de diálogo: aplique los cambios o confirme a la tarea y cierre la ventana.
  • En las ventanas de propiedades del propietario: aplique los cambios pendientes (realizados desde que se abrió la ventana o la última aplicación) y cierre la ventana.
  • En ventanas de propiedad propiedad: mantenga los cambios, cierre la ventana y aplique los cambios cuando se apliquen los cambios de la ventana del propietario.
  • Use con ventanas que no sean específicas de tareas, como hojas de propiedades.
  • Para las ventanas usadas para realizar una tarea específica, use una etiqueta específica en su lugar que comience con un verbo (ejemplo: Imprimir).
  • Para ventanas en las que los usuarios no pueden realizar cambios, use Cerrar.
  • Entrar

Sí/No
Sí es la respuesta afirmativa a una pregunta afirmativa, mientras que No es la respuesta negativa.
  • Use botones Sí y No solo para responder a preguntas sí o no. Nunca use Ok y Cancel para sí o sin preguntas.
  • Prefiere respuestas específicas sobre los botones Sí y No. Aunque no hay nada malo con el uso de Sí y No, las respuestas específicas se pueden entender más rápidamente, lo que da lugar a una toma de decisiones eficaz.
  • Sin embargo, considere la posibilidad de usar respuestas Sí y No si la expresión de respuestas específicas resulta ser larga o torpe.
  • No use botones Sí y No si el significado de la respuesta No no está claro. Si es así, use respuestas específicas en su lugar.
  • Sí y No siempre deben usarse como par.
  • Y and N
  • Cancelar
  • En los cuadros de diálogo: descarte todos los cambios o el trabajo en curso, vuelva al estado anterior (sin efecto secundario notable) y cierre la ventana.
  • En las hojas de propiedades: descarte todos los cambios pendientes (realizados desde que se abrió la ventana o la última aplicación) y cierre la ventana.
  • En los elementos del panel de control: descarte todos los cambios o el trabajo en curso, vuelva al estado anterior y vuelva a la página central desde la que se inició la tarea. Si no hay ninguna página central de este tipo, cierre la ventana del elemento del panel de control en su lugar.
  • Use cuando se puedan descartar todos los cambios o acciones pendientes y se puedan deshacer los efectos secundarios.
  • Para los cambios que no se pueden descartar, use Cerrar. Para las acciones en curso que se pueden detener, use Detener. Si se pueden descartar inicialmente los cambios o acciones, puede usar Cancelar inicialmente y, después, cambiar a Cerrar o Detener una vez que no se pueda deshacer.
  • Esc
  • Cerrar
    Cierre la ventana. Los cambios o efectos secundarios no se descartan.
  • Se usa cuando no se pueden descartar los cambios o efectos secundarios. Use Close en lugar de Cancelar para las ventanas principales.
  • Se usa para ventanas en las que los usuarios no pueden realizar cambios.
  • Alt+F4, Ctrl+F4
  • Detención
    Detenga una tarea que se está ejecutando actualmente y cierre la ventana. No se descarta ningún trabajo en curso o efectos secundarios.
  • Se usa cuando el trabajo en curso y los efectos secundarios no se pueden descartar o no, normalmente con barras de progreso o animaciones.
  • Esc
  • Aplicar
    En las hojas de propiedades del propietario: aplique los cambios pendientes (realizados desde que se abrió la ventana o la última aplicación), pero deje abierta la ventana. Al hacerlo, los usuarios pueden evaluar los cambios antes de cerrar la hoja de propiedades. En hojas de propiedades propiedad: no use.
  • Use solo en hojas de propiedades.
  • Proporcione un botón Aplicar solo si la hoja de propiedades tiene la configuración (al menos una) con efectos que los usuarios pueden evaluar de una manera significativa. Normalmente, los botones Aplicar se usan cuando la configuración realiza cambios visibles. Los usuarios deben poder aplicar un cambio, evaluar el cambio y realizar más cambios en función de esa evaluación. Si no es así, quite el botón Aplicar en lugar de deshabilitarlo.
  • A
  • Siguiente
    En asistentes y tareas de varios pasos: avance al paso siguiente sin confirmar la tarea.
  • Use solo en asistentes y tareas de varios pasos para avanzar al paso siguiente sin compromiso.
  • El efecto de un botón Siguiente siempre se puede deshacer haciendo clic en Atrás.
  • N
  • Finalizar
    En asistentes y tareas de varios pasos: cierre la ventana. Si aún no se ha realizado la tarea, realice la tarea. Si esa tarea ya se ha realizado, no se descartan los cambios o efectos secundarios.
  • Use solo en asistentes y tareas de varios pasos. Sin embargo, se desaconseja el uso de Finish porque normalmente hay un botón de confirmación mejor y más específico:
    • Si al hacer clic en el botón se confirma en la tarea (por lo que la tarea aún no se ha realizado), use una etiqueta específica que comience con un verbo (ejemplos: Imprimir, Conectar, Iniciar) que sea una respuesta a la instrucción principal.
    • Si la tarea ya se ha realizado en el asistente, use Close en su lugar.
  • Sin embargo, puede usar Finish cuando:
    • La etiqueta específica sigue siendo genérica, como Guardar, Seleccionar, Elegir u Obtener.
    • La tarea implica cambiar una configuración o una colección de valores.
  • Entrar
  • Listo
    No aplicable.
  • No lo use. Hecho como un comando es gramaticalmente incorrecto.
  • No aplicable.