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

captura de pantalla del botón de comando Ok

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 extraña.
  • ¿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 los 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:captura de pantalla del cuadro de diálogo, botones de radio y texto

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

      Incorrecto:captura de pantalla del mensaje con botones de comando

      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.

captura de pantalla del botón de comando de impresión con puntos suspensivos

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

captura de pantalla del botón de comando de impresión, sin puntos suspensivos

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 debe usar puntos suspensivos cada vez que una acción muestre otra ventana. Use puntos suspensivos 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 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 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.
captura de pantalla del botón de comando estándar (gris)
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.
captura de pantalla del botón de comando predeterminado (azul)
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.
captura de pantalla de uno de los dos botones de impresión seleccionados
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.
captura de pantalla del botón de menú formato y sus comandos
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.
captura de pantalla del botón de división abierta sin comandos
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ú.
captura de pantalla del botón de división abierta con comandos
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:
captura de pantalla del botón de división de relleno sin comandos
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.
captura de pantalla del cuadro de texto con el botón Examinar
un cuadro de texto con un botón Examinar.
para ventanas que tienen muchos botones de exploración, puede usar una versión corta:
captura de pantalla del botón examinar breve con puntos suspensivos
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 doble botón de contenido adicional se usan para indicar la divulgación progresiva y apuntan en la dirección en la que tendrá lugar la revelación u ocultación:
captura de pantalla del botón con
Después de hacer clic en el botón, su etiqueta cambia para indicar que el siguiente clic tendrá el efecto opuesto:
captura de pantalla del botón con
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:
captura de pantalla de los botones de flecha derecha e izquierda
Un botón direccional indica la dirección de la acción.

Instrucciones

General

  • Muestra un puntero ocupado si el resultado de hacer clic en un botón de comando no es instantáneo. Sin comentarios, es posible que los usuarios supongan 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.
  • En el caso de los botones de comando con etiquetas de texto, use un ancho de botón mínimo y el alto estándar del botón de comando. Para obtener más información, consulte Ajuste de tamaño y espaciado recomendados.
  • Para cada ventana , los botones de comando tienen el mismo ancho. Si 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 y en la parte superior alineada con el otro control.
    • Debajo y de la izquierda alineados 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 en la parte superior alineadas 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 ubicació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 ser poco profesionales. Intente trabajar con los anchos y alto predeterminados.

Correcto:captura de pantalla del botón Aceptar de tamaño predeterminado

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

Incorrecto:captura de pantalla del botón aceptar corto

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

Incorrecto:captura de pantalla de un botón grande, cuadrado ok

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 la comprensión, 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:captura de pantalla del comando de rotación con flecha curvada

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

Correcto:captura de pantalla de la barra de direcciones con iconos y texto

En este ejemplo, los símbolos estándar se combinan con texto para ayudar a comprender

Incorrecto:captura de pantalla del botón con el icono x y cancelar

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

  • Convierta en el comando más probable 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 el comando más seguro (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.

diagrama de dimensiones de botón en píxeles y lápiz

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 que productos de tecnología de asistencia como lectores de pantalla proporcionen a los usuarios información alternativa sobre el gráfico.

    captura de pantalla de botones arriba, abajo y copia

    En este ejemplo se muestran los botones gráficos; internamente, estos botones se etiquetan como Anterior, Siguiente y Copiar.

  • 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 claves de acceso a los botones Aceptar y Cancelar, porque Entrar es la tecla de acceso del botón predeterminado (que suele ser 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 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 deben tener que leer todos los botones para determinar qué botón cancela una acción. Sin embargo, cambie el nombre de Cancel si no está claro qué acción se va a cancelar, como cuando hay varias acciones pendientes.

    Aceptable:

    Captura de pantalla que muestra los botones

    En este ejemplo, Ok y Cancel son aceptables, pero no especifican etiquetas.

    Mejor:

    captura de pantalla de los botones grabar cd y cancelar

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

    Incorrecto:

    captura de pantalla de los botones grabar cd y no grabar cd

    En este ejemplo, se debe usar Cancel en lugar de Don't 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, Settings y Sí.
  • Aunque se prefieren etiquetas cortas, use suficiente texto para explicar el comando lo suficiente. Utilice un objeto directo (un sustantivo después del verbo) cuando el objeto no sea evidente desde el contexto. Lo ideal es que los usuarios no tengan que leer nada más para comprender la etiqueta.

    Aceptable:

    captura de pantalla del botón con agregar etiqueta

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

    Mejor: (si Agregar no está claro)

    captura de pantalla del botón con la etiqueta agregar elementos

    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)

    captura de pantalla del botón con agregar elementos seleccionados

    En este ejemplo, la etiqueta es autoexplicativa.

  • Use mayúsculas de estilo de oración. Esto es más adecuado para el tono de Windows Tono de Windows y el uso de frases cortas para los 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 comandos porque se puede conceder la inmediación 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.

    captura de pantalla del botón con la etiqueta de descarga

    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.

    captura de pantalla del botón con la etiqueta descargar ahora

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

    Solo se debe etiquetar un comando en un flujo de tareas con ahora. 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 realizará. Por ejemplo, no use Install later (a diferencia de Install now) a menos que ese comando se instale más adelante. En su lugar, use No instalar ni Cancelar.

    Incorrecto:

    captura de pantalla del reinicio ahora y reinicio más adelante

    En este ejemplo, Reiniciar más tarde 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)

    captura de pantalla del botón con etiqueta avanzada

    En este ejemplo, Advanced es engañoso.

    Correcto:

    captura de pantalla del botón con más etiquetas de opciones

    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 Buscar 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 Aceptar/Cancelar para responder a preguntas Sí/No.

    Correcto:

    captura de pantalla de los botones sí y no

    En este ejemplo, los botones responden a la pregunta.

    Incorrecto:

    captura de pantalla de los botones aceptar y cancelar

    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)

    captura de pantalla del botón imprimir con puntos suspensivos

    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 es simplemente mostrar otra ventana. Los siguientes comandos nunca toman puntos suspensivos: About, Advanced, Options, Properties, Help.

    Incorrecto:

    captura de pantalla del botón de opciones con puntos suspensivos

    En este ejemplo, después de hacer clic en el botón, se muestra 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 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 probable que los usuarios elijan un color, por lo que el uso de puntos suspensivos es correcto. En el segundo ejemplo, es 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 abreviada 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 se realiza la acción.

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

Etiqueta de botón Significado Clave de acceso
Atrás
En los asistentes y flujos de tareas, vaya a la página anterior.
'B'
Examinar...
Mostrar un cuadro de diálogo para buscar un archivo o un objeto.
'B' o 'r'
Opciones
Muestra 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. Use opciones en su lugar.
No es aplicable.
Propiedades
Muestra los atributos y la configuración de un objeto.
'P' o primero 'r'
Guardar
Guarde un grupo de configuraciones o guarde un archivo u objeto con su nombre actual.
'S'
Guardar como...
Guarde un archivo o un objeto con un nombre especificado.
Segundo "a"
Configuración
No lo use. Use opciones en su lugar.
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 los botones de comando:

  • Use el texto exacto de la etiqueta, incluida su mayúscula, pero no incluya el carácter de subrayado o puntos suspensivos de la tecla de acceso. No incluya el botón de palabra.
  • Para describir la interacción del usuario, use click.
  • 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.