Información sobre herramientas e información sobre herramientas

Artículo
03/21/2023

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 posible con 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

Una 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 sugerencia.

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 implementación.

Nota

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

¿Es este el control adecuado?

Para decidirte, intenta responder a estas preguntas:

¿Se muestra la información en función del puntero al mantener el puntero? Si no es así, usa otro control. Mostrar sugerencias solo como resultado de la interacción del usuario nunca los muestra por su cuenta. 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 el control una etiqueta de texto? Si no es así, usa la información sobre herramientas para proporcionar la etiqueta que no tiene. Tenga en cuenta que la mayoría de los controles deben etiquetarse y, por tanto, no tener información sobre herramientas. Los controles de la 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, no esencial para las tareas principales. Si es un concepto esencial, deberías ponerlo directamente en la UI para que los usuarios no tengan que descubrirlo 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.
¿Es necesario que los usuarios interactúen con el texto de información? Si es así, use otro control, como un globo. Los usuarios no pueden interactuar con el texto de información ya que en cuanto se mueve el mouse el texto desaparece.
¿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, incluido 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 de un buen diseño. Si un gráfico, un botón u otro objeto requiere que los usuarios sigan comprobando una sugerencia para comprenderlo, 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 de tiempo 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 la barra de herramientas, botones gráficos, elementos de menú Inicio y iconos del área de notificación, tienen sugerencias, por lo que puede tomar su detectabilidad para concederse.

Los usuarios tardan más tiempo en descubrir sugerencias en lugares no estándar. No hay ninguna pista visual, como un punto activo o un cambio de puntero, que indica que un objeto tiene una sugerencia. Peor aún, algunos usuarios mueven mucho el mouse, 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 la 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 deseen 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 proporcionar sugerencias reconocibles y útiles de forma coherente resulta ser un problema, considere diseños alternativos como etiquetas de control autoexplicables o texto complementario en contexto.

Información adecuada

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

Concisa. Las ventanas emergentes que usan 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 sobrecargar.
Útil. El texto de 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 sugerencia no siempre está visible, debe ser información complementaria que los usuarios no tengan que leer. Se debe comunicar información importante mediante etiquetas de control autoexplicativas o texto complementario en contexto.
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 sugerencia, 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. Hora a la que el puntero debe permanecer estacionado para que aparezca la punta. El tiempo predeterminado es de 0,5 segundos.
Vuelva a mostrarlo. 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.
Retiro. Hora después de la cual se quita automáticamente la propina. El tiempo predeterminado es de 5 segundos.

Tener valores iniciales demasiado cortos y volver a mostrar los resultados en una experiencia molesta y perjudicial porque a menudo se mostrarían involuntariamente, mientras que demasiado tiempo da lugar a sugerencias que 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 puntas deben colocarse cerca del objeto que se mantiene al mantener el puntero, normalmente en la cola del puntero o en la cabeza, si es posible. Sin embargo, nunca deben colocarse de una manera que interfiera con lo que hace el usuario ocultando el objeto de interés. Evitar este problema puede requerir que mueva la punta fuera del puntero, pero adyacente al objeto . Esto no es un problema siempre y cuando la relación entre el objeto y su punta 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 usan 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 tiene 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 la barra de herramientas (que no es accesible con el teclado) o el método abreviado de teclado Imprimir comando.

Si sólo 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
Información 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 alguna forma 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.
Vistas en miniatura 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 en miniatura para sus elementos. En este ejemplo, la Galería de fotos de Windows proporciona sugerencias de miniaturas para sus elementos.
Información detallada mostrar información detallada sobre un objeto.	La información sobre información sobre información es una manera eficaz de mostrar información detallada sobre un objeto o para 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 ventana 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 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 Cuentas de usuario Panel de control.
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 le 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ámico. a diferencia de los demás 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 sobre el 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.

Instrucciones

Tiempos de expiración

Use los tiempos de espera iniciales predeterminados y vuelva a mostrar. Excepción:
- Las miniaturas que no son redundantes y que se muestran en el lado de su objeto asociado se pueden mostrar inmediatamente (sin retraso). 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.

Selección de ubicació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. Algunas separaciones no son un problema siempre y cuando la relación entre el objeto y su punta 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 lejos 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.
Para 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 sugerencias 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 sugerencias potencialmente distraídas (a menudo grandes), asegúrese de que la información es útil para la mayoría de los usuarios. Si ese no es el caso, haga que las sugerencias distraídas sean opcionales o incluso eliminarlas. De lo contrario, la mayoría de los usuarios tendrán que alejar el puntero del objeto de destino para deshacerse de la sugerencia.