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 ejecutar un comando, hacerles una pregunta o proporcionarles información o comentarios sobre el progreso.

Un cuadro de diálogo típico.

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

Los cuadros de diálogo son de dos tipos fundamentales:

• Los cuadros de diálogo modal requieren que los usuarios los completen y cierren antes de continuar con la ventana del propietario. Estos cuadros de diálogo se utilizan mejor para tareas críticas o poco frecuentes, puntuales, que requieren ser completadas antes de continuar.
• Los cuadros de diálogo no modal le permiten a los usuarios alternar entre el cuadro de diálogo y la ventana del propietario según lo deseen. Estos cuadros de diálogo se utilizan 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) de cuadros de diálogo de tareas. Constan de las siguientes piezas, que pueden ensamblarse en diversas combinaciones:

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

Un cuadro diálogo de tarea típico.

Los diálogos de tareas se recomiendan siempre que sea apropiado porque son fáciles de crear y consiguen 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 en una ventana independiente. Como resultado, los paneles de tareas tienen una sensación más directa y contextual que los cuadros de diálogo. Aunque técnicamente no son lo mismo, los paneles de tareas son tan similares a los cuadros de diálogo que sus directrices se presentan en este artículo.

Un panel de tareas típico.

Las ventanas de propiedades son un tipo especializado de cuadro de diálogo que se utiliza 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 única tarea o paso de una tarea. Dado que su uso es especializado, las ventanas de propiedad están cubiertas por un conjunto diferente de directrices.

Los cuadros de diálogo pueden tener pestañas, y si es así se llaman cuadros de diálogo con pestañas. Las ventanas de propiedades se determinan 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, los mensajes de error y los mensajes de advertencia se presentan en artículos separados.

¿Es ésta la interfaz de usuario adecuada?

Para decidirse, considere estas preguntas:

• ¿El objetivo es proporcionar información a los usuarios, plantearles una pregunta o permitirles seleccionar opciones para ejecutar una orden o tarea? Si no, utilice otra interfaz de usuario (UI).
• ¿Se trata de ver y modificar las propiedades de un objeto, una colección de objetos o un programa? Si es así, utilice en su lugar una ventana de propiedades o una barra de herramientas.
• ¿El objetivo es presentar una colección de comandos o herramientas? Si es así, utilice una barra de herramientas o una ventana de paleta.
• ¿El objetivo es verificar que el usuario desea realizar una acción? ¿Existe una razón clara para no seguir adelante y una posibilidad razonable de que a veces los usuarios no lo hagan? Si es así, utilice una confirmación.
• ¿El objetivo es dar un mensaje de error o de advertencia? Si es así, utilice un mensaje de error o de advertencia.
• El objetivo es:
  • Archivos abiertos
  • Archivos guardados
  • Carpetas abiertas
  • Buscar o sustituir texto
  • Imprimir un documento
  • Seleccionar atributos de una página impresa
  • Seleccionar una fuente
  • Elegir un color
  • Buscar un archivo, una carpeta, un ordenador o una impresora
  • Buscar usuarios, equipos o grupos en Microsoft Active Directory
  • ¿Le pide un nombre de usuario y una contraseña?

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

• ¿El objetivo es realizar una tarea de varios pasos que requiere más de una ventana? Si es así, utilice en su lugar un flujo de tareas o un asistente.
• ¿El objetivo es informar a los usuarios de un evento del sistema o del programa que no está relacionado con la actividad actual del usuario, que no requiere una acción inmediata del usuario y que los usuarios pueden ignorar libremente? Si es así, use una notificación en su lugar.
• ¿El objetivo es mostrar el estado del programa? Si es así, utilice una barra de estado en su lugar.
• ¿Sería preferible utilizar la IU local? Los cuadros de diálogo pueden romper la fluidez del usuario al exigirle atención. A veces esa interrupción del flujo está justificada, como cuando el usuario debe realizar una acción que está fuera del contexto actual. En otros casos, es mejor 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.
• ¿El objetivo es mostrar un problema de entrada de usuario no crítico o una condición especial? Si es así, utilice un globo informativo en su lugar.
• En el caso de los flujos de tareas, ¿sería preferible utilizar otra página? Por lo general, se desea que una tarea fluya de una página a otra dentro de una misma ventana. Utilice los cuadros de diálogo para confirmar comandos locales, para obtener datos de entrada para comandos locales y para realizar tareas secundarias independientes que es mejor realizar 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:
  • Utilizar las opciones por defecto sin preguntar, pero permitiendo a los usuarios hacer cambios más tarde.
  • 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). En general, los comandos de la barra de herramientas deben ser inmediatos y evitar la visualización de cuadros de diálogo.
• Para seleccionar opciones, ¿hay alguna forma más sencilla y directa de presentar las opciones? Si es así, considere alternativas, como:
  • Utilizar un botón dividido para seleccionar variaciones de un comando.
  • Utilizar un sub menú para comandos, casillas de verificación, botones de radio y listas simples.

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

Conceptos de diseño

Cuando se utilizan correctamente, los cuadros de diálogo son una excelente forma de dar potencia y flexibilidad a su programa. Cuando se utilizan mal, los cuadros de diálogo son una forma fácil de molestar a los usuarios, interrumpir su flujo y hacer que el programa resulte indirecto y tedioso de usar. Los cuadros de diálogo modal exigen la atención de los usuarios. Los cuadros de diálogo suelen ser más fáciles de implementar que otras interfaces de usuario, por lo que tienden a utilizarse en exceso.

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 viene determinado en gran medida por su finalidad (ofrecer opciones, formular preguntas, proporcionar información o comentarios), su tipo (modal o no modal) y la interacción del usuario (respuesta obligatoria, opcional o acuse de recibo), mientras que su uso viene determinado en gran medida por su contexto (iniciado por el usuario o por el programa), la probabilidad de acción del usuario y la frecuencia de visualización.

Para diseñar cuadros de diálogo eficaces, utilice eficazmente los siguientes elementos:

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

Si solo hace una cosa...

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

Patrones de uso

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

• Los diálogos de preguntas (mediante botones) plantean a los usuarios una única pregunta o la confirmación de un comando, y utilizan respuestas sencillas en botones de comando dispuestos horizontalmente.
• Los diálogos de preguntas (mediante vínculos de comandos) plantean a los usuarios una única pregunta o la selección de una tarea a realizar, y utilizan respuestas detalladas en vínculos de comandos dispuestos verticalmente.
• Los diálogos de elección presentan a los usuarios un conjunto de opciones, normalmente para especificar un comando de forma más completa. A diferencia de los diálogos de pregunta, los diálogos de elección pueden formular varias preguntas.
• Los diálogos de progreso ofrecen a los usuarios información sobre el progreso durante una operación larga (más de cinco segundos), junto con un comando para cancelar o detener la operación.
• Los diálogos informativos muestran información solicitada por el usuario.

Directrices

General

• No utilice cuadros de diálogo desplazables. No utilice cuadros de diálogo que requieran el uso de una barra de desplazamiento para ser visualizados completamente durante su uso normal. En su lugar, rediseñe el cuadro de diálogo. Considere la posibilidad de utilizar la divulgación progresiva o pestañas.

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

  • Excepción: Las barras de menú son aceptables cuando se utiliza un cuadro de diálogo para implementar una ventana primaria (como una utilidad).

  Incorrecto:

  

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

• Si un cuadro de diálogo requiere atención inmediata y el programa no está activo, haga parpadear tres veces su botón en la barra de tareas 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 deje que éste active la ventana cuando esté preparado.

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

Cuadro de diálogo modal

• Utilícelo para tareas puntuales, críticas o poco frecuentes que deban completarse antes de continuar.
• Utilice un modelo de confirmación retardada para que los cambios no surtan efecto hasta que se confirmen explícitamente.
• Utilice un cuadro de diálogo de tareas siempre que sea necesario 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 no modal

• Se utiliza para tareas frecuentes, repetitivas y continuas.
• Utilice un modelo de confirmación inmediata para que los cambios surtan efecto de inmediato.
• Para los diálogos no modal, utilice un botón de comando Cerrar explícito en el diálogo para cerrar la ventana. En ambos casos, utilice el botón Cerrar de la barra de título para cerrar la ventana.
• Considere la posibilidad de hacer acoplables los cuadros de diálogo no modal. Los diálogos no modal acoplables permiten una asignación más flexible.

Algunos cuadros de diálogo no modal utilizados en Microsoft Office son acoplables.

Múltiples cuadros de diálogo

• No muestre más de un cuadro de diálogo de elección de propietario a la vez desde un cuadro de diálogo de elección de propietario. Mostrar más de uno dificulta la comprensión del significado de los botones de confirmación por parte de los usuarios. Puede mostrar otros tipos de cuadros de diálogo (como cuadros de diálogo de preguntas) según sea necesario.
• Para una secuencia de diálogos relacionados, considere el uso de un diálogo de páginas múltiples si es posible. Utilice diálogos individuales si no están claramente relacionados.

Cuadros de diálogo de páginas múltiples

• Utilice un cuadro de diálogo de páginas múltiples en lugar de cuadros de diálogo individuales cuando tenga la siguiente secuencia de páginas relacionadas:
  • Una sola página de entrada (opcional)
  • Una página de progreso
  • Una página única de resultados

La página de entrada es opcional porque la tarea puede haberse iniciado en otro lugar. El resultado es una experiencia estable, sencilla y ligera.

En este ejemplo, Diagnóstico de red de Windows consta de páginas de progreso y de resultados.

• No utilice un diálogo de páginas múltiples si la página de entrada es un diálogo estándar. En este caso, la coherencia de utilizar un diálogo estándar es más importante.
• No utilice los botones Siguiente o Atrás y no tenga más de tres páginas. Los cuadros de diálogo de páginas múltiples son para tareas de un solo paso con comentarios. No son asistentes, que se utilizan para tareas de varios pasos. Los asistentes son más pesados e indirectos que los cuadros de diálogo de varias páginas.
• En la página de entrada, utilice botones de comando específicos o vínculos de comando para iniciar la tarea.
• Utilice 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 páginas múltiples utilizando el mensaje TDM_NAVIGATE_PAGE.

Presentación

Para que los cuadros de diálogo sean fáciles de encontrar y acceder, asocie claramente el cuadro de diálogo con su fuente y funcione bien con varios monitores:

• Inicialmente muestra los diálogos "centrados" en la parte superior de la ventana del propietario. Para su posterior visualización, considere la posibilidad de mostrarlo en su última ubicación (en relación con la ventana del propietario) si es probable que le resulte más cómodo.

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

• Si un cuadro de diálogo es contextual, muéstrelo cerca del objeto desde el que se lanzó. Sin embargo, colóquelo fuera del camino (preferiblemente desplazado hacia abajo y a la derecha) para que el objeto no quede cubierto por el cuadro de diálogo.

Las propiedades de un objeto se muestran cerca del objeto.

• Para los diálogos no modal, mostrar inicialmente en la parte superior de la ventana del propietario para que sea fácil de buscar. Si el usuario activa la ventana del propietario, eso puede oscurecer el diálogo sin modelo.
• Si es necesario, ajuste la ubicación inicial para que todo el diálogo sea visible en el monitor de destino. Si una ventana redimensionable es mayor que el monitor de destino, redúzcala para ajustar el tamaño al monitor destino.
• Cuando se vuelve a mostrar un cuadro de diálogo, considere la posibilidad de mostrarlo en el mismo estado en el que se accedió por última vez. Al cerrar, guarde el monitor utilizado, el tamaño de la ventana, la ubicación y el estado (maximizado o restaurado). Al volver a visualizar, restaure el tamaño, la ubicación y el estado del cuadro de diálogo guardado utilizando el monitor adecuado. Además, considere la posibilidad de hacer que estos atributos persistan en todas las instancias del programa por usuario.
• Para las ventanas redimensionables, establezca un tamaño mínimo de ventana si hay un tamaño por debajo del cual el contenido ya no se puede utilizar. Considere la posibilidad de modificar la presentación para que el contenido se pueda usar en tamaños más pequeños.

En este ejemplo, el Reproductor de Windows Media cambia de formato cuando la ventana es demasiado pequeña para el formato estándar.

• No utilices el atributo Siempre arriba.
  • Excepción: Utilizar solo cuando un cuadro de diálogo implemente una operación esencialmente modal, pero necesite suspenderse brevemente para acceder a la ventana propietaria. Por ejemplo, al corregir la ortografía de un documento, los usuarios pueden salir ocasionalmente del cuadro de diálogo de corrección ortográfica y acceder al documento para corregir errores.

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

Barras de título

• Los cuadros de diálogo no tienen iconos en la barra de título. Los iconos de la barra de título sirven para distinguir visualmente las ventanas principales de las secundarias.
  • Excepción: Si un cuadro de diálogo se utiliza para implementar una ventana primaria (como una utilidad) y, por lo tanto, aparece en la barra de tareas, sí tiene un icono de barra de título. En este caso, optimice el título para su visualización en la barra de tareas colocando primero la información distintiva de forma concisa.
• Los cuadros de diálogo siempre tienen un botón Cerrar. Los diálogos no modal también pueden tener un botón Minimizar. Los diálogos redimensionables pueden tener un botón Maximizar.
• No deshabilite el botón para Cerrar. Contar con un botón Cerrar ayuda a los usuarios a mantener el control, ya que les permite cerrar las ventanas que no desean.
  • Excepción: Para los cuadros de diálogo de progreso, puede desactivar el botón Cerrar si la tarea debe ejecutarse hasta su finalización para lograr un estado válido o evitar la pérdida de datos.
• El botón Cerrar de la barra de título debería tener el mismo efecto que el botón Cancelar o Cerrar dentro del cuadro de diálogo. Nunca le dé el mismo efecto que a Aceptar.
• Si los subtítulos 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 la leyenda y el icono de la barra de título para evitar redundancias. Sin embargo, todavía tiene que establecer un título adecuado internamente para su uso por Windows.

Interacción

• Cuando se muestran, 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 tomar el foco de entrada porque el usuario puede estar interactuando con otra ventana. Esta interacción mal dirigida al cuadro de diálogo puede tener consecuencias no deseadas.

• Asigne el foco de entrada inicial al control con el que es más probable que los usuarios interactúen primero, que suele ser (aunque 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 las pestañas debe seguir un orden lógico, generalmente de izquierda a derecha y de arriba abajo. Normalmente, el orden de las pestañas sigue el orden de lectura, pero considere hacer estas excepciones:

  • Coloque antes los controles más utilizados en el orden de las pestañas.
  • 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 el orden de las pestañas.

  Al asignar el orden, asuma que los usuarios visualizan los cuadros de diálogo para el propósito previsto; así, por ejemplo, los usuarios visualizan los cuadros de diálogo de elección para hacer elecciones, no para revisar y hacer clic en Cancelar.

• Al pulsar la tecla Esc siempre se cerrará un cuadro de diálogo activo. Esto es cierto para los cuadros de diálogo con Cancelar o Cerrar, e incluso si Cancelar se ha renombrado a Cerrar 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 desplazarse por ellos y copiar texto), por lo que se benefician de las teclas de acceso. No asigne claves de acceso a:

  • Botones Aceptar, Cancelar y Cerrar. Entrar y Esc se utilizan para sus teclas de acceso. Sin embargo, asigne siempre una tecla de acceso a un control que signifique Aceptar o Cancelar, pero que tenga una etiqueta diferente.

    

    En este ejemplo, el botón de confirmación positiva tiene asignada una clave de acceso.

  • Etiquetas de grupo. Normalmente, los controles individuales dentro de un grupo tienen asignadas teclas 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 guiones bajos que se suelen utilizar para indicar vínculos ocultan los guiones bajos de las claves de acceso. Acceda a los vínculos con el tabulador.

  • Nombres de la pestaña. Las pestañas se mueven cíclicamente con Ctrl+Tab y Ctrl+Mayús+Tab.

  • Botones de navegación con la etiqueta "...". A estos botones de navegación no se les pueden asignar teclas de acceso de forma única.

  • Controles sin etiquetas, como controles de giro, botones de comando gráfico y controles de divulgación progresiva no etiquetados.

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

• Siempre que sea posible, asigne las teclas de acceso a los comandos más utilizados de acuerdo con la Asignación de teclas de acceso estándar. Aunque no siempre es posible asignar teclas de acceso de forma coherente, es preferible hacerlo, sobre todo en los cuadros de diálogo de uso frecuente.

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

• Para que las teclas de acceso sean fáciles de encontrar, asigne las teclas de acceso a un carácter que aparezca al principio de la etiqueta, idealmente el primer carácter, aunque haya una palabra clave que aparezca más adelante en la etiqueta.

• Elija caracteres de anchura amplia, como w, m y mayúsculas.

• Elija una consonante distintiva o una vocal, como la "x" en Salir.

• Evite utilizar caracteres que dificulten la visibilidad del subrayado, como (de más problemático a menos problemático):

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

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

Diálogos de progreso

Para tareas de larga duración, supongamos que los usuarios harán otra cosa mientras se completa la tarea. Diseñe la tarea para que se ejecute sin supervisión.

• Presentar a los usuarios un cuadro de diálogo con información sobre el 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: Para los asistentes y los flujos de tareas, utilice 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 esperan. En caso contrario, utilice una página de progreso o un progreso local.
• Si la operación es una tarea de larga duración (más de 30 segundos) y puede realizarse en segundo plano, utilice un cuadro de diálogo de progreso sin modelo para que los usuarios puedan seguir utilizando su programa mientras esperan.
• Diálogos de progreso no modal:
  • Disponer de un botón Minimizar en la barra de título.
  • Aparecen en la barra de tareas.
• Implementar diálogos de progreso sin modelo para que sigan ejecutándose aunque se cierre la ventana del propietario.

En este ejemplo, la copia del archivo continúa aunque se cierre 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 el potencial de no completarse nunca. Etiquete el botón Cancelar si la cancelación devuelve el entorno a su estado anterior (sin dejar efectos secundarios); en caso contrario, etiquete el botón Detener para indicar que deja intacta la operación parcialmente completada. Puede cambiar la etiqueta del botón de Cancelar a Detener en mitad de la operación, si en algún momento no es posible devolver el entorno a su estado anterior.

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 perjudica la capacidad de los usuarios para realizar su trabajo. Al hacerlo, no se obliga al usuario a elegir entre completar la tarea o terminar su trabajo.
• Reúna toda la información que pueda antes de iniciar la tarea.
• Si se detectan problemas recuperables, haga que los usuarios se ocupen de todos los problemas encontrados al final de la tarea. Si no resulta práctico, pida a los usuarios que resuelvan los problemas a medida que surjan.
• No abandone las tareas como consecuencia de errores recuperables.

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

• Indique los problemas haciendo que la barra de progreso se vuelva roja.

En este ejemplo, se extrajo 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 al finalizar con éxito. De lo contrario, utilice los comentarios solo para informar de problemas:
  • Para mostrar un comentario simple, muestre el comentario en el diálogo de progreso y cambie el botón Cancelar por Cerrar.
  • Para mostrar comentarios detallados, cierre el cuadro de diálogo de progreso y muestre un cuadro de diálogo informativo.

No utilice una notificación para el comentario final. Utilice un diálogo de progreso o una notificación de éxito de la acción, pero no ambos.

Tiempo restante

• Utilice los siguientes formatos de hora. Comience con el primero de los siguientes formatos en el que la unidad de tiempo mayor no sea cero, y luego, cambie al siguiente formato una vez que la unidad de tiempo mayor sea cero.

Para las barras de progreso:

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

Tiempo restante: h horas, m minutos

Tiempo restante: m minutos, s segundos

Tiempo restante: s segundos

Si el espacio en pantalla es escaso:

h horas, m minutos restantes

m minutos, s segundos restantes

s segundos restantes

De lo contrario:

h horas, m minutos restantes

m minutos, s segundos restantes

s segundos restantes

Para las barras de título:

hh:mm restante

mm:ss restantes

0:ss restantes

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

• Haga estimaciones exactas, pero no dé una precisión falsa. Si la unidad mayor son las horas, indique los minutos (si son significativos) pero no los segundos.

Incorrecto:

hh horas, mm minutos, ss segundos

• Mantenga actualizado el presupuesto. Actualice las estimaciones de tiempo restante al menos cada 5 segundos.
• Céntrese en el tiempo restante porque es la información que más interesa a los usuarios. Indique el tiempo total transcurrido solo cuando haya situaciones en las que el tiempo transcurrido sea útil (como cuando es probable que la tarea se repita). Si la estimación del tiempo restante está asociada a una barra de progreso, no tenga el porcentaje de texto completo porque esa información la transmite la propia barra de progreso.
• Sea gramaticalmente correcto. Utilice unidades singulares cuando el número sea uno.

Incorrecto:

1 minutos, 1 segundo

• Utilice mayúsculas como en las frases.

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

Iconos y gráficos

Elementos gráficos

• No utilice gráficos de gran tamaño que no sirvan para nada más que para llenar el espacio de atractivo visual. En su lugar, mantenga una apariencia sencilla.

Incorrecto:

En este ejemplo, el gráfico grande no sirve.

Iconos de la barra de título

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

Iconos de cuerpo

• Elija el icono del cuerpo en función del patrón de diseño:

Patrón	Icono del cuerpo
Cuadros de diálogo de preguntas	Programa, función, objeto, icono de advertencia (en caso de posible pérdida de datos o acceso al sistema), advertencia de seguridad o ninguno.
Cuadros de diálogo de elección	Ninguno.
Cuadros de diálogo de progreso	Ninguna (pero puede tener una animación).
Cuadros de diálogo informativos	Ninguno.

• Incorrecto:

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

• Considere la posibilidad de utilizar iconos para ayudar a los usuarios a reconocer visualmente las funciones de su programa. Esta técnica es más eficaz cuando los iconos son fácilmente reconocibles y se utilizan en varios lugares dentro de su programa.

En este ejemplo, el icono de la estrella amarilla representa Favoritos. El icono es fácilmente reconocible y se utiliza sistemáticamente en todo Windows para representar Favoritos.

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

En este ejemplo, el icono del objeto ayuda a los usuarios a reconocer el tipo de archivo que se está abriendo o guardando.

• Considere la posibilidad de utilizar iconos para facilitar la comprensión de las funciones.

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

• Utilice un icono en los cuadros de diálogo Acerca del buzón para la marca de la aplicación.

En este ejemplo, se utiliza un mapa de bits en el cuadro "Acerca de" para identificar y marcar la aplicación.

Iconos de notas a pie de página

• Si tiene una nota a pie de página, considere la posibilidad de utilizar un icono de nota a pie de página para resumir el tema de la nota.

En este ejemplo, el icono de la nota a pie de página indica que la pregunta tiene implicaciones de seguridad.

• No utilice un icono de nota a pie de página que repita el icono del cuerpo.
• No utilice 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 a pie de página son siempre informativas, por lo que el icono de información resulta redundante. Sin embargo, puede utilizar el icono de advertencia estándar y el escudo de seguridad amarillo para alertar a los usuarios de las consecuencias peligrosas.

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

Botones de confirmación

Notas:

• Estas reglas no se aplican a los cuadros de diálogo de preguntas que utilizan vínculos de comandos, ya que ese patrón utiliza vínculos de comandos en lugar de botones.
• [Do it] y [Don't do it] 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	Valor
Patrón	Botones de confirmación
Cuadros de diálogo de preguntas (mediante botones)	Uno de los siguientes conjuntos de comandos concisos: Sí/No, Sí/No/Cancelar, [Do it]/Cancelar, [Do it]/[Don't do it], [Do it]/[Don't do it]/Cancelar.
Cuadros de diálogo de preguntas (mediante enlaces)	Cancelar.
Cuadros de diálogo de elección	Cuadros de diálogo modal: OK/Cancelar o [Do it]/Cancelar Cuadros de diálogo no modal: Botón de cierre en el cuadro de diálogo y en la barra de título Panel de tareas: Botón de cierre en la barra de título
Cuadros de diálogo de progreso	Utilice Cancelar si devuelve el entorno a su estado anterior (sin dejar ningún efecto secundario); en caso contrario, utilice Detener.
Cuadros de diálogo informativos	Casi.

• Todos los botones de confirmación excepto Aplicar hacen que se cierre 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 catastrófica.
  • La acción es claramente incoherente con otras acciones.
  • Si es incorrecta, la acción puede dar lugar a una pérdida significativa de datos, tiempo o esfuerzo por parte del usuario.

  Para más instrucciones y ejemplos, consulte Confirmaciones .

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

  • Si los usuarios deben elevarse para realizar un cambio, deshabilite los botones de confirmación positiva hasta que el usuario realice un cambio. De este modo se evita que los usuarios se eleven solo para cerrar una ventana, obligándoles a hacer clic en Cancelar.
  • Para más excepciones, consulte Deshabilitar o eliminar controles frente a dar mensajes de error.

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

  Incorrecto:

  

  En este ejemplo, el botón Aceptar está incorrectamente centrado.

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

  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, consolídelos utilizando botones divididos.

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

Responder a las instrucciones principales

• Utilice botones de confirmación positiva que sean respuestas específicas a la instrucción principal, en lugar de etiquetas genéricas como Aceptar o Sí/No. Los usuarios deben ser capaces de entender las opciones con solo leer el texto del botón. Excepciones:

  • Utilice Cerrar para los cuadros de diálogo que no tenga configuración, como los cuadros de diálogo informativos. Nunca use Cerrar para diálogos que tengan configuración.

  • Utilice Aceptar cuando las respuestas "específicas" sigan siendo genéricas, como Guardar, Seleccionar o Elegir. Utilice Aceptar cuando cambie un ajuste específico o un conjunto de ajustes.

  • Para los cuadros de diálogo heredados sin una instrucción principal, puede utilizar 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 concretas.

  • Ciertas tareas requieren más reflexión y una lectura atenta para que los usuarios tomen decisiones fundamentadas. Esto suele ser el caso con confirmaciones. En estos casos, puede utilizar a propósito etiquetas genéricas de botones de confirmación para obligar a los usuarios a leer las instrucciones principales y evitar decisiones precipitadas.

    Correcto:

    

    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 de confirmación positiva para indicar que el cuadro de diálogo presenta una razón para no continuar y que los usuarios deben leer el cuadro de diálogo detenidamente antes de continuar.

  Correcto:

  

  En este ejemplo, se agrega "de todos modos" a la etiqueta del botón de confirmación para indicar que los usuarios deben proceder con cuidado.

• Utilice Cancelar o Cerrar para los botones de confirmación negativa en lugar de respuestas específicas a la instrucción principal. Muy a menudo, los usuarios se dan cuenta de que no quieren realizar una tarea en cuanto ven un cuadro de diálogo. Si Cancelar o Cerrar se reetiquetaran con respuestas específicas, los usuarios tendrían que leer detenidamente todos los botones de confirmación para determinar cómo cancelar. Etiquetar Cancelar y Cerrar de forma consistente hace que sean fáciles de encontrar.Excepciones:

  • No use Sí/Cancelar. Utilice siempre Sí/No como par.
  • Utilice una respuesta específica cuando Cancelar sea ambiguo.

• No asigne etiquetas genéricas a su significado específico con texto en el área de contenido. En su lugar, utilice etiquetas específicas para los botones de confirmación, o un cuadro de diálogo de preguntas con vínculos si las etiquetas son largas.

  Incorrecto:

  

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

Botones Sí y No

• Elija respuestas específicas en lugar de los botones Sí y No. Aunque no hay nada malo en utilizar Sí y No, las respuestas específicas pueden entenderse más rápidamente, lo que se traduce en una toma de decisiones eficaz. Sin embargo, las confirmaciones suelen tener botones de Sí y No para que los usuarios se lo piensen antes de responder.

• Utilice los botones Sí y No solo para responder a preguntas afirmativas o negativas. La instrucción principal debe expresarse de forma natural como una pregunta de sí o no. Nunca utilice Aceptar y Cancelar para preguntas de sí o no.

  Incorrecto:

  

  Correcto:

  

  Mejor:

  

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

• Considere la posibilidad de redactar la instrucción principal como una pregunta de sí o no si los botones de compromiso con una redacción específica resultan largos o incómodos. También puede utilizar vínculos de comandos para respuestas más largas (cinco palabras o más) a la instrucción principal.

  Incorrecto:

  

  Correcto:

  

  El enunciado específico del ejemplo incorrecto es demasiado largo, por lo que el ejemplo correcto utiliza Sí y No.

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

Botón de aceptar

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

• No utilice los botones Aceptar para responder a las preguntas.

• No asigne teclas de acceso a Aceptar, porque Entrar es la tecla de acceso para el botón predeterminado. De este modo, las demás teclas de acceso son más fáciles de asignar.

• Etiquetar correctamente los botones Aceptar. El botón Aceptar debe llevar la etiqueta Aceptar, no Aceptar o Vale.

• No utilice botones Aceptar para errores o advertencias. Los problemas nunca son aceptables. Utilice Cerrar en su lugar.

  Incorrecto:

  

  En este ejemplo, debe utilizarse Cerrar en lugar de Aceptar.

• No utilice botones Aceptar en cuadros de diálogo no modal. En su lugar, los diálogos sin modelo deben utilizar botones de confirmación específicos de la tarea (por ejemplo, Buscar). Sin embargo, algunos cuadros de diálogo no modal solo requieren un botón Cerrar.

Botones de Cancelar

• Hacer clic en Cancelar significa abandonar todos los cambios, cancelar la tarea, cerrar la ventana y devolver el entorno a su estado anterior, sin dejar ningún efecto secundario. En los cuadros de diálogo de elección anidados, si se hace clic en Cancelar en el cuadro de diálogo de elección del propietario, también se abandonan los cambios realizados por los cuadros de diálogo de elección del propietario.

• Proporcione un botón Cancelar para que los usuarios puedan abandonar 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 los cuadros de diálogo sin configuración. En este caso, los botones Aceptar y Cerrar tienen el mismo efecto que Cancelar.

  Incorrecto:

  

  En este ejemplo, tener solo un botón Cerrar en la barra de título hace que parezca que los usuarios no tienen elección.

• No utilice los botones Cancelar para responder a las preguntas.

  Incorrecto:

  

  En este ejemplo, Aceptar y Cancelar se utilizan incorrectamente para responder a una pregunta de Sí o No.

• No asigne teclas de acceso a Cancelar, porque Esc es la tecla de acceso. De este modo, las demás teclas de acceso son más fáciles de asignar.

• No utilice botones Cancelar en los cuadros de diálogo no modal. En su lugar, utilice Cerrar.

• 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 diálogo de progreso si hay un periodo durante el cual no se puede cancelar la operación. Sin embargo, una solución mejor es diseñar tales operaciones para que sean siempre cancelables.

Botones de Cerrar

• Utilice los botones de Cerrar para los cuadros de diálogo sin modelo, así como para los cuadros de diálogo modal que no pueden cancelarse.
• Hacer clic en Cerrar significa cerrar la ventana del cuadro de diálogo, dejando cualquier efecto secundario existente. No utilice Listo, porque no es una construcción imperativa. En los cuadros de diálogo de elección anidados, al hacer clic en Cerrar en el cuadro de diálogo de elección del propietario se conservan todos los cambios realizados por los cuadros de diálogo de elección propios.
• Coloque un botón explícito de Cerrar 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 teclas de acceso a Cerrar, porque Esc es la tecla de acceso. De este modo, las demás teclas de acceso son más fáciles de asignar.

Aplicar botones

• No utilice botones Aplicar en cuadros de diálogo que no sean hojas de propiedades o paneles de control. El botón Aplicar significa aplicar los cambios pendientes, pero dejar la ventana abierta. De este modo, los usuarios pueden evaluar los cambios antes de cerrar la ventana. Sin embargo, solo las hojas de propiedad y los paneles de control tienen esta necesidad.

  Incorrecto:

  

  En este ejemplo, un cuadro de diálogo de elección tiene innecesariamente un botón Aplicar.

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

Nota: Los cuadros de diálogo indirectos se muestran fuera de contexto, ya sea como resultado indirecto de una tarea o como resultado de un problema con un sistema o proceso en segundo plano. Para 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 tanto el cuadro de diálogo como la tarea, proporcione botones de confirmación para hacer ambas cosas. 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 Cancelar permite utilizar el cuadro de diálogo en muchos contextos.

  Correcto:

  

  En este ejemplo, este cuadro de diálogo es mostrado por Windows Paint como resultado de un comando Nuevo o Salir cuando el gráfico no ha sido guardado. No guardar cierra el cuadro de diálogo sin guardar, mientras que Cancelar anula el comando Nuevo o Salir.

  Incorrecto:

  

  En este ejemplo, no hay forma de cancelar la tarea (cerrar la barra de accesos directos de Office) 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 diálogo pero no la tarea, utilice un botón con una respuesta específica y negativa a la instrucción principal, y no tenga un botón Cancelar.

  

  En este ejemplo, este cuadro de diálogo se muestra indirectamente como resultado de la navegación a una página Web que instala un control ActiveX. El uso de Cancelar sería ambiguo en este caso, por lo que en su lugar se utiliza No ejecutar.

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

Vínculos de comandos

• Presente un conjunto de comandos largos utilizando vínculos de comandos, en lugar de botones de comandos o una combinación de botones de opción y un botón Aceptar. De este modo, los usuarios pueden responder con un solo clic. Sin embargo, este enfoque solo funciona para una única pregunta.
• Presente primero los vínculos de comandos más utilizados. El orden resultante debe seguir aproximadamente la probabilidad de uso, pero también tener un flujo lógico.
  • Excepción: Los vínculos de mando que dan lugar a hacer todo deben colocarse en primer lugar.
• Si un vínculo de mando requiere más explicaciones, proporcione una explicación complementaria. Las explicaciones complementarias describen por qué los usuarios podrían querer elegir el comando, o qué ocurre si se elige el comando.
• No utilice explicaciones complementarias que sean repeticiones prolijas del vínculo de comando. Utilice una explicación complementaria solo cuando no pueda hacer que un vínculo de comandos sea auto explicativo. Proporcionar una explicación suplementaria para un vínculo de comando no significa que tenga que proporcionarlas para todos los comandos.

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

• Utilice frases que empiecen por un verbo, sin puntuación final.
• Si se recomienda encarecidamente un comando, considere la posibilidad de agregar "(recomendado)" a la etiqueta. Asegúrese de agregarlo a la etiqueta del vínculo, no a la explicación complementaria.
• Si un comando está destinado solo a usuarios avanzados, considera agregar "(avanzado)" a la etiqueta. Asegúrese de agregarlo a la etiqueta del vínculo, no a la explicación complementaria.
• Proporcione siempre un botón de cancelación explícito. No utilice un vínculo de comando para este fin.

Incorrecto:

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

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

No volver a mostrar este <elemento>

• Considere la posibilidad de utilizar la opción No volver a mostrar este <ielemento> para permitir a los usuarios suprimir un cuadro de diálogo recurrente, solo si no existe una alternativa mejor. Es mejor mostrar siempre el diálogo si los usuarios realmente lo necesitan, o simplemente eliminarlo si no lo necesitan.
• Utilice esta frase específica para sustituir el <elemento> por el artículo específico. Por ejemplo, No volver a mostrar este recordatorio. Para referirse a un cuadro de diálogo en general, utilice No volver a mostrar este mensaje.
• Indique claramente cuándo se utilizarán las entradas del usuario para futuros valores por defecto agregando la siguiente frase debajo de la opción: Sus selecciones se utilizarán por defecto en el futuro.
• No seleccione la opción por defecto. Si el cuadro de diálogo realmente solo debe mostrarse una vez, hágalo sin preguntar. No utilice esta opción como excusa para molestar a los usuarios asegúrese de que el comportamiento por defecto no es molesto.

Incorrecto:

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 surtirá efecto. Esta configuración es una meta-opción, por lo que no sigue el comportamiento estándar de Cancelar de no 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 los usuarios pueden necesitar 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 estén concentrados en otra tarea.
  • Los usuarios deben responder, pero no inmediatamente, para poder continuar con su trabajo.
  • La pregunta requiere suficiente reflexión o esfuerzo como para que los usuarios puedan tomar mejores decisiones si disponen de más tiempo.
  • El cuadro de diálogo o la opción se presentarán automáticamente más tarde (para que realmente se pregunte a los usuarios más tarde).
• Incorrecto:
• 
• En este ejemplo, la pregunta es tan sencilla que agregar la opción "Pregúntame más tarde" solo la complica.
• De lo contrario, espere que los usuarios respondan ahora, pero permítales cerrar el cuadro de diálogo normalmente con Cancelar o Cerrar. Si se utiliza correctamente, esta opción debería ser poco frecuente.

Más/Menos

• Utilice botones de divulgación progresiva Más/Menos para mostrar u ocultar opciones, comandos o detalles avanzados o poco utilizados que los usuarios objetivo no suelen necesitar. De este modo se simplifica el cuadro de diálogo para un uso típico. No oculte opciones, comandos o información de uso común porque los usuarios podrían no encontrarlos.

En este ejemplo, las opciones poco utilizadas se ocultan por defecto.

• No utilice los controles Más/Menos a menos que realmente haya más detalles que mostrar. No se limite a repetir la misma información en un formato diferente.
• No utilice los controles Más/Menos para mostrar la Ayuda. Utilice en su lugar vínculos de ayuda o notas a pie de página.
• En los cuadros de diálogo de tareas, evite combinar los controles Más/Menos con No volver a mostrar este <elemento>. Esta combinación tiene un aspecto incómodo.
• Para consultar las normas de etiquetado, consulte Divulgación progresiva .

Notas al pie

• Utilice notas a pie de página para la información que no es esencial para el propósito de un cuadro de diálogo, pero que los usuarios pueden encontrar útil en la toma de decisiones. La mayoría de los usuarios deberían poder omitir las notas a pie de página y, aun así, tomar decisiones informadas en su respuesta al cuadro de diálogo.

En este ejemplo, la información de la nota a pie de página es complementaria, no esencial.

Deshabilitar o eliminar controles frente a dar mensajes de error

• Cuando un control no se aplica en el contexto actual, considere las siguientes opciones:
  • Elimine el control cuando no haya forma de que los usuarios lo habiliten, o los usuarios no esperen que se aplique y su estado no cambie con frecuencia. De este modo se simplifica el cuadro de diálogo y los usuarios no lo echarán de menos. Que un control aparezca y desaparezca con frecuencia es molesto.
  • Deshabilite el control cuando los usuarios esperen que se aplique o su estado cambie con frecuencia, y los usuarios puedan 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 alguna entrada. Puede utilizar globos para mostrar problemas no críticos de introducción de datos por parte del usuario con cuadros de texto y listas desplegables editables. Sin embargo, si el problema no puede explicarse con un globo o implica múltiples controles, la deducción ya no sería fácil.
  • De lo contrario, deje el control habilitado, pero dé un mensaje de error cuando se utilice incorrectamente. La deshabilitación en este caso dificultaría que los usuarios entendieran 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.
• Sugerencia: Si no está seguro de si debe deshabilitar un control o dar un mensaje de error, empiece por redactar el mensaje de error que podría dar. Si el mensaje de error contiene información útil que no es probable que los usuarios destinatarios deduzcan rápidamente, deje el control activado y dé el error. De lo contrario, deshabilite el control.
• Si deshabilita un control, deshabilite también todos los controles asociados, como su etiqueta, las explicaciones suplementarias o los botones de comando. Sin embargo, no deshabilite sus cuadros de grupo, etiqueta de grupo, o explicación de grupo si hay alguna.

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

Entrada necesaria

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

  • No indique nada, pero maneje la falta de entrada requerida con mensajes de error. Este enfoque reduce el desorden y funciona bien si la mayoría de las entradas son opcionales o si no es probable que los usuarios se salten los controles, manteniendo así bajo el número de mensajes de error.

  • Indique la entrada obligatoria con un asterisco al principio de la etiqueta. Explique el asterisco utilizando:

    • Una nota a pie de página en la parte inferior del área de contenido que diga * Entrada obligatoria.
    • Una información para herramientas en el asterisco que dice Entrada requerida.

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

    

    En este ejemplo, se utilizan asteriscos para indicar la entrada requerida.

  • Si es necesario introducir datos en todos los controles, indique "Es necesario introducir datos" en un lugar adecuado de la parte superior del área de contenido. Este enfoque reduce el desorden en este caso específico.

  • Indique las entradas opcionales con "(opcional)" después de la etiqueta. Este enfoque funciona bien si se requiere la mayor parte de la información, pero mal en caso contrario.

• En aras de la coherencia, intente utilizar el mismo método para indicar las entradas necesarias en todo el programa. Específicamente, indique entradas obligatorias u opcionales según sea necesario, pero evite utilizar ambas dentro del mismo programa.

Control de errores

• Evite errores utilizando controles limitados a la entrada válida del usuario. También puede ayudar a reducir el número de errores proporcionando valores por defecto razonables.

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

• Utilice la administración de errores no modal (errores locales o globos) para los problemas de introducción de datos por parte del usuario.

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

    

    En este ejemplo, un globo indica un problema de entrada cuando aún se está en el control.

• Utilice los errores locales para la detección de errores retardada, normalmente errores encontrados al pulsar un botón de confirmación. (no utilice errores locales para configuraciones que se consignan inmediatamente). Puede haber varios errores locales a la vez. Utilice texto normal y un icono de error de 16x16 píxeles, colocándolos directamente junto al problema siempre que sea posible. Los errores locales no desaparecen a menos que el usuario confirme y no se encuentre ningún otro error.

  

  En este ejemplo, se utiliza un error local para un error encontrado al pulsar el botón de confirmación.

• Utilice la administración modal de errores (cuadros de diálogo de tareas o cuadros de mensajes) para todos los demás problemas, incluidos los errores que afectan a varios controles o son errores no contextuales o no de entrada que se detectan al hacer clic en un botón de confirmación.

• Cuando se detecta un problema de introducción de datos y se informa de él, se pone el foco de entrada en el primer control con los datos incorrectos. Desplácese por el control para verlo si es necesario.

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

Ayuda

• A la hora de prestar asistencia a los usuarios, considere las siguientes opciones (enumeradas por orden de preferencia):

  • Asigne a los controles interactivos etiquetas auto explicativas. Es más probable que los usuarios lean las etiquetas de los controles interactivos que cualquier otro texto.
  • Proporcionar explicaciones en contexto utilizando etiquetas de texto estáticas.
  • Proporcionar un vínculo de ayuda específico a un tema de ayuda relevante.

• Localice los enlaces de Ayuda en la parte inferior del área de contenido del cuadro de diálogo. Si el cuadro de diálogo tiene una nota a pie de página y el vínculo de Ayuda está relacionado con ella, coloque el vínculo de Ayuda dentro de la nota a pie de página.

  

  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 ajustes que tienen temas de Ayuda separados (quizás dentro de cuadros de grupo), localice los vínculos de Ayuda en la parte inferior de los grupos.

• No utilice vínculos a temas de ayuda generales o vagos ni botones de ayuda genéricos. Los usuarios suelen ignorar la Ayuda genérica.

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

Valores predeterminados

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

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

Tamaño y espaciado recomendados

• Admite la resolución de pantalla mínima de Windows Vista de 800 x 600 píxeles. Los diseños pueden optimizarse para ventanas redimensionables con una resolución de pantalla de 1 024 x 768 píxeles.
• Utilice ventanas redimensionables siempre que sea posible para evitar barras de desplazamiento y datos truncados. Las ventanas con contenido dinámico y las listas son las que más se benefician de las ventanas redimensionables.
• Las ventanas de tamaño fijo deben ser totalmente visibles y tener un tamaño que se ajuste a la zona de trabajo.
• Las ventanas redimensionables pueden optimizarse para resoluciones más altas, pero su tamaño puede reducirse en el momento de la visualización a la resolución real de la pantalla.
• Elija un tamaño de ventana predeterminado adecuado a su contenido. No tema utilizar ventanas iniciales de mayor tamaño si puede aprovechar el espacio de forma eficaz.

Texto

General

• Eliminar el texto redundante. Busque texto redundante en títulos, instrucciones principales, instrucciones complementarias, áreas de contenido, vínculos a comandos y botones de confirmación. En general, deje el texto completo en las instrucciones y los controles interactivos, y elimine cualquier redundancia de los demás lugares.
• Utilice frases positivas. Las frases 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, el enunciado debe coincidir con el comando asociado, incluso si el comando tiene un enunciado negativo; así, por ejemplo, utilice deshabilitar para confirmar un comando Deshabilitar.

• Si es necesario, utilice la palabra "ventana" para referirse al propio cuadro de diálogo.
• Utilice la segunda persona ("usted/su") para indicar a los usuarios lo que deben hacer en la instrucción principal y el área de contenido. A menudo la segunda persona está implícita.

Ejemplos:

Elija las imágenes que desea imprimir

Elija una cuenta.

• Utilice la primera persona ("yo/mi/mio") para que los usuarios indiquen al programa qué hacer en los controles del área de contenido que responden a la instrucción principal.

Ejemplo: Imprimir las fotos de mi cámara.

Títulos de los cuadros de diálogo

• Utilice el título para identificar el comando, la función o el programa del que procede un cuadro de diálogo.
  • Si el diálogo es iniciado por el usuario, identifíquelo utilizando el nombre del comando o función. Excepciones:
    • Si un cuadro de diálogo es mostrado por muchos comandos diferentes, considere utilizar el nombre del programa en su lugar.
    • Si ese título fuera redundante con la instrucción principal, utilice en su lugar el nombre del programa.
  • Si es iniciada por el programa o el sistema (y, por tanto, fuera de contexto), identifíquela utilizando el nombre del programa o de la función para darle contexto.
  • No utilice el título para explicar lo que hay que hacer en el diálogo que es el propósito de la instrucción principal.
• Utilice el nombre exacto del comando para los nombres basados en comandos, pero no incluya la elipsis si existe. Puede incluir el título del menú del comando si es necesario para componer un buen título. Ejemplo: para un comando Objeto... en un menú Insertar, utilice el título Insertar objeto.
• Si aparece un cuadro de diálogo sin modelo en la barra de tareas, optimice el título para su visualización en la barra de tareas colocando primero la información distintiva de forma concisa. Ejemplos: "66 % completado" y "3 recordatorios".
• No incluya las palabras "diálogo" o "progreso" en el título. Esto está implícito, y dejarlo desactivado facilita a los usuarios el escaneo.
• Utilice mayúsculas en el título, sin puntuación final. Utilice mayúsculas en el título, sin puntuación final.

Instrucciones principales

• Utilice la instrucción principal para explicar de forma concisa qué hacer en el diálogo. La instrucción debe ser una declaración específica, una dirección imperativa o una pregunta. Unas buenas instrucciones comunican el objetivo del usuario con el diálogo en lugar de centrarse puramente en la mecánica para manipularlo.
• Omita la instrucción principal cuando lo único que pueda decir sea obvio. En estos casos, el contenido del cuadro de diálogo se explica por sí mismo. 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 repiten la instrucción principal. En este caso, la instrucción principal toma la clave de acceso.

Aceptable:

En este ejemplo, la etiqueta del cuadro de texto no es más que una repetición de la instrucción principal.

Mejor:

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

• Sea conciso y utilice una sola frase completa. Reduzca la instrucción principal a la información esencial. Si debe explicar algo más, utilice instrucciones complementarias.
• Utilice verbos específicos siempre que sea posible. Los verbos específicos (ejemplos: conectar, guardar, instalar) tienen más sentido para los usuarios que los genéricos (ejemplos: configurar, administrar, establecer).
• Utilice mayúsculas en las frases.
• No incluya puntos finales si la instrucción es una declaración. Si la instrucción es una pregunta, incluya un signo de interrogación final.
• Para los diálogos de progreso, utilice una frase en gerundio que explique brevemente la operación en curso y termine con una elipsis. Ejemplo: Imprimir sus fotos...
• Sugerencia: Puede evaluar una instrucción principal imaginando lo que le diría a un amigo. Si responder con la instrucción principal resulta poco natural, poco útil o incómodo, vuelva a elaborar la instrucción.

Instrucciones complementarias

• Cuando sea necesario, utilice una instrucción complementaria opcional para presentar información adicional útil para comprender o utilizar la página. Puede proporcionar información más detallada y definir la terminología.
• Si la aparición del cuadro de diálogo ha sido iniciada por el programa o el sistema (y, por tanto, está fuera de contexto), utilice la instrucción complementaria para explicar por qué ha aparecido el cuadro de diálogo. En estos diálogos, el contexto no suele ser obvio.
• No repita la instrucción principal con una redacción ligeramente diferente. En su lugar, omita la instrucción suplementaria si no hay más que agregar.
• Utilice frases completas, mayúsculas y puntuación final.

Vínculos de comandos

• Elija un texto de vínculo conciso que comunique y diferencie claramente lo que hace el vínculo de mando. Debe ser auto explicativo y corresponder a la instrucción principal. Los usuarios no deberían tener que averiguar qué significa realmente el vínculo o en qué se diferencia de otros.
• Comience siempre los vínculos de comandos con un verbo.
• Utilice mayúsculas y minúsculas de estilo de oración.
• No utilice la puntuación final.
• Si es necesario, da más explicaciones utilizando frases completas y la puntuación final. Sin embargo, agregue tales explicaciones solo cuando sea necesario, no agregue explicaciones a todos los vínculos de comandos solo porque un vínculo de comandos necesita una.

Para más información y ejemplos, consulte las instrucciones de Vínculo de comandos.

Botones de confirmación

• Utilice etiquetas específicas para los botones de confirmación que tengan sentido por sí mismas y respondan a la instrucción principal. Lo ideal sería que los usuarios no tuvieran que leer nada más para entender la etiqueta. Es mucho más probable que los usuarios lean las etiquetas de los botones de comando que el texto estático.
• Comience las etiquetas de los botones de confirmación con un verbo. Las excepciones son Aceptar, Sí y No.
• Utilice mayúsculas y minúsculas de estilo de oración.
• No utilice la puntuación final.
• Asigne una clave de acceso única.
  • Excepción: No asigne teclas de acceso a los botones Aceptar y Cancelar porque Entrar y Esc son sus teclas de acceso. De este modo, las demás teclas de acceso son más fáciles de asignar.

Documentación

Cuando se refiere a cuadros de diálogo:

• En programación y otra documentación técnica, refiérase a los cuadros de diálogo como ventanas de diálogo. En cualquier otro lugar, refiérase a 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 referirse a un cuadro de diálogo en general, utilice ventana en la documentación de usuario. Puede referirse a un simple diálogo de pregunta o confirmación como un mensaje.
• Utilice el título exacto o el texto principal de la instrucción, incluidas las mayúsculas.
• Cuando sea posible, formatee el título utilizando texto en negrita. En caso contrario, ponga el título entre comillas solo si es necesario para evitar confusiones.

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