Sugerencia de acción
Una información sobre herramientas que aparece cuando el usuario pasa el ratón por encima de un botón. Por lo general, incluye una explicación o información adicional sobre la acción que se realizará al hacer clic en el botón. A menudo se usa para botones con un solo icono, lo que proporciona a los usuarios una comprensión clara de la acción asociada a él.
Estructura
- El título es el elemento más importante y obligatorio de la descripción emergente; describe la función principal del botón. Recomendamos formular el texto del título de manera que quepa en una sola línea.
- Descripción: un elemento de información sobre herramientas opcional que proporciona información adicional sobre el título.
- Teclas rápidas y atajos: un elemento de información sobre herramientas opcional, una combinación de teclas que, al presionarlas, inicia la acción descrita en la interfaz. Se utiliza para enseñar a los usuarios acciones rápidas para acelerar su interacción con el servicio.
Opciones
- El título por sí solo es la opción más utilizada; la información sobre herramientas describe brevemente solo la acción en sí. Recomendamos formular el texto de manera que no contenga más de 5 palabras
- Título y acceso directo: si una acción tiene asignada una combinación de teclas, se recomienda mostrarla para que sirva de guía al usuario.
- Título y descripción: si la acción es compleja y el título no se puede formular de manera concisa y clara, se recomienda incluir una descripción con información adicional.
- Título, descripción y acceso directo: el máximo establecido para un componente, que se utiliza cuando todos los elementos son necesarios para que el usuario tome una decisión en la interfaz.
Tallas
Cuando se utiliza un solo título o título+atajo, el ancho de la información sobre herramientas se ajusta al texto. Para las descripciones, el ancho se establece en 300 px.
Acolchado en todas las opciones: 12 píxeles a la izquierda y a la derecha, 8 píxeles en la parte superior e inferior.
En la opción con atajos, el espacio entre el título y la etiqueta se establece en 8px.
En la opción con una descripción (independientemente de si hay teclas rápidas o no), la distancia entre el título y la descripción es de 2 píxeles.
Posición
La posición principal de la información sobre herramientas en relación con el botón es inferior y central, con una distancia de 4 píxeles entre los elementos.
Si los botones están situados en el borde izquierdo o derecho de la página, la información sobre herramientas se alinea con el borde del botón correspondiente.
Si los botones están en la parte inferior de la pantalla, la información sobre herramientas se muestra en la parte superior, en la posición que corresponde a la ubicación del botón: borde izquierdo, centro o borde derecho.
Sincronización
En función de su finalidad, puede ajustar el retraso para que la información emergente aparezca y desaparezca al pasar el ratón por encima de ella. En la mayoría de los casos, la descripción emergente aparece al instante o con un retraso mínimo de hasta 250 ms y desaparece cuando el usuario aleja el cursor del botón.
Si crees que la mayoría de los usuarios entenderán la función del botón sin ninguna pista, la información sobre herramientas solo se mostrará a aquellos que tengan dificultades y se puede aumentar el retraso de aparición para evitar molestar a los usuarios con elementos innecesarios.
Casos de uso
