Cuadros de diálogo de Windows 7 (conceptos básicos de diseño)

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.

Un cuadro de diálogo es una ventana secundaria que permite a los usuarios realizar un comando, formular a los usuarios una pregunta o proporcionar a los usuarios información o comentarios de progreso.

screen shot identifying dialog box elements

Un cuadro de diálogo típico.

Los cuadros de diálogo constan de una barra de título (para identificar el comando, la característica o el programa desde el que procede un cuadro de diálogo), una instrucción principal opcional (para explicar el objetivo del usuario con el cuadro de diálogo), varios controles del área de contenido (para presentar opciones) y botones de confirmación (para indicar cómo el usuario quiere confirmar la tarea).

Los cuadros de diálogo tienen dos tipos fundamentales:

  • Los cuadros de diálogo modales requieren que los usuarios se completen y cierren antes de continuar con la ventana del propietario. Estos cuadros de diálogo se usan mejor para tareas críticas o poco frecuentes que requieren finalización antes de continuar.
  • Los cuadros de diálogo modeless permiten a los usuarios cambiar entre el cuadro de diálogo y la ventana del propietario según sea necesario. Estos cuadros de diálogo se usan mejor para tareas frecuentes, repetitivas y continuas.

Un cuadro de diálogo de tareas es un cuadro de diálogo implementado mediante la interfaz de programación de aplicaciones (API) del cuadro de diálogo de tareas. Constan de las siguientes partes, que se pueden ensamblar en una variedad de combinaciones:

  • Barra de título para identificar la aplicación o la característica del sistema desde la que procede el cuadro de diálogo.
  • Una instrucción principal, con un icono opcional, para identificar el objetivo del usuario con el cuadro de diálogo.
  • Un área de contenido para información y controles descriptivos.
  • Un área de comandos para botones de confirmación , incluido un botón Cancelar, y opciones Más opcionales y No volver a mostrar este <elemento> controles.
  • Un área de nota al pie para obtener explicaciones y ayuda adicionales opcionales, normalmente dirigidas a usuarios menos experimentados.

screen shot of a typical task dialog box

Cuadro de diálogo de tarea típico.

Los cuadros de diálogo de tareas se recomiendan siempre que sea adecuado, ya que son fáciles de crear y logran un aspecto coherente. Los cuadros de diálogo de tareas requieren Windows Vista o posterior, por lo que no son adecuados para versiones anteriores de Microsoft Windows.

Un panel de tareas es como un cuadro de diálogo, salvo que se presenta dentro de un panel de ventanas en lugar de una ventana independiente. Como resultado, los paneles de tareas tienen una sensación contextual más directa que los cuadros de diálogo. Aunque técnicamente no son iguales, los paneles de tareas son tan similares a los cuadros de diálogo que se presentan en este artículo.

screen shot of a typical task pane

Un panel de tareas típico.

Las ventanas de propiedades son un tipo especializado de cuadro de diálogo que se usa para ver y cambiar las propiedades de un objeto, una colección de objetos o un programa. Además, las ventanas de propiedades suelen admitir varias tareas, mientras que los cuadros de diálogo suelen admitir una sola tarea o un paso en una tarea. Dado que su uso es especializado, las ventanas de propiedades se tratan en un conjunto diferente de directrices.

Los cuadros de diálogo pueden tener pestañas y, si es así, se denominan cuadros de diálogo con pestañas. Las ventanas de propiedades están determinadas por su presentación de propiedades, no por el uso de pestañas.

Nota: Las directrices relacionadas con el diseño, la administración de ventanas, los cuadros de diálogo comunes, las ventanas de propiedades, los asistentes, las confirmaciones, losmensajes de error y los mensajes de advertencia se presentan en artículos independientes.

¿Es esta la interfaz de usuario correcta?

Para decidirte, intenta responder a estas preguntas:

  • ¿El propósito es proporcionar a los usuarios información, formular una pregunta a los usuarios o permitir que los usuarios seleccionen opciones para realizar un comando o una tarea? Si no es así, use otra interfaz de usuario (UI).
  • ¿El propósito es ver y cambiar las propiedades de un objeto, una colección de objetos o un programa? Si es así, use una ventana de propiedades o una barra de herramientas en su lugar.
  • ¿Es el propósito presentar una colección de comandos o herramientas? Si es así, use una barra de herramientas o una ventana de paleta.
  • ¿Es el propósito comprobar que el usuario desea continuar con una acción? ¿Hay una razón clara para no continuar y una posibilidad razonable de que a veces los usuarios no lo harán? Si es así, use una confirmación.
  • ¿Es el propósito de proporcionar un mensaje de error o advertencia? Si es así, use un mensaje de error o un mensaje de advertencia.
  • Es el propósito de:
    • Abrir archivos
    • Guardar archivos
    • Abrir carpetas
    • Buscar o reemplazar texto
    • Imprimir un documento
    • Seleccionar atributos de una página impresa
    • Seleccionar una fuente
    • Elegir un color
    • Buscar un archivo, una carpeta, un equipo o una impresora
    • Buscar usuarios, equipos o grupos en Microsoft Active Directory
    • ¿Solicitar un nombre de usuario y una contraseña?

Si es así, use el cuadro de diálogo común adecuado en su lugar. Muchos de estos diálogos comunes son extensibles.

  • ¿Es el propósito realizar una tarea de varios pasos que requiera más de una sola ventana? Si es así, use un flujo de tareas o un asistente en su lugar.
  • ¿El propósito es informar a los usuarios de un evento del sistema o del programa que no está relacionado con la actividad del usuario actual, que no requiere una acción inmediata del usuario y los usuarios pueden omitir libremente? Si es así, use una notificación en su lugar.
  • ¿Es el propósito mostrar el estado del programa? Si es así, use una barra de estado en su lugar.
  • ¿Sería preferible usar la interfaz de usuario local? Los cuadros de diálogo pueden interrumpir el flujo del usuario exigiendo atención. A veces, esa interrupción en el flujo está justificada, como cuando el usuario debe realizar una acción que esté fuera del contexto actual. En otros casos, un mejor enfoque es presentar la interfaz de usuario en contexto, ya sea directamente con la interfaz de usuario local (como un panel de tareas) o a petición mediante la divulgación progresiva.
  • ¿Es el propósito mostrar un problema de entrada de usuario no crítico o una condición especial? Si es así, use un globo en su lugar.
  • En el caso de los flujos de tareas, ¿sería preferible usar otra página? Por lo general, quiere que una tarea fluya de la página a la página dentro de una sola ventana. Use cuadros de diálogo para confirmar los comandos en contexto, para obtener la entrada de los comandos en contexto y para realizar tareas secundarias independientes que se realizan mejor de forma independiente y fuera del flujo de tareas principal.
  • Para seleccionar opciones, ¿es probable que los usuarios cambien las opciones? Si no es así, considere alternativas, como:
    • Usar las opciones predeterminadas sin preguntar, pero permitir que los usuarios realicen cambios más adelante.
    • Proporcionar una versión con opciones (por ejemplo, Imprimir... en un menú) así como una versión sin opciones (por ejemplo, Imprimir en la barra de herramientas). Por lo general, los comandos de la barra de herramientas deben ser inmediatos y evitar mostrar cuadros de diálogo.
  • Para seleccionar opciones, ¿hay una manera más sencilla y más directa de presentar las opciones? Si es así, considere alternativas, como:
    • Usar un botón de división para seleccionar variaciones de un comando.
    • Usar un submenú para comandos, casillas, botones de radio y listas simples.

Screenshot that shows a menu and sub-menu.

screen shot of a menu and submenu

En estos ejemplos, se usan submenús en lugar de cuadros de diálogo para selecciones simples.

Conceptos de diseño

Cuando se usan correctamente, los cuadros de diálogo son una excelente manera de proporcionar energía y flexibilidad al programa. Cuando se usa incorrectamente, los cuadros de diálogo son una manera fácil de molestar a los usuarios, interrumpir su flujo y hacer que el programa se sienta indirecto y tedioso de usar. Los cuadros de diálogo modales exigen la atención de los usuarios. A menudo, los cuadros de diálogo son más fáciles de implementar que las interfaces de usuario alternativas, por lo que tienden a usarse por encima.

Un cuadro de diálogo es más eficaz cuando sus características de diseño coinciden con su uso. El diseño de un cuadro de diálogo está determinado en gran medida por su propósito (ofrecer opciones, formular preguntas, proporcionar información o comentarios), tipo (modal o modeless) e interacción del usuario (necesaria, respuesta opcional o confirmación), mientras que su uso se determina en gran medida por su contexto (iniciado por el usuario o programa), la probabilidad de acción del usuario y la frecuencia de visualización.

Para diseñar cuadros de diálogo efectivos, use los siguientes elementos de forma eficaz:

  • Texto del cuadro de diálogo
  • Instrucciones principales
  • No volver a mostrar esta <opción de elemento>

Si sólo haces una cosa...

Asegúrese de que el diseño del cuadro de diálogo (determinado por su propósito, tipo e interacción del usuario) coincide con su uso (determinado por su contexto, probabilidad de acción del usuario y frecuencia de presentación).

Patrones de uso

Los cuadros de diálogo tienen varios patrones de uso:

  • Los cuadros de diálogo de preguntas (mediante botones) hacen a los usuarios una sola pregunta o para confirmar un comando y usan respuestas simples en botones de comando organizados horizontalmente.
  • Los cuadros de diálogo de preguntas (mediante vínculos de comandos) formulan a los usuarios una sola pregunta o seleccionan una tarea que se va a realizar y usan respuestas detalladas en vínculos de comandos organizados verticalmente.
  • Los cuadros de diálogo de elección presentan a los usuarios un conjunto de opciones, normalmente para especificar un comando más completamente. A diferencia de los diálogos de preguntas, los diálogos de elección pueden formular varias preguntas.
  • Los cuadros de diálogo de progreso presentan a los usuarios comentarios de progreso durante una operación larga (más de cinco segundos), junto con un comando para cancelar o detener la operación.
  • Los cuadros de diálogo informativos muestran información solicitada por el usuario.

Directrices

General

  • No use cuadros de diálogo desplazables. No use cuadros de diálogo que requieran el uso de una barra de desplazamiento para verse completamente durante el uso normal. Rediseñe el cuadro de diálogo en su lugar. Considere la posibilidad de usar la divulgación progresiva o pestañas.

  • No tenga una barra de menús ni una barra de estado. En su lugar, proporcione acceso a los comandos y el estado directamente en el propio cuadro de diálogo o mediante menús contextuales en los controles pertinentes.

    • Excepción: Las barras de menú son aceptables cuando se usa un cuadro de diálogo para implementar una ventana principal (por ejemplo, una utilidad).

    Incorrecto:

    screen shot of a dialog box with a menu bar

    En este ejemplo, Buscar certificados es un cuadro de diálogo modela con una barra de menús.

  • Si un cuadro de diálogo requiere atención inmediata y el programa no está activo, parpadee el botón de la barra de tareas tres veces para llamar la atención y déjelo resaltado. No haga nada más: no restaure ni active la ventana y no reproduzca ningún efecto de sonido. En su lugar, respete la selección del estado de la ventana del usuario y permita que el usuario active la ventana cuando esté lista.

  • Para obtener más instrucciones y ejemplos, vea Barra de tareas.

  • Se usa para tareas críticas o poco frecuentes que requieren finalización antes de continuar.
  • Use un modelo de confirmación retrasada para que los cambios no surtan efecto hasta que se confirmen explícitamente.
  • Implemente el uso de un cuadro de diálogo de tareas siempre que sea adecuado para lograr un aspecto coherente. Los cuadros de diálogo de tareas requieren Windows Vista o posterior, por lo que no son adecuados para versiones anteriores de Windows.

Cuadros de diálogo Modeless

  • Se usa para tareas frecuentes, repetitivas y continuas.
  • Use un modelo de confirmación inmediata para que los cambios surtan efecto inmediatamente.
  • En el caso de los cuadros de diálogo modeless, use un botón de comando Cerrar explícito en el cuadro de diálogo para cerrar la ventana. Para ambos, use un botón Cerrar en la barra de título para cerrar la ventana.
  • Considere la posibilidad de acoplar los cuadros de diálogo modeless. Los cuadros de diálogo de modelos acoplables permiten una colocación más flexible.

screen shot of a dockable, modeless dialog box

Algunos cuadros de diálogo modeless usados en Microsoft Office son acoplables.

Varios cuadros de diálogo

  • No muestre más de un cuadro de diálogo de elección de propiedad a la vez desde un cuadro de diálogo de elección de propietario. Mostrar más de uno dificulta el significado de los botones de confirmación para que los usuarios comprendan. Puede mostrar otros tipos de cuadros de diálogo (tales diálogos de preguntas) según sea necesario.
  • Para una secuencia de diálogos relacionados, considere la posibilidad de usar un diálogo de varias páginas si es posible. Use diálogos individuales si no están claramente relacionados.

Cuadros de diálogo de varias páginas

  • Use un cuadro de diálogo de varias páginas en lugar de cuadros de diálogo individuales cuando tenga la siguiente secuencia de páginas relacionadas:
    • Una sola página de entrada (opcional)
    • Página de progreso
    • Una sola página de resultados

La página de entrada es opcional porque es posible que la tarea se haya iniciado en otro lugar. De este modo, la experiencia resultante es una sensación estable, sencilla y ligera.

screen shot of a progress bar

screen shot of 'no problems found' message

En este ejemplo, Windows Network Diagnostics consta de páginas de progreso y resultados.

  • No use un cuadro de diálogo de varias páginas si la página de entrada es un diálogo estándar. En este caso, la coherencia del uso de un cuadro de diálogo estándar es más importante.
  • No use los botones Siguiente o Atrás y no tenga más de tres páginas. Los cuadros de diálogo de varias páginas son para tareas de un solo paso con comentarios. No son asistentes, que se usan para tareas de varios pasos. Los asistentes tienen una sensación pesada e indirecta en comparación con los cuadros de diálogo de varias páginas.
  • En la página de entrada, use botones de comando o vínculos de comandos específicos para iniciar la tarea.
  • Use un botón Cancelar en las páginas de entrada y progreso, y un botón Cerrar en la página de resultados.

Desarrolladores: Puede crear diálogos de tareas de varias páginas mediante el mensaje TDM_NAVIGATE_PAGE .

Presentación

Para facilitar la búsqueda y el acceso de los cuadros de diálogo, asocie claramente el diálogo a su origen y funcione bien con varios monitores:

  • Inicialmente se muestran cuadros de diálogo "centrados" en la parte superior de la ventana del propietario. Para la presentación posterior, considere la posibilidad de mostrarla en su última ubicación (relativa a la ventana del propietario) si es probable que sea más conveniente.

diagram of dialog box centered on window behind it

Inicialmente, centra los diálogos en la parte superior de la ventana del propietario.

  • Si un cuadro de diálogo es contextual, mostrándolo cerca del objeto desde el que se inició. Sin embargo, colóquelo fuera del camino (preferiblemente desfase hacia abajo y hacia la derecha) para que el objeto no esté cubierto por el cuadro de diálogo.

diagram of dialog box offset down and to the right

Las propiedades de un objeto se muestran cerca del objeto .

  • En el caso de los cuadros de diálogo modeless, se muestra inicialmente en la parte superior de la ventana del propietario para facilitar la búsqueda. Si el usuario activa la ventana del propietario, puede ocultar el cuadro de diálogo modelado.
  • Si es necesario, ajuste la ubicación inicial para que todo el cuadro de diálogo esté visible en el monitor de destino. Si una ventana de tamaño cambia de tamaño es mayor que el monitor de destino, reduzca su ajuste.
  • Cuando se vuelve a mostrar un cuadro de diálogo, considere la posibilidad de mostrarlo en el mismo estado que el último acceso. Al cerrar, guarde el monitor usado, el tamaño de la ventana, la ubicación y el estado (maximizado frente a la restauración). En redisplay, restaure el tamaño del cuadro de diálogo guardado, la ubicación y el estado mediante el monitor adecuado. Además, considere la posibilidad de que estos atributos persistan entre instancias de programa por usuario.
  • Para ventanas de tamaño redimensionable, establezca un tamaño de ventana mínimo si hay un tamaño por debajo del cual el contenido ya no se puede usar. Considere la posibilidad de modificar la presentación para que el contenido se pueda usar a tamaños más pequeños.

screen shot of centered media player buttons

En este ejemplo, Reproductor multimedia de Windows cambia su formato cuando la ventana se vuelve demasiado pequeña para el formato estándar.

  • No use el atributo Always on Top.
    • Excepción: Use solo cuando un cuadro de diálogo implemente una operación básicamente modal, pero debe suspenderse brevemente para acceder a la ventana del propietario. Por ejemplo, cuando se revisa la ortografía de un documento, los usuarios pueden dejar ocasionalmente el cuadro de diálogo corrector ortográfico y acceder al documento para corregir los errores.

Para obtener más información y ejemplos, vea Administración de ventanas.

Barras de título

  • Los cuadros de diálogo no tienen iconos de barra de título. Los iconos de la barra de título se usan como distinción visual entre las ventanas principales y las ventanas secundarias.
    • Excepción: Si se usa un cuadro de diálogo para implementar una ventana principal (como una utilidad) y, por tanto, aparece en la barra de tareas, tiene un icono de barra de título. En este caso, optimice el título para mostrarlo en la barra de tareas colocando concisamente la información distintiva primero.
  • Los cuadros de diálogo siempre tienen un botón Cerrar. Los cuadros de diálogo modeless también pueden tener un botón Minimizar. Los cuadros de diálogo que se pueden cambiar de tamaño pueden tener un botón Maximizar.
  • No deshabilite el botón Cerrar. Tener un botón Cerrar ayuda a los usuarios a mantener el control al permitirles cerrar las ventanas que no quieren.
    • Excepción: En el caso de los diálogos de progreso, puede deshabilitar el botón Cerrar si la tarea debe ejecutarse para completarse para lograr un estado válido o evitar la pérdida de datos.
  • El botón Cerrar de la barra de título debe tener el mismo efecto que el botón Cancelar o Cerrar dentro del cuadro de diálogo. Nunca dé el mismo efecto que OK.
  • Si el título y el icono de la barra de título ya se muestran de forma destacada cerca de la parte superior de la ventana, puede ocultar el título de la barra de título y el icono para evitar la redundancia. Sin embargo, todavía tiene que establecer un título adecuado internamente para su uso por Windows.

Interacción

  • Cuando se muestra, los cuadros de diálogo iniciados por el usuario siempre deben tener el foco de entrada. Los cuadros de diálogo iniciados por el programa no deben centrarse en la entrada porque el usuario puede estar interactuando con otra ventana. Esta interacción no se ha dirigido correctamente en el cuadro de diálogo puede tener consecuencias imprevistas.

  • Asigne el foco de entrada inicial al control con el que es más probable que los usuarios interactúen primero, lo que suele ser (pero no siempre) el primer control interactivo. Evite asignar el foco de entrada inicial a un vínculo de Ayuda.

  • Para la navegación por teclado, el orden de tabulación debe fluir en un orden lógico, generalmente de izquierda a derecha, de arriba abajo. Normalmente, el orden de tabulación sigue el orden de lectura, pero considere la posibilidad de realizar estas excepciones:

    • Coloque los controles más usados anteriormente en orden de tabulación.
    • Coloque los vínculos de Ayuda en la parte inferior de un cuadro de diálogo, después de los botones de confirmación en orden de tabulación.

    Al asignar el orden, supongamos que los usuarios muestran cuadros de diálogo para su propósito previsto; por lo tanto, por ejemplo, los usuarios muestran cuadros de diálogo de elección para tomar decisiones, no revisar y hacer clic en Cancelar.

  • Al presionar la tecla Esc, siempre se cierra un cuadro de diálogo activo. Esto se aplica a los cuadros de diálogo con Cancelar o Cerrar, e incluso si se ha cambiado el nombre de Cancel a Close porque los resultados ya no se pueden deshacer.

Claves de acceso

  • Siempre que sea posible, asigne claves de acceso únicas a todos los controles interactivos o a sus etiquetas.Los cuadros de texto de solo lectura son controles interactivos (porque los usuarios pueden desplazarlos y copiar texto) para que se beneficien de las claves de acceso. No asigne claves de acceso a:

    • Botones Aceptar, Cancelar y Cerrar. Enter y Esc se usan para sus claves de acceso. Sin embargo, asigne siempre una clave de acceso a un control que significa Aceptar o Cancelar, pero tiene una etiqueta diferente.

      screen shot of delete file dialog box

      En este ejemplo, el botón confirmar positivo tiene asignada una clave de acceso.

    • Etiquetas de grupo. Normalmente, a los controles individuales de un grupo se les asignan claves de acceso, por lo que la etiqueta de grupo no necesita una. Sin embargo, si hay escasez de claves de acceso, asigne una clave de acceso a la etiqueta de grupo y no a los controles individuales.

    • Botones genéricos de Ayuda, a los que se accede con F1.

    • Etiquetas de vínculo. A menudo hay demasiados vínculos para asignar claves de acceso únicas y los caracteres de subrayado se suelen usar para indicar que los vínculos ocultan los caracteres de subrayado de la clave de acceso. En su lugar, acceda a vínculos con la tecla Tab.

    • Nombres de tabulación. Las pestañas se recorren mediante Ctrl+Tab y Ctrl+Mayús+Tab.

    • Examinar botones con la etiqueta "...". Estos botones Examinar no se pueden asignar de forma única a las teclas de acceso.

    • Controles sin etiquetar, como controles de número, botones de comandos gráficos y controles de divulgación progresiva sin etiquetar.

    • Texto estático sin etiqueta o etiquetas para controles que no son interactivos, como barras de progreso.

  • Siempre que sea posible, asigne claves de acceso para los comandos que se usan habitualmente según las asignaciones de claves de acceso estándar. Aunque las asignaciones de claves de acceso coherentes no siempre son posibles, se prefieren especialmente para los cuadros de diálogo usados con frecuencia.

  • Asigne primero las teclas de acceso del botón confirmar para asegurarse de que tienen las asignaciones de claves estándar. Si no hay una asignación de clave estándar, use la primera letra de la primera palabra. Por ejemplo, la tecla de acceso para los botones Sí y No commit siempre debe ser "Y" y "N", independientemente de los demás controles del cuadro de diálogo.

  • Para facilitar la búsqueda de las teclas de acceso, asigne las teclas de acceso a un carácter que aparezca al principio de la etiqueta, idealmente el primer carácter, incluso si hay una palabra clave que aparece más adelante en la etiqueta.

  • Prefiere caracteres con anchos anchos, como w, m y letras mayúsculas.

  • Prefiere un consonante distintivo o una vocal, como "x" en Exit.

  • Evite el uso de caracteres que dificultan la visualización del subrayado, como (de la mayoría de los problemas a los menos problemáticos):

    • Letras que solo tienen un píxel ancho, como i y l.
    • Letras con descendientes, como g, j, p, q e y.
    • Letras junto a una letra con un descendiente.

Para obtener más instrucciones y ejemplos, consulte Teclado.

Cuadros de diálogo de progreso

En el caso de las tareas de larga duración, suponga que los usuarios harán algo más mientras se completa la tarea. Diseñe la tarea para ejecutar desatendida.

  • Presente a los usuarios el cuadro de diálogo de comentarios de progreso si una operación tarda más de cinco segundos en completarse, junto con un comando para cancelar o detener la operación.
    • Excepción: En el caso de los asistentes y los flujos de tareas, use un cuadro de diálogo modal para el progreso solo si la tarea permanece en la misma página (en lugar de avanzar a otra página) y los usuarios no pueden hacer nada mientras espera. De lo contrario, use una página de progreso o un progreso en contexto.
  • Si la operación es una tarea de larga duración (más de 30 segundos) y se puede realizar en segundo plano, use un cuadro de diálogo de progreso de modelado para que los usuarios puedan seguir usando el programa mientras espera.
  • Cuadros de diálogo de progreso del modelo:
    • Tenga un botón Minimizar en la barra de título.
    • Se muestran en la barra de tareas.
  • Implemente diálogos de progreso del modelo para que sigan ejecutándose aunque se cierre la ventana del propietario.

screen shot of copy dialog box with progress bar

En este ejemplo, la copia del archivo continúa incluso si se cierra la ventana del propietario.

  • Proporcione un botón de comando para detener la operación si tarda más de unos segundos en completarse o tiene la posibilidad de que nunca se complete. Etiquete el botón Cancelar si la cancelación devuelve el entorno a su estado anterior (sin efectos secundarios); de lo contrario, etiquete el botón Detener para indicar que deja intacta la operación completada parcialmente. Puede cambiar la etiqueta de botón de Cancelar a Detener en medio de la operación, si en algún momento no es posible devolver el entorno a su estado anterior.

screen shot of dialog box with cancel button

En este ejemplo, detener el diagnóstico del problema no tiene ningún efecto secundario.

  • Proporcione un botón de comando para pausar la operación si tarda más de varios minutos en completarse y afecta a la capacidad de los usuarios de realizar el trabajo. Si lo hace, no obliga al usuario a elegir entre completar la tarea y realizar su trabajo.
  • Recopile toda la información que pueda antes de iniciar la tarea.
  • Si se detectan problemas recuperables, haga que los usuarios traten todos los problemas encontrados al final de la tarea. Si eso no es práctico, haga que los usuarios traten problemas a medida que se producen.
  • No abandone las tareas como resultado de errores recuperables.

screen shot of dialog box with try again button

En este ejemplo, Windows Explorer permite a los usuarios continuar con la tarea después de un error recuperable.

  • Indique problemas al activar la barra de progreso en rojo.

screen shot of progress bar and try again button

En este ejemplo, se quitó un disco extraíble durante una copia de archivos.

  • Si los resultados son claramente evidentes para los usuarios, cierre el cuadro de diálogo de progreso automáticamente cuando se complete correctamente. De lo contrario, use comentarios solo para notificar problemas:
    • Para mostrar comentarios sencillos, muestre los comentarios en el cuadro de diálogo de progreso y cambie el botón Cancelar a Cerrar.
    • Para mostrar comentarios detallados, cierre el cuadro de diálogo de progreso y muestre un cuadro de diálogo informativo.

No use una notificación para los comentarios de finalización. Use un cuadro de diálogo de progreso o una notificación correcta de la acción, pero no ambas.

Tiempo restante

  • Use los siguientes formatos de hora. Comience con el primero de los siguientes formatos en los que la unidad de tiempo más grande no sea cero y, a continuación, cambie al siguiente formato una vez que la unidad de tiempo más grande se convierta en cero.

Para barras de progreso:

Si la información relacionada se muestra en un formato de dos puntos:

Tiempo restante: horas h, m minutos

Tiempo restante: m minutos, s segundos

Tiempo restante: s segundos

Si el espacio de pantalla está en un nivel premium:

h horas, m mins restantes

m mins, s secs restantes

s segundos restantes

Lo contrario:

h horas, m minutos restantes

m minutos, s segundos restantes

s segundos restantes

Para barras de título:

hh:mm restante

mm:ss restante

0:ss restantes

Este formato compacto muestra primero la información más importante para que no se trunquen en la barra de tareas.

  • Realice estimaciones precisas, pero no proporcione precisión falsa. Si la unidad más grande es de horas, dé minutos (si son significativos), pero no segundos.

Incorrecto:

hh hours, mm minutes, ss seconds

  • Mantenga actualizada la estimación. El tiempo restante de actualización calcula al menos cada 5 segundos.
  • Céntrese en el tiempo restante porque es la información que más le interesan a los usuarios. Conceda tiempo total transcurrido solo cuando haya escenarios en los que el tiempo transcurrido sea útil (por ejemplo, cuando es probable que la tarea se repita). Si el tiempo restante se asocia a una barra de progreso, no tenga texto completo por porcentaje porque esa información se transmite por la propia barra de progreso.
  • Sea gramaticalmente correcto. Use unidades singulares cuando el número sea uno.

Incorrecto:

1 minutos, 1 segundos

  • Use mayúsculas de estilo de frase.

Para obtener más información y ejemplos, vea Barras de progreso.

Iconos y gráficos

Elementos gráficos

  • No use gráficos grandes que no sirvan para nada más allá de llenar el espacio con caramelos oculares. Mantenga la apariencia simple en su lugar.

Incorrecto:

screen shot of dialog box with a large graphic

En este ejemplo, el gráfico grande no tiene ningún propósito.

Iconos de la barra de título

  • Los cuadros de diálogo no tienen iconos de barra de título.
    • Excepción: Si se usa un cuadro de diálogo para implementar una ventana principal (como una utilidad) y, por tanto, aparece en la barra de tareas, tiene un icono de barra de título.

Iconos de cuerpo

  • Elija el icono de cuerpo en función del patrón de diseño:
Patrón Icono de cuerpo
Diálogos de preguntas
Programa, característica, objeto, icono de advertencia (si se puede perder datos o acceso al sistema), advertencia de seguridad o ninguna.
Cuadros de diálogo de elección
Ninguno.
Cuadros de diálogo de progreso
Ninguno (pero puede tener una animación).
Cuadros de diálogo informativos
Ninguno.
  • Incorrecto:

screen shot of dialog box with warning icon

En este ejemplo, se usa incorrectamente un icono de advertencia para una pregunta que no implica la posible pérdida de datos o acceso al sistema.

  • Considere la posibilidad de usar iconos para ayudar a los usuarios a reconocer visualmente las características del programa. Esta técnica es más eficaz cuando los iconos son fácilmente reconocibles y se usan en varias ubicaciones dentro del programa.

screen shot of favorites dialog box with star icon

En este ejemplo, el icono de estrella amarilla representa Favoritos. El icono es fácilmente reconocible y se usa de forma coherente a lo largo de Windows para representar favoritos.

  • Use iconos para ayudar a los usuarios a reconocer el objeto en cuestión.

screen shot of dialog box with powerpoint icon

En este ejemplo, el icono del objeto ayuda a los usuarios a reconocer el tipo de archivo que se abre o se guarda.

  • Considere la posibilidad de usar iconos para ayudar a que las características se expliquen por sí mismas.

images of arrows showing how to position monitor

En este ejemplo, estos iconos ayudan a los usuarios a visualizar el efecto de sus características.

  • Use un icono en los cuadros de diálogo Acerca del cuadro de diálogo para la personalización de marca de la aplicación.

screen shot of about dialog box with windows logo

En este ejemplo, se usa un mapa de bits en About Box para identificar y personalizar la aplicación.

Iconos de nota al pie

  • Si tiene una nota al pie, considere la posibilidad de usar un icono de nota al pie para resumir el tema de la nota al pie.

screen shot of dialog box with footnote icon

En este ejemplo, el icono de nota al pie indica que la pregunta tiene implicaciones de seguridad.

  • No use un icono de nota al pie que repita el icono de cuerpo.
  • No use los iconos estándar de error o información. Las condiciones de error deben transmitirse a través del icono del cuerpo y las notas al pie siempre son para obtener información, lo que hace que el icono de información sea redundante. Sin embargo, puede usar el icono de advertencia estándar y el escudo de seguridad amarillo para alertar a los usuarios de consecuencias de riesgo.

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

Botones de confirmación

Notas:

  • Estas instrucciones no se aplican a los diálogos de preguntas mediante vínculos de comandos, ya que ese patrón usa vínculos de comandos en lugar de botones.
  • [Hacerlo] y [No hacerlo] son respuestas afirmativas y negativas, respectivamente, a la instrucción principal.

General

  • Elija los botones de confirmación en función del patrón de diseño:
Etiqueta Value
Patrón
Botones de confirmación
Diálogos de preguntas (mediante botones)
Uno de los siguientes conjuntos de comandos concisos: Sí/No, Sí/No/Cancelar, [Do it]/Cancel, [Do it]/[Don't do it], [Do it]/[Don't do it]/Cancel.
Diálogos de preguntas (mediante vínculos)
Cancel (Cancelar)
Cuadros de diálogo de elección
  • Cuadros de diálogo modales: Ok/Cancel o [Do it]/Cancel
  • Cuadros de diálogo modeless: botón Cerrar en el cuadro de diálogo y la barra de título
  • Panel de tareas: botón Cerrar en la barra de título
Cuadros de diálogo de progreso
Use Cancelar si devuelve el entorno a su estado anterior (sin efecto secundario); En caso contrario, use Detener.
Cuadros de diálogo informativos
Casi.
  • Todos los botones de confirmación excepto Aplicar dan como resultado cerrar la ventana del cuadro de diálogo.

  • No confirme los botones de confirmación. Hacerlo innecesariamente puede ser muy molesto. Excepciones:

    • La acción es potencialmente grave.
    • La acción es claramente incoherente con otras acciones.
    • Si es incorrecto, la acción puede provocar una pérdida significativa de datos, tiempo o esfuerzo en nombre del usuario.

    Para obtener más instrucciones y ejemplos, consulte Confirmaciones.

  • No deshabilite los botones de confirmación. Excepciones:

  • Alinear a la derecha botones de confirmación en una sola fila en la parte inferior del cuadro de diálogo, pero encima del área de notas al pie. Haga esto incluso si hay un solo botón de confirmación (por ejemplo, Aceptar).

    Incorrecto:

    screen shot of message with centered ok button

    En este ejemplo, el botón Aceptar se centra incorrectamente.

  • Presente los botones de confirmación en el orden siguiente:

    1. Aceptar/[Hacerlo]/Sí
    2. [No hacerlo]/No
    3. Cancelar
    4. Aplicar (si está presente)
    5. Ayuda (si está presente)
  • Si tiene muchos botones de confirmación relacionados, consolide con botones divididos.

  • Tener una separación clara de los botones de confirmación (que cierran la ventana) y todos los demás botones de comando (como Avanzado).

Responder a las instrucciones principales

  • Use botones de confirmación positivos que son respuestas específicas a la instrucción principal, en lugar de etiquetas genéricas como Aceptar o Sí/No. Los usuarios deben poder comprender las opciones leyendo solo el texto del botón. Excepciones:

    • Use Cerrar para los diálogos que no tienen configuración, como los diálogos informativos. No use Nunca Cerrar para los diálogos que tienen la configuración.

    • Use Ok cuando las respuestas "específicas" sigan siendo genéricas, como Guardar, Seleccionar o Elegir. Use Aceptar al cambiar una configuración específica o una colección de configuraciones.

    • En el caso de los cuadros de diálogo heredados sin una instrucción principal, puede usar etiquetas genéricas como Aceptar. A menudo, estos cuadros de diálogo no están diseñados para realizar una tarea específica, lo que impide respuestas más específicas.

    • Algunas tareas requieren una lectura más cuidadosa para que los usuarios tomen decisiones informadas. Esto suele ser el caso con confirmaciones. En tales casos, puede usar las etiquetas genéricas de botones de confirmación para obligar a los usuarios a leer las instrucciones principales y evitar decisiones de hasty.

      Correcto:

      screen shot of message with yes and no buttons

      En este ejemplo, el uso de botones de confirmación Sí/No obliga a los usuarios a leer al menos la instrucción principal.

  • Como alternativa, puede agregar la palabra "de todos modos" a la etiqueta del botón confirmar positivo para indicar que el cuadro de diálogo presenta un motivo para no continuar y que los usuarios deben leer el diálogo cuidadosamente antes de continuar.

    Correcto:

    screen shot of message and uninstall anyway button

    En este ejemplo, se agrega "de todos modos" a la etiqueta del botón confirmar para indicar que los usuarios deben continuar cuidadosamente.

  • Use Cancelar o Cerrar para botones de confirmación negativos en lugar de respuestas específicas a la instrucción principal. A menudo, los usuarios se dan cuenta de que no quieren realizar una tarea una vez que ven un cuadro de diálogo. Si Cancel o Close se han vuelto a etiquetar en respuestas específicas, los usuarios tendrían que leer cuidadosamente todos los botones de confirmación para determinar cómo cancelar. Etiquetar Cancelar y Cerrar de forma coherente hace que sean fáciles de encontrar. Excepciones:

    • No use Sí/Cancelar. Use siempre Sí/No como par.
    • Use una respuesta específica cuando Cancel sea ambiguo.
  • No asigne etiquetas genéricas a su significado específico con texto en el área de contenido. En su lugar, use etiquetas de botón de confirmación específicas o un cuadro de diálogo de pregunta mediante vínculos si las etiquetas son largas.

    Incorrecto:

    screen shot of message with unclear use of buttons

    En este ejemplo, Aceptar se asigna a Continuar, Cancelar se asigna a Permanecer en la página.

Botones Sí y No

  • Prefiere respuestas específicas a 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, las confirmaciones suelen tener botones Sí y No para hacer que los usuarios tengan alguna idea antes de responder.

  • Use los botones Sí y No solo para responder a preguntas sí o no. La instrucción principal debe expresarse naturalmente como una pregunta sí o no. Nunca use Ok y Cancel para sí o no preguntas.

    Incorrecto:

    Screenshot that shows a message with an 'OK' for a yes-no question.

    Correcto:

    screen shot of message with yes for same question

    Mejor:

    screen shot of message with run for same question

    En estos ejemplos, Sí y No son buenas respuestas a sí y no preguntas, pero las respuestas específicas son aún mejores.

  • Considere la posibilidad de formular la instrucción principal como sí o ninguna pregunta si los botones de confirmación con expresiones específicas resultan ser largos o incómodos. Como alternativa, puede usar vínculos de comandos para respuestas más largas (cinco palabras o más) a la instrucción principal.

    Incorrecto:

    screen shot of message with wordy button labels

    Correcto:

    screen shot of message with yes/no button labels

    La expresión específica del ejemplo incorrecto es demasiado larga, por lo que el ejemplo correcto usa Sí y No.

  • No use los botones Sí y No si el significado de la respuesta No no está claro. Si es así, use respuestas específicas en su lugar.

Botones Aceptar

  • En los cuadros de diálogo modales, hacer clic en Aceptar significa aplicar los valores, realizar la tarea y cerrar la ventana.

  • No use botones Aceptar para responder a preguntas.

  • No asigne claves de acceso a Aceptar, ya que Entrar es la tecla de acceso del botón predeterminado. Al hacerlo, las demás claves de acceso son más fáciles de asignar.

  • Etiqueta los botones Aceptar correctamente. El botón Aceptar debe etiquetarse ok, no Ok o Ok.

  • No use botones Aceptar para errores o advertencias. Los problemas nunca están bien. Use Close en su lugar.

    Incorrecto:

    screen shot of message with ok button

    En este ejemplo, se debe usar Close en lugar de Aceptar.

  • No use botones Aceptar en cuadros de diálogo modeless. En su lugar, los cuadros de diálogo modelados deben usar botones de confirmación específicos de la tarea (por ejemplo, Buscar). Sin embargo, algunos cuadros de diálogo modeless solo requieren un botón Cerrar.

Botones Cancelar

  • Al hacer clic en Cancelar, abandonar todos los cambios, cancelar la tarea, cerrar la ventana y devolver el entorno a su estado anterior, dejando ningún efecto secundario. En el caso de los cuadros de diálogo de elección anidados, al hacer clic en Cancelar en el cuadro de diálogo de elección del propietario, también se abandonan los cambios realizados por los diálogos de elección de propiedad.

  • Proporcione un botón Cancelar para permitir que los usuarios abandonen explícitamente los cambios. Los cuadros de diálogo necesitan un punto de salida claro. No dependa de que los usuarios encuentren el botón Cerrar en la barra de título.

    • Excepción: No proporcione un botón Cancelar para cuadros de diálogo sin configuración. Los botones Aceptar y Cerrar tienen el mismo efecto que Cancelar en este caso.

    Incorrecto:

    screen shot of message with ok button only

    En este ejemplo, tener solo un botón Cerrar en la barra de título hace que aparezca como si los usuarios no tuvieran una opción.

  • No use botones Cancelar para responder a preguntas.

    Incorrecto:

    screen shot of message with ok for yes-no question

    En este ejemplo, ok y Cancel se usan incorrectamente para responder a una pregunta Sí o No.

  • No asigne claves de acceso a Cancel, ya que Esc es la clave de acceso. Al hacerlo, las demás claves de acceso son más fáciles de asignar.

  • No use botones Cancelar en cuadros de diálogo modeless. En su lugar, use Close.

  • No deshabilite el botón Cancelar. Los usuarios siempre deben poder cancelar los cuadros de diálogo.

    • Excepción: Puede deshabilitar el botón Cancelar en un cuadro de diálogo de progreso si hay un período durante el cual no se puede cancelar la operación. Sin embargo, una mejor solución es diseñar estas operaciones para que siempre se puedan cancelar.

Cerrar botones

  • Use botones Cerrar para cuadros de diálogo modeless, así como diálogos modales que no se pueden cancelar.
  • Hacer clic en Cerrar significa cerrar la ventana del cuadro de diálogo, dejando los efectos secundarios existentes. No uses Done, porque no es una construcción imperativa. En el caso de los cuadros de diálogo de elección anidada, al hacer clic en Cerrar en el cuadro de diálogo de elección del propietario, se conservan los cambios realizados por los diálogos de elección de propiedad.
  • Coloque un botón Cerrar explícito en el cuerpo del cuadro de diálogo. Los cuadros de diálogo necesitan un punto de salida claro. No dependa de que los usuarios encuentren el botón Cerrar en la barra de título.
  • Asegúrese de que el botón Cerrar de la barra de título tiene el mismo efecto que Cancelar o Cerrar.
  • No asigne claves de acceso a Close, ya que Esc es la clave de acceso. Al hacerlo, las demás claves de acceso son más fáciles de asignar.

Aplicar botones

  • No use los botones Aplicar en cuadros de diálogo que no sean hojas de propiedades ni paneles de control. El botón Aplicar significa aplicar los cambios pendientes, pero deje abierta la ventana. Esto permite a los usuarios evaluar los cambios antes de cerrar la ventana. Sin embargo, solo la hoja de propiedades y los paneles de control tienen esta necesidad.

    Incorrecto:

    screen shot of dialog box with apply button

    En este ejemplo, un cuadro de diálogo de elección no necesita tener un botón Aplicar.

Botones de confirmación para cuadros de diálogo indirectos

Nota: Los cuadros de diálogo indirectos se muestran fuera del contexto, ya sea como resultado indirecto de una tarea o el resultado de un problema con un sistema o un proceso en segundo plano. En el caso de los diálogos indirectos, el botón Cancelar es ambiguo porque podría significar cancelar el diálogo o cancelar toda la tarea.

  • Si los usuarios necesitan cancelar el cuadro de diálogo y la tarea, asigne botones de confirmación para hacer ambos. Etiquete el botón que cancela el cuadro de diálogo con una respuesta negativa a la instrucción principal. Etiquete el botón que cancela toda la tarea con Cancelar. El uso de Cancel permite usar el cuadro de diálogo en muchos contextos.

    Correcto:

    screen shot of dialog box with save/don't save

    En este ejemplo, este cuadro de diálogo se muestra mediante Windows Paint como resultado de un comando New o Exit cuando no se ha guardado el gráfico. No guarde el cuadro de diálogo sin guardar, mientras que Cancelar cancela el comando Nuevo o Salir.

    Incorrecto:

    screen shot of dialog box with yes/no buttons

    En este ejemplo, no hay ninguna manera de cancelar la tarea (cerrar Office barra de acceso directo) que llevó a mostrar este cuadro de diálogo. Este cuadro de diálogo necesita un botón Cancelar.

  • Si los usuarios solo necesitan cancelar el cuadro de diálogo pero no la tarea, use un botón con una respuesta negativa específica a la instrucción principal y no tenga un botón Cancelar.

    screen shot of dialog box with run/don't run

    En este ejemplo, este cuadro de diálogo se muestra indirectamente como resultado de navegar a una página web que instala un control ActiveX. El uso de Cancel sería ambiguo aquí, por lo que no se usa en su lugar Don't run.

Para obtener más información y ejemplos, vea Botones de comando.

  • Presentar un conjunto de comandos largos mediante vínculos de comandos, en lugar de botones de comando o una combinación de botones de radio y un botón Aceptar. Esto permite a los usuarios responder con un solo clic. Sin embargo, este enfoque solo funciona para una sola pregunta.
  • Presentar primero los vínculos de comandos más usados. El orden resultante debe seguir aproximadamente la probabilidad de uso, pero también tener un flujo lógico.
    • Excepción: Los vínculos de comandos que dan lugar a hacer todo deben colocarse primero.
  • Si un vínculo de comando requiere una explicación adicional, proporcione una explicación complementaria. Las explicaciones complementarias describen por qué es posible que los usuarios quieran elegir el comando o qué ocurre si se elige el comando.
  • No use explicaciones complementarias que sean restatementos de palabras del vínculo de comando. Use una explicación complementaria solo cuando no pueda hacer que un vínculo de comando se explique por sí mismo. Proporcionar una explicación complementaria para un vínculo de comando no significa que tenga que proporcionarlos para todos los comandos.

screen shot of dialog box with text noting options

En este ejemplo, la explicación complementaria describe las implicaciones de una de las opciones.

  • Use frases que comiencen con un verbo, sin terminar la puntuación.
  • Si se recomienda encarecidamente un comando, considere la posibilidad de agregar "(recomendado)" a la etiqueta. Asegúrese de agregar a la etiqueta de vínculo, no a la explicación complementaria.
  • Si un comando está pensado solo para usuarios avanzados, considere la posibilidad de agregar "(avanzado)" a la etiqueta. Asegúrese de agregar a la etiqueta de vínculo, no a la explicación complementaria.
  • Proporcione siempre un botón Cancelar explícito. No use un vínculo de comando para este propósito.

Incorrecto:

screen shot of dialog box with don't exit link

En este ejemplo, el cuadro de diálogo usa un vínculo de comando en lugar de un botón Cancelar.

Para obtener más información y ejemplos, vea Vínculos de comandos.

No volver a mostrar este <elemento>

  • Considere la posibilidad de usar una opción No volver a mostrar este <elemento> para permitir que los usuarios supriman un cuadro de diálogo periódico, solo si no hay una alternativa mejor. Es mejor mostrar siempre el cuadro de diálogo si los usuarios realmente lo necesitan o simplemente eliminarlo si no lo necesitan.
  • Use esta expresión específica reemplazar <elemento> por el elemento específico. Por ejemplo, no vuelva a mostrar este aviso. Al hacer referencia a un cuadro de diálogo en general, use No volver a mostrar este mensaje.
  • Indique claramente cuándo se usará la entrada del usuario para los valores predeterminados futuros agregando la siguiente frase en la opción: Las selecciones se usarán de forma predeterminada en el futuro.
  • No seleccione la opción de forma predeterminada. Si el cuadro de diálogo realmente debe mostrarse una sola vez, hágalo sin preguntar. No use esta opción como excusa para molestar a los usuarios asegurarse de que el comportamiento predeterminado no es molesto.

Incorrecto:

screen shot of message asking unnecessary question

En este ejemplo, el mensaje solo se debe mostrar una vez. No es necesario preguntar.

  • Hacer que la configuración persista por usuario.
  • Si los usuarios seleccionan la opción y hacen clic en Cancelar, esta opción surte efecto. Esta configuración es una metaconfiguración, por lo que no sigue el comportamiento estándar Cancel de dejar ningún efecto secundario. Tenga en cuenta que si los usuarios no quieren ver el cuadro de diálogo en el futuro, lo más probable es que también quieran cancelarlo.
  • Si es posible que los usuarios necesiten restaurar estos cuadros de diálogo, proporcione un comando Restaurar mensajes en el cuadro de diálogo Opciones del programa.

Preguntarme más tarde

  • Proporcione esta opción para descartar un cuadro de diálogo solo cuando:
    • El cuadro de diálogo es indirecto, por lo que es probable que los usuarios se centren en otra tarea.
    • Los usuarios deben responder pero no inmediatamente, por lo que pueden continuar con su trabajo.
    • La pregunta requiere un pensamiento o esfuerzo suficientes para que los usuarios puedan tomar mejores decisiones si se les da más tiempo.
    • El cuadro de diálogo o la opción se mostrarán automáticamente más adelante (para que los usuarios realmente se pregunten más adelante).
  • Incorrecto:
  • screen shot of message with ask me later option
  • En este ejemplo, la pregunta es lo suficientemente sencilla como para agregar una opción Preguntarme más adelante solo lo complica.
  • De lo contrario, espere que los usuarios respondan ahora, pero permitan cerrar el cuadro de diálogo normalmente con Cancelar o Cerrar. Cuando se usa correctamente, esta opción debe ser poco frecuente.

Más o menos

  • Use más o menos botones de divulgación progresiva para mostrar u ocultar opciones avanzadas o raras veces usadas, comandos o detalles que normalmente no necesitan los usuarios de destino. Al hacerlo, se simplifica el cuadro de diálogo para el uso típico. No oculte las opciones, comandos o información que se usan habitualmente porque es posible que los usuarios no los encuentren.

screen shot of dialog box with more options button

En este ejemplo, las opciones usadas raramente se ocultan de forma predeterminada.

  • No uses controles Más/Menos, a menos que realmente haya más detalles para mostrar. No solo restate la misma información en un formato diferente.
  • No use controles Más/Menos para mostrar la Ayuda. En su lugar, use vínculos de Ayuda o notas al pie.
  • Con los cuadros de diálogo de tareas, evite combinar controles Más/Menos con No volver a mostrar este <elemento> . Esta combinación tiene un aspecto incómodo.
  • Para obtener instrucciones de etiquetado, consulte Divulgación progresiva.

Notas al pie

  • Use notas al pie para obtener información que no es esencial para el propósito de un cuadro de diálogo, pero que los usuarios pueden resultar útiles para tomar decisiones. La mayoría de los usuarios deben poder omitir las notas al pie y seguir teniendo decisiones informadas en su respuesta al cuadro de diálogo.

screen shot of dialog box with clarifying footnote

En este ejemplo, la información de nota al pie es complementaria, no esencial.

Deshabilitar o quitar controles frente a proporcionar mensajes de error

  • Cuando un control no se aplica en el contexto actual, tenga en cuenta las siguientes opciones:
    • Quite el control cuando no haya ninguna manera de que los usuarios lo habiliten, o los usuarios no esperan que se aplique y su estado no cambie con frecuencia. Esto simplifica el cuadro de diálogo y los usuarios no lo perderán. Tener un control aparece y desaparece con frecuencia es molesto.
    • Deshabilite el control cuando los usuarios esperan que se aplique o su estado cambie con frecuencia, y los usuarios pueden deducir fácilmente por qué el control está deshabilitado. Un ejemplo de deducción fácil es deshabilitar un botón de confirmación cuando hay un único cuadro de texto vacío que requiere cualquier entrada. Puede usar globos para mostrar problemas de entrada de usuario no críticos con cuadros de texto y listas desplegables editables. Sin embargo, si el problema no se puede explicar con un globo o implica varios controles, la deducción ya no sería fácil.
    • De lo contrario, deje el control habilitado, pero proporcione un mensaje de error cuando se use incorrectamente. Deshabilitar en este caso dificultaría que los usuarios entiendan por qué el control está deshabilitado. Los usuarios se verían obligados a determinar el problema mediante la experimentación y la lógica deductiva. Es mejor proporcionar un mensaje de error útil para explicar el problema explícitamente.
  • Propina: Si no está seguro de si debe deshabilitar un control o dar un mensaje de error, empiece por redactar el mensaje de error que puede proporcionar. Si el mensaje de error contiene información útil que es probable que los usuarios de destino no puedan deducir rápidamente, deje el control habilitado y proporcione el error. De lo contrario, deshabilite el control .
  • Si deshabilita un control, deshabilite también todos los controles asociados, como su etiqueta, explicaciones complementarias o botones de comando. Sin embargo, no deshabilite sus cuadros de grupo, etiqueta de grupo o explicación de grupo si hay alguno.

screen shot of dialog box with dimmed controls

En este ejemplo, las etiquetas del cuadro de texto deshabilitadas también están deshabilitadas, pero su etiqueta de grupo y su explicación de grupo no lo son.

Entrada necesaria

  • Para indicar que los usuarios deben proporcionar información en un control, tenga en cuenta las siguientes opciones:

    • No indique nada, pero controle la entrada necesaria que falta con mensajes de error. Este enfoque reduce el desorden y funciona bien si la mayoría de las entradas es opcional o es probable que los usuarios omitan los controles, lo que mantiene el número de mensajes de error bajos.

    • Indique la entrada necesaria mediante un asterisco al principio de la etiqueta. Explique el asterisco mediante:

      • Nota al pie en la parte inferior del área de contenido que indica * Entrada requerida.
      • Información sobre herramientas en el asterisco que indica Entrada requerida.

      Este enfoque funciona bien si no hay muchos controles necesarios, pero mal si la mayoría de los controles son necesarios.

      screen shot of text box labels with asterisks

      En este ejemplo, se usan asteriscos para indicar la entrada necesaria.

    • Si todos los controles requieren entrada, indique "Toda la entrada necesaria" en un lugar adecuado en la parte superior del área de contenido. Este enfoque reduce el desorden de este caso específico.

    • Indique entradas opcionales con "(opcional)" después de la etiqueta. Este enfoque funciona bien si se requiere la mayoría de las entradas, pero de lo contrario, es deficiente.

  • Para mantener la coherencia, intente usar el mismo método para indicar la entrada necesaria en todo el programa. En concreto, indique la entrada necesaria o opcional según sea necesario, pero evite usar ambas dentro del mismo programa.

Control de errores

  • Evite errores mediante el uso de controles restringidos a entradas de usuario válidas. También puede ayudar a reducir el número de errores proporcionando valores predeterminados razonables.

  • Valide la entrada del usuario lo antes posible y muestre los errores lo más cerca posible del punto de entrada.

  • Use el control de errores modeless (errores en contexto o globos) para problemas de entrada del usuario.

    • Use globos para problemas de entrada de usuario de punto único no críticos detectados en un cuadro de texto o inmediatamente después de que un cuadro de texto pierda el foco. Los globos no requieren espacio de pantalla disponible ni el diseño dinámico necesario para mostrar mensajes en contexto. Muestra solo un solo globo a la vez. Dado que el problema no es crítico, no es necesario ningún icono de error. Los globos desaparecen cuando se hace clic, cuando se resuelve el problema o después de un tiempo de espera.

      screen shot of 'incorrect character' message

      En este ejemplo, un globo indica un problema de entrada mientras sigue en el control .

  • Use errores en contexto para la detección de errores retrasada, normalmente los errores encontrados haciendo clic en un botón confirmar. (No use errores en contexto para la configuración que se confirma inmediatamente). Puede haber varios errores en contexto a la vez. Use texto normal y un icono de error de 16 x 16 píxeles, colocándolos directamente junto al problema siempre que sea posible. Los errores en contexto no desaparecen a menos que el usuario se confirme y no se encuentren otros errores.

    screen shot of dialog box with two error messages

    En este ejemplo, se usa un error en contexto para un error encontrado haciendo clic en el botón Confirmar.

  • Use el control de errores modales (cuadros de diálogo de tareas o cuadros de mensaje) para todos los demás problemas, incluidos los errores que implican varios controles, o son errores no contextuales o no de entrada encontrados haciendo clic en un botón confirmar.

  • Cuando se encuentra y notifica un problema de entrada, establezca el foco de entrada en el primer control con los datos incorrectos. Desplácese por el control a la vista si es necesario.

Para obtener más información y ejemplos, vea Mensajes de error y Globos.

Ayuda

  • Al proporcionar asistencia al usuario, tenga en cuenta las siguientes opciones (enumeradas en su orden de preferencia):

    • Proporcione etiquetas autoexplicativas a los controles interactivos. Es más probable que los usuarios lean las etiquetas en controles interactivos que cualquier otro texto.
    • Proporcione explicaciones en contexto mediante etiquetas de texto estáticas.
    • Proporcione un vínculo de Ayuda específico a un tema de Ayuda relevante.
  • Busque vínculos de Ayuda en la parte inferior del área de contenido del cuadro de diálogo. Si el cuadro de diálogo tiene una nota al pie y el vínculo Ayuda está relacionado con él, coloque el vínculo Ayuda dentro de la nota al pie.

    screen shot of dialog box with help link

    En este ejemplo, el vínculo Ayuda se aplica a todo el cuadro de diálogo.

    • Excepción: Si un cuadro de diálogo tiene varios grupos distintos de configuraciones que tienen temas de Ayuda independientes (quizás dentro de cuadros de grupo), busque los vínculos de Ayuda en la parte inferior de los grupos.
  • No use vínculos generales o vagos de temas de Ayuda ni botones genéricos de Ayuda. A menudo, los usuarios omiten la Ayuda genérica.

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

Valores predeterminados

  • Incluya un botón de confirmación predeterminado en cada cuadro de diálogo.
  • Para diálogos de preguntas:
    • Seleccione la opción más segura (para evitar la pérdida de datos o acceso al sistema), la respuesta más segura para ser la predeterminada. Si la seguridad y la seguridad no son factores, seleccione la respuesta más probable o conveniente.
      • Excepción: No haga que una respuesta destructiva sea la predeterminada a menos que haya una manera fácil y obvia de deshacer el comando.
  • Para los diálogos de elección:
    • Para los valores predeterminados iniciales, seleccione el más seguro (para evitar la pérdida de datos o acceso al sistema) y la mayoría de los valores seguros para cada control. Si la seguridad y la seguridad no son factores, seleccione las opciones más probables o convenientes.
    • Para los valores predeterminados posteriores, vuelva a seleccionar las opciones seleccionadas anteriormente si es probable que esos valores se repitan y, al hacerlo, es seguro y seguro. De lo contrario, seleccione los valores predeterminados iniciales.

screen shot of print dialog box

En este ejemplo, es más probable que los usuarios elijan la misma configuración de impresión que la última vez. Sin embargo, es probable que cambie el número de copias deseadas, por lo que esta configuración no se vuelve a seleccionar.

  • Admite la resolución mínima de pantalla Windows Vista de 800 x 600 píxeles. Los diseños se pueden optimizar para ventanas de tamaño redimensionable mediante una resolución de pantalla de 1024 x 768 píxeles.
  • Use ventanas redimensionables siempre que sea práctico para evitar barras de desplazamiento y datos truncados. Windows con contenido dinámico y listas se benefician más de ventanas de tamaño redimensionable.
  • Las ventanas de tamaño fijo deben ser completamente visibles y de tamaño para ajustarse al área de trabajo.
  • Las ventanas de tamaño redimensionable se pueden optimizar para resoluciones más altas, pero reducir el tamaño según sea necesario en tiempo de visualización a la resolución de pantalla real.
  • Elija un tamaño de ventana predeterminado adecuado para su contenido. No tenga miedo de usar tamaños de ventana inicial más grandes si puede usar el espacio de forma eficaz.

Texto

General

  • Quitar texto redundante. Busque texto redundante en títulos, instrucciones principales, instrucciones complementarias, áreas de contenido, vínculos de comandos y botones de confirmación. Por lo general, deje el texto completo en instrucciones y controles interactivos y quite cualquier redundancia de los demás lugares.
  • Use expresiones positivas. Las expresiones positivas son más fáciles de entender para los usuarios.

Correcto:

¿Desea habilitar el uso compartido de archivos e impresoras?

Incorrecto:

¿Desea deshabilitar el uso compartido de archivos e impresoras?

Sin embargo, la expresión debe coincidir con el comando asociado, incluso si el comando tiene una frase negativa; por ejemplo, use disable para confirmar un comando Disable.

  • Si es necesario, use la palabra "ventana" para hacer referencia al propio cuadro de diálogo.
  • Use la segunda persona ("usted/su") para indicar a los usuarios qué hacer en el área principal de instrucciones y contenido. A menudo, la segunda persona está implícita.

Ejemplos:

Elija las imágenes que desea imprimir.

Elija una cuenta.

  • Use la primera persona ("I/me/my") para permitir a los usuarios indicar al programa qué hacer en los controles del área de contenido que responden a la instrucción principal.

Ejemplo: Imprima las fotos en mi cámara.

Títulos del cuadro de diálogo

  • Use el título para identificar el comando, la característica o el programa del que procede un cuadro de diálogo.
    • Si el diálogo se inicia por el usuario, puede identificarlo con el nombre del comando o de la característica. Excepciones:
      • Si muchos comandos diferentes muestran un cuadro de diálogo, considere la posibilidad de usar el nombre del programa en su lugar.
      • Si ese título sería redundante con la instrucción principal, use el nombre del programa en su lugar.
    • Si se inicia el programa o el sistema (y, por tanto, fuera del contexto), debe identificarlo mediante el nombre del programa o la característica para dar contexto.
    • No use el título para explicar qué hacer en el cuadro de diálogo que es el propósito de la instrucción principal.
  • Use el nombre exacto del comando para los nombres basados en comandos, pero no incluya los puntos suspensivos si hay uno. Puede incluir el título del menú del comando si es necesario para crear un buen título. Ejemplo: para un objeto... en un menú Insertar, use el título Insertar objeto.
  • Si aparece un cuadro de diálogo modelado en la barra de tareas, optimice primero el título para mostrarlo en la barra de tareas colocando concisamente la información distintiva. Ejemplos: "66% completado" y "3 avisos".
  • No incluya las palabras "dialog" o "progress" en el título. Esto está implícito y dejarlo desactivado facilita el examen de los usuarios.
  • Use mayúsculas de estilo de título, sin terminar la puntuación.

Instrucciones principales

  • Use la instrucción principal para explicar concisamente qué hacer en el cuadro de diálogo. La instrucción debe ser una instrucción específica, una dirección imperativa o una pregunta. Las buenas instrucciones comunican el objetivo del usuario con el diálogo en lugar de centrarse exclusivamente en la mecánica de manipularlo.
  • Omita la instrucción principal cuando lo único que puede decir es obvio. En tales casos, el contenido del cuadro de diálogo es autoexplicativo. Por ejemplo, los cuadros de diálogo comunes Abrir archivo y Guardar archivo no necesitan una instrucción principal porque su contexto y diseño hacen que su propósito sea obvio.
  • Omita las etiquetas de control que restan la instrucción principal. En este caso, la instrucción principal toma la clave de acceso.

Aceptable:

screen shot of text box with redundant label

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

Mejor:

screen shot of same text box with one label

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

  • Sea conciso, use solo una frase única y completa. Pare la instrucción principal hasta la información esencial. Si debe explicar algo más, use la instrucción complementaria.
  • 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).
  • Use mayúsculas de estilo de oración.
  • 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: Impresión de imágenes...
  • Propina: Puedes evaluar una instrucción principal imaginando lo que dirías a un amigo. Si responder con la instrucción principal sería no natural, inútil o incómodo, volver a trabajar la instrucción.

Instrucciones complementarias

  • Cuando sea necesario, use una instrucción complementaria opcional para presentar información adicional útil para comprender o usar la página. Puede proporcionar información más detallada y definir terminología.
  • Si la apariencia del cuadro de diálogo es el programa o el sistema iniciado (y, por tanto, fuera del contexto), use la instrucción complementaria para explicar por qué ha aparecido el cuadro de diálogo. Para estos diálogos, el contexto no suele ser obvio.
  • No repita la instrucción principal con palabras ligeramente diferentes. En su lugar, omita la instrucción complementaria si no hay más que agregar.
  • Use oraciones completas, mayúsculas de estilo de oración y puntuación final.
  • Elija texto de vínculo conciso que comunique claramente y diferencie lo que hace el vínculo de comando. Debe ser autoexplicativo y corresponder a la instrucción principal. Los usuarios no deben tener que averiguar qué significa realmente el vínculo o cómo difiere de otros vínculos.
  • Inicie siempre los vínculos de comando con un verbo.
  • Use mayúsculas de estilo de frase.
  • No uses puntuación final.
  • Si es necesario, proporcione cualquier explicación adicional con oraciones completas y puntuación final. Sin embargo, agregue estas explicaciones solo cuando sea necesario no agregue explicaciones a todos los vínculos de comandos solo porque un vínculo de comando necesita uno.

Para obtener más información y ejemplos, vea Instrucciones de vínculo de comandos .

Botones de confirmación

  • Use etiquetas de botón de confirmación específicas que tengan sentido por sí mismas y que sean una respuesta a la instrucción principal. Lo ideal es que los usuarios no tengan que leer nada más para comprender la etiqueta. Es mucho más probable que los usuarios lean etiquetas de botón de comandos que texto estático.
  • Inicie las etiquetas del botón confirmar con un verbo. Las excepciones son Correcto, Sí y No.
  • Use mayúsculas de estilo de frase.
  • No uses puntuación final.
  • Asigne una clave de acceso única.
    • Excepción: No asigne claves de acceso a los botones Aceptar y Cancelar porque Entrar y Esc son sus teclas de acceso. Al hacerlo, las demás claves de acceso son más fáciles de asignar.

Documentación

Al hacer referencia a cuadros de diálogo:

  • En programación y otra documentación técnica, consulte cuadros de diálogo como cuadros de diálogo. En cualquier otro lugar, consulte los cuadros de diálogo por su título. Si la barra de título está oculta, consulte el cuadro de diálogo mediante la instrucción principal.
  • Si debe hacer referencia a un cuadro de diálogo en general, use la ventana en la documentación del usuario. Puede hacer referencia a un cuadro de diálogo de pregunta simple o confirmación como un mensaje.
  • Use el título exacto o el texto de la instrucción principal, incluida su mayúscula.
  • Cuando sea posible, dé formato al título con texto en negrita. De lo contrario, coloque el título entre comillas solo si es necesario para evitar confusiones.

Ejemplo: en Seguridad de Windows, haga clic en Más opciones.