Botones de comando en Windows 7

Nota:

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

Con los botones de comandos en Windows 7, los usuarios inician acciones inmediatas.

Un botón de comando típico.

El botón de comando predeterminado se invoca cuando los usuarios pulsan la tecla Intro. Lo asigna el desarrollador, pero cualquier botón de comando se convierte en el predeterminado cuando los usuarios lo seleccionan.

Nota:

Directrices relacionadas con diseño se presentan en un artículo separado.

¿Es este el control adecuado?

Para decidirse, considere estas preguntas:

• ¿Se utiliza el botón de mando para iniciar una acción inmediata? Si no, use otro control.
• ¿Sería mejor un enlace? Utilice un enlace si:
  • La acción consiste en navegar a otra página, ventana o tema de Ayuda. Excepción: La navegación del asistente utiliza los botones de comando Atrás y Siguiente.
  • El comando está incrustado en un cuerpo de texto.
  • La orden es de naturaleza secundaria. Es decir, no guarda relación con la finalidad principal de la ventana. En este caso, lo adecuado sería un botón de comando ligero o un enlace.
  • El comando forma parte de un menú o grupo de enlaces relacionados.
  • La etiqueta es larga, de cinco o más palabras, lo que da al botón de mando un aspecto incómodo.
• ¿Sería mejor una combinación de botones de opción y botones de comando genéricos? A menudo, los botones de opción se utilizan junto con botones de comando genéricos (Aceptar, Cancelar) en lugar de un conjunto de botones de comando específicos cuando se cumple alguna de las siguientes condiciones:

  • Hay cinco o más acciones posibles.

  • Los usuarios necesitan ver información adicional antes de tomar una decisión.

  • Los usuarios necesitan interactuar con las opciones (quizá para ver información adicional) antes de tomar una decisión.

  • Los usuarios ven las opciones como opciones en lugar de diferentes comandos.

    Correcto:

    En este ejemplo, los botones de opción se combinan con los botones Aceptar y Cancelar para proporcionar información adicional sobre las opciones.

    Incorrecto:

    En este ejemplo, los botones de comando por sí solos dificultan que los usuarios tomen una decisión informada.

Conceptos de diseño

Usar elipses

Aunque los botones de comando se utilizan para acciones inmediatas, es posible que se necesite más información para realizar la acción. Indicar un comando que necesita información adicional (incluida la confirmación) añadiendo una elipses al final de la etiqueta del botón..

En este ejemplo, el comando Imprimir... muestra un cuadro de diálogo Imprimir para obtener más información.

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

El uso adecuado de las elipses es importante para indicar que los usuarios pueden tomar otras decisiones antes de realizar la acción, o incluso cancelarla por completo.. La indicación visual que ofrece una elipses permite a los usuarios explorar su programa sin miedo.

Esto no significa que deba utilizar una elipses siempre que una acción muestre otra ventana. Utilice una elipses solo cuando se requiera información adicional para realizar la acción. En consecuencia, cualquier botón de comando cuyo verbo implícito sea "mostrar otra ventana" no lleva elipses, como con los comandos Acerca de, Avanzado, Ayuda (o cualquier otro comando que enlace a un tema de Ayuda), Opciones, Propiedades o Configuración.

En general, las elipses se utilizan en las interfaces de usuario para indicar que están incompletas. Los comandos que muestran otras ventanas no están incompletos; deben mostrar otra ventana y no se necesita información adicional para realizar su acción. Este enfoque elimina el desorden de la pantalla en situaciones en las que las elipses tienen poco valor.

Nota: Al determinar si un botón de comando necesita una elipses, no utilice la necesidad de privilegios elevados como un factor. La elevación no es información necesaria para ejecutar un comando (más bien, es para obtener permiso) y la necesidad de elevarse se indica con el escudo de seguridad.

Si hace solo una cosa... Utilice una etiqueta concisa, específica y explicativa automáticamente que describa claramente la acción que realiza el botón de comando, y utilice una elipses cuando sea apropiado.

Patrones de uso

Los botones de comando tienen varios patrones de uso:

Uso	Ejemplo
Botones de mando estándar Puede utilizar los botones de comando estándar para iniciar una acción inmediata.	Un botón de mando estándar.
Botones de comando predeterminados El botón de comando predeterminado de una ventana indica el botón de comando que se activará cuando los usuarios pulsen la tecla Intro.	Un botón de comando por defecto. Cualquier botón de comando se convierte en el predeterminado cuando los usuarios lo seleccionan. Si el foco de entrada está en un control que no es un botón de comando, el botón de comando con el atributo de botón predeterminado se convierte en el predeterminado. Solo un botón de comando en una ventana puede ser el predeterminado.
Botones de mando ligeros Un botón de comando ligero es similar a un botón de comando estándar, excepto en que su marco de botón se muestra solo al pasar el ratón por encima.	En este ejemplo, el comando tiene una apariencia muy ligera (similar a un enlace) hasta que el usuario pasa el ratón por encima del comando, momento en el que se dibuja con un marco de botón. Puede utilizar botones de comando ligeros en situaciones en las que utilizaría un botón de comando estándar, pero quiere evitar mostrar siempre el marco del botón. Los botones de comando ligeros son ideales para comandos en los que se desea hacer poco hincapié y no sería apropiado utilizar un enlace.
Botones de menú Utilice un botón de menú cuando necesite un menú para un pequeño conjunto de comandos relacionados.	Un botón de menú con un pequeño conjunto de comandos relacionados. Utilice un botón de menú cuando no desee utilizar una barra de menús, por ejemplo, en un cuadro de diálogo, una barra de herramientas u otra ventana que no tenga barra de menús. Un único triángulo apuntando hacia abajo indica que al pulsar el botón se desplegará un menú.
Dividir botones Utilice un botón de división para consolidar un conjunto de variaciones de un comando, especialmente cuando uno de los comandos se utiliza la mayor parte del tiempo.	un botón de división colapsado. como un botón de menú, un único triángulo apuntando hacia abajo indica que al hacer clic en la parte más a la derecha del botón se desplegará un menú. un botón de división desplegable. en este ejemplo, se utiliza un botón dividido para consolidar seis variaciones del comando abrir. la mayoría de las veces se utiliza el comando regular open, por lo que normalmente los usuarios no necesitan ver los otros comandos. El uso de un botón dividido ahorra una cantidad significativa de espacio en pantalla, al tiempo que ofrece opciones potentes. a diferencia de un botón de menú, al hacer clic en la parte izquierda del botón se realiza directamente la acción en la etiqueta. Los botones divididos son eficaces en situaciones en las que es probable que la siguiente acción con una herramienta específica sea la misma que la última acción. en este caso, la etiqueta se cambia a la última acción, como con un selector de color: En este ejemplo, la etiqueta se cambia a la última acción.
Botones de navegación Utilice un botón de búsqueda para mostrar un cuadro de diálogo que ayude a los usuarios a seleccionar un valor válido.	Los cuadros de diálogo iniciados por un botón de navegación ayudan a los usuarios a seleccionar archivos, carpetas, ordenadores, usuarios, colores, etc. Suelen combinarse con un control sin restricciones, como un cuadro de texto. Suelen ir etiquetados como browse (examinar), other (otro) o more (más), y siempre llevan una elipses para indicar que se necesita más información. un cuadro de texto con un botón de navegación. para las ventanas que tienen muchos botones de navegación, puede utilizar una versión abreviada: Un breve botón de navegación.
Botones de divulgación progresiva Utilice un botón de revelación progresiva para mostrar u ocultar las opciones de uso poco frecuente.	Ocultar las opciones de uso poco frecuente hasta que se necesiten se denomina divulgación progresiva. Los dobles chevrones se utilizan para indicar una revelación progresiva, y apuntan en la dirección en la que se producirá la revelación o la ocultación: después de hacer clic en el botón, su etiqueta cambia para indicar que el siguiente clic tendrá el efecto contrario: Para más información y ejemplos, consulte Controles progresivos de divulgación.
Botones direccionales Utilice un botón direccional para indicar la dirección en la que tendrá lugar una acción.	en este caso, se utiliza un corchete angular simple en lugar de un chevrón doble: Un botón direccional indica la dirección de la acción.

Directrices

General

• Mostrar un puntero ocupado si el resultado de pulsar un botón de comando no es instantáneo. Sin feedback, los usuarios podrían asumir que el clic no se ha producido y volver a hacer clic.
• Si el mismo botón de comando aparece en más de una ventana, intente utilizar el mismo texto de etiqueta y la misma clave de acceso, y ubíquelo aproximadamente en el mismo lugar en cada ventana siempre que sea posible.
• Para los botones de comando con etiquetas de texto, utilice una anchura de botón mínima y la altura de botón de comando estándar. Para más información, véase dimensionamiento y espaciado recomendados.
• Para cada ventana haga que los botones de comando tengan el mismo ancho. Si no resulta práctico, limite a dos el número de anchuras diferentes de los botones de comando con etiquetas de texto.
• Cuando otro control interopera con un botón de comando, como un cuadro de texto con un botón de navegación denote la relación colocando el botón de comando en uno de estos tres lugares:
  • A la derecha y alineado con el otro control.
  • Debajo y alineado a la izquierda con el otro control.
  • Centrado verticalmente entre controles que interoperan (como los botones Añadir y Quitar entre dos cuadros de lista que interoperan).
• Si varios botones de comando interoperan con el mismo control, apilarlos verticalmente a la derecha y alineados arriba con el otro control, o colocarlos horizontalmente alineados a la izquierda debajo del control.
• Cuando los botones de mando están subordinados a otros controles, utilice la colocación anterior y desactive el botón de mando subordinado hasta que se seleccione el mando superior.
• No utilice botones de comando estrechos, cortos o altos con etiquetas de texto. porque tienden a parecer poco profesionales. Intente trabajar con las anchuras y alturas predeterminadas.

Correcto:

En este ejemplo, el tamaño del botón es estándar y tiene un aspecto profesional.

Incorrecto:

En este ejemplo, el botón es demasiado pequeño.

Incorrecto:

En este ejemplo, el botón tiene demasiado espacio alrededor de la etiqueta.

• Evite combinar etiquetas de texto y gráficos en los botones de comando. Combinar texto y gráficos suele añadir un desorden visual innecesario y no mejora la comprensión del usuario. Considere la posibilidad de combinar texto y gráficos solo cuando el gráfico ayude a la comprensión, como cuando se trata de un símbolo estándar para el comando o ayuda a los usuarios a visualizar los resultados del comando. Si no, prefiera el texto, pero utilice texto o gráficos.

Correcto:

En este ejemplo, el gráfico de flechas ayuda a los usuarios a visualizar los resultados del comando.

Correcto:

En este ejemplo, los símbolos estándar se combinan con texto para facilitar la comprensión.

Incorrecto:

En este ejemplo, el gráfico de cancelación no añade nada al texto.

• No utilice botones de comando para establecer el estado. Utilice botones de opción o casillas de verificación. Los botones de mando solo sirven para iniciar acciones.

Botones divididos

• Hacer que el comando más probable sea el comportamiento por defecto. Si hay más de un comando probable, elija uno que no requiera información adicional.
• Si el comando más probable es la última selección del usuario, cambie la etiqueta del botón a la última selección.
• Mostrar el comando por defecto utilizando texto en negrita en el menú. Esto facilita a los usuarios la búsqueda del comando por defecto, especialmente cuando el comando por defecto es dinámico o el botón de división utiliza un gráfico en lugar de una etiqueta de texto.

Valores predeterminados

• Incluir un botón de comando por defecto en cada cuadro de diálogo. Seleccione el comando más seguro (para evitar la pérdida de datos o el acceso al sistema) y más seguro para que sea el predeterminado. Si la seguridad y la protección no son factores importantes, elige el comando más probable o conveniente.
• No haga que una acción destructiva sea el botón de comando por defecto a menos que haya una manera fácil de deshacer el comando.

Tamaño y espaciado recomendados

Dimensionamiento y espaciado recomendados para los botones de comando.

Etiquetas

• Etiquete cada botón de comando.

• Si el botón solo tiene una etiqueta gráfica, asigne su propiedad Name a una etiqueta de texto adecuada. Esto permite a los productos de tecnología asistida, como los lectores de pantalla, proporcionar a los usuarios información alternativa sobre el gráfico.

  

  Este ejemplo muestra botones gráficos; internamente, estos botones se denominan Anterior, Siguiente y Copiar.

• Para los botones de navegación cortos (etiquetados "..."), la etiqueta interna debe ser Navegar.

• Asigne una clave de acceso única. Para directrices, consulte Teclado.

  Excepciones:

  • No asigne clave de acceso a los botones Aceptar y Cancelar, porque Intro es la clave de acceso para el botón por defecto (que suele ser el botón Aceptar), y Esc es la clave de acceso para Cancelar. De este modo, las demás teclas de acceso son más fáciles de asignar.
  • No asigne teclas de acceso a los botones de navegación cortos (etiquetados como "..."), porque no se pueden asignar de forma única.

• Prefiere etiquetas específicas en las genéricas. 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.

  • Excepción: No cambie el nombre del botón Cancelar si el significado de cancelar no es ambiguo. Los usuarios no deberían tener que leer todos los botones para determinar cuál cancela una acción. Sin embargo, cambie el nombre de Cancelar si no está claro qué acción se está cancelando, como cuando hay varias acciones pendientes.

  Aceptable:

  

  En este ejemplo, OK y Cancelar son etiquetas aceptables pero poco específicas.

  Mejor:

  

  En este ejemplo, Grabar CD es más específico que OK.

  Incorrecto:

  

  En este ejemplo, debe utilizarse Cancelar en lugar de No grabar CD.

• Empiece las etiquetas con un verbo imperativo y describa claramente la acción que realiza el botón. No utilice la puntuación final.

  • Excepción: Las siguientes etiquetas estándar son aceptables sin verbos: Avanzado, Atrás, Detalles, Adelante, Menos, Más, Nuevo, Siguiente, No, Aceptar, Opciones, Anterior, Propiedades, Configuración y Sí.

• Aunque es preferible que las etiquetas sean cortas, utilice texto suficiente para explicar suficientemente la orden. Utilizar un complemento directo (un sustantivo después del verbo) cuando el complemento no resulte evidente por el contexto. Lo ideal sería que los usuarios no tuvieran que leer nada más para entender la etiqueta.

  Aceptable:

  

  En este ejemplo, una etiqueta corta es aceptable si su significado en el contexto es fácilmente evidente.

  Mejor: (si Add no está claro)

  

  En este ejemplo, añadir un sustantivo al verbo ayuda a la comprensión de los usuarios.

  Lo mejor: (si Añadir o Añadir elementos no están claros)

  

  En este ejemplo, la etiqueta se explica por sí misma.

• Utilice mayúsculas en las frases. Haciendo esto es más apropiado para el tono de Windows tono de Windows y el uso de frases cortas para los botones de mando.

  • Excepción: Para las aplicaciones heredadas, puede utilizar mayúsculas en el título si es necesario para evitar mezclar estilos de mayúsculas y minúsculas.

• No utilices ahora en las etiquetas de los botones de comando porque la inmediatez del comando puede darse por supuesta.

  • Excepción: Cuando sea necesario, utilice now para diferenciar los comandos que inician una tarea de los comandos que la ejecutan inmediatamente.

  

  En este ejemplo, al pulsar el botón de comando se accede a una ventana o página que permite a los usuarios descargar.

  

  En este ejemplo, al pulsar el botón de comando mejora la descarga.

  Solo un comando en un flujo de tareas debe ser etiquetado con ahora. Así que, por ejemplo, un Descarga ahora comando debería estar seguido de otro Descarga ahora comando.

• No utilice later en las etiquetas de los botones de comando si implica una acción que no se va a producir. Por ejemplo, no utilice Instalar más tarde (en contraste con Instalar ahora) a menos que ese comando instale en un momento posterior. En su lugar, utilice No instalar o Cancelar.

  Incorrecto:

  

  En este ejemplo, Reiniciar más tarde implica incorrectamente que el comando se reinicia automáticamente más tarde.

• Utilice un botón Avanzado solo para las opciones que sean relevantes para usuarios advanced o que requieran conocimientos de usuario advanced. No utilice un botón Avanzado para funciones que se consideren tecnológicamente avanzadas. Por ejemplo, la función de grapado de una impresora no es una opción avanzada, pero su sistema de gestión del color sí lo es.

  Incorrecto: (si las opciones no son realmente avanzadas)

  

  En este ejemplo, Avanzado es engañoso.

  Correcto:

  

  En este ejemplo, la etiqueta es más específica y precisa.

• Para los botones de comando que abren otras ventanas, elija una etiqueta que utilice parte o todo el texto de la barra de título de la ventana secundaria. Por ejemplo, un botón de comando denominado Examinar puede abrir un cuadro de diálogo titulado Buscar carpeta. Utilizar la misma terminología en toda la tarea ayuda a mantener orientados a los usuarios.

• Cuando formule una pregunta, utilice etiquetas que se ajusten a la pregunta. No utilice OK/Cancelar para responder a preguntas Sí/No.

  Correcto:

  

  En este ejemplo, los botones responden a la pregunta.

  Incorrecto:

  

  En este ejemplo, los botones no responden a la pregunta.

• Termine la etiqueta con una elipsis si el comando requiere información adicional para ejecutarse.

  • Excepción: Las etiquetas gráficas no admiten elipsis.

  Correcto: (si se muestra un cuadro de diálogo Opciones de impresión)

  

  En este ejemplo, después de hacer clic en el botón, aparece el cuadro de diálogo Opciones de impresión, que requiere más información del usuario.

• No utilice una elipsis cuando el resultado de la acción sea simplemente mostrar otra ventana. Los siguientes comandos nunca llevan elipsis: Acerca de, Avanzado, Opciones, Propiedades, Ayuda.

  Incorrecto:

  

  En este ejemplo, después de hacer clic en el botón, aparece el cuadro de diálogo Opciones, pero no se requiere más información del usuario.

• En caso de ambigüedad (por ejemplo, la etiqueta de la orden carece de verbo), decida en función de la acción más probable del usuario. Si la simple visualización de la ventana es una acción habitual, no utilice una elipsis.

  Correcto:

  Más colores...

  Información de la versión

  En el primer ejemplo, lo más probable es que los usuarios elijan un color, por lo que utilizar una elipsis es correcto. En el segundo ejemplo, lo más probable es que los usuarios vayan a ver la información sobre la versión, por lo que las elipsis son innecesarias.

• Para los botones de navegación, utilice botones de navegación cortos (etiquetados como "...") cuando haya más de dos botones de navegación en una ventana. Utilice siempre la versión abreviada cuando desee mostrar un botón de navegación en una cuadrícula.

• Para los botones direccionales, utiliza un corchete angular sencillo y haz que apunte en la dirección en la que tiene lugar la acción.

La siguiente tabla muestra algunas etiquetas de botones de comando comunes y su uso.

Etiqueta del botón	Significado	Clave de acceso
Atrás	En los asistentes y flujos de tareas, vaya a la página anterior.	'B'
Navegar...	Mostrar un cuadro de diálogo para buscar un archivo u objeto.	'B' o 'r'
Opciones	Mostrar las opciones disponibles a los usuarios para personalizar un programa.	'O'
Pausar	En los cuadros de diálogo de progreso, suspenda la tarea.	'P'
Personalizar	Personalizar una experiencia básica que es crucial para la identificación personal del usuario con un programa.	'P'
Preferencias	No usar. Utilice Opciones en su lugar.	No aplicable.
Propiedades	Muestre los atributos y la configuración de un objeto.	'P' o primero 'r'
Guardar	Guarde un grupo de configuraciones, o guarda un archivo u objeto utilizando su nombre actual.	'S'
Guardar como...	Guarde un archivo u objeto utilizando un nombre especificado.	Segundo 'a'
Configuración	No usar. Utilice Opciones en su lugar.	No aplicable.
Solución de problemas	No usar. Utilice en su lugar un enlace de Ayuda específico.	No aplicable.

Para obtener directrices sobre las etiquetas de los botones de confirmación (Aceptar, Cancelar, Sí/No, Cerrar, Detener, Aplicar, Siguiente, Finalizar, Hecho), consulte Texto de la interfaz de usuario.

Documentación

Al referirse a los botones de comando:

• Utilice el texto exacto de la etiqueta, incluidas las mayúsculas, pero no incluya el guion bajo de la clave de acceso o elipse. No incluya la palabra botón.
• Para describir la interacción del usuario, haga clic.
• Cuando sea posible, formatee la etiqueta del título utilizando negrita. En caso contrario, ponga la etiqueta entre comillas solo si es necesario para evitar confusiones.

Ejemplo: Haga clic en Imprimir para imprimir el documento.