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 comando en Windows 7, los usuarios inician acciones inmediatas.

screen shot of ok command button

Un botón de comando típico.

El botón de comando predeterminado se invoca cuando los usuarios presionan la tecla Entrar. Lo asigna el desarrollador, pero cualquier botón de comando se convierte en el valor predeterminado cuando los usuarios la tabulan.

Nota

Las directrices relacionadas con el diseño se presentan en un artículo independiente.

¿Es este el control adecuado?

Para decidirte, intenta responder a estas preguntas:

  • ¿Se usa el botón de comando para iniciar una acción inmediata? Si no es así, usa otro control.
  • ¿Sería mejor elegir un vínculo? Use un vínculo si:
    • La acción es navegar a otra página, ventana o tema de Ayuda. Excepción: la navegación del asistente usa los botones Atrás y Siguiente.
    • El comando se inserta en un cuerpo de texto.
    • El comando es secundario por naturaleza. Es decir, no se relaciona con el propósito principal de la ventana. En este caso, sería adecuado un botón de comando ligero o un vínculo.
    • El comando forma parte de un menú o grupo de vínculos relacionados.
    • La etiqueta es larga, que consta de cinco o más palabras, lo que proporciona un botón de comando una apariencia complicada.
  • ¿Sería una mejor opción una combinación de botones de radio y botones de comando genéricos? A menudo, los botones de radio se usan junto con botones de comando genéricos (Ok, Cancel) en lugar de un conjunto de botones de comando específicos cuando se cumple cualquiera de los siguientes elementos:
    • Hay cinco o más acciones posibles.

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

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

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

      Correcto:screen shot of dialog box, radio buttons, and text

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

      Incorrecta:screen shot of message with command buttons

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

Conceptos de diseño

Uso de puntos suspensivos

Aunque se usan botones de comando para acciones inmediatas, es posible que se necesite más información para realizar la acción. Indique un comando que necesita información adicional (incluida la confirmación) agregando puntos suspensivos al final de la etiqueta del botón.

screen shot of print command button with ellipses

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

screen shot of print command button, no ellipses

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

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

Esto no significa que se usen puntos suspensivos siempre que una acción muestre otra ventana solo cuando se requiera información adicional para realizar la acción. Por lo tanto, cualquier botón de comando cuyo verbo implícito sea "mostrar otra ventana" no toma puntos suspensivos, como con los comandos About, Advanced, Help (o cualquier otro comando que vincule a un tema de Ayuda), Opciones, Propiedades o Configuración.

Por lo general, los puntos suspensivos se usan en interfaces de usuario para indicar integridad. Los comandos que muestran otras ventanas no están incompletas, 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 los puntos suspensivos tienen poco valor.

Nota: Al determinar si un botón de comando necesita puntos suspensivos, no use la necesidad de elevar privilegios como factor. La elevación no es información necesaria para realizar un comando (en su lugar, es para el permiso) y la necesidad de elevar se indica con el escudo de seguridad.

Si sólo haces una cosa... Use una etiqueta concisa, específica y autoexplicativa que describa claramente la acción que realiza el botón de comando y use puntos suspensivos cuando corresponda.

Patrones de uso

Los botones de comando tienen varios patrones de uso:

Uso Ejemplo
Botones de comando estándar Puede usar botones de comando estándar para iniciar una acción inmediata.
screen shot of standard (gray) command button
Un botón de comando 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 presionen la tecla Entrar.
screen shot of default (blue) command button
Botón de comando predeterminado.
Cualquier botón de comando se convierte en el valor predeterminado cuando los usuarios lo tabulan. 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 valor predeterminado. Solo un botón de comando de una ventana puede ser el valor predeterminado.
Botones de comando ligeros Un botón de comando ligero es similar a un botón de comando estándar, excepto que su marco de botón solo se muestra al mantener el mouse sobre el mouse.
screen shot of one of two print buttons selected
En este ejemplo, el comando tiene una apariencia muy ligera (similar a un vínculo) hasta que el usuario mantiene el puntero sobre el comando, momento en el que se dibuja con un marco de botón.
Puede usar botones de comando ligeros en situaciones en las que usarí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 los comandos que desea infraemfasizar y usar un vínculo no sería adecuado.
Botones de menú Use un botón de menú cuando necesite un menú para un pequeño conjunto de comandos relacionados.
screen shot of format menu button and its commands
Un botón de menú con un pequeño conjunto de comandos relacionados.
Use un botón de menú cuando una barra de menús no sea deseable, como en un cuadro de diálogo, una barra de herramientas u otra ventana que no tenga una barra de menús. Un único triángulo hacia abajo indica que al hacer clic en el botón se mostrará un menú.
Botones de división Use un botón de división para consolidar un conjunto de variaciones de un comando, especialmente cuando se usa uno de los comandos la mayor parte del tiempo.
screen shot of open split button with no commands
un botón de división contraído.
Como un botón de menú, un único triángulo hacia abajo indica que al hacer clic en la parte más a la derecha del botón se mostrará un menú.
screen shot of open split button with commands
un botón de división desplegable.
en este ejemplo, se usa un botón de división para consolidar seis variaciones del comando open. El comando open normal se usa la mayor parte del tiempo, por lo que los usuarios normalmente no necesitan ver los demás comandos. el uso de un botón de división ahorra una cantidad significativa de espacio en pantalla, al tiempo que proporciona opciones eficaces.
a diferencia de un botón de menú, al hacer clic en la parte izquierda del botón se realiza la acción directamente en la etiqueta. Los botones de división son efectivos 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 colores:
screen shot of fill split button with no commands
En este ejemplo, la etiqueta se cambia a la última acción.
Botones examinar Use un botón Examinar para mostrar un cuadro de diálogo para ayudar a los usuarios a seleccionar un valor válido.
los cuadros de diálogo iniciados por un botón Examinar ayudan a los usuarios a seleccionar archivos, carpetas, equipos, usuarios, colores, etc. normalmente se combinan con un control sin restricciones, como un cuadro de texto. normalmente se etiquetan como examinar, otros o más, y siempre tienen puntos suspensivos para indicar que se requiere más información.
screen shot of text box with browse button
un cuadro de texto con un botón Examinar.
para ventanas que tienen muchos botones de exploración, puede usar una versión corta:
screen shot of short browse button with ellipses
Un breve botón examinar.
Botones de divulgación progresiva Use un botón de divulgación progresiva para mostrar u ocultar opciones usadas con poca frecuencia.
ocultar las opciones usadas con poca frecuencia hasta que se necesiten se denomina divulgación progresiva. Los comillas angulares dobles se usan para indicar la divulgación progresiva, y apuntan en la dirección en la que se llevará a cabo la revelación u ocultación:
screen shot of button with 'more' and right arrows
Después de hacer clic en el botón, su etiqueta cambia para indicar que el siguiente clic tendrá el efecto opuesto:
screen shot of button with 'less' and left arrows
Para obtener más información y ejemplos, vea Controles de divulgación progresiva.
Botones direccionales Use un botón direccional para indicar la dirección en la que se realizará una acción.
en este caso, se usa un corchete angular único en lugar de un doble botón de contenido adicional:
screen shot of right and left arrow buttons
Un botón direccional indica la dirección de la acción.

Directrices

General

  • Muestra un puntero ocupado si el resultado de hacer clic en un botón de comando no es instantáneo. Sin comentarios, los usuarios pueden suponer que el clic no se ha producido y que vuelve a hacer clic.
  • Si el mismo botón de comando aparece en más de una ventana, intente usar el mismo texto de etiqueta y clave de acceso, y colóquelo en aproximadamente el mismo lugar en cada ventana cuando sea práctico.
  • Para los botones de comando con etiquetas de texto, use un ancho de botón mínimo y el alto del botón de comando estándar. Para obtener más información, vea Tamaño y espaciado recomendados.
  • Para cada ventana , los botones de comando tienen el mismo ancho. Si esto no es práctico, limite el número de anchos diferentes para los botones de comando con etiquetas de texto a dos.
  • Cuando otro control interopera con un botón de comando, como un cuadro de texto con un botón Examinar, denota la relación colocando el botón de comando en uno de los tres lugares:
    • A la derecha de y en la parte superior con el otro control.
    • Debajo y alineado a la izquierda con el otro control.
    • Centrado verticalmente entre los controles que interoperan (como agregar y quitar botones entre dos cuadros de lista interoperantes).
  • Si varios botones de comando interoperan con el mismo control, apilarlos verticalmente a la derecha y alineados de arriba con el otro control, o colóquelos horizontalmente alineados a la izquierda bajo el control.
  • Cuando los botones de comando están subordinados a otros controles, use la colocación anterior y deshabilite el botón de comando subordinado hasta que se seleccione el control superior.
  • No use botones de comando estrechos, cortos o altos con etiquetas de texto porque tienden a parecer poco profesionales. Intente trabajar con los anchos y alto predeterminados.

Correcto:screen shot of default-size ok button

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

Incorrecta:screen shot of short ok button

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

Incorrecta:screen shot of large, square ok button

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

  • Evite combinar etiquetas de texto y gráficos en botones de comando. La combinación de texto y gráficos suele agregar 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 ayuda a comprender, como cuando es un símbolo estándar para el comando o ayuda a los usuarios a visualizar los resultados del comando. De lo contrario, prefiere texto, pero use texto o gráficos.

Correcto:screen shot of rotate command with curved arrow

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

Correcto:screen shot of address bar with icons and text

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

Incorrecta:screen shot of button with x icon and cancel

En este ejemplo, el gráfico cancel no agrega nada al texto.

  • No use botones de comando para establecer el estado. En su lugar, use botones de radio o casillas. Los botones de comando solo son para iniciar acciones.

Botones de división

  • Haga que el comando más probable sea el comportamiento predeterminado. 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 de usuario, cambie la etiqueta del botón a la última selección.
  • Muestra el comando predeterminado con texto en negrita en el menú. Esto facilita a los usuarios encontrar el comando predeterminado, especialmente cuando el comando predeterminado es dinámico o el botón de división usa un gráfico en lugar de una etiqueta de texto.

Valores predeterminados

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

diagram of button dimensions in pixels and dlus

Ajuste de tamaño 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 de asistencia, como lectores de pantalla, proporcionar a los usuarios información alternativa sobre el gráfico.

    screen shot of up, down, and copy buttons

    En este ejemplo se muestran botones gráficos; internamente, estos botones se etiquetan como Previous, Next y Copy.

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

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

    Excepciones:

    • No asigne teclas de acceso a los botones Aceptar y Cancelar, ya que Entrar es la tecla de acceso del botón predeterminado (que normalmente es el botón Aceptar) y Esc es la tecla de acceso para Cancelar. Al hacerlo, las demás claves de acceso son más fáciles de asignar.
    • No asigne claves de acceso a botones de exploración cortos (etiquetados );"), porque no se pueden asignar de forma única.
  • Prefiere etiquetas específicas sobre las genéricas. Lo ideal es que los usuarios no tengan que leer nada más para comprender la etiqueta. Es mucho más probable que los usuarios lean etiquetas de botón de comandos que texto estático.

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

    Aceptable:

    Screenshot that shows the 'OK' and 'Cancel' buttons.

    En este ejemplo, Aceptar y Cancelar son etiquetas aceptables, pero no específicas.

    Mejor:

    screen shot of burn cd and cancel buttons

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

    Incorrecto:

    screen shot of burn cd and don't burn cd buttons

    En este ejemplo, se debe usar Cancel en lugar de No Burn CD.

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

    • Excepción: Las siguientes etiquetas estándar son aceptables sin verbos: Advanced, Back, Details, Forward, Less, More, New, Next, No, OK, Options, Previous, Properties, Configuración y Sí.
  • Aunque se prefieren las etiquetas cortas, use suficiente texto para explicar el comando lo suficientemente. Utilice un objeto directo (un sustantivo después del verbo) cuando el objeto no sea aparente del contexto. Lo ideal es que los usuarios no tengan que leer nada más para comprender la etiqueta.

    Aceptable:

    screen shot of button with add label

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

    Mejor: (si Agregar no está claro)

    screen shot of button with add items label

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

    Mejor: (si agregar o agregar elementos no están claros)

    screen shot of button with add selected items

    En este ejemplo, la etiqueta es autoexplicativa.

  • Use mayúsculas de estilo de oración. Hacerlo es más adecuado para Windows tonoWindows tono y el uso de frases cortas para botones de comando.

    • Excepción: En el caso de las aplicaciones heredadas, puede usar mayúsculas de estilo de título si es necesario para evitar mezclar estilos de mayúsculas.
  • No use ahora en las etiquetas de botón de comando porque se puede conceder la inmediatez del comando.

    • Excepción: Cuando sea necesario, use ahora para diferenciar los comandos que inician una tarea de los comandos que realizan una tarea inmediatamente.

    screen shot of button with download label

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

    screen shot of button with download now label

    En este ejemplo, al hacer clic en el botón de comando se realiza la descarga.

    Ahora solo se debe etiquetar un comando de un flujo de tareas. Por lo tanto, por ejemplo, un comando Descargar ahora nunca debe seguir otro comando Descargar ahora .

  • No use más adelante en las etiquetas de botón de comando si implica una acción que no se producirá. Por ejemplo, no use Instalar más adelante (a diferencia de Instalar ahora), a menos que ese comando se instale más adelante. En su lugar, use No instalar o Cancelar.

    Incorrecto:

    screen shot of restart now and restart later

    En este ejemplo, Restart Later incorrectamente implica que el comando se reinicia automáticamente en un momento posterior.

  • Use un botón Avanzado solo para las opciones relevantes para los usuarios avanzados o requiera conocimientos avanzados del usuario. No use un botón Avanzado para las características que se consideran tecnológicamente avanzadas. Por ejemplo, la característica de acoplamiento de una impresora no es una opción avanzada, pero su sistema de administración de colores es.

    Incorrecto: (si las opciones realmente no están avanzadas)

    screen shot of button with advanced label

    En este ejemplo, Advanced es engañoso.

    Correcto:

    screen shot of button with more options label

    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 use parte o todo el texto de la barra de título de la ventana secundaria. Por ejemplo, un botón de comando con la etiqueta Examinar podría abrir un cuadro de diálogo titulado Examinar carpeta. El uso de la misma terminología en toda la tarea ayuda a mantener a los usuarios orientados.

  • Al formular una pregunta, use etiquetas que coincidan con la pregunta. No use Ok/Cancel para responder a preguntas Sí/No.

    Correcto:

    screen shot of yes and no buttons

    En este ejemplo, los botones responden a la pregunta.

    Incorrecto:

    screen shot of ok and cancel buttons

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

  • Finalice la etiqueta con puntos suspensivos si el comando requiere información adicional para ejecutarse.

    • Excepción: Las etiquetas gráficas no toman puntos suspensivos.

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

    screen shot of print button with ellipses

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

  • No use puntos suspensivos cuando la finalización correcta de la acción sea simplemente mostrar otra ventana. Los siguientes comandos nunca toman puntos suspensivos: About, Advanced, Options, Properties, Help.

    Incorrecto:

    screen shot of options button with ellipses

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

  • En caso de ambigüedad (por ejemplo, la etiqueta de comando carece de un verbo), decida en función de la acción del usuario más probable. Si simplemente ver la ventana es una acción común, no use puntos suspensivos.

    Correcto:

    Más colores...

    Información de la versión

    En el primer ejemplo, es más probable que los usuarios elijan un color, por lo que el uso de puntos suspensivos es correcto. En el segundo ejemplo, es más probable que los usuarios vean la información de la versión, lo que hace que los puntos suspensivos sean innecesarios.

  • Para los botones de exploración, use botones de exploración cortos (etiquetados como "...") cuando haya más de dos botones de exploración en una ventana. Use siempre la versión corta cuando desee mostrar un botón Examinar en una cuadrícula.

  • Para los botones direccionales, use un solo corchete angular y haga que apunte en la dirección en la que tiene lugar la acción.

En la tabla siguiente se muestran algunas etiquetas de botón de comando comunes y su uso.

Etiqueta de botón Significado Clave de acceso
Atrás
En los flujos de tareas y asistentes, vaya a la página anterior.
'B'
Examinar...
Muestra un cuadro de diálogo para buscar un archivo u objeto.
'B' o 'r'
Opciones
Mostrar las opciones disponibles para los usuarios para personalizar un programa.
'O'
Pausar
En curso, suspenda la tarea.
'P'
Personalizar
Personalice una experiencia básica que sea fundamental para la identificación personal del usuario con un programa.
'P'
Preferencias
No lo use. En su lugar, use Opciones.
No es aplicable.
Propiedades
Muestra los atributos y la configuración de un objeto.
'P' o el primer 'r'
Guardar
Guarde un grupo de configuraciones o guarde un archivo u objeto con su nombre actual.
'S'
Guardar como...
Guarde un archivo u objeto con un nombre especificado.
Segundo 'a'
Configuración
No lo use. En su lugar, use Opciones.
No es aplicable.
Solución de problemas
No lo use. En su lugar, use un vínculo de Ayuda específico.
No es aplicable.

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

Documentación

Al hacer referencia a botones de comando:

  • Use el texto exacto de la etiqueta, incluida su mayúscula, pero no incluya el carácter de subrayado o los puntos suspensivos de la tecla de acceso. No incluya el botón de palabra.
  • Para describir la interacción del usuario, use haga clic.
  • Cuando sea posible, dé formato a la etiqueta con texto en negrita. De lo contrario, coloque la etiqueta entre comillas solo si es necesario para evitar confusiones.

Ejemplo: haga clic en Imprimir para imprimir el documento.