Información sobre herramientas e información sobre herramientas

2023-03-21

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 .

Una información sobre herramientas es una pequeña ventana emergente que etiqueta el control sin etiquetar al que se apunta, como controles de barra de herramientas sin etiqueta o botones de comando.

Captura de pantalla que muestra el botón imprimir con la información sobre herramientas

Información sobre herramientas típica para un botón de barra de herramientas.

Dado que la información sobre herramientas ha demostrado ser tan útil, existe un control relacionado denominado información sobre información, que proporciona texto más descriptivo de lo que es posible con la información sobre herramientas.

Una información sobre información es una pequeña ventana emergente que describe concisamente el objeto al que se apunta, como descripciones de controles de barra de herramientas, iconos, gráficos, vínculos, objetos del Explorador de Windows, elementos de menú Inicio y botones de la barra de tareas. La información sobre información es una forma de controles de divulgación progresivas, lo que elimina la necesidad de tener siempre texto descriptivo en pantalla.

captura de pantalla del botón compartir con información sobre información

Información sobre información típica.

Para los fines de este artículo, la información sobre herramientas y la información se conocen colectivamente como sugerencias.

Las sugerencias ayudan a los usuarios a comprender objetos desconocidos o desconocidos que no se describen directamente en la interfaz de usuario (UI). Se muestran automáticamente cuando los usuarios mantienen el puntero sobre un objeto y se quitan cuando los usuarios hacen clic en el control o mueven el mouse, o cuando se agota el tiempo de espera de la propina.

Desarrolladores: No hay ningún control de información sobre información; La información sobre información se implementa con el control de información sobre herramientas. La distinción está en uso, no en la implementación.

Nota:

Las directrices relacionadas con globos, barras de herramientas y ayuda se presentan en artículos independientes.

¿Es este el control correcto?

Para decidirlo, tenga en cuenta estas preguntas:

¿Se muestra la información en función del puntero? Si no es así, use otro control. Mostrar sugerencias solo como resultado de la interacción del usuario nunca las muestra por sí solas. Por el contrario, los globos pueden mostrarse por sí mismos (como lo hacen con las notificaciones), por lo que tienen una cola que identifica su origen.
¿Tiene un control una etiqueta de texto? Si no es así, utilice un cuadro de texto emergente para proporcionar la etiqueta. Tenga en cuenta que la mayoría de los controles deben etiquetarse y, por tanto, no tener información sobre herramientas. Los controles de barra de herramientas y los botones de comando con etiquetas gráficas deben tener información sobre herramientas.
¿Un objeto se beneficia de una descripción complementaria o información adicional? Si es así, use una información sobre información. Sin embargo, el texto debe ser complementario, es decir, no esencial para las tareas principales. Si es esencial, colóquelo directamente en la interfaz de usuario para que los usuarios no tengan que detectarlo ni buscarlo.
¿La información complementaria es un error, una advertencia o un estado? Si es así, use otro elemento de interfaz de usuario, como un globo, un mensaje de error o una barra de estado. La información sobre el icono del área de notificación es una excepción porque se pueden usar para mostrar información de estado.
¿Los usuarios necesitan interactuar con el consejo? Si es así, use otro control, como un globo. Los usuarios no pueden interactuar con sugerencias porque mover el mouse los hace desaparecer.
¿Los usuarios necesitan imprimir la información complementaria? Si es así, use otro control, como un campo de comentario estático. Sin embargo, también puede usar información sobre información para proporcionar acceso más directo a esta información.

En este ejemplo, un campo de comentario estático en Microsoft Word permite a los usuarios imprimir comentarios.
¿Es el contexto para que los usuarios encuentren las sugerencias molestas o distraídas? Si es así, considere la posibilidad de usar otra solución, incluida la posibilidad de hacer nada en absoluto. Si usa sugerencias en estos contextos, permita a los usuarios desactivarlas.

Cuando se usa correctamente, las sugerencias mejoran la comunicación con el usuario. Nunca use sugerencias como sustituto del buen diseño. Si un gráfico, un botón u otro objeto requiere que los usuarios sigan comprobando una sugerencia para entenderlo, el diseño es incorrecto. Corrija el diseño en su lugar.

Conceptos de diseño

Las sugerencias son una manera eficaz de simplificar una interfaz de usuario. Proporcionan información que los usuarios necesitan cuando lo necesitan, con un esfuerzo mínimo por su parte. Las sugerencias pueden ayudarle a usar el espacio de pantalla de forma más eficaz y reducir el desorden de la pantalla. Sin embargo, las sugerencias mal diseñadas pueden ser molestos, distraídos, inútiles, abrumadores o de la manera. Los siguientes conceptos de diseño están diseñados para mostrar la diferencia.

Detectabilidad

Las sugerencias se muestran automáticamente cuando los usuarios mantienen el puntero sobre un objeto durante un período de tiempo. Este mecanismo de retraso temporal hace que las sugerencias sean muy cómodas, pero también reduce su detectabilidad.

Con el tiempo, los usuarios aprenden que ciertos objetos estándar, como botones de barra de herramientas, botones gráficos, elementos de menú Inicio y iconos de área de notificación tienen sugerencias, por lo que puede tomar su detectabilidad para que se le conceda.

Los usuarios tardan más tiempo en detectar sugerencias en lugares no estándar. No hay ninguna pista visual, como un punto de acceso frecuente o un cambio de puntero, que indica que un objeto tiene una sugerencia. Peor aún, algunos usuarios mueven su mouse alrededor de mucho, especialmente cuando están aprendiendo a navegar por la interfaz de usuario. Los usuarios tienen que saber que un objeto tiene una sugerencia, ya sea a través de la experiencia pasada o por experimentación.

Puede mejorar la detectabilidad mediante sugerencias de forma coherente, lo que a su vez fomenta la previsibilidad. Si proporciona sugerencias para algunos objetos, debe proporcionarlas para todos los objetos similares para los que es probable que los usuarios quieran información complementaria. A veces, hacerlo puede ser difícil, ya que también debe asegurarse de que las sugerencias son útiles y no obvias.

Si proporciona sugerencias reconocibles y útiles de forma coherente resulta ser un problema, considere diseños alternativos, como etiquetas de control autoexplicativas o texto complementario en contexto.

Información adecuada

La información adecuada para las sugerencias tiene las siguientes características:

Conciso. Las ventanas emergentes usadas por las sugerencias son perfectas para frases cortas y fragmentos de oraciones, así como texto con formato. Los bloques grandes y sin formato de texto son difíciles de leer y saturar.
Útil. El texto de la sugerencia debe ser informativo. No debería ser obvio o simplemente repetir lo que ya está en la pantalla.
Suplemental. Dado que el texto de la sugerencia no siempre está visible, debe ser información complementaria que los usuarios no tienen que leer. La información importante debe comunicarse mediante etiquetas de control autoexplicativas o texto complementario local.
Estática. Los usuarios no esperan sugerencias para cambiar de una instancia a la siguiente, por lo que es poco probable que observen cambios en el contenido dinámico, como la información de estado. Las sugerencias de icono del área de notificación son una excepción notable: es más probable que los usuarios detecten cambios en la información de propinas, ya que estos iconos comunican principalmente el estado.

Tiempos de espera adecuados

La visualización automática adecuada y la eliminación de sugerencias es fundamental para el objetivo de los usuarios mantener el control de su entorno de interfaz de usuario. Las sugerencias tienen tres valores de tiempo de espera:

Inicial. La hora en que el puntero debe permanecer estacionario para que aparezca la punta. La hora predeterminada es de 0,5 segundos.
Vuelva a mostrar. La hora en que el puntero debe permanecer estacionario a medida que el puntero se mueve de un destino a otro. La hora predeterminada es de 0,1 segundos.
Eliminación. Hora después de la cual se quita automáticamente la propina. El tiempo predeterminado es de 5 segundos.

Tener valores iniciales y volver a mostrar demasiado cortos resulta en una experiencia molesta y perjudicial porque a menudo se muestran involuntariamente, mientras que demasiado tiempo da como resultado que las sugerencias no responden o no se detectan. El tiempo de eliminación predeterminado funciona bien para el texto de sugerencia breve, como se usa en la información sobre herramientas. La información sobre información tiene texto más largo, por lo que necesitan tiempos de visualización más largos.

Ubicación adecuada

Las sugerencias deben colocarse cerca del objeto que se mantiene al mantener el puntero sobre la cola o la cabeza, si es posible. Sin embargo, nunca deben colocarse de una manera que interfiera con lo que el usuario está haciendo ocultando el objeto de interés. Evitar este problema puede requerir que mueva la punta del puntero, pero adyacente al objeto . Esto no es un problema siempre que la relación entre el objeto y su sugerencia esté clara. Asegúrese de que los usuarios no muevan el puntero solo para obtener las sugerencias del programa para desaparecer.

Accesibilidad

Las sugerencias tienen un efecto inusual en la accesibilidad. Aunque normalmente se desencadenan al mantener el puntero sobre un objeto, los lectores de pantalla controlan las sugerencias para los controles con acceso al teclado. Cuando se usa adecuadamente para obtener información concisa, útil, estática y complementaria, las sugerencias pueden mejorar la accesibilidad general. De hecho, el patrón de sugerencia de texto alternativo es la manera preferida de hacer que los gráficos sean accesibles. Sin embargo, cuando se usa incorrectamente, dañan la accesibilidad haciendo que la información importante o dinámica sea más difícil de obtener.

Proporcione más de una manera de acceder a un control si ese control requiere una sugerencia que no tenga acceso al teclado.

captura de pantalla del botón imprimir con información sobre herramientas

En este ejemplo, los usuarios pueden imprimir mediante el botón de barra de herramientas (que no es accesible con el teclado) o el método abreviado de teclado Imprimir comando.

Si solo haces una cosa...

Diseñe sugerencias detectables que muestren información concisa, útil, estática y complementaria en el lugar adecuado en el momento adecuado.

Patrones de uso

Las sugerencias tienen varios patrones de uso:

Uso	Ejemplo
Informaciones sobre herramientas muestra la etiqueta de un control o glifo sin etiquetar.	Dado que estas sugerencias sirven como etiquetas, su texto sigue las directrices de etiqueta para el control subyacente. en este ejemplo, la información sobre herramientas proporciona la etiqueta de comando. en estos ejemplos, la información sobre herramientas etiqueta los botones gráficos. En este ejemplo, la información sobre herramientas etiqueta un glifo.
Información sobre información proporcione una descripción o explicación complementaria de un objeto o control.	Use información sobre información sobre información para describir o explicar objetos y controles, como controles de barra de herramientas, iconos (incluidas superposiciones de iconos), vínculos, pestañas, controles de divulgación progresiva y controles personalizados. En estos ejemplos, la información sobre información proporciona información complementaria sobre controles y objetos.
Información sobre texto alternativo describir un gráfico para la accesibilidad.	Este patrón es principalmente para los usuarios que tienen algún tipo de discapacidad visual y pueden usar un lector de pantalla. En este ejemplo, la información sobre información describe el gráfico del menú Inicio.
miniaturas de muestra una imagen pequeña de un elemento.	Las miniaturas proporcionan una representación gráfica fácilmente reconocible de una ventana o documento. en este ejemplo, la barra de tareas de Windows proporciona sugerencias sobre miniaturas para sus elementos. En este ejemplo, la Galería de fotos de Windows proporciona sugerencias sobre miniaturas para sus elementos.
Información detallada mostrar información detallada sobre un objeto.	La información sobre información es una manera eficaz de mostrar información detallada sobre un objeto o proporcionar datos. En estos ejemplos, la información sobre información proporciona información detallada sobre un objeto o datos.
Información sobre el menú Inicio describir un elemento en el menú Inicio.	El menú inicio consta de nombres de programa y destinos de ventanas importantes, como documentos, imágenes y panel de control. Estas sugerencias describen los elementos del menú Inicio, normalmente proporcionando una breve descripción del programa o destino, así como las tareas principales que los usuarios pueden realizar con él. estas descripciones también se indexan mediante el cuadro de búsqueda del menú inicio, lo que ayuda a los usuarios a encontrar los programas que necesitan. En este ejemplo, la información sobre información describe lo que los usuarios pueden hacer con un programa en el menú Inicio.
Información sobre el Panel de control describir una categoría o tarea del panel de control.	Estas sugerencias proporcionan información complementaria para ayudar a los usuarios a elegir la categoría y el elemento del panel de control correctos. En este ejemplo, la información sobre información describe la categoría Panel de control cuentas de usuario.
Información sobre el nombre completo muestra el nombre completo de un elemento cuando el nombre se trunca o no está totalmente visible.	Estas sugerencias permiten mostrar elementos en un espacio más compacto, a la vez que reducen la necesidad de desplazamiento horizontal. esto es especialmente importante cuando se desconoce la longitud del contenido porque es dinámica. a diferencia de los otros patrones, cuando se usan en listas y árboles, estas sugerencias se muestran directamente sobre el objeto de origen. En este ejemplo, se usa una información sobre información para mostrar el nombre completo del elemento al mantener el puntero.
Información de estado mostrar información de estado para los iconos del área de notificación.	Normalmente, las sugerencias deben ser estáticas porque los usuarios no esperan que cambien de una instancia a la siguiente. los iconos de área de notificación son una excepción porque estos iconos comunican el estado y no hay ningún otro espacio de pantalla disponible para el texto de estado. En estos ejemplos, la información sobre información proporciona información de estado para los iconos del área de notificación.

Directrices

Timeouts

Use los tiempos de espera iniciales y de repetición predeterminados. Excepción:
- Las miniaturas que no son redundantes y que se muestran en el lado de su objeto asociado se pueden mostrar inmediatamente (sin demora). Sin embargo, use el tiempo de espera inicial predeterminado para miniaturas redundantes (como una sugerencia de miniatura grande para un objeto gráfico pequeño) o miniaturas que cubren su objeto asociado.
En el caso de la información sobre herramientas, use el tiempo de espera predeterminado de eliminación de propinas de cinco segundos.
Para obtener información sobre información, desactive el tiempo de espera de eliminación de propinas. Desarrolladores: Puesto que técnicamente no se puede desactivar el tiempo de espera de eliminación, establézcalo en su valor más grande.
Para la accesibilidad, si necesita establecer los valores de tiempo de espera en algo distinto del valor máximo, consúltelos de la SPI_GETMOUSEHOVERTIME y SPI_GETMESSAGEDURATION parámetros del sistema en lugar de usar horas fijas. Al hacerlo, ajusta los tiempos de espera a la velocidad del usuario.

Colocación

Evite cubrir el objeto con el que el usuario está a punto de ver o interactuar. Coloque siempre la punta en el lado del objeto, incluso si eso requiere separación entre el puntero y la punta. Cierta separación no es un problema siempre y cuando la relación entre el objeto y su sugerencia esté clara.
- Excepción: Información sobre herramientas de nombre completo usada en listas y árboles.
incorrecto:

Correcto:

En el ejemplo correcto, la información sobre información se coloca fuera del cuadro de búsqueda, aunque eso requiera espacio entre ella y el símbolo de intercalación.

incorrecto:

Correcto:

En el ejemplo correcto, el texto subyacente es mucho más útil que la sugerencia, por lo que la información se coloca bien fuera del camino.
En el caso de las colecciones de elementos, evite cubrir el siguiente objeto con el que es probable que el usuario vea o interactúe. Para los artículos organizados horizontalmente, evite colocar las puntas a la derecha; para los elementos organizados verticalmente, evite colocar sugerencias a continuación.

incorrecto:

Correcto:

En el ejemplo incorrecto, la sugerencia cubre el objeto con el que es más probable que el usuario interactúe con el siguiente.
Para las sugerencias potencialmente distraídas (a menudo grandes), asegúrese de que la información es útil para la mayoría de los usuarios. Si no es así, puede hacer que las sugerencias de distracción sean opcionales o incluso eliminarlas. De lo contrario, la mayoría de los usuarios tendrán que mover el puntero fuera del objeto de destino para deshacerse de la sugerencia.