Alertas

Una alerta proporciona información sobre el estado de una aplicación del sistema, o pide información esencial sobre cómo proceder con una tarea en particular. Se distingue de otras ventanas en que el usuario no la solicita directamente, y generalmente contiene un mensaje o una pregunta en lugar de controles editables. Ya que las alertas son una intrusión no bienvenida en el trabajo del usuario, no las use salvo que sea necesario para prevenir pérdidas potenciales de datos u otros problemas graves.

Una alerta tiene un borde similar a la de un diálogo y es un objeto modal.

Una alerta no debería aparecer en el panel de ventanas a menos que sea, o que pueda ser, la única ventana mostrada por la aplicación. Por ejemplo. una alerta de recordatorio se puede mostrar después de haber cerrado la aplicación de calendario.

De otro modo, una alerta se debe mostrar sobre la aplicación cuando la ventana de la aplicación en sí está seleccionada desde la lista de ventanas.

Figura 3-10Ejemplo de alerta
Formato del título

Las ventanas de las alertas no tienen título ya que, generalmente, el título duplicaría innecesariamente el texto principal de la alerta. De este modo, los usuarios puede leer y responder a las alertas más rápidamente ya que hay menos ruido visual y menos texto confuso.

Redimensionando

Las ventanas de alerta no son redimensionables. Si el usuario necesita redimensionar su alerta, entonces probablemente el texto no es suficientemente conciso.

Comandos de ventana:

Ninguno

Las alertas deben mostrarse por encima de sus padres

Las alertas no aparecen en la lista de ventanas del sistema. Entonces, asegúrese de que se mantienen sobre su ventana madre. De lo contrario, los usuarios podrían perder la alerta y encontrar su aplicación congelada sin razón aparente. Las ventanas modales siempre deben permanecer sobre las ventanas que bloquean.

3.4.1. Texto de alerta

Una alerta puede contener texto primario y secundario. El texto primario describe brevemente la situación. El texto secundario proporciona información adicional.

Haga que tanto el texto primario como el secundario sean seleccionables. Esto hace que sea más fácil para el usuario copiar y pegar el texto en otra ventana, tal como un correo electrónico.

Figura 3-11Ubicación de texto primario y secundario
Texto primario

El texto primario le da al usuario un resumen de una oración de la información o acción sugerida. Este resumen debe contener concisamente los detalles esenciales del problema o sugerencia. Todas las alertas tienen texto primario, mostrado en una tipografía negrita ligeramente más grande que la predeterminada. Su puntuación es estilo «Titular de periódico», esto significa que no lleva punto final, pero puede terminar con un signo de pregunta.

Note el texto primario con el marcado pango:

<span weight="bold"
      size="larger">Primary Text</span>

Texto secundario

El texto secundario proporciona una descripción más detallada del problema y la acción sugerida, incluyendo posibles efectos secundarios. El texto secundario también puede proporcionar información que pueda ayudar al usuario a tomar una decisión informada. En la mayoría de las situaciones el usuario solo debería necesitar el texto primario para tomar una decisión rápida, pero puede leer el texto secundario si no está seguro del curso de acción adecuado, o si requiere detalles adicionales. El texto secundario es opcional, pero si lo usa póngalo una línea debajo del texto primario usando el estilo y tamaño de la tipografía predeterminada.

3.4.2. Botones de alerta

Dele a todas las alertas un botón afirmativo que las cierre y ejecute la acción sugerida en el texto primario. Proporcione un botón Cancelar a todas las alertas mostradas como respuesta a acciones del usuario, como Salir. Si la alerta advierte de un problema técnico u otra situación que podría resultar en pérdida de datos, agregue un botón Ayuda que muestre más información sobre la situación particular y explique las opciones al usuario. También puede proporcionar botones con opciones alternativas que muestren otra solución posible, arreglen problemas potenciales o lancen diálogos o programas relacionados.

Figura 3-12Ordenación de botones y ubicación de alertas
Texto en los botones

Escriba las etiquetas de los botones con verbos en infinitivo, como Guardar, Imprimir. Esto le permite a los usuarios seleccionar una acción sin dudarlo. Una frase activa también se adecua al rol del botón de iniciar acciones, a diferencia de una frase más pasiva. Por ejemplo, Buscar e Iniciar sesión son mejores botones que y Aceptar.

  • Botón afirmativo

    Ponga el botón afirmativo en la esquina inferior derecha de la alerta. El botón afirmativo acepta la acción propuesta por la alerta, o simplemente la cierra si no se sugiere ninguna acción (como en el caso de una alerta informativa).

  • Botón Cancelar

    Si la alerta se produjo en respuesta a la acción de un usuario, ponga un botón Cancelar inmediatamente a la izquierda del botón afirmativo. Esto proporciona una ruta de escape para que los usuarios detengan una acción en respuesta a información nueva, o si pulsaron un botón accidentalmente. Pulsar el botón Cancelar revierte la aplicación al estado anterior a la acción del usuario.

  • Botón Ayuda

    Un botón Ayuda puede usarse para clarificar alertas que presentan opciones potencialmente destructivas. Ponga el botón Ayuda en la esquina inferior izquierda de la alerta. Cuando se pulse, lance una ventana de ayuda clarificando la situación, detallando las acciones que los otros botones realizan, y explicando cualquier efecto colateral posible.

  • Botones alternativos

    Se pueden usar botones adicionales para proporcionar alternativas a la acción primaria propuesta por el texto de la alerta. Ponga estos botones a la izquierda del botón Cancelar, o el botón afirmativo si Cancelar no está presente. Un ejemplo de una acción alternativa común sería un botón Salir sin guardar en una alerta de confirmación de guardado. Esta es una alternativa a la acción primaria sugerida Guardar y al botón Cancelar.

3.4.3. Espaciado y posicionamiento dentro de las alertas

Usar espaciado limpio y consistente en las alertas hace que el mensaje sea más fácil de leer y entender así como más obvias las reacciones.

Figura 3-13Espaciado dentro de una alerta
Guías
  • El borde alrededor de todos los bordes de la alerta y de su espaciado entre el icono y el texto es de 12 píxeles.
  • El espaciado horizontal entre los botones es de 6 píxeles.
  • Añada un salto de línea del tamaño estándar de tipografía debajo de los textos primario y secundario, o 24 píxeles si está usando Glade.
  • Alinee la parte superior del icono con la parte superior del texto primario.
  • Alinee a la izquierda el mensaje de texto para configuraciones regionales occidentales.
Detalles técnicos para una disposición adecuada

Cree una ventana «GtkDialog» nueva especificando el número de botones que quiere que la alerta contenga (y un botón «Ayuda» si es apropiado). El «GtkDialog» contendrá una «GtkVBox» con una fila superior vacía, y una fila inferior conteniendo una «GtkButtonBox» con botones dentro. En la fila superior, ponga una «GtkHBox» nueva. En su columna izquierda, agregue una «GtkImage». En la derecha, una «GtkLabel». Dentro de ella escriba el Texto primario primero (usando el marcado Pango apropiado, consulte Sección 3.4.1: Texto de alerta), después ponga dos saltos de línea (retornos), y el Texto secundario. Ahora cambie las propiedades para cada control de acuerdo a estas tablas:

Tabla 3-1Propiedades para el GtkDialog
Propiedad Valor
Título (ninguna)
Border Width 6
Type Top Level
Resizable No
Has Separator No
Tabla 3-2Propiedades para la GtkVBox (incluidas en el diálogo de manera predeterminada)
Propiedad Valor
Spacing 12
Tabla 3-3Propiedades para GtkHBox
Propiedad Valor
Spacing 12
Border Width 6
Tabla 3-4Propiedades para GtkImage
Propiedad Valor
Y Align 0.00
Icon Size Dialog
Tabla 3-5Propiedades para GtkLabel
Propiedad Valor
Usar marcado
Wrap Text
Y Align 0.00

3.4.4. Alertas de información

Use una alerta de información cuando el usuario deba conocer la información presentada antes de continuar, o si ha solicitado específicamente esa información. Presente la información menos importante de otra manera, como puede ser un mensaje en la barra de estado.

Figura 3-14Una alerta de información
Una alerta de información...
  • usa el icono de información del almacén.
  • presenta un mensaje seleccionable y un botón Aceptar. El botón se sitúa en la esquina inferior derecha de la alerta. Al pulsar Intro o Esc se descarta la alerta.
  • puede presentar un botón de comodidad para dar acceso al objeto relevante. Por ejemplo, un botón Detalles en una alerta recordatoria de una cita que abre su ventana de propiedades. Ponga este botón a la izquierda del botón afirmativo.
Comandos de ventana:

Enrollar/desenrollar, minimizar (si la alerta no tiene ventana padre), cerrar

3.4.5. Alertas de error

Muestre una alerta de error cuando una operación solicitada por el usuario no pueda completarse exitosamente. Presente errores causados por operaciones que el usuario no solicitó de otra manera, a menos que puedan resultar en pérdida de datos u otros problemas serios. Por ejemplo, un error encontrado durante una verificación de correo-e iniciada por el usuario pulsando un botón en la barra de tareas debería presentar una alerta de error. Sin embargo, de ser una comprobación automática periódica, sería mejor presentar un reporte de fallo con un mensaje en la barra de estado.

Figura 3-15Una alerta de error
Una alerta de error...
  • usa el icono de error del almacén.
  • presenta un mensaje seleccionable con un botón Aceptar. El botón se ubica en la esquina inferior derecha de la alerta. Pulsar Intro puede descartar la alerta de error.
  • puede presentar un botón de comodidad para permitir gestionar el error inmediatamente. Por ejemplo, un botón Formatear… en una alerta «El disco no tiene formato». Ponga este botón a la izquierda del botón afirmativo.
Comandos de ventana:

Enrollar/desenrollar

3.4.6. Alertas de confirmación

Muestre una alerta de confirmación cuando el comando del usuario puede destruir sus datos, generar un riesgo para la seguridad o tomar más de 30 segundos de esfuerzo del usuario para recuperarlo si se seleccionó por error.

Figura 3-16Una alerta de confirmación
Una alerta de confirmación...
  • usa el icono de advertencia del almacén.
  • presenta un mensaje seleccionable y un botón etiquetado con un verbo o con una frase que describa la acción que confirmar, o la etiqueta Aceptar si la frase ocupa más de tres palabras. Este botón se coloca en la esquina inferior derecha de la alerta.
  • presenta un botón Cancelar que evitará la ejecución del comando del usuario. Este botón se coloca justo a la izquierda del botón Aceptar o equivalente.
  • puede presentar un botón de acción alternativo o un botón de conveniencia. Ubique este botón a la izquierda del botón Cancelar.
Comandos de ventana:

Enrollar/desenrollar

3.4.6.1. Alertas de confirmación de guardado

Las alertas de confirmación de guardado ayudan a asegurarse de que los usuarios no pierden los cambios en los documentos cuando cierran las aplicaciones. Esto hace que cerrar aplicaciones sea una operación menos peligrosa.

Figura 3-17Una alerta de confirmación de guardado
Texto primario

¿Quier guardar los cambios en el documento Nombre del documento antes de cerrar?

Puede reemplazar «documento» con una descripción más adecuada, por ejemplo «imagen» o «diagrama» si el documento en cuestión no es principalmente de texto.

Texto secundario

Si cierra sin guardar, se perderán los cambios de los últimos periodo de tiempo

El texto secundario proporciona al usuario cierto contexto acerca del número de cambios sin guardar.

Botones

Cerrar sin guardar, Cancelar, Guardar

Cuando se necesita una alerta de confirmación, preséntela inmediatamente. Si el usuario confirma cerrar sin guardar, oculte la alerta y el documento o la ventana de la aplicación inmediatamente, antes de hacer cualquier limpieza interna. Si el usuario elije guardar antes de cerrar, esconda la alerta inmediatamente pero muestre la ventana del documento hasta que se haya guardado, en caso de que ocurra un error. Después oculte la ventana del documento inmediatamente después de que se haya guardado exitosamente.

3.4.7. Alertas de autenticación

Las alertas de autenticación solicitan al usuario la información necesaria para obtener acceso a recursos protegidos, tales como su nombre y contraseña. Las alertas de autenticación son un tipo especial de alertas porque son generalmente inevitables. Se debe hacer intentar mantener la información introducida en una alerta de autenticación, siempre y cuando sea posible dentro de los límites de seguridad.

Figura 3-18Una alerta de autenticación

Guías
  • Usar el botón de autenticación del almacén.
  • Muestre un campo etiquetado para cada elemento de información necesario. Los campos sugeridos son Nombre de usuario y Contraseña (en ese orden), donde sea apropiado.
  • Si es seguro retener el nombre de usuario por más tiempo que la contraseña, rellene previamente el campo de nombre de usuario y de el foco al campo de contraseña cuando se muestre la alerta.
  • Muestre un botón etiquetado con un verbo o frase verbal describiendo la acción de autenticación, o Aceptar si no hay una frase adecuada o si fuera de más de tres palabras. Ponga este botón en la esquina inferior derecha de la alerta.
  • No active el botón Aceptar o equivalente hasta que el usuario no haya rellenado todos los campos necesarios. Recuerde que, sin embargo, no todos los campos pueden requerir que se escriba algo. Por ejemplo, una contraseña vacía puede ser válida en varias aplicaciones
  • Muestre un botón Cancelar que evitará la autenticación y cerrará la alerta. Coloque este botón justo a la izquierda del botón Aceptar o equivalente.
  • Ubique cualquier acción alternativa o botón conveniente a la izquierda del botón Cancelar.
  • Cuando el usuario pulse Intro en el último campo, active el botón predeterminado. Cuando el usuario pulse Intro en otro campo, mueva el foco al siguiente campo.

Comandos de ventana:

Enrollar/desenrollar