Alertas

An alert provides information about the state of the application system, or asks for essential information about how to proceed with a particular task. It is distinct from other types of window in that it is not directly requested by the user, and usually contains a message or a question rather than editable controls. Since alerts are an unwelcome intrusion into the user's work, do not use them except where necessary to avoid potential data loss or other serious problems.

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

An alert should not appear in the panel window list unless it is, or may be, the only window shown by an application. For example, an appointment reminder alert may be shown after the main calendar application window has been closed.

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

Alert windows have no titles, as the title would usually unnecessarily duplicate the alert's primary text. This way, users can read and respond to alerts more quickly as there is less visual noise and confounding text.

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

Alerts do not appear in the system window list. Consequently, take care to ensure that alerts stay above their parent window. Otherwise, users will be likely to lose the alert and find your application unresponsive for no apparent reason. Modal windows should always stay above the window(s) they block.

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

The primary text provides the user with a one sentence summary of the information or suggested action. This summary should concisely contain the essential details of the problem or suggestion. Every alert has primary text, displayed in a bold font slightly larger than the default. The primary text is punctuated in 'newspaper headline' style, that is, it has no terminating period, but it may have a terminating question mark.

Note el texto primario con el marcado pango:

<span weight="bold"
      size="larger">Texto primario</span>

Texto secundario

Secondary text provides a more in-depth description of the problem and suggested action, including possible side effects. Secondary text can also provide information that may be helpful in allowing the user to make an informed decision. In most situations the user should only need the primary text to make a quick decision, but they may read the secondary text if they are unsure of the proper course of action, or require extra details. Secondary text is optional, but if used, place it one text line height beneath the primary text using the default font size and weight.

3.4.2. Botones de alerta

Give all alerts an affirmative button that dismisses the alert and performs the action suggested in the primary text. Provide a Cancel button for all alerts displayed in response to a user actions, such as Quit. If the alert warns of a technical problem or other situation that could result in data loss, provide a Help button that provides more information on the particular situation and explains the user's options. You may also provide buttons to perform alternate actions that provide another possible solution, fix potential problems, or launch related dialogs or programs.

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

Write button labels as imperative verbs, for example Save, Print. This allows users to select an action with less hesitation. An active phrase also fits best with the button's role in initiating actions, as contrasted with a more passive phrase. For example Find and Log In are better buttons than than Yes and OK.

  • Botón afirmativo

    Place the affirmative button in the lower right corner of the alert. The affirmative button accepts the action proposed by the alert, or simply dismisses the alert if no action is suggested (as is the case with an information alert).

  • Botón Cancelar

    If the alert was produced in response to a user action, place a Cancel button immediately to the left of the affirmative button. This provides an escape route for users to stop an action in response to new information, or just if they clicked accidentally. Clicking the Cancel button reverts the application to its state prior to the user action.

  • Botón Ayuda

    A Help button may be used to clarify alerts that present potentially destructive options. Place the Help button in the lower left corner of the alert. When clicked, launch a help window clarifying the situation, detailing the actions performed by the other buttons, and explaining any side-effects that each action may have.

  • Botones de cambio

    Extra buttons may be used to provide alternates to the primary action proposed by the alert text. Place these buttons to the left of the Cancel button, or the affirmative button if Cancel is not present. An example of a common alternate action would be a Quit without Saving button in a save confirmation alert. This is an alternative to the primary suggested action Save and the Cancel button.

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

Create a new GtkDialog window specifying the number of buttons you wish the alert to contain (and a help button if appropriate). The GtkDialog will contain a GtkVBox with an empty upper row, and a lower row containing a GtkButtonBox with buttons in it. In the empty upper row, place a new GtkHBox. In the left column of the GtkHBox place a GtkImage. In the right column of the GtkHBox place a GtkLabel. Inside the GtkLabel place Primary Text first (using the appropriate Pango markup, see Sección 3.4.1: Texto de alerta), then put two linebreaks (return), then place Secondary Text. Now change the properties for each control according to these tables:

Tabla 3-1Propiedades para el GtkDialog
Propiedad Valor
Título (ninguna)
Anchura del borde 6
Tipo Nivel superior
Redimensionable No
Tiene separador No
Tabla 3-2Propiedades para la GtkVBox (incluidas en el diálogo de manera predeterminada)
Propiedad Valor
Espaciado 12
Tabla 3-3Propiedades para GtkHBox
Propiedad Valor
Espaciado 12
Anchura del borde 6
Tabla 3-4Propiedades para GtkImage
Propiedad Valor
Alineación Y 0.00
Tamaño de icono Diálogo
Tabla 3-5Propiedades para GtkLabel
Propiedad Valor
Usar marcado
Ajustar texto
Alineación Y 0.00

3.4.4. Alertas de información

Use an information alert when the user must know the information presented before continuing, or has specifically requested the information. Present less important information by other means such as a statusbar message.

Figura 3-14Una alerta de información
Una alerta de información...
  • usa el icono de información del almacén.
  • presents a selectable message and an OK button. The button is placed in the bottom right corner of the alert. Pressing Enter or Escape dismisses the alert.
  • may present a convenience button to give access to a relevant object. For example, a Details button in an appointment reminder alert that opens the appointment's property window. Place this button to the left of the affirmative button.
Comandos de ventana:

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

3.4.5. Alertas de error

Display an error alert when a user-requested operation cannot be sucessfully completed. Present errors caused by operations not requested by the user by another means, unless the error could result in data loss or other serious problems. For example, an error encountered during an email check initiated by the user clicking a toolbar button should present an error alert. However, an error encountered in an automated periodic email check would more appropriately report failure with a statusbar message.

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.
  • may present a convenience button to allow immediate handling of the error. For example, a Format... button in a "This disk is not formatted" alert. Place this button to the left of the affirmative button.
Comandos de ventana:

Enrollar/desenrollar

3.4.6. Alertas de confirmación

Present a confirmation alert when the user's command may destroy their data, create a security risk, or take more than 30 seconds of user effort to recover from if it was selected in error.

Figura 3-16Una alerta de confirmación
Una alerta de confirmación...
  • usa el icono de advertencia del almacén.
  • presents a selectable message and a button labelled with a verb or verb phrase describing the action to be confirmed, or labelled OK if such a phrase would be longer than three words. This button is placed in the bottom right corner of the alert.
  • presents a Cancel button that will prevent execution of the user's command. This button is placed to the immediate left of the OK or equivalent button.
  • 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. Guardar alertas de confirmación

Save confirmation alerts help ensure that users do not lose document changes when they close applications. This makes closing applications a less dangerous operation.

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

When a confirmation alert is needed, present it immediately. If the user confirms closing without saving, hide the alert and the document or application window immediately, before doing any necessary internal clean-up. If the user chooses to save before closing, hide the alert immediately but show the document window until the document is saved, in case an error occurs. Then hide the document window immediately after it has been saved successfuly.

3.4.7. Alertas de autenticación

Authentication alerts prompt the user for information necessary to gain access to protected resources, such as their username or password. Authentication alerts are a special kind of alert because they are both routine and largely unavoidable. Every attempt should be made to retain information entered into an authentication alert as long as is possible within security constraints.

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
  • If it is secure to retain the username longer than the password, pre-fill the username field and give focus to the password field when the alert is displayed.
  • Show a button labelled with a verb or verb phrase describing the authentication action, or OK if there is no appropriate phrase or such a phrase would be longer than three words. Place this button in the bottom right corner of the alert.
  • Do not enable the OK or equivalent button until all fields that require input have been attended to by the user. Remember that not all fields may require input however, for example an empty password may be acceptable in some applications.
  • Show a Cancel button that will prevent authentication and close the alert. Place this button to the immediate left of the OK or equivalent button.
  • Ubique cualquier acción alternativa o botón conveniente a la izquierda del botón Cancelar.
  • When the user presses Return in the last field, activate the default button. When the user presses Return in any other field, move focus to the next field.

Comandos de ventana:

Enrollar/desenrollar