Barras de herramientas - Toolbars

Las barras de herramientas son una forma de agrupar comandos para un acceso eficiente.

Algunas barras de herramientas típicas.

Use barras de herramientas además de o en lugar de barras de menús. Las barras de herramientas pueden ser más eficientes que las barras de menú porque son directas (siempre se muestran en lugar de mostrarse al hacer clic con el mouse), son inmediatas (en lugar de requerir una entrada adicional) y contienen los comandos más utilizados (en lugar de una lista completa). A diferencia de las barras de menú, las barras de herramientas no tienen que ser integrales o autoexplicativas, simplemente rápidas, convenientes y eficientes.

Algunas barras de herramientas son personalizables, lo que permite a los usuarios agregar o eliminar 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 como resultado 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 pautas relacionadas con los menús , botones de comando e íconos se presentan en artículos separados.

 

¿Es esta la interfaz de usuario correcta?

Para decidir, considera estas preguntas:

• ¿Es la ventana una ventana primaria? Las barras de herramientas funcionan bien para las ventanas primarias, pero generalmente son abrumadoras para las ventanas secundarias. Para ventanas secundarias, use los botones de comando , los botones de menú y los enlaces .
• ¿Hay un pequeño número de comandos de uso frecuente? Las barras de herramientas no pueden manejar tantos comandos como barras de menú, por lo que funcionan mejor como una forma de acceder de manera eficiente a un pequeño número de comandos de uso frecuente.
• ¿Son inmediatos la mayoría de los comandos? Es decir, ¿son en su mayoría comandos que no requieren entrada adicional? Para ser eficientes, las barras de herramientas deben tener una sensación directa e inmediata. De lo contrario, las barras de menú son más adecuadas para los comandos que requieren una entrada adicional.
• ¿Se pueden presentar la mayoría de los comandos directamente? Es decir, ¿los usuarios interactúan con ellos con un solo clic? Si bien algunos comandos se pueden presentar utilizando los botones del menú, la mayoría de los comandos de esta manera socava la eficiencia de la barra de herramientas, lo que hace que la barra de menús sea una mejor opción.
• ¿Están los comandos bien representados por iconos? Los botones de la barra de herramientas generalmente están representados por iconos en lugar de etiquetas de texto (aunque algunos botones de la barra de herramientas usan ambos), mientras que los comandos de menú están representados por su texto. Si los íconos de comando no son de alta calidad y no se explican por sí mismos, una barra de menú puede ser una mejor opción.

Si su 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 los botones de menú y los botones divididos , esta barra de herramientas es esencialmente una barra de menús. En su lugar, aplique el patrón de menús de la barra de herramientas en las guías 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 brinda acceso rápido y conveniente a los comandos de uso frecuente. Una barra de herramientas no intenta entrenar a los usuarios, solo los hace productivos. Una vez que los usuarios aprenden cómo acceder a un comando en una barra de herramientas, rara vez continúan accediendo al comando desde la barra de menú. Por estas razones, la barra de menús de un programa y su barra de herramientas no necesitan corresponder directamente.

 

Barras de herramientas vs. barras de menú

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

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

• Inmediación. Al hacer clic en un comando de la barra de herramientas surte efecto inmediatamente, mientras que un comando de menú puede requerir una entrada adicional. Por ejemplo, un comando Imprimir en una barra de menú primero muestra el cuadro de diálogo Imprimir, mientras que el botón Imprimir de la barra de herramientas imprime inmediatamente una copia única de un documento en la impresora predeterminada.

  

  En este ejemplo, al hacer clic en el botón Imprimir de la barra de herramientas se imprime inmediatamente una copia única 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ú 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 sus comandos y ese espacio siempre se utiliza, incluso si los comandos no lo son. En consecuencia, las barras de herramientas deben utilizar su espacio de manera eficiente. 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 empacar muchos comandos en un espacio pequeño, las barras de herramientas usualmente usan 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). Si bien los botones de la barra de herramientas pueden tener etiquetas de texto estándar, estos usan mucho más espacio.

  

  Los botones etiquetados de la barra de herramientas ocupan por lo menos tres veces más espacio que los no etiquetados.

• Autoexplicativo. Las barras de herramientas bien diseñadas necesitan iconos que en su mayoría se explican por sí mismos porque los usuarios no pueden encontrar comandos de manera eficiente con solo usar información sobre herramientas. Sin embargo, las barras de herramientas todavía funcionan bien si algunos comandos de uso menos frecuente no se explican por sí mismos.

  

  En este ejemplo, los iconos más utilizados son autoexplicativos.

• Reconocible y distinguible. Para los comandos de uso frecuente, los usuarios recuerdan los atributos de los botones de la barra de herramientas como ubicación, forma y color. Con barras de herramientas bien diseñadas, los usuarios pueden encontrar los comandos rápidamente incluso si no recuerdan el símbolo del icono exacto. Por el contrario, los usuarios recuerdan las ubicaciones de comando de la barra de menú de uso frecuente, pero confían en las etiquetas de comando para hacer 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 distinguibles.

  

  Para los comandos de la barra de menú, los usuarios dependen en última instancia de sus etiquetas.

 

Eficiencia

Dadas sus características, las barras de herramientas deben diseñarse principalmente para la eficiencia. Una barra de herramientas ineficiente simplemente no tiene ningún sentido.

Si solo haces una cosa ...

Asegúrese de que sus barras de herramientas están diseñadas principalmente para la eficiencia. Enfoque las barras de herramientas en los comandos que se utilizan con frecuencia, de forma inmediata, directa y reconocible rápidamente.

 

Ocultar barras de menú

En general, las barras de herramientas funcionan muy bien junto con las barras de menús: las barras de herramientas buenas proporcionan eficiencia y las barras de menús buenas proporcionan una comprensión completa. Tener barras de menú y barras de herramientas permite a cada uno enfocarse en sus puntos fuertes sin compromiso.

Sorprendentemente, este modelo se descompone con programas simples. Para los programas con solo unos pocos comandos, tener tanto una barra de menús como una barra de herramientas no tiene sentido porque la barra de menús termina siendo una versión redundante e ineficiente de la barra de herramientas.

Para eliminar esta redundancia, muchos programas simples en Windows Vista se centran en proporcionar comandos únicamente a través de la barra de herramientas y en ocultar la barra de menús de forma predeterminada. Dichos programas incluyen Windows Explorer, Windows Internet Explorer, Windows Media Player y Windows Photo Gallery.

Esto no es un cambio pequeño. La eliminación de la barra de menús cambia fundamentalmente la naturaleza de las barras de herramientas porque dichas barras de herramientas deben ser integrales y cambiar de las siguientes maneras:

• Frecuencia. La eliminación de 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.

• Inmediación. La eliminación de la barra de menús hace que la barra de herramientas sea el único punto de acceso visible para los comandos, y requiere que la barra de herramientas tenga las versiones completamente funcionales. Por ejemplo, si no hay una barra de menú, 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 compromiso excelente en este caso. Consulte el menú Estándar y los botones de división para el botón de impresión de impresión estándar).

  

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

• Franqueza. Para ahorrar espacio y evitar el desorden, los comandos que se usan con menos frecuencia se pueden mover a los botones del menú, haciéndolos menos directos.

Las barras de herramientas utilizadas para complementar una barra de menús están diseñadas de manera diferente a las barras de herramientas diseñadas para usarse con una barra de menús oculta o eliminada. Y como no puede asumir que los usuarios mostrarán una barra de menú oculta para ejecutar un solo comando, ocultar una barra de menú debe tratarse de la misma manera que eliminarlo por completo al tomar decisiones de diseño. (Si oculta la barra de menú de forma predeterminada, no asuma que los usuarios pensarán en mostrar la barra de menú para encontrar un comando o incluso averiguar cómo mostrarla).

Diseñar una barra de herramientas para que funcione sin una barra de menús a menudo implica algunos compromisos. Pero para la eficiencia, no se comprometa demasiado. Si ocultar la barra de menús da como resultado una barra de herramientas ineficiente, ¡no oculte la barra de menús!

 

Accesibilidad del teclado

Desde el teclado, acceder a las barras de herramientas es bastante diferente de acceder a las barras de menú. Las barras de menú reciben un enfoque de entrada cuando los usuarios presionan la tecla Alt y pierden el enfoque de entrada con la tecla Esc. Una vez que la barra de menú tiene un enfoque de entrada, se navega independientemente del resto de la ventana, manejando todas las teclas de flecha, Inicio, Fin y Tabulador. Por el contrario, las barras de herramientas reciben un enfoque de entrada cuando los usuarios presionan la tecla Tab a través de todo el contenido de la ventana. Debido a que las barras de herramientas son las últimas en orden de tabulación, pueden requerir un esfuerzo significativo para activarse en una página ocupada (a menos que los usuarios sepan usar Mayús + Tabulación para retroceder).

La accesibilidad presenta un dilema aquí: si bien 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 si la barra de menús se elimina u oculta.

Por razones de accesibilidad, entonces, prefiera retener la barra de menú en lugar de eliminarla completamente en favor de una barra de herramientas. Si debe elegir entre eliminar la barra de menú y simplemente esconderla, prefiera ocultarla.

 

Patrones de uso

Las barras de herramientas tienen varios patrones de uso:

Barras de herramientas primarias una barra de herramientas diseñada para funcionar sin una barra de menús, ya sea oculta o eliminada.	las barras de herramientas primarias deben equilibrar la necesidad de eficiencia con la amplitud, de modo que funcionen mejor para programas simples. Una barra de herramientas primaria del Explorador de Windows.
Barras de herramientas suplementarias Una barra de herramientas diseñada para trabajar con una barra de menú.	Las barras de herramientas complementarias pueden centrarse en la eficiencia sin compromiso. Una barra de herramientas complementaria de Windows Movie Maker.
Menús de la barra de herramientas Una barra de menú implementada como una barra de herramientas.	los menús de la barra de herramientas son barras de herramientas que consisten principalmente en comandos en los botones de menú y botones divididos, con solo algunos comandos directos, si los hay. Un menú de la barra de herramientas en la Galería fotográfica de Windows.
Barras de herramientas personalizables Una barra de herramientas que puede ser personalizada por los usuarios.	Las barras de herramientas personalizables permiten a los usuarios agregar o eliminar 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 sin modelo que presenta una serie de comandos.	Las ventanas de la paleta son barras de herramientas desacopladas. Paleta de ventanas de Windows Paint.

Las barras de herramientas tienen estos estilos:

Iconos sin etiqueta Una o más filas de pequeños botones de iconos sin etiqueta.	use este estilo si hay demasiados botones para etiquetar o el programa se usa con frecuencia. Con este estilo, los programas con funcionalidades complejas 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. Una barra de herramientas de iconos sin etiqueta de WordPad.
Iconos grandes sin etiqueta una sola fila de grandes botones de icono sin etiqueta.	use este estilo para utilidades simples que tienen iconos fácilmente reconocibles y que generalmente se ejecutan en ventanas pequeñas. Las barras de herramientas de iconos grandes sin etiqueta de Windows Live Messenger y la Herramienta de recorte de Windows.
Iconos etiquetados una sola fila de pequeños iconos etiquetados.	use este estilo si hay pocos comandos o el programa no se usa con frecuencia. Este estilo siempre tiene una sola fila. Una barra de herramientas de iconos etiquetados desde el Explorador de Windows.
Barras de herramientas parciales una fila parcial de iconos pequeños que se usa 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 utilizados para ahorrar espacio cuando no se necesita una barra de herramientas completa.	use este estilo para utilidades simples 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.

Finalmente, los controles de la barra de herramientas tienen varios patrones de uso:

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 iconos de Windows Fax y Scan.
Botones de icono de modo Al hacer clic en un botón de modo ingresa al 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 propiedades de Microsoft Word.
Botones de icono etiquetados un botón de comando o un botón de propiedad etiquetado con un icono y una etiqueta de texto.	estos botones se utilizan para los botones de la barra de herramientas de uso frecuente cuyo icono no se explica por sí mismo. 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 de uso más frecuente etiquetados.
Botones de menú un botón de comando utilizado para presentar un pequeño conjunto de comandos relacionados.	un solo triángulo que apunta hacia abajo indica que hacer clic en el botón muestra un menú. Un botón de menú con un pequeño conjunto de comandos relacionados.
Botones divididos un botón de comando que se usa para consolidar las variaciones de un comando, especialmente cuando uno de los comandos se usa la mayor parte del tiempo.	un botón de división en su estado normal. como un botón de menú, un único triángulo que apunta hacia abajo indica que al hacer clic en la parte más a la derecha del botón se muestra un menú. un botón de división desplegado. en este ejemplo, se utiliza 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 el siguiente comando probablemente sea el mismo que el último comando. en este caso, la etiqueta se cambia al último comando, como con un selector de color: En este ejemplo, la etiqueta se cambia al último comando.
Listas desplegables una lista desplegable (editable o de solo lectura) utilizada para ver o cambiar una propiedad.	En este ejemplo, las listas desplegables se utilizan para ver y establecer atributos de fuente. Una lista desplegable en una barra de herramientas refleja el estado del objeto seleccionado actualmente, si lo hay. Cambiar la lista cambia el estado del objeto seleccionado.

 

Pautas

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 estilo de la barra de herramientas anterior para obtener orientación sobre cómo elegir. Evite utilizar una configuración de barra de herramientas que ocupe 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 la barra de direcciones, si están presentes.

• Si el espacio es limitado, ahorre espacio al:

  • Omitir las etiquetas de iconos conocidos y comandos menos utilizados.
  • Usando solo una barra de herramientas parcial en lugar del ancho completo de la ventana.
  • Consolidar comandos relacionados con un botón de menú o un botón de división.
  • Utilizando un chevron de desbordamiento para revelar comandos de uso menos frecuente.
  • Mostrar comandos solo cuando se aplican al contexto actual.

  

  La barra de herramientas de Windows Internet Explorer ahorra espacio al omitir etiquetas de iconos conocidos, usar una barra de herramientas parcial y usar un chevron de desbordamiento para los comandos de uso menos frecuente.

• Para el patrón de la barra de herramientas de los iconos sin etiqueta, use una configuración predeterminada con no más de dos filas de barras de herramientas. Si más de dos filas pueden ser útiles, personalice las barras de herramientas. Comenzar con más de dos filas puede abrumar a los usuarios y ocupar demasiado espacio en el área de trabajo del programa.

  Incorrecto:

  

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

• Deshabilite los botones individuales de la barra de herramientas que no se aplican al contexto actual, en lugar de eliminarlos. Al hacerlo, los contenidos de la barra de herramientas son estables y fáciles de encontrar.

• Deshabilite los botones individuales de la barra de herramientas si hacer clic en ellos daría como resultado directamente un error. Para ello es necesario mantener una sensación directa.

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

  

  En este ejemplo, la barra de herramientas de depuración se muestra solo cuando el programa se está ejecutando.

• Mostrar los botones de la barra de herramientas alineados a la izquierda. El icono de 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 se alinean a la izquierda con los comandos específicos del programa, pero a la derecha se alinean con los comandos estándar y conocidos, como Opciones, Ver y Ayuda.

• No cambie las etiquetas de los botones 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, el icono se cambia para indicar el comando predeterminado.

 

Controles y comandos

• Prefiere los comandos más utilizados.

  • Para las barras de herramientas principales, proporcione comandos completos. Las barras de herramientas primarias no tienen que ser tan completas como las barras de menú, pero tienen que proporcionar todos los comandos que no se pueden detectar fácilmente en otros lugares. Las barras de herramientas primarias no necesitan tener comandos para:
    • Comandos que están directamente en la propia interfaz de usuario.
    • Comandos normalmente accedidos a través de los menús de contexto.
    • Comandos estándar y conocidos como Cortar, Copiar y Pegar.
  • Para barras de herramientas suplementarias, proporcione los comandos que se usan con más frecuencia. Los comandos de la barra de menú son un superconjunto de los comandos de la barra de herramientas, por lo que no tiene que proporcionar todo. Concéntrese en un acceso de comando rápido y conveniente y omita el resto.

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

  • Botón del icono Directo y ocupa espacio mínimo.
  • Botón del icono etiquetado. Directo, pero ocupa más espacio.
  • Botón de división Directo para el comando más común, pero maneja las variaciones del comando.
  • Botón de menú. Indirecto, pero presenta muchos comandos.

• Prefiere comandos inmediatos. Para comandos que pueden ser inmediatos o que tienen entrada adicional para flexibilidad:

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

• Proporcione etiquetas para los comandos de uso frecuente, especialmente si sus íconos no son íconos conocidos.

  Aceptable:

  

  Mejor:

  

  La barra de herramientas de escaneo y fax de Windows tiene pocos comandos, por lo que las mejores versiones etiquetan los 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, Imprimir está directamente en la barra de herramientas, por lo que no es necesario que esté en el menú.

 

Organización y orden

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

• Coloque primero los grupos más utilizados. 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, mientras que los comandos utilizados con mayor frecuencia aparecen primero. Hacerlo es más eficiente, especialmente si hay desbordamiento.

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

  

  

  Ejemplos de barras de herramientas agrupadas de Windows Mail.

• Evite colocar comandos destructivos junto a los comandos de uso frecuente. Utilice orden o agrupación para obtener la separación. Además, considere no colocar comandos destructivos en la barra de herramientas, sino solo en la barra de menús o en los menús contextuales.

  Aceptable:

  

  Mejor:

  

  En el mejor ejemplo, el comando Eliminar está separado físicamente de Imprimir.

• Utilice el chevron de desbordamiento para indicar que no se pueden mostrar todos los comandos. Pero use el desbordamiento solo si no hay suficiente espacio para mostrar todos los comandos.

  Incorrecto:

  

  El chevron de desbordamiento indica que no se muestran todos los comandos, pero muchos de ellos podrían tener un mejor diseño.

• Asegúrese de que se pueda acceder directamente a los comandos que se utilizan con más frecuencia desde la barra de herramientas (es decir, no en el desbordamiento) en tamaños de ventana pequeños. Si es necesario, reordene los comandos, mueva los comandos que se usan con menos frecuencia a los botones del menú o los botones divididos, o incluso elimínelos completamente de la barra de herramientas. Si esto sigue siendo un problema, reconsidere su elección de estilo de barra de herramientas.

 

Ocultar barras de menú

En general, las barras de herramientas funcionan bien junto con las barras de menú, ya que tener ambas permite que cada una se centre en sus puntos fuertes sin compromiso.

• Oculta la barra de menús de forma predeterminada si el diseño de la barra de herramientas hace que la barra de menús sea redundante.
• Oculte la barra de menús en lugar de eliminarla por completo, porque las barras de menús son más accesibles para los usuarios de 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 en Herramientas (para barras de herramientas secundarias). Para obtener más información, consulte Menú estándar y botones de división .
• Muestre la barra de menú cuando los usuarios presionen la tecla Alt y establezca el enfoque de entrada en la primera categoría del menú.

Interacción

• Al pasar el mouse, muestra el valor 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 información.

  

  Este ejemplo muestra los distintos estados de visualización.

• A la izquierda con un solo clic:

  • Para los botones de comando, interactúe con el control como de costumbre.

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

    

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

  • Para los botones de propiedades y las listas desplegables, muestre el control para reflejar el estado de los objetos seleccionados actualmente, si corresponde. 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.

• A la izquierda, haga doble clic, realice la misma acción que con un solo clic izquierdo.

  • Excepción: en raras ocasiones, un comando de la barra de herramientas se puede utilizar de manera más eficiente de manera modal. En tales casos, haga doble clic para cambiar el modo.

    

    En este ejemplo, al hacer doble clic en el comando de pintor de formatos se ingresa en un modo donde todos los clics subsiguientes aplican el formato. Los usuarios pueden abandonar el modo haciendo un clic izquierdo.

• Al hacer clic derecho:

  • Para barras de herramientas personalizables, visualice el menú contextual para personalizar la barra de herramientas. Muestre el menú con el botón derecho del mouse hacia abajo, no con el mouse hacia arriba.
  • Para otras barras de herramientas, no hacer nada.

 

Iconos

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

  

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

  Excepción: las barras de herramientas de estilo de Windows 7 utilizan iconos solo para los comandos cuyos iconos son bien conocidos; De lo contrario, utilizan etiquetas de texto sin iconos. Si lo hace, mejora la claridad de las etiquetas, pero requiere más espacio.

• Asegúrese de que los iconos de la barra de herramientas sean claramente visibles contra el color de fondo de la barra de herramientas. Siempre evalúe los iconos de la barra de herramientas en contexto y en modo de alto contraste.

• Elija diseños de iconos que comuniquen claramente su propósito, especialmente para los comandos más utilizados. Las barras de herramientas bien diseñadas necesitan íconos que se explican por sí mismos porque los usuarios no pueden encontrar comandos de manera eficiente con sus sugerencias. Sin embargo, las barras de herramientas aún funcionan bien si los íconos de algunos comandos menos usados ​​no se explican por sí mismos.

• Elija iconos que sean reconocibles y distinguibles, especialmente para los comandos más utilizados. Asegúrate de que los iconos tengan formas y colores distintivos. Al hacerlo, los usuarios pueden encontrar los comandos rápidamente, incluso si no recuerdan el símbolo del icono.

• Asegúrese de que los iconos de la barra de herramientas se ajusten a las pautas de los iconos de estilo aero.

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

 

Menú estándar y botones divididos

Si está utilizando botones de menú y botones divididos en una barra de herramientas, intente usar las siguientes estructuras de menú estándar y sus comandos relevantes siempre que sea posible. A diferencia de las barras de menú, los comandos de la barra de herramientas no tienen teclas de acceso.

Barras de herramientas primarias

Estos comandos reflejan los comandos que se encuentran en las barras de menú estándar, por lo que deben usarse solo para las barras de herramientas principales. Esta lista muestra las etiquetas de los botones (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.

Expediente

NuevoCtrl + N Abrir ... Ctrl + O Cerrar SaveCtrl + S Guardar como ... Enviar a Imprimir ... Ctrl + P Vista preliminar Configuración de página ExitAlt + F4 (acceso directo por lo general no se da)

Editar (botón de menú)

UndoCtrl + Z RedoCtrl + Y CutCtrl + X CopyCtrl + C PasteCtrl + V Seleccionar todoCtrl + A DeleteDel (acceso directo por lo general no se da) Cambiar nombre ... Buscar ... Ctrl + F Buscar nextF3 (comando generalmente no dado) Reemplazar ... Ctrl + H Ir a ... Ctrl + G

Imprimir (botón de división)

Imprimir ... Ctrl + P Vista previa de impresión Configuración de página

Ver (botón de menú)

Barra de menú (marcar si está visible) Panel de detalles (verificar si está visible) Panel de vista previa (marcar si está visible) Barra de estado (marcar si está visible) Zoom Zoom inCtrl ++ Zoom outCtrl + - Tamaño del texto (la configuración seleccionada tiene viñeta)

Más grande Más grande Medio Más pequeño Más pequeño

Pantalla completaF11 ActualizarF5

Herramientas (botón de menú)

... Opciones

> Ayuda (botón dividir, usar el icono de Ayuda)

helpF1 Acerca de

Barras de herramientas suplementarias

Estos comandos complementan las barras de menú estándar. Esta lista muestra las etiquetas de los botones (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ú está en el menú Herramientas.

Los nombres de las categorías de la barra de herramientas complementaria difieren de los nombres de las categorías del menú estándar porque deben ser más amplios. 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 hacerlo no sería engañoso.

Incorrecto:

En este ejemplo, la barra de herramientas debería usar Editar en lugar de Organizar para mantener la coherencia, ya que tiene los comandos estándar del menú Editar.

 

Ventanas de paleta

• Las ventanas de la paleta utilizan barras de título más cortas para minimizar el espacio de la pantalla. Ponga 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 la paleta.

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

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

  

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

• Cuando sea posible y útil, haga que las ventanas de la paleta cambien de tamaño. Indique que la ventana es redimensionable, utilizando punteros de tamaño cuando se encuentra sobre el marco de la ventana.

• Cuando se vuelve a mostrar una ventana de paleta, visualícela utilizando el mismo estado que se accedió por última vez. Al cerrar, guarda el tamaño de la ventana y la ubicación. Al volver a mostrar, restaure el tamaño y la ubicación de la ventana guardada. Además, considere la posibilidad de hacer que estos atributos sean persistentes en todas las instancias del programa para cada usuario.

 

Personalización

• Proporcionar personalización para las barras de herramientas que consta de dos o más filas. Sólo el estilo de los iconos sin etiqueta necesita personalización. Las barras de herramientas simples con pocos comandos no necesitan personalización.

• Proporcionar una buena configuración por defecto. Los usuarios no deberían tener que personalizar sus barras de herramientas para escenarios comunes. No dependa de que los usuarios personalicen su salida de una mala configuración inicial. Supongamos que la mayoría de los usuarios no personalizarán sus barras de herramientas.

• Proporcionar un menú contextual con los siguientes comandos:

  • Una lista de casillas de verificación para mostrar las barras de herramientas disponibles
  • Bloquear / Desbloquear barras de herramientas
  • Personalizar ...

• Bloquee las barras de herramientas personalizables de forma predeterminada , para evitar cambios accidentales.

• Para el comando Personalizar, muestre un cuadro de diálogo de opciones que permita elegir qué barras de herramientas se muestran y los comandos en 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 original de la barra de herramientas en el cuadro de diálogo Personalizar opciones.

• Brinda la posibilidad de personalizar las barras de herramientas con la función de arrastrar y soltar de las siguientes maneras:

  • Establecer el orden de la barra de herramientas y las posiciones.
  • Establezca la longitud de la barra de herramientas, mostrando cualquier barra de herramientas que sea demasiado pequeña para mostrar su contenido con un chevron de desbordamiento.
  • Si es compatible, desacople las barras de herramientas para convertirlas en ventanas de paleta y viceversa.

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

  • Establecer el contenido de la barra de herramientas.
  • Establecer el orden de los contenidos de la barra de herramientas.

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

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

 

Usando elipsis

Mientras que los comandos de la barra de herramientas se utilizan 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 tener efecto. Ponga los puntos suspensivos al final de la información sobre herramientas y la etiqueta, si hay uno.

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

Sin embargo, si un comando no puede tener efecto inmediatamente, no se requieren puntos suspensivos. Por ejemplo, la configuración de compartir no tiene puntos suspensivos, aunque necesita información adicional, ya que el comando no puede tener efecto de inmediato.

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

Debido a que las barras de herramientas se muestran constantemente y el espacio es un bien escaso, las elipses se deben usar con poca frecuencia .

Nota: Para los menús mostrados por una barra de herramientas, aplique las guías de puntos suspensivos del menú .

 

Tamaño y espaciado recomendados.

Tamaño y espaciado recomendados para barras de herramientas estándar.

 

Etiquetas

General

• Utilice el uso de 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 etiqueta

• Utilice una información sobre herramientas para etiquetar el comando. Para el texto de información sobre herramientas, use la etiqueta que se usaría si el botón estuviera etiquetado, pero incluya la tecla de método abreviado si hay una.

  

  Un ejemplo de un botón de icono de información sobre herramientas.

 

Botones de icono etiquetados

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

• Coloque la etiqueta a la derecha del icono.

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

  

  Un ejemplo de un botón de icono etiquetado infotip.

 

Listas desplegables

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

  

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

• Si una lista desplegable editable no tiene un valor, use un indicador .

  

  En este ejemplo, se utiliza un indicador para la etiqueta de la lista desplegable.

 

Botones de menú y botones de división

• Prefiere nombres de botones de menú basados ​​en el verbo. Sin embargo, omita el verbo si es Crear, Mostrar, Ver o Administrar. Por ejemplo, los botones de menú Herramientas y Página no tienen verbos.
• Use una sola palabra específica que describa con claridad y precisión los contenidos del menú. Si bien los nombres no tienen que ser tan generales como para describir todo lo que hay en el menú, deberían ser lo suficientemente predecibles para que los usuarios no se sorprendan por lo que encuentran en el menú.
• Si bien no es obligatorio, proporcione descripciones de información si son útiles.

 

Elementos de menú

• Use nombres de elementos de menú que comiencen con un verbo, sustantivo o frase nominal.
• Prefiere nombres de menú basados ​​en el verbo. 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
• Usa verbos específicos. Evite los verbos genéricos e inútiles, como Cambiar y Administrar.
• Use nombres en singular para los comandos que se aplican a un solo objeto, de lo contrario use nombres en plural.
• Para pares de comandos complementarios, elija nombres claramente complementarios. Ejemplos: Agregar, Eliminar; Mostrar ocultar; Insertar, Eliminar.
• Elija los nombres de los elementos del menú en función de los objetivos y tareas del usuario, no de la tecnología.
• Utilice los siguientes nombres de elementos de menú para el propósito declarado:
  • Opciones: Para visualizar 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 las configuraciones de personalización más utilizadas.
  • Preferencias: No usar. Utilice las opciones en su lugar.
  • Propiedades: para mostrar la ventana de propiedades de un objeto.
  • Configuraciones: No usar como una etiqueta de menú. Utilice las opciones en su lugar.
• Los elementos del 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 referirse a las barras de herramientas:

• Si solo hay una barra de herramientas, consúltela como la barra de herramientas.
• Si hay varias barras de herramientas, consúltelas por su nombre, seguidas de la palabra barra de herramientas. Consulte la barra de herramientas principal que está activada de manera predeterminada y contiene botones para tareas básicas, como abrir e imprimir un archivo, como la barra de herramientas estándar.
• Barra de herramientas es una palabra única, sin capitalizar. (Por el contrario, la barra de menú 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, incluido su uso de mayúsculas, pero no incluya puntos suspensivos.
• Consulte los botones del menú de la barra de herramientas por sus etiquetas y el menú de palabras. Utilice el texto exacto de la etiqueta, incluido su uso de mayúsculas.
• Consulte los controles de la barra de herramientas generalmente como botones de la barra de herramientas.
• Para describir la interacción del usuario, haga clic en los botones de la barra de herramientas y en las listas desplegables de solo lectura, e ingrese para las listas desplegables editables. No utilice elegir, seleccionar o elegir.
• No use en cascada, desplegable, desplegable o emergente para describir los botones del menú, excepto en la documentación de programación.
• Consulte los elementos no disponibles como no disponibles, no como atenuados, deshabilitados o en gris. Uso desactivado en la documentación de programación.
• Cuando sea posible, formatee las etiquetas con texto en negrita. De lo contrario, ponga 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 de Fuentes en la barra de herramientas, ingrese "Segoe UI".
• En la barra de herramientas Formato , seleccione Mostrar y, a continuación, haga clic en Comentarios .

 

Referencias

Microsoft - Toolbars - Barras de herramientas