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), inmediato (en lugar de requerir una 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 simplemente 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 barra de herramientas, consulte Patrones de uso en este artículo.

Nota

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

¿Es esta la interfaz de usuario adecuada?

Para decidirlo, tenga en cuenta estas preguntas:

• ¿La ventana es 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 eficazmente 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 una entrada adicional.
• ¿La mayoría de los comandos se pueden presentar directamente? 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 reduce 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? Normalmente, los botones de la barra de herramientas se representan 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 de división, esta barra de herramientas es básicamente una barra de menús. Aplique los menús de barra de herramientas patrón en las directrices de 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 proporciona acceso rápido y cómodo a los comandos usados con frecuencia. Una barra de herramientas no intenta entrenar a los usuarios simplemente para que sean productivos. Una vez que los usuarios aprendan a acceder a un comando en una barra de herramientas, rara vez siguen accediendo al comando desde la barra de menús. Por estos motivos, 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 maneras siguientes:

• 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 normalmente están ocultos 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 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.

  de etiqueta de envío o recepción

  Los botones de barra de herramientas etiquetados toman al menos tres veces tanto espacio como los sin etiquetar.

• Evidente. Las barras de herramientas bien diseñadas necesitan iconos que principalmente se explican por sí mismos, 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 más usados 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 dependen de las etiquetas de comandos para realizar selecciones.

  

  Para los comandos de la barra de herramientas, la ubicación, la forma y el color distintivos 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 solo 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 bien junto con las barras de menú: las buenas barras de herramientas proporcionan eficiencia y las barras de menús buenas proporcionan una completa disponibilidad. Tener barras de menús 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. En el caso de 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 El Explorador de Windows, Windows Internet Explorer, el Reproductor de Windows Media y la Galería de fotos de Windows.

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

• 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. Vea menú Estándar y botones de 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 desorden, los comandos usados con menos frecuencia se pueden mover a 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 eliminada o oculta. Y dado que 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 completamente al tomar decisiones de diseño. (Si oculta la barra de menús de forma predeterminada, no supongamos 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 trabajar sin una barra de menús suele implicar algunos riesgos. Pero para la eficiencia, no pongas demasiado en peligro. Si ocultar la barra de menús da como resultado una barra de herramientas ineficaz, no oculte la barra de menús.

Accesibilidad del 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ú 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 del contenido completo de la ventana. Dado que las barras de herramientas son la última en orden de tabulación, pueden tardar un esfuerzo significativo en activarse en una página ocupada (a menos que los usuarios sepan usar Mayús+Tab para desplazarse 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 eliminada.	las barras de herramientas principales deben equilibrar la necesidad de eficiencia con una amplitud, por lo que funcionan mejor para programas sencillos. captura de pantalla de 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 barra de herramientas una barra de menús implementada como barra de herramientas.	Los menús de 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. Barra de herramientas personalizable de Microsoft Visual Studio.
ventanas paleta un cuadro de diálogo modela que presenta una matriz de comandos.	las ventanas de paleta son barras de herramientas desacopadas. Ventanas de paleta de Pintura de Windows.

Las barras de herramientas tienen estos estilos:

Estilo	Ejemplo
iconos sin etiquetar una o más 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 sin etiquetar grandes una sola fila de botones de icono sin etiquetar grandes.	use este estilo para utilidades sencillas que tienen iconos fácilmente reconocibles y normalmente se ejecutan en ventanas pequeñas. Barras de herramientas grandes de iconos sin etiquetar de Windows Live Messenger y la herramienta de recorte de Windows.
iconos etiquetados una sola fila de iconos con etiqueta pequeña.	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 desde el 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 gran barra de herramientas parcial de Windows Defender.

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

Uso	Ejemplo
botones de icono 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 modo Al hacer clic en un botón de modo, se entra en el modo seleccionado.	captura de pantalla Ejemplos de botones de modo de Pintura de Windows.
botones 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.	de texto seleccionado Ejemplos de botones de propiedad de Microsoft Word.
botones de icono etiquetado 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 lo suficientemente explicativo. también se usan en las barras de herramientas que tienen tan pocos botones que cada botón puede tener una etiqueta de texto. Barra de herramientas con sus botones más usados con la etiqueta .
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 Dividir 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 más 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) que se usa 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.

Directrices

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 barra de herramientas anterior para obtener instrucciones sobre cómo elegir. Evite usar una configuración de barra de herramientas que tome demasiado espacio del área de trabajo del programa.

• Colocar barras de herramientas justo encima del área de contenido, debajo de la barra de menús y 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 usados con menos frecuencia.
  • Usar solo una barra de herramientas parcial en lugar del ancho completo de la ventana.
  • Consolidación de comandos relacionados con un botón de menú o un botón de división.
  • Usar un de comillas 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 menos usados con 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 sea útil más de dos filas, haga que las barras de herramientas sean personalizables. A partir de más de dos filas, los usuarios pueden sobrecargar a los usuarios y tomar demasiado espacio del á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.

• Deshabilitar botones de barra de herramientas individuales 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. Esto es necesario 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.

  captura de pantalla de

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

• Mostrar botones de 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: barras de herramientas de estilo windows 7 a la izquierda alinean los comandos específicos del programa, pero alinean a la derecha los comandos estándar y conocidos, como Opciones, Vista y Ayuda.

• No cambie las etiquetas de botón de la barra de herramientas dinámicamente. 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

• Preferir los comandos usados con más frecuencia.

  • Para 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.
    • Los comandos a los que se accede normalmente a través de menús contextuales.
    • Comandos estándar y 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.

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

  • Botón de icono. Directo y toma un espacio mínimo.
  • Botón de icono etiquetado. 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. Para los comandos que pueden ser inmediatos o tienen una entrada adicional para mayor flexibilidad:

  • Para las barras de herramientas principales, use las versiones flexibles de comandos (como 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...).

• Proporcionar 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 la mejor versión etiqueta las más importantes.

• No coloque comandos en menús de 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

• Organizar los comandos dentro de una barra de herramientas en grupos relacionados.

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

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

  

  

  Ejemplos de barras de herramientas agrupadas de Correo de Windows.

• 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 ejemplo mejor, 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 menos usados con 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 poner en peligro.

• Oculte 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 completamente, 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, muestre el botón de prestació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 visualización.

• A la izquierda, haga clic con un solo clic:

  • En el caso de los botones de comando, interactúe con el control como normal.

  • En el caso de 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, se cambia el puntero 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 doble clic para alternar el modo.

    

    En este ejemplo, al hacer doble clic en el comando Format painter ,se escribe 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.

• En el botón derecho, haga clic con el botón derecho:

  • Para las barras de herramientas personalizables, muestre el menú contextual para personalizar la barra de herramientas. Muestra el menú en el clic derecho sobre el mouse hacia abajo, no hacia arriba.
  • Para otras barras de herramientas, no haga nada.

Iconos

• Proporcionar 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: barras de herramientas de estilo windows 7 usan iconos solo para los 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 porque los usuarios no pueden encontrar comandos de forma eficaz con sus informaciones 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 claves 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 se deben usar para las barras de herramientas principales. En esta lista se muestran las etiquetas de botón (y el tipo) con sus separadores 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
Abrir... Ctrl+O
Cerrar
<separador de>
SaveCtrl+S
Guardar como...
<separador de>
Enviar a
<separador de>
Impresión... Ctrl+P
Vista previa de impresión
Configuración de página
<separador de>
ExitAlt+F4(acceso directo normalmente no se da)

botón Editar(menú) DeshacerCtrl+Z
RedoCtrl+Y
<separador de>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
<separador de>
Seleccionar allCtrl+A
<separador de>
DeleteDel(método abreviado normalmente no se da)
Rebautizar...
<separador de>
Encontrar... Ctrl+F
Buscar nextF3(comando normalmente no especificado)
Reemplazar... Ctrl+H
Vete a... Ctrl+G

imprimir (botón de botón de botón de botón de botón... Ctrl+P
Vista previa de impresión
Configuración de 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ñetas)

Máximo
Mayor
Medio
Menor
Mínimo

Pantalla completaF11
RefreshF5

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

Opciones Ayuda(botón de división, use el icono 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 sus separadores 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 porque necesitan estar más abarcando. Por ejemplo, la categoría Organizar se usa en lugar de Editar porque contiene comandos que no están relacionados con la edición. Mantener la coherencia entre barras de menús y 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ú Editar estándar.

Ventanas de paleta

• Las ventanas de paleta usan barras de título más cortas para minimizar su espacio de 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.

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

  de menú contextual

  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 se vuelvan a cambiar de tamaño. Indique que la ventana se puede cambiar de tamaño mediante punteros de cambio de tamaño cuando se encuentra sobre 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 que estos atributos sean persistentes en las 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 bloquear o desbloquear
  • 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 Reset para volver a la configuración de la barra de herramientas original en el cuadro de diálogo Personalizar opciones.

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

  • Establezca el orden y las posiciones de la barra de herramientas.
  • Establezca longitudes de 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, desacopla las 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.

• Guardar 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 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 uno.

En este ejemplo, imprimir... 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, puntos suspensivos se deben usar con poca frecuencia.

Nota

Para los menús mostrados por una barra de herramientas, aplique las instrucciones 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

• Usar mayúsculas de estilo de oración.
  • Excepción: Para 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 la información sobre herramientas, use lo que 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 del botón de icono.

Botones de icono etiquetados

• 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.

  

  Un ejemplo de información sobre el botón con etiqueta.

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 mensaje de .

  captura de pantalla de

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

Botones de menú y botones de división

• Prefiere nombres de botón de menú basados en verbos. Sin embargo, omita el verbo si es Crear, Mostrar, Ver o Administrar. Por ejemplo, Herramientas y botones de menú 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 para que los usuarios no se sorprenda de lo que encuentran en el menú.
• Aunque no es necesario, proporcione descripciones de información sobre información si son útiles.

Elementos de menú

• Usar nombres de elementos de menú que comienzan con una frase de verbo, sustantivo o sustantivo.
• Prefiere nombres de menú basados en verbos. Sin embargo, omita el verbo si es Crear, Mostrar, Ver o Administrar. 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 único objeto, de lo contrario, use nombres plurales.
• Para los pares de comandos complementarios, elija nombres claramente complementarios. Ejemplos: Agregar, Quitar; Mostrar, Ocultar; Insertar, Eliminar.
• Elegir nombres de elementos de menú en función de los objetivos y tareas del usuario, no en la tecnología.
• Use los siguientes nombres de elementos de menú para el propósito indicado:
  • Opciones: Para mostrar las opciones del programa.
  • Personalizar: Para mostrar las opciones del programa específicamente relacionadas con la configuración mecánica de la interfaz de usuario.
  • Personalizar: Para mostrar un resumen de la configuración de de personalización que se usa habitualmente.
  • Preferencias: No usar. En su lugar, use Opciones.
  • Propiedades: Para mostrar la ventana de propiedades de un objeto.
  • Configuración: No usar 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 barras de herramientas:

• Si solo hay una barra de herramientas, haga referencia a ella como la 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 capitalizar. (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 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 los 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.
• Consulte 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 de la barra de herramientas, haga clic en página Enviar por correo electrónico.
• En el cuadro Fuentes de la barra de herramientas, escriba "Segoe UI".
• En la barra de herramientas Formato de, seleccione Mostrary, a continuación, haga clic en Comentarios.