Barras de herramientas de 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.

Las barras de herramientas son una manera de agrupar comandos para un acceso eficaz.

Algunas barras de herramientas típicas.

Use barras de herramientas además o en lugar de barras de menú. Las barras de herramientas pueden ser más eficaces que las barras de menú porque son directas (siempre se muestran en lugar de mostrarse en el clic del mouse), inmediata (en lugar de requerir entrada adicional) y contienen los comandos usados con más frecuencia (en lugar de una lista completa). A diferencia de las barras de menú, las barras de herramientas no tienen que ser completas o autoexplicativas tan solo rápidas, cómodas y eficientes.

Algunas barras de herramientas son personalizables, lo que permite a los usuarios agregar o quitar barras de herramientas, cambiar su tamaño y ubicación, e incluso cambiar su contenido. Algunos tipos de barras de herramientas se pueden desacoplar, lo que da lugar a una ventana de paleta. Para obtener más información sobre las variedades de la barra de herramientas, consulte Patrones de uso en este artículo.

Nota

Las directrices relacionadas con menús, botones de comando e iconos se presentan en artículos independientes.

¿Es esta la interfaz de usuario adecuada?

Para decidirte, intenta responder a estas preguntas:

• ¿Es la ventana una ventana principal? Las barras de herramientas funcionan bien para las ventanas principales, pero normalmente son abrumadoras para las ventanas secundarias. En el caso de las ventanas secundarias, use botones de comando, botones de menú y vínculos en su lugar.
• ¿Hay un pequeño número de comandos usados con frecuencia? Las barras de herramientas no pueden controlar tantos comandos como barras de menú, por lo que funcionan mejor como una manera de acceder de forma eficaz a un pequeño número de comandos usados con frecuencia.
• ¿La mayoría de los comandos son inmediatos? Es decir, ¿son principalmente comandos que no requieren entrada adicional? Para ser eficiente, las barras de herramientas deben tener una sensación directa e inmediata. Si no es así, las barras de menú son más adecuadas para los comandos que requieren entrada adicional.
• ¿Se puede presentar directamente la mayoría de los comandos? Es decir, los usuarios interactúan con ellos con un solo clic? Aunque algunos comandos se pueden presentar mediante botones de menú, presentar la mayoría de los comandos de esta manera debilita la eficacia de la barra de herramientas, lo que hace que una barra de menús sea una mejor opción.
• ¿Los comandos están bien representados por iconos? Los botones de la barra de herramientas suelen representarse mediante iconos en lugar de etiquetas de texto (aunque algunos botones de barra de herramientas usan ambos), mientras que los comandos de menú se representan mediante su texto. Si los iconos de comandos no son de alta calidad y no se explican por sí mismos, una barra de menús puede ser una mejor opción.

Si el programa tiene una barra de herramientas sin una barra de menús y la mayoría de los comandos son accesibles indirectamente a través de botones de menú y botones divididos, esta barra de herramientas es esencialmente una barra de menús. Aplique en su lugar el patrón de menús de la barra de herramientas en las directrices menús.

Conceptos de diseño

Una buena barra de menús es un catálogo completo de todos los comandos de nivel superior disponibles, mientras que una buena barra de herramientas ofrece un acceso rápido y cómodo a los comandos usados con frecuencia. Una barra de herramientas no intenta entrenar a los usuarios simplemente hacer que sean productivos. Una vez que los usuarios aprendan a acceder a un comando en una barra de herramientas, rara vez seguirán accediendo al comando desde la barra de menús. Por estas razones, la barra de menús de un programa y su barra de herramientas no necesitan corresponderse directamente.

Barras de herramientas frente a barras de menú

Tradicionalmente, las barras de herramientas son diferentes de las barras de menú de las siguientes maneras:

• Frecuencia. Las barras de herramientas solo presentan los comandos usados con más frecuencia, mientras que las barras de menú cataloga todos los comandos de nivel superior disponibles dentro de un programa.

• Inmediatez. Hacer clic en un comando de barra de herramientas surte efecto inmediatamente, mientras que un comando de menú podría requerir una entrada adicional. Por ejemplo, un comando Imprimir en una barra de menús muestra primero el cuadro de diálogo Imprimir, mientras que un botón Imprimir barra de herramientas imprime inmediatamente una sola copia de un documento en la impresora predeterminada.

  

  En este ejemplo, al hacer clic en el botón Imprimir barra de herramientas se imprime inmediatamente una sola copia de un documento en la impresora predeterminada.

• Franqueza. Los comandos de la barra de herramientas se invocan con un solo clic, mientras que los comandos de la barra de menús requieren navegar por el menú.

• Número y densidad. El espacio de pantalla requerido por una barra de herramientas es proporcional al número de comandos y ese espacio siempre se usa, incluso si los comandos no lo son. Por lo tanto, las barras de herramientas deben usar su espacio de forma eficaz. Por el contrario, los comandos de la barra de menús se ocultan normalmente de la vista y su estructura jerárquica permite cualquier número de comandos.

• Tamaño y presentación. Para empaquetar muchos comandos en un espacio pequeño, las barras de herramientas suelen usar comandos basados en iconos (con etiquetas basadas en información sobre herramientas), mientras que las barras de menú usan comandos basados en texto (con iconos opcionales). Aunque los botones de la barra de herramientas pueden tener etiquetas de texto estándar, estos usan mucho más espacio.

  

  Los botones de la barra de herramientas etiquetados tardan al menos tres veces más espacio que los sin etiquetar.

• se explica por sí solo. Las barras de herramientas bien diseñadas necesitan iconos que son principalmente autoexplicativos, ya que los usuarios no pueden encontrar comandos de forma eficaz simplemente con información sobre herramientas. Sin embargo, las barras de herramientas siguen funcionando bien si algunos comandos usados con menos frecuencia no se explican por sí mismos.

  

  En este ejemplo, los iconos usados con más frecuencia son autoexplicativos.

• Reconocible y distintivo. Para los comandos usados con frecuencia, los usuarios recuerdan atributos de botón de barra de herramientas como ubicación, forma y color. Con barras de herramientas bien diseñadas, los usuarios pueden encontrar rápidamente los comandos incluso si no recuerdan el símbolo de icono exacto. Por el contrario, los usuarios recuerdan las ubicaciones de comandos de la barra de menús usadas con frecuencia, pero se basan en las etiquetas de comandos para realizar selecciones.

  

  Para los comandos de la barra de herramientas, la ubicación distintiva, la forma y el color ayudan a que los iconos sean reconocibles y distintivos.

  

  En el caso de los comandos de la barra de menús, los usuarios dependen en última instancia de sus etiquetas.

Eficacia

Dadas sus características, las barras de herramientas deben diseñarse principalmente para mejorar la eficacia. Una barra de herramientas ineficaz no tiene sentido.

Si sólo haces una cosa...

Asegúrese de que las barras de herramientas están diseñadas principalmente para mejorar la eficacia. Centre las barras de herramientas en los comandos que se usan con frecuencia, inmediatos, directos y rápidamente reconocibles.

Ocultar barras de menú

Por lo general, las barras de herramientas funcionan muy bien junto con las barras de menú: las buenas barras de herramientas proporcionan eficiencia y las barras de menús buenas proporcionan una completación. Tener barras de menú y barras de herramientas permite a cada uno centrarse en sus puntos fuertes sin poner en peligro.

Sorprendentemente, este modelo se desglosa con programas sencillos. Para los programas con solo unos pocos comandos, tener una barra de menús y una barra de herramientas no tiene sentido porque la barra de menús termina siendo una versión redundante e ineficaz de la barra de herramientas.

Para eliminar esta redundancia, muchos programas sencillos de Windows Vista se centran en proporcionar comandos únicamente a través de la barra de herramientas y ocultar la barra de menús de forma predeterminada. Estos programas incluyen Windows Explorer, Windows Internet Explorer, Reproductor multimedia de Windows y Galería de fotos de Windows.

Este no es un pequeño cambio. Quitar la barra de menús cambia fundamentalmente la naturaleza de las barras de herramientas, ya que estas barras de herramientas deben ser completas y cambiar de las siguientes maneras:

• Frecuencia. Quitar la barra de menús significa que todos los comandos que no están disponibles directamente desde una ventana o sus menús contextuales deben ser accesibles desde la barra de herramientas, independientemente de su frecuencia de uso.

• Inmediatez. Al quitar la barra de menús, la barra de herramientas es el único punto de acceso visible para los comandos, lo que requiere que la barra de herramientas tenga las versiones totalmente funcionales. Por ejemplo, si no hay ninguna barra de menús, un comando Imprimir en una barra de herramientas debe mostrar el cuadro de diálogo Imprimir en lugar de imprimir inmediatamente. (Aunque el uso de un botón de división es un excelente compromiso en este caso. Consulte Los botones estándar de menú y división para el botón de división de impresión estándar).

  

  En este ejemplo, el botón Imprimir barra de herramientas de la Galería de fotos de Windows tiene un comando Imprimir que muestra el cuadro de diálogo Imprimir.

• Franqueza. Para ahorrar espacio y evitar el desorden, es posible que los comandos usados con menos frecuencia se muevan a los botones de menú, lo que hace que sean menos directos.

Las barras de herramientas usadas para complementar una barra de menús están diseñadas de forma diferente a las barras de herramientas diseñadas para su uso con una barra de menús quitada o oculta. Y como no se puede suponer que los usuarios mostrarán una barra de menús oculta para realizar un solo comando, ocultar una barra de menús debe tratarse igual que quitarla por completo al tomar decisiones de diseño. (Si oculta la barra de menús de forma predeterminada, no suponga que los usuarios pensarán en mostrar la barra de menús para encontrar un comando o incluso averiguar cómo mostrarla).

El diseño de una barra de herramientas para que funcione sin una barra de menús suele implicar algunos riesgos. Pero para mejorar la eficiencia, no pongas en peligro demasiado. Si ocultar la barra de menús da como resultado una barra de herramientas ineficaz, no oculte la barra de menús.

Accesibilidad de teclado

Desde el teclado, el acceso a las barras de herramientas es bastante diferente de acceder a las barras de menú. Las barras de menús reciben el foco de entrada cuando los usuarios presionan la tecla Alt y pierden el foco de entrada con la tecla Esc. Una vez que una barra de menús tiene el foco de entrada, se navega independientemente del resto de la ventana, controlando todas las teclas de dirección, Inicio, Fin y Teclas de tabulación. Por el contrario, las barras de herramientas reciben el foco de entrada cuando los usuarios presionan la tecla Tab a través de todo el contenido de la ventana. Dado que las barras de herramientas son la última en orden de tabulación, pueden tardar algún esfuerzo significativo en activarse en una página ocupada (a menos que los usuarios sepan usar Mayús+Tab para moverse hacia atrás).

La accesibilidad presenta un dilema aquí: mientras que las barras de herramientas son más fáciles para los usuarios del mouse, son menos accesibles para los usuarios del teclado. Esto no es un problema si hay una barra de menús y una barra de herramientas, pero es si la barra de menús se quita o oculta.

Por motivos de accesibilidad, prefiere conservar la barra de menús en lugar de quitarla completamente en favor de una barra de herramientas. Si debe elegir entre quitar la barra de menús y simplemente ocultarla, prefiere ocultarla.

Patrones de uso

Las barras de herramientas tienen varios patrones de uso:

Uso	Ejemplo
Barras de herramientas principales una barra de herramientas diseñada para funcionar sin una barra de menús, ya sea oculta o quitada.	las barras de herramientas principales deben equilibrar la necesidad de eficiencia con amplitud, por lo que funcionan mejor para programas sencillos. Barra de herramientas principal del Explorador de Windows.
Barras de herramientas complementarias una barra de herramientas diseñada para trabajar con una barra de menús.	las barras de herramientas complementarias pueden centrarse en la eficacia sin poner en peligro. Barra de herramientas complementaria de Windows Movie Maker.
Menús de la barra de herramientas una barra de menús implementada como una barra de herramientas.	Los menús de la barra de herramientas son barras de herramientas que constan principalmente de comandos en botones de menú y botones de división, con solo unos pocos comandos directos, si los hay. Menú de la barra de herramientas de la Galería de fotos de Windows.
Barras de herramientas personalizables una barra de herramientas que los usuarios pueden personalizar.	las barras de herramientas personalizables permiten a los usuarios agregar o quitar barras de herramientas, cambiar su tamaño y ubicación e incluso cambiar su contenido. Una barra de herramientas personalizable de Microsoft Visual Studio.
Ventanas de paleta un cuadro de diálogo modela que presenta una matriz de comandos.	las ventanas de paleta son barras de herramientas desacoplar. Ventanas de paleta de Windows Paint.

Las barras de herramientas tienen estos estilos:

Estilo	Ejemplo
Iconos sin etiquetar una o varias filas de pequeños botones de icono sin etiquetar.	use este estilo si hay demasiados botones para etiquetar o el programa se usa con frecuencia. con este estilo, los programas con funcionalidad compleja pueden tener varias filas y, por lo tanto, este es el único estilo que debe ser personalizable. con este estilo, algunos botones de comando se pueden etiquetar si se usan con frecuencia. Barra de herramientas de iconos sin etiquetar de WordPad.
Iconos grandes sin etiquetar una sola fila de botones de icono sin etiquetar grandes.	use este estilo para utilidades sencillas que tienen iconos fácilmente reconocibles y que normalmente se ejecutan en ventanas pequeñas. Barras de herramientas de iconos sin etiquetar grandes de Windows Live Messenger y la herramienta de recorte de Windows.
Iconos etiquetados una sola fila de iconos pequeños etiquetados.	use este estilo si hay pocos comandos o el programa no se usa con frecuencia. este estilo siempre tiene una sola fila. Barra de herramientas de iconos con etiqueta del Explorador de Windows.
Barras de herramientas parciales una fila parcial de iconos pequeños que se usan para ahorrar espacio cuando no es necesaria una barra de herramientas completa.	use este estilo para ventanas con botones de navegación, un cuadro de búsqueda o pestañas para eliminar el peso innecesario en la parte superior de la ventana. Las barras de herramientas parciales se pueden combinar con botones de navegación, un cuadro de búsqueda o pestañas.
Barras de herramientas parciales grandes una fila parcial de iconos grandes que se usan para ahorrar espacio cuando no es necesaria una barra de herramientas completa.	use este estilo para utilidades sencillas que tienen botones de navegación o un cuadro de búsqueda para eliminar el peso innecesario en la parte superior de la ventana. Una barra de herramientas parcial grande de Windows Defender.

Por último, los controles de barra de herramientas tienen varios patrones de uso:

Uso	Ejemplo
Botones de icono de comando Al hacer clic en un botón de comando, se inicia una acción inmediata.	Ejemplos de botones de comando de icono de Fax y Examen de Windows.
Botones de icono de modo Al hacer clic en un botón de modo, se entra en el modo seleccionado.	Ejemplos de botones de modo de Windows Paint.
Botones de icono de propiedad El estado de un botón de propiedad refleja el estado de los objetos seleccionados actualmente, si los hay. Al hacer clic en el botón, se aplica el cambio a los objetos seleccionados.	Ejemplos de botones de propiedad de Microsoft Word.
Botones de iconos con etiqueta un botón de comando o un botón de propiedad etiquetados con un icono y una etiqueta de texto.	estos botones se usan para botones de barra de herramientas usados con frecuencia cuyo icono no es suficientemente explicativo. también se usan en barras de herramientas que tienen tan pocos botones que cada botón puede tener una etiqueta de texto. Una barra de herramientas con sus botones usados con más frecuencia etiquetados.
Botones de menú un botón de comando usado para presentar un pequeño conjunto de comandos relacionados.	un único triángulo que apunta hacia abajo indica que al hacer clic en el botón se muestra un menú. Un botón de menú con un pequeño conjunto de comandos relacionados.
Botones de división un botón de comando usado para consolidar las variaciones de un comando, especialmente cuando se usa uno de los comandos la mayoría de las veces.	un botón de división en su estado normal. al igual que un botón de menú, un único triángulo que apunta hacia abajo indica que al hacer clic en la parte situada más a la derecha del botón se muestra un menú. un botón de división desplegable. en este ejemplo, se usa un botón de división para consolidar todos los comandos relacionados con la impresión. El comando de impresión inmediata se usa la mayor parte del tiempo, por lo que los usuarios normalmente no necesitan ver los otros comandos. 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 divididos son efectivos en situaciones en las que es probable que el siguiente comando sea el mismo que el último comando. en este caso, la etiqueta se cambia al último comando, como con un selector de colores: En este ejemplo, la etiqueta se cambia al último comando.
Listas desplegables una lista desplegable (editable o de solo lectura) usada para ver o cambiar una propiedad.	En este ejemplo, las listas desplegables se usan para ver y establecer atributos de fuente. Una lista desplegable de una barra de herramientas refleja el estado del objeto seleccionado actualmente, si existe. Cambiar la lista cambia el estado del objeto seleccionado.

Instrucciones

Presentación

• Elija un estilo de barra de herramientas adecuado en función del número de comandos y su uso. Consulte la tabla de estilos de la barra de herramientas anterior para obtener instrucciones sobre cómo elegir. Evite usar una configuración de barra de herramientas que tarde demasiado espacio en el área de trabajo del programa.

• Coloque las barras de herramientas justo encima del área de contenido, debajo de la barra de menús y de la barra de direcciones, si está presente.

• Si el espacio está en un nivel premium, ahorre espacio por:

  • Omitir las etiquetas de iconos conocidos y comandos de uso menos frecuente.
  • Usar solo una barra de herramientas parcial en lugar de todo el ancho de la ventana.
  • Consolidación de comandos relacionados con un botón de menú o un botón de división.
  • Usar un botón de contenido adicional de desbordamiento para mostrar comandos usados con menos frecuencia.
  • Mostrar comandos solo cuando se aplican al contexto actual.

  

  La barra de herramientas de Windows Internet Explorer ahorra espacio omitiendo etiquetas de iconos conocidos, usando una barra de herramientas parcial y usando un botón de contenido adicional de desbordamiento para comandos que se usan con menos frecuencia.

• Para el patrón de barra de herramientas de iconos sin etiquetar, use una configuración predeterminada sin más de dos filas de barras de herramientas. Si es posible que más de dos filas sean útiles, haga que las barras de herramientas se puedan personalizar. A partir de más de dos filas, los usuarios pueden sobrecargar a los usuarios y tomar demasiado espacio desde el área de trabajo del programa.

  Incorrecto:

  

  Una configuración predeterminada con más de dos filas de barras de herramientas da como resultado demasiado desorden visual.

• Deshabilite los botones individuales de la barra de herramientas que no se aplican al contexto actual, en lugar de quitarlos. Al hacerlo, el contenido de la barra de herramientas es estable y es más fácil de encontrar.

• Deshabilite los botones individuales de la barra de herramientas si al hacer clic en ellos se produciría un error directamente. Es necesario hacerlo para mantener una sensación directa.

• Para el patrón de barra de herramientas de iconos sin etiquetar, quite todas las barras de herramientas si no se aplican al contexto actual. Mostrarlos solo en los modos aplicables.

  

  En este ejemplo, la barra de herramientas Depurar solo se muestra cuando se ejecuta el programa.

• Mostrar botones de la barra de herramientas alineados a la izquierda. El icono ayuda, si está presente, está alineado a la derecha.

  

  Todos los botones de la barra de herramientas están alineados a la izquierda, excepto la Ayuda.

  Excepción: Las barras de herramientas de estilo de Windows 7 alinean los comandos específicos del programa, pero a la derecha alinean los comandos estándar y conocidos, como Opciones, Vista y Ayuda.

• No cambie dinámicamente las etiquetas de botón de la barra de herramientas. Hacerlo es confuso e inesperado. Sin embargo, puede cambiar el icono para reflejar el estado actual.

  

  En este ejemplo, se cambia el icono para indicar el comando predeterminado.

Controles y comandos

• Prefiere los comandos usados con más frecuencia.

  • En el caso de las barras de herramientas principales, proporcione comandos completos. Las barras de herramientas principales no tienen que ser tan completas como barras de menú, pero tienen que proporcionar todos los comandos que no se pueden detectar fácilmente en otro lugar. Las barras de herramientas principales no necesitan tener comandos para:
    • Comandos que se encuentran directamente en la propia interfaz de usuario.
    • Normalmente, se accede a los comandos a través de menús contextuales.
    • Comandos estándar conocidos como Cortar, Copiar y Pegar.
  • En el caso de las barras de herramientas complementarias, proporcione comandos que se usen con más frecuencia. Los comandos de la barra de menús son un superconjunto de los comandos de la barra de herramientas, por lo que no es necesario proporcionar todo. Céntrese en el acceso rápido y cómodo a los comandos y omita el resto.

• Preferir controles directos. Use los botones de la barra de herramientas en el orden de preferencia siguiente:

  • Botón icono. Directo y toma un espacio mínimo.
  • Botón de icono con etiqueta. Directo, pero toma más espacio.
  • Botón Dividir. Dirige al comando más común, pero controla las variaciones de comandos.
  • Botón de menú. Indirecto, pero presenta muchos comandos.

• Prefiere comandos inmediatos. En el caso de los comandos que pueden ser inmediatos o tienen una entrada adicional para la flexibilidad:

  • Para las barras de herramientas principales, use las versiones flexibles de comandos (por ejemplo, Imprimir...).
  • Para las barras de herramientas complementarias, use las versiones inmediatas de la barra de herramientas (como Imprimir) y use versiones flexibles en la barra de menús (como Imprimir...).

• Proporcione etiquetas para comandos usados con frecuencia, especialmente si sus iconos no son iconos conocidos.

  Aceptable:

  

  Mejor:

  

  La barra de herramientas Fax y Examen de Windows tiene pocos comandos, por lo que las etiquetas de versión más importantes son las más importantes.

• No coloque comandos en los menús de la barra de herramientas que también estén directamente en la barra de herramientas.

  Incorrecto:

  

  En este ejemplo, Print se encuentra directamente en la barra de herramientas, por lo que no es necesario que esté en el menú.

Organización y orden

• Organice los comandos de una barra de herramientas en grupos relacionados.

• Coloque primero los grupos usados con más frecuencia. Dentro de un grupo, coloque los comandos en su orden lógico. En general, los comandos deben tener un flujo lógico para facilitar su búsqueda, a la vez que primero aparecen los comandos usados con más frecuencia. Hacerlo es más eficaz, especialmente si hay desbordamiento.

• Use divisores de grupo solo si los comandos de los grupos están débilmente acoplados. Si lo hace, las agrupaciones son obvias y los comandos son más fáciles de encontrar.

  

  

  Ejemplos de barras de herramientas agrupadas de Windows Mail.

• Evite colocar comandos destructivos junto a comandos usados con frecuencia. Use el orden o la agrupación para obtener la separación. Además, considere la posibilidad de no colocar comandos destructivos en la barra de herramientas, sino solo en la barra de menús o los menús contextuales en su lugar.

  Aceptable:

  

  Mejor:

  

  En el mejor ejemplo, el comando Delete está separado físicamente de Print.

• Use el botón de contenido adicional de desbordamiento para indicar que no se pueden mostrar todos los comandos. Pero use desbordamiento solo si no hay espacio suficiente para mostrar todos los comandos.

  Incorrecto:

  

  El botón de contenido adicional de desbordamiento indica que no se muestran todos los comandos, pero más de ellos podrían estar con un mejor diseño.

• Asegúrese de que los comandos usados con más frecuencia son directamente accesibles desde la barra de herramientas (es decir, no en desbordamiento) en tamaños de ventana pequeños. Si es necesario, reordene los comandos, mueva los comandos usados con menos frecuencia a los botones de menú o los botones de división, o incluso quítelos por completo de la barra de herramientas. Si esto sigue siendo un problema, reconsidere la elección del estilo de la barra de herramientas.

Ocultar barras de menú

Por lo general, las barras de herramientas funcionan bien junto con las barras de menú porque tener ambos permiten centrarse en sus puntos fuertes sin comprometerse.

• Oculta la barra de menús de forma predeterminada si el diseño de la barra de herramientas hace que tenga redundancia de barra de menús.
• Oculte la barra de menús en lugar de quitarla por completo, ya que las barras de menú son más accesibles para los usuarios del teclado.
• Para restaurar la barra de menús, proporcione una opción de marca de verificación barra de menús en la categoría de menú Ver (para barras de herramientas principales) o Herramientas (para barras de herramientas secundarias). Para obtener más información, vea Menú estándar y botones de división.
• Muestra la barra de menús cuando los usuarios presionan la tecla Alt y establecen el foco de entrada en la primera categoría de menú.

Interacción

• Al mantener el puntero, muestra la prestación del botón para indicar que se puede hacer clic en el icono. Después del tiempo de espera de la información sobre herramientas, muestre la información sobre herramientas o la información.

  

  En este ejemplo se muestran los distintos estados de presentación.

• En el clic único de la izquierda:

  • Para los botones de comando, interactúe con el control de la forma normal.

  • Para los botones de modo, muestre el control para reflejar el modo seleccionado actualmente. Si el modo afecta al comportamiento de la interacción del mouse, cambie también el puntero.

    

    En este ejemplo, el puntero se cambia para mostrar el modo de interacción del mouse.

  • En el caso de los botones de propiedad y las listas desplegables, muestre el control para reflejar el estado de los objetos seleccionados actualmente, si los hay. En la interacción, actualice el estado del control y aplique el cambio a los objetos seleccionados. Si no se selecciona nada, no haga nada.

• En el doble clic izquierdo, realice la misma acción que un solo clic izquierdo.

  • Excepción: En raras ocasiones, se puede usar un comando de barra de herramientas de forma más eficaz. En tales casos, use el doble clic para alternar el modo.

    

    En este ejemplo, al hacer doble clic en el comando Format painter, se introduce un modo en el que todos los clics posteriores aplican el formato. Los usuarios pueden dejar el modo haciendo clic con un solo clic a la izquierda.

• Al hacer clic con el botón derecho, haga clic con el botón derecho:

  • Para las barras de herramientas personalizables, muestra el menú contextual para personalizar la barra de herramientas. Muestra el menú del botón derecho al hacer clic con el ratón hacia abajo, no hacia arriba.
  • Para otras barras de herramientas, no haga nada.

Iconos

• Proporcione iconos para todos los controles de barra de herramientas, excepto las listas desplegables.

  

  Las listas desplegables no necesitan iconos, pero todos los demás controles de barra de herramientas sí.

  Excepción: Las barras de herramientas de estilo Windows 7 usan iconos solo para comandos cuyos iconos son conocidos; de lo contrario, usan etiquetas de texto sin iconos. Esto mejora la claridad de las etiquetas, pero requiere más espacio.

• Asegúrese de que los iconos de la barra de herramientas estén claramente visibles en el color de fondo de la barra de herramientas. Evalúe siempre los iconos de la barra de herramientas en contexto y en modo de contraste alto.

• Elija diseños de iconos que comuniquen claramente su propósito, especialmente para los comandos usados con más frecuencia. Las barras de herramientas bien diseñadas necesitan iconos que se explican por sí mismos, ya que los usuarios no pueden encontrar comandos de forma eficaz mediante su información sobre herramientas. Sin embargo, las barras de herramientas siguen funcionando bien si los iconos de algunos comandos usados con menos frecuencia no se explican por sí mismos.

• Elija iconos reconocibles y distintivos, especialmente para los comandos usados con más frecuencia. Asegúrese de que los iconos tienen formas y colores distintivos. Esto ayuda a los usuarios a encontrar rápidamente los comandos incluso si no recuerdan el símbolo del icono.

• Asegúrese de que los iconos de la barra de herramientas se ajustan a las directrices de iconos de estilo Aero.

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

Menú estándar y botones de división

Si usa botones de menú y botones de división en una barra de herramientas, intente usar las siguientes estructuras de menú estándar y sus comandos pertinentes siempre que sea posible. A diferencia de las barras de menú, los comandos de la barra de herramientas no toman las teclas de acceso.

Barras de herramientas principales

Estos comandos reflejan los comandos que se encuentran en las barras de menú estándar, por lo que solo deben usarse para las barras de herramientas principales. En esta lista se muestran las etiquetas de botón (y el tipo) con su orden y separadores, teclas de método abreviado y puntos suspensivos. Tenga en cuenta que el comando para mostrar y ocultar la barra de menús está en el menú Ver.

Archivo NewCtrl+N
Abierto... Ctrl+O
Cerrar
<separator>
SaveCtrl+S
Guardar como...
<separator>
Enviar a
<separator>
Impresión... Ctrl+P
Vista previa de impresión
Configurar página
<separator>
ExitAlt+F4(el método abreviado no suele proporcionarse)

Editar (botón de menú) DeshacerCtrl+Z
RehacerCtrl+Y
<separator>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
<separator>
Seleccionar allCtrl+A
<separator>
DeleteDel(el método abreviado no suele proporcionarse)
Cambiar nombre...
<separator>
Encontrar... Ctrl+F
Buscar nextF3(comando normalmente no especificado)
Reemplazar... Ctrl+H
Vete a... Ctrl+G

Imprimir(botón de división) Impresión... Ctrl+P
Vista previa de impresión
Configurar página

Ver(botón de menú) Barra de menús (comprobar si está visible)
Panel De detalles (comprobar si está visible)
Panel de vista previa (comprobar si está visible)
Barra de estado (comprobar si está visible)

Zoom
Zoom inCtrl++
AlejarCtrl+-

Tamaño de texto(la configuración seleccionada tiene viñeta)

Mayor
Mayor
Media
Más pequeño
Menor

Pantalla completaF11
RefreshF5

Herramientas(botón de menú) ...

Opciones Help(split button, use el icono de Ayuda) <program name> helpF1

Acerca de <program name>

Barras de herramientas complementarias

Estos comandos complementan las barras de menú estándar. En esta lista se muestran las etiquetas de botón (y el tipo) con su orden y separadores, teclas de método abreviado y puntos suspensivos. Tenga en cuenta que el comando para mostrar y ocultar la barra de menús está en el menú Herramientas.

Los nombres de categoría de la barra de herramientas complementarios difieren de los nombres de categoría de menú estándar, ya que deben abarcarse más. Por ejemplo, la categoría Organizar se usa en lugar de Editar porque contiene comandos que no están relacionados con la edición. Para mantener la coherencia entre las barras de menú y las barras de herramientas, use los nombres de categoría de menú estándar si no lo hace.

Incorrecto:

En este ejemplo, la barra de herramientas debe usar Editar en lugar de Organizar para la coherencia porque tiene los comandos de menú Edición estándar.

Ventanas de paleta

• Las ventanas de paleta usan barras de título más cortas para minimizar su espacio en pantalla. Coloque un botón Cerrar en la barra de título.

• Establezca el texto de la barra de título en el comando que muestra la ventana de paleta.

• Use mayúsculas de estilo de oración sin terminar la puntuación.

• Proporcione un menú contextual para los comandos de administración de ventanas. Muestra este menú contextual cuando los usuarios hacen clic con el botón derecho en la barra de título.

  

  En este ejemplo, los usuarios pueden hacer clic con el botón derecho en la barra de título para mostrar el menú contextual.

• Cuando sea posible y útil, haga que las ventanas de paleta sean redimensionables. Indique que la ventana se puede cambiar de tamaño mediante punteros de cambio de tamaño cuando se supera el marco de la ventana.

• Cuando se vuelve a reproducir una ventana de paleta, mostrándola con el mismo estado que el último acceso. Al cerrar, guarde el tamaño y la ubicación de la ventana. Al volver a reproducir, restaure el tamaño y la ubicación de la ventana guardadas. Además, considere la posibilidad de hacer que estos atributos sean persistentes entre instancias de programa por usuario.

Personalización

• Proporcione personalización para las barras de herramientas que constan de dos o más filas. Solo el estilo de iconos sin etiquetar necesita personalización. Las barras de herramientas sencillas con pocos comandos no necesitan personalización.

• Proporcione una buena configuración predeterminada. Los usuarios no deben tener que personalizar sus barras de herramientas para escenarios comunes. No dependa de que los usuarios personalizan su forma de salir de una configuración inicial incorrecta. Supongamos que la mayoría de los usuarios no personalizarán sus barras de herramientas.

• Proporcione un menú contextual con los siguientes comandos:

  • Lista de casillas para mostrar las barras de herramientas disponibles
  • Barras de herramientas de bloqueo y desbloqueo
  • Personalizar...

• Bloquear barras de herramientas personalizables de forma predeterminada para evitar cambios accidentales.

• Para el comando Personalizar, muestre un cuadro de diálogo de opciones que proporciona la capacidad de elegir qué barras de herramientas se muestran y los comandos de cada barra de herramientas.

  

  En este ejemplo, Visual Studio proporciona un cuadro de diálogo de opciones para personalizar sus barras de herramientas.

• Proporcione un comando Restablecer para volver a la configuración de la barra de herramientas original en el cuadro de diálogo Personalizar opciones.

• Proporcione la capacidad de personalizar las barras de herramientas mediante arrastrar y colocar de las siguientes maneras:

  • Establecer el orden y las posiciones de la barra de herramientas.
  • Establezca las longitudes de la barra de herramientas, mostrando las barras de herramientas demasiado pequeñas para mostrar su contenido con un botón de contenido de desbordamiento.
  • Si se admite, desacoplar barras de herramientas para convertirse en ventanas de paleta y viceversa.

  Cuando se muestra el cuadro de diálogo Personalizar opciones:

  • Establezca el contenido de la barra de herramientas.
  • Establezca el orden del contenido de la barra de herramientas.

  Al hacerlo, los usuarios pueden realizar cambios de forma más directa y eficaz.

• Guarde todas las personalizaciones de la barra de herramientas por usuario.

Uso de puntos suspensivos

Aunque los comandos de la barra de herramientas se usan para acciones inmediatas, a veces se necesita más información para realizar la acción. Use un botón de puntos suspensivos para indicar que un comando requiere más información antes de que pueda surtir efecto. Coloque los puntos suspensivos al final de la información sobre herramientas y la etiqueta, si hay alguno.

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

Sin embargo, si un comando no puede surtir efecto inmediatamente, no se requiere ningún botón de puntos suspensivos. Por lo tanto, por ejemplo, la configuración de uso compartido no tiene puntos suspensivos aunque necesite información adicional, ya que el comando no puede surtir efecto inmediatamente.

El comando Configuración de uso compartido no tiene puntos suspensivos porque no puede surtir efecto inmediatamente.

Dado que las barras de herramientas se muestran constantemente y el espacio está en un nivel premium, los puntos suspensivos se deben usar con poca frecuencia.

Nota

Para los menús mostrados por una barra de herramientas, aplique las directrices de puntos suspensivos de menú.

Ajuste de tamaño y espaciado recomendados

Ajuste de tamaño y espaciado recomendados para las barras de herramientas estándar.

Etiquetas

General

• Use mayúsculas de estilo de frase.
  • 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.

Botones de icono sin etiquetar

• Use una información sobre herramientas para etiquetar el comando. Para el texto de información sobre herramientas, use cuál sería la etiqueta si se etiquetara el botón, pero incluya la tecla de método abreviado si hay una.

  

  Ejemplo de información sobre herramientas de un botón de icono.

Botones de iconos con etiqueta

• Use una etiqueta concisa. Use una sola palabra si es posible, cuatro palabras como máximo.

• Coloque la etiqueta a la derecha del icono.

• Use una información sobre información para describir el comando. Dado que los botones están etiquetados, usar una información sobre herramientas en lugar de una información sobre información sería redundante.

  

  Ejemplo de información sobre el botón de icono etiquetado.

Listas desplegables

• Si la lista siempre tiene un valor, use el valor actual como etiqueta.

  

  En este ejemplo, el nombre de fuente seleccionado actualmente actúa como etiqueta.

• Si una lista desplegable editable no tiene un valor, use un símbolo del sistema.

  

  En este ejemplo, se usa un mensaje para la etiqueta de la lista desplegable.

Botones de menú y botones de división

• Prefiere los nombres de botón de menú basados en verbos. Sin embargo, omita el verbo si es Create, Show, View o Manage. Por ejemplo, los botones de menú Herramientas y página no tienen verbos.
• Use una sola palabra específica que describa claramente y con precisión el contenido del menú. Aunque los nombres no tienen que ser tan generales que describen todo en el menú, deben ser lo suficientemente predecibles como para que los usuarios no se sorprenda por lo que encuentran en el menú.
• Aunque no es necesario, proporcione descripciones de información sobre información si son útiles.

Elementos de menú

• Use nombres de elementos de menú que comiencen con una frase de verbo, sustantivo o sustantivo.
• Prefiere nombres de menú basados en verbos. Sin embargo, omita el verbo si es Create, Show, View o Manage. Por ejemplo, los siguientes comandos no usan verbos:
  • Acerca de
  • Avanzado
  • Pantalla completa
  • Nuevo
  • Opciones
  • Propiedades
• Use verbos específicos. Evite verbos genéricos y no útiles, como Cambiar y administrar.
• Use nombres singulares para los comandos que se aplican a un solo objeto; de lo contrario, use nombres plurales.
• Para los pares de comandos complementarios, elija nombres claramente complementarios. Ejemplos: Agregar, Quitar; Mostrar, ocultar; Insertar, eliminar.
• Elija nombres de elementos de menú en función de los objetivos y las tareas del usuario, no en la tecnología.
• Use los siguientes nombres de elemento de menú para el propósito indicado:
  • Opciones: Para mostrar las opciones del programa.
  • Personalizar: Para mostrar las opciones del programa relacionadas específicamente con la configuración mecánica de la interfaz de usuario.
  • Personalizar: Para mostrar un resumen de la configuración de personalización que se usa habitualmente.
  • Preferencias: No uses. En su lugar, use Opciones.
  • Propiedades: Para mostrar la ventana de propiedades de un objeto.
  • Configuración: No use como etiqueta de menú. En su lugar, use Opciones.
• Los elementos de menú que muestran submenús nunca tienen puntos suspensivos en su etiqueta. La flecha del submenú indica que se requiere otra selección.

Documentación

Al hacer referencia a las barras de herramientas:

• Si solo hay una barra de herramientas, haga referencia a ella como barra de herramientas.
• Si hay varias barras de herramientas, haga referencia a ellas por su nombre, seguida de la palabra barra de herramientas. Consulte la barra de herramientas principal que está activada de forma predeterminada y contiene botones para tareas básicas, como abrir e imprimir un archivo, como la barra de herramientas estándar.
• La barra de herramientas es una sola palabra sin clasificar. (Por el contrario, la barra de menús es de dos palabras).
• Consulte los botones de la barra de herramientas por sus etiquetas de información sobre herramientas. Use el texto exacto de la etiqueta, incluida su mayúscula, pero no incluya ningún botón de puntos suspensivos.
• Consulte los botones de menú de la barra de herramientas por sus etiquetas y el menú de palabras. Use el texto exacto de la etiqueta, incluida su mayúscula.
• Consulte controles de barra de herramientas generalmente como botones de la barra de herramientas.
• Para describir la interacción del usuario, use el clic para los botones de la barra de herramientas y las listas desplegables de solo lectura y escriba para las listas desplegables editables. No use choose, select o pick.
• No use botones de menú en cascada, desplegables, desplegables o emergentes para describir los botones de menú, excepto en la documentación de programación.
• Haga referencia a elementos no disponibles como no disponibles, no como atenuados, deshabilitados o atenuados. Use deshabilitado en la documentación de programación.
• Cuando sea posible, dé formato a las etiquetas con texto en negrita. De lo contrario, coloque las etiquetas entre comillas solo si es necesario para evitar confusiones.

Ejemplos:

• En el menú Página de la barra de herramientas, haga clic en Enviar página por correo electrónico.
• En el cuadro Fuentes de la barra de herramientas, escriba "Segoe UI".
• En la barra de herramientas Formato , seleccione Mostrar y, a continuación, haga clic en Comentarios.