# Ventanas

## Partes de las ventanas y del sistema de interacción

### Títulos

Dé un título a cada ventana (a excepción de las alertas y cajas de herramientas). Un buen título de ventana contiene información relevante para el usuario y distingue una ventana en particular del resto de ventanas abiertas. Omita información que no ayuda en esta selección, por ejemplo el número de versión de la aplicación o el nombre del fabricante.

Ejemplo de título de una ventana

Captura de pantalla mostrando una barra de título de ventana con el texto «Partes de las ventanas y del sistema de interacción - Mozilla Firefox»

Consulte la descripción de cada tipo de ventana en particular para los formatos de títulos.

### Comandos de bordes y ventanas

La mayoría de las ventanas tiene bordes, excepto cierto tipo de ventanas con formas y algunas ventanas «arrancadas». No intente dibujar sus propias ventanas sin bordes, en su lugar proporcione sugerencias al gestor de ventanas para el tipo de borde que quiere.

Diferentes tipos de comandos son apropiados para diferentes tipos de ventana. Consulte la descripción para cada tipo de ventana en particular para obtener una lista de comandos de ventana apropiados. Están disponibles los siguientes comandos de ventana:

- Cerrar

  Cierra la ventana. Dibuje siempre esto como un botón en el borde de la ventana cuando sea relevante al tipo de ventana.

- Maximizar

  Hace que la ventana ocupe todo el espacio sin usar de la pantalla

- Minimizar

  Hace que la ventana se oculte temporalmente. Seguirá apareciendo en la lista de ventanas del escritorio.

- Enrollar/desenrollar

  Solo muestra el título de la barra de la ventana, como si se hubiese «enrollado».

### Modalidad

Una ventana no modal no restringe la interacción del usuario con otras ventanas abiertas del escritorio de ninguna manera. Usar ventanas no modales ofrece al usuario la máxima flexibilidad para realizar tareas en su aplicación en cualquier orden y de la manera que elija.

La ventana de una aplicación modal, mientras está abierta, evita que el usuario interaccione con otras ventanas de la misma aplicación.

Una ventana modal del sistema, mientras está abierta, evita que el usuario interaccione con cualquier otra ventana o aplicación, incluyendo el propio escritorio.

Guías

- Use una ventana modal sólo si el permitir la interacción con otras partes de la aplicación mientras la ventana está abierta puede hacer que se pierdan datos o que haya cualquier otro problema serio. Proporcione una manera clara de salir de la ventana modal, como un botón Cancel en una alerta.

- No usar las ventanas modales del sistema.

### Foco

El foco es la manera en que un usuario designa a una ventana para que reciba los datos del teclado, el ratón o cualquier otro dispositivo de entrada. Si está usando un lector de pantalla o una tecnología de asistencia similar, el foco puede designar la ventana de la que el usuario quiere recibir información. La ventana con el foco se considera la ventana con la que el usuario está «trabajando» actualmente.

Asegúrese de que su aplicación funciona correctamente con los tres mecanismos diferentes con los que las ventanas pueden recibir el foco en GNOME:

- Pulsar para dar el foco

  Una ventana obtiene el foco al pulsar en ella.

- Apuntar para dar el foco

  Una ventana obtiene el foco moviendo el puntero sobre ella. A veces se llama a esto «foco descuidado».

- Foco del teclado

  Se da el foco a una ventana usando un atajo de teclado tal como Alt Tab.

Restricciones especiales para «apuntar para dar el foco»

Tenga en cuenta que «apuntar para dar el foco» añade una serie de restricciones a las aplicaciones de GNOME que no están presentes en entornos como MacOS o Windows. Por ejemplo, las ventanas de utilidad compartidas entre varias ventanas de documentos, como la caja de herramientas en el editor de imágenes GIMP, no pueden ser sensibles al contexto, es decir, no puede iniciar una acción como Guardar en el documento actual. Esto es porque al mover el ratón del documento actual a la ventana de utilidad, el usuario puede pasar el puntero por otra ventana de documento sin darse cuenta, cambiando el foco y posiblemente guardando el documento incorrecto.

### Mostrar y ocultar ventanas

La forma en la que su aplicación muestra y oculta ventanas puede afectar mucho a la percepción de su aplicación por parte del usuario, particularmente su rendimiento.

Guías

- Muestre siempre una ventana tan pronto como le sea posible, pero asegúrese de que su ventana tiene el tamaño correcto antes de mostrarla. Redimensionar una ventana después de que sea visible desorienta y da una impresión de de una aplicación sin finalizar.

- si una ventana contiene información que tarda unos segundos en calcularse o en mostrarse, a menudo es mejor no rellenarla por completo antes de mostrar la ventana. Por ejemplo, una ventana que contenga una gran cantidad de texto se puede mostrar rápidamente y el texto puede rellenarse después (siempre que esto no implique que la ventana se redimensione). Esto hará que su aplicación sea más reactiva que si no se hubiese mostrado la ventana hasta haber completado su contenido.

- Oculte una ventana después de cerrarla tan pronto como sea posible. A menos que se deba mostrar una alerta, oculte inmdiatamente la ventana que el usuario ha cerrado pulsando el botón «Cerrar» del borde de la ventana; su aplicación puede todavía realizar alguna operación interna de limpieza posteriormente. Hacer de hacer que el sistema parezca lento, no hacer esto causa que el gestor de ventanas crear que la aplicación no está respondiendo, mostrando una advertencia innecesaria al usuario.

## Ventanas primarias

Una ventana primaria generalmente presenta una vista de los datos del usuario, como un documento de texto en una aplicación de procesado de textos, una imagen en un programa de dibujo o cálculos en una calculadora o en una hoja de cálculo. También puede ser la vista de algo más abstracto, como un juego. Una única instancia de una aplicación puede tener más de una ventana primaria y más de un tipo de ventana primaria.

Una ventana primaria siempre se muestra en la lista de ventanas del panel.

Una típica ventana primaria (gedit)

Una ventana primaria típica: la vista de documento de gedit

Generalmente la ventana de una aplicación primaria tiene un borde, una barra de menú y una barra de estado, y también puede contener una o más barras de herramientas.

### Título

El elemento más importante del título de ventana de una aplicación basada en un documento, es el nombre del documento abierto. Para otras aplicaciones, generalmente se usa el nombre de la aplicación.

Guías

- Use el Nombre de archivo como el título de la ventana para aplicaciones basadas en documentos. No use la ruta completa, ya que el nombre de archivo es más fácil para distinguir entre otros títulos de ventanas abiertas, por ejemplo en la lista de ventanas.

  Usar los nombres de documentos como títulos de ventanas

  Aplicación | Ejemplo de título de ventana
  --- | ---
  AbiWord | Mi reporte.abw
  Evolution | Bandeja de entrada
  Reproductor de música | U2 - Better Than the Real Thing

  Si la ruta es importante, por ejemplo, el usuario ha abierto dos documentos con el mismo nombre de carpetas diferentes en la misma aplicación, muestre la ruta completa en la barra de estado.

- Antes de guardar un documento por primera vez, establezca el título de la ventana a «Tipo de documento» sin guardar. Por ejemplo, Dibujo sin guardar, Hoja de cálculo sin guardar, o el más genérico Documento sin guardar.

- Cuando un documento tiene cambios pendientes, introduzca un asterisco (*) al comienzo del título de la ventana. Por ejemplo, *Dibujo sin guardar, *InformeAnual.

- Para aplicaciones no basadas en documentos use Nombre de la aplicación como título de la ventana.

  Usar nombres de aplicaciones como títulos de ventanas

  Aplicación | Título de la ventana
  --- | ---
  Diccionario | Diccionario
  Calculadora | Calculadora

- No ponga en el título de la ventana, números de versión, nombres de empresas ni otra información que no sea de uso inmediato para el usuario. Esto consume espacio y hace que los títulos en los espacios limitados como la lista de ventanas del sistema sean menos útiles, y añaden más texto que el usuario tiene que analizar para encontrar información útil. En un producto «beta», donde los números de versión son críticos para la información de errores, puede ser útil poner los números de versión, pero retírelos en las versiones estables. En su lugar, ponga la información de la versión del diálogo «Acerca de».

Aunque los nombres del documento son los más pertinentes para los usuarios, entendemos que los desarrolladores de la aplicación pueden querer incrementar el reconocimiento de su aplicación . Si planea incluir su nombre de aplicación en el título de la ventana primaria, use el siguiente formato: Nombre del documento - Nombre de la aplicación. Esto garantizará que el documento aparece en situaciones de espacio limitadas tales como la lista de ventanas del sistema.

No se recomienda incluir el nombre de la aplicación en el título de una aplicación basada en documentos.

Piense en nombrar ventanas en el contexto de la lista de ventanas del panel. En una pantalla típica con un número relativamente pequeño de ventanas abiertas, una ventana tendrá entre 20 y 30 caracteres de texto y un icono. Considere qué texto proporcionará las pistas más obvias para un usuario que busca una ventana determinada.

### Comandos de ventana

Cerrar, maximizar/restaurar, minimizar, enrollar/desenrollar

### Relación entre documentos y ventanas

#### Interfaz simple de documentos (ISD)

Una interfaz simple de documento coloca cada documento en su ventana primaria. Las cajas de herramientas y otras ventanas de utilidades se pueden compartir entre varios documentos ISD, pero cerrarlas no debe tener efecto en las ventanas de los documentos. Use ISD para su aplicación GNOME a menos que haya una razón convincente para no hacerlo.

Una aplicación ISD típica (Eye of GNOME)

Una aplicación ISD típica: el visor de imágenes usado para inspeccionar un icono

#### Interfaz de múltiples documentos (IMD)

Una interfaz de múltiples documentos presenta dos documentos en dos paneles o pestañas, en una sola ventana.

Una típica aplicación IMD (gedit) mostrando tres documentos abiertos en páginas en pestañas

Una aplicación IMD típica: gedit con tres documentos abiertos en la misma ventana

IMD ha heredado varios problemas inherentes de uso, por lo tanto su uso no se recomienda en aplicaciones. Es mejor abrir su propia barra de menú, barra de herramientas y barra de estado, o permitir que varias instancias de su aplicación se ejecuten de forma simultánea. En cualquier caso, esto deja al gestor de ventanas (actuando en las preferencias de usuario) en lugar de su aplicación, decidir cómo agrupar y presentar ventanas de documentos desde la misma aplicación.

#### Interfaz controlada de un solo documento (ICSD)

En una aplicación ISD, las ventanas de documentos se tratan como primarias. Por ejemplo, cuando todas las ventanas de documentos se han cerrado, la aplicación (incluyendo las ventanas de utilidad) sale también. En ICSD una ventana de utilidad se trata como una ventana primaria. Por ejemplo, al cerrar esta ventana de utilidad se cerrarán todas las ventanas de documentos y saldrá de la aplicación .

No se recomienda usar ICSD

ICSD suele utilizarse algunas veces porque las ventanas de documentos pueden ser demasiado pequeñas para tener barras de menú. Por lo general, este no es el caso de uso normal para la aplicación, pero sí representa una minoría significativa de caso. Por ejemplo, un editor de imágenes utilizado para editar elementos pequeños de página web por lo general resultará en ventanas pequeñas de documentos que no se ajustan a la barra de títulos.

Una mejor forma de abordar este problema es permitir a la barra de menú «contraerse» en un botón de desbordamiento, en la misma forma que funcionan las barras de herramientas cuando la ventana se reduce a por debajo de la anchura de la barra de herramientas. Esto permite ventanas pequeñas, y también da la oportunidad a las personas para que averigüen a dónde han ido sus menús.

Observe que si documentos muy pequeños son el caso de uso primario para su aplicación, debe considerar la búsqueda como un medio para evitar del todo las ventanas. Las ventanas no son una interfaz efectiva para ocuparse de grandes cantidades de elementos pequeños. Considere buscar un sistema de diseño automatizado o fijo para presentar los «documentos». Considere también si los documentos se utilizarán principalmente en una agrupación de nivel alto, en cuyo caso dicha agrupación podría convertirse en el documento en su lugar.

## Ventanas de utilidad

Las ventanas de utilidad, como las paletas y las cajas de herramientas, normalmente tienen bordes. No contienen una barra de menú, una barra de herramientas o una barra de estado.

Una ventana de utilidad no debe aparecer en la lista de ventanas del panel a menos que sea, o pueda ser la única ventana mostrada por una aplicación. De otro modo, la ventana de utilidad se debe elevar por encima de la aplicación cuando la propia ventana de la aplicación se seleccione en la lista de ventanas.

### Ventanas de aplicación instantánea

Para ventanas que permiten al usuario cambiar valores o configuraciones, como las propiedades y las ventanas de preferencias, actualice esos valores o configuraciones inmediatamente para reflejar los cambios hechos en la ventana. Esto se conoce como «aplicación instantánea». No obligue al usuario pulse un botón Aceptar o Aplicar para aplicar los cambios, a menos que:

- el cambio llevará más de un segundo en aplicarse, en cuyo caso aplicar el cambio inmediatamente podría hacer que el sistema parezca lento o que no esté respondiendo, o

- se deben aplicar los cambios en la ventana de forma simultánea para prevenir que el sistema entre potencialmente en un estado inestable. Por ejemplo, los cambios de servidor y proxy en una ventana de propiedades de red.

Si alguna de estas condiciones afectan únicamente a algunos de los controles en su ventana, organícelos en uno o más grupos, cada uno con su propio botón de Aplicar. Deje el resto de los controles como se aplican al instante.

Guías

- No intente validar o aplicar cambios causados por la edición de un control de campo de texto hasta que el usuario haya movido el foco a un control diferente en la ventana, o esta se cierre. Validar después de cada pulsación de tecla generalmente es molesto e innecesario. La excepción es si el campo solo acepta un número fijo de caracteres, como un código de color hexadecimal, valide y aplique el cambio tan pronto como se haya introducido ese número de caracteres.

- Cuando el usuario mueva el foco a un control diferente, no indique una entrada no válida mostrando una alerta o deshaciendo el cambio del usuario. Estos dos métodos son particularmente tediosos para los usuarios cuyo foco sigue al ratón, para quienes el foco puede dejar al control más seguido que para los usuarios que pulsan con el ratón para enfocar.

### Ventanas de aplicación explícitas

Si la mayoría de los controles en su ventana no son aptos para aplicarlos de inmediato, considere hacer la ventana «de aplicación explícita». Una ventana «de aplicación explícita» tiene tres botones en su caja de botones, más un botón de Ayuda opcional:

- Aplicar

  Aplica todos los ajustes en la ventana, pero no cierra la ventana en caso de que el usuario quiera cambiar de opinión.

- Cancelar

  Restablece todos los parámetros en la ventana a los que estaban en vigencia cuando la ventana estaba abierta. Nota: esto debe deshacer los efectos de todas las aplicaciones de Aplicar desde que se abrió la ventana, no solo la más reciente.

- Aceptar

  Aplica todos los ajustes en la ventana y cierra la ventana.

Botones en una ventana explícita de aplicar

Captura de pantalla mostrando las posiciones correctas de los botones «Ayuda», «Aplicar», «Cancelar», y «Aceptar» en un diálogo

### Botones predeterminados

Al diseñar una ventana de diálogo o herramienta, puede asignar la tecla Intro para activar un determinado botón en la ventana. GNOME indica este botón al usuario llevándolo a un extremo diferente a su alrededor. Por ejemplo, el botón de Ayuda en la .

Elija el botón predeterminado para la acción más probable, tal como una acción de confirmación o una acción que aplica cambios en una ventana de utilidad. No cree el botón predeterminado si dicha acción es irreversible, destructiva o de lo contrario inconveniente para el usuario. Si no existe un botón apropiado en su ventana, para designar como botón predeterminado, no establezca ninguno.

En particular, no se recomienda que el botón Cerrar sea el predeterminado en una ventana de aplicar de forma instantánea, ya que esto puede llevar a que los usuarios cierren la ventana accidentalmente antes de que hayan terminado de usarla.

### Ventanas de propiedades

Las ventanas de propiedades permiten al usuario ver y cambiar las características de un objeto tal como un documento, archivo, dibujo o lanzador de aplicaciones.

Ejemplo de una ventana de propiedades

Captura de pantalla mostrando la ventana «Propiedades de archivo» de Nautilus

Formato del título:

Propiedades de Nombre de objeto

Comandos de ventana:

Cerrar, minimizar, enrollar/desenrollar

Botones:

Ubique un botón Cerrar en la esquina inferior derecha. Se puede ubicar un botón Ayuda en la esquina inferior izquierda.

### Ventanas de preferencias

Ventanas de preferencias que permiten al usuario cambiar la forma en que se comporta o se muestra una aplicación

Ejemplo de una ventana de preferencias

Captura de pantalla mostrando las preferencias de Gnibbles

Formato del título:

Nombre de la aplicación Preferencias

Comandos de ventana:

Cerrar, minimizar, enrollar/desenrollar

Botones:

Ubique un botón Cerrar en la esquina inferior derecha. Se puede ubicar un botón Ayuda en la esquina inferior izquierda.

#### Personalizar tipografías y colores

Si su ventana de preferencias permite al usuario personalizar las tipografías o los colores, utilice la siguiente redacción y el siguiente diseño como una guía para estos controles:

Texto recomendado para sobreescribir los elementos del tema; reemplazar con una captura de pantalla.

    	(o) Usar tipografía del tema
    	(o) Usar esta tipografía: [ Selector de tipografías ]

    	(o) Usar los colores del tema
    	(o) Usar estos colores:
    		Fondo: [ selector de color ]
    		Primer plano: [ selector de color ]

Las palabras de los botones de radio deben ser más específicas cuando se necesite, por ejemplo, «Usar tipografía monoespaciada del tema» o «Usar color de fondo del tema».

### Cajas de herramientas

Una caja de herramientas proporciona acceso a un conjunto de acciones y alterna a través de un conjunto de botones pequeños, como botones de la barra de herramientas. Las cajas de herramientas pueden utilizarse para proporcionar un grupo de herramientas especializado para aumentar una barra de herramientas que contenga más elementos universales, tales como Guardar y Abrir. Una caja de herramientas individual compartirse entre varios documentos para ahorrar espacio de pantalla.

Ejemplo de caja de herramientas

Una captura de pantalla de una caja de herramientas con ocho botones ordenados en dos filas

Formato del título:

Las cajas de herramientas no tienen título

Comandos de ventana:

Cerrar, enrollar/desenrollar

Botones:

Las cajas de herramientas no tienen botones

Redimensionar:

Haga que las cajas de herramientas sean redimensionables, mediante valores discretos. En otras palabras, el usuario puede redimensionar la caja de herramientas el tamaño de uno, dos, tres, etc elementos, pero no el tamaño de un elemento y medio.

Guías

- Coloque botones en una caja de herramientas solo si no abren otra ventana.

- Las cajas de herramientas utilizadas para alternar entre modos que afectan la operación del ratón en el documento, tal como un conjunto de botones para elegir entre pincel, goma de borrar, modos de relleno en una aplicación de dibujo. Los botones que inician acciones tras pulsarlos (tales como el botón de guardar) se localizan mejor en las barras de herramientas.

- Asegúrese de que cerrar una barra de herramientas no cierra o altera cualquier otra ventana primaria con la que está asociada.

- No ubique cajas de herramientas en la lista de ventanas del sistema. Las cajas de herramientas siembre deben estar por encima de todos los botones primarios con los que están asociadas.

- Si todas las ventanas primarias asociadas con una caja de herramientas están cerradas o minimizadas, oculte también la caja de herramientas. Muestre la caja de herramientas de nuevo cuando una de las ventanas primarias se abre o restaura.

- Cree una caja de herramientas de dos elementos de anchura predeterminada, a menos que esté dividida en categorías. Cree cajas de herramientas por categorías para cuatro elementos de anchura.

#### Categorías de cajas de herramientas

Si bien las categorías no se ven tan bien como una caja de herramientas rellena homogéneamente con iconos bonitos, hacen una caja de herramientas grande y compleja más manejable. Elegir un icono pequeño entre más de quince elementos es una tarea difícil. Además, las categorías le permiten a los usuarios esconder conjuntos de herramientas que no están relacionados con su tarea actual.

Una caja de herramientas grande dividida en categorías

Guías

- Divida las cajas de herramientas con más de dieciséis elementos en categorías. El tamaño óptimo para una categoría está entre cuatro y diez elementos.

- Dé a cada categoría una etiqueta (con el título en mayúscula) y una flecha para contraerla. Pulsar en la etiqueta o en la flecha cambia la categoría entre contraída y expandida.

## 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.

Ejemplo de alerta

Un ejemplo de una alerta, mostrando el texto «Tiene una cita con George Wells en 15 minutos», con un botón «Aceptar» para cerrar la ventana.

Formato del tí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.

### 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.

Ubicación de texto primario y secundario

Captura de pantalla de una alerta mostrando un ejemplo de texto primario en negrita, y texto secundario en una tipografía más pequeña debajo.

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.

### 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.

Ordenación de botones y ubicación de alertas

Captura de pantalla mostrando el orden y ubicación de los botones de alerta: «Ayuda» abajo a la izquierda, y «Alternativo», «Cancelar» y «Afirmativo» abajo a la derecha.

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 Sí 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.

### 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.

Espaciado dentro de una alerta

Diagrama mostrando el espaciado correcto dentro de botones y controles en una ventana de alerta. Esto se detalla en la guía a continuación.

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 ), 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:

Propiedades para el GtkDialog

Propiedad | Valor
--- | ---
Título | (ninguna)
Border Width | 6
Type | Top Level
Resizable | No
Has Separator | No

Propiedades para la GtkVBox (incluidas en el diálogo de manera predeterminada)

Propiedad | Valor
--- | ---
Spacing | 12

Propiedades para GtkHBox

Propiedad | Valor
--- | ---
Spacing | 12
Border Width | 6

Propiedades para GtkImage

Propiedad | Valor
--- | ---
Y Align | 0.00
Icon Size | Dialog

Propiedades para GtkLabel

Propiedad | Valor
--- | ---
Usar marcado | Sí
Wrap Text | Sí
Y Align | 0.00

### 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.

Una alerta de información

Una alerta de informació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

### 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.

Una 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

### 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.

Una alerta de confirmación

Una alerta de confirmació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

#### 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.

Una alerta de confirmación de guardado

Alerta de confirmación de guardado: «[ Salir sin guardar ] [ Cancelar ] [[ Guardar ]]»

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.

### 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.

Una 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

## Ventanas de progreso

Se puede usar una ventana de progreso para proporcionar información durante una operación que dura más de un segundo. Consulte la para obtener más detalles sobre el uso adecuado de las barras de progreso.

Una ventana de progreso siempre debe aparecer como una ventana independiente en una lista de ventanas. Si el progreso de una tarea hace una ventana temporalmente inutilizable, no presente una ventana de progreso modal frente a ella. En su lugar, presente el progreso en algún lugar de la ventana original, desactivando todos sus otros elementos temporalmente. Esto ayuda a reducir el desorden visual.

Ejemplo de una ventana de progreso

Un ejemplo de una ventana de progreso

Formato del título

Las ventanas de progreso deben tener un título que represente la operación completa, por ejemplo: Copiando archivos, Instalando, o Llamando. Al igual que con otros títulos de ventanas, no termine los títulos de las ventanas de progreso con puntos suspensivos.

Redimensionando

Las ventanas de progreso deben ser redimensionables si contienen información no estática que el usuario pueda querer copiar (por ejemplo, el URL de origen en una ventana de descarga). Si no es así, no deben ser redimensionables.

Guías

- A menudo es mejor usar la barra de progreso que tienen muchas barras de estado de la ventana principal en lugar de una ventana de progreso. Consulte la para obtener más detalles o para elegir entre las dos.

- Las ventanas de progreso deben usar un texto primario y secundario como una alerta. Consulte la .

- El texto de la barra de progreso deber proporcionar una idea de cuánto trabajo se ha completado. Es mejor proporcionar información específica que porcentajes. Por ejemplo, «rotadas 13 de 19 imágenes» o «descargados 12.1 de 30 MB» en lugar de «13% completado».

- Si es posible, también debe incluirse una estimación del tiempo restante hasta que se haya completado la operación en el texto de la barra de progreso. Indique que el «tiempo restante» es estimado con la palabra «aproximadamente».

- Inmediatamente debajo de la barra de progreso, ubique texto en cursiva indicando la suboperación ejecutándose. Esta puede ser un paso de una secuencia, «Contactando a la torre de control para aterrizar», o puede ser el objeto actual en una operación por lotes, como «Rotando MonaLisa.png», «Rotando NocheEstrellada.png».

- Si la operación en progreso es potencialmente peligrosa (destructiva, costosa, etc.) o consume gran parte de un recurso limitado durante más de diez segundos (ancho de banda, disco duro, CPU, etc.), considere agregar un botón interruptor Pausar a la derecha del botón Cancelar. Cuando se pause, agréguele al texto de la suboperación actual en cursiva «(Pausado)». Esto le permitirá a los usuarios realizar tareas importantes que requieran ese recurso, o darles tiempo para pensar si quieren proseguir con una operación peligrosa que desencadenaron inadvertidamente.

Una ventana de progreso para una operación de copia de un archivo

Una ventana de progreso para una operación de copia

### Ventanas de listas de comprobación

Ocasionalmente un procedimiento se compone de una serie de acciones realizables por el usuario. En estos casos, particularmente cuando se quiere que el usuario se familiarice con las acciones involucradas en un procedimiento, se pueden usar ventanas de listas de comprobación.

Asistente de configuración del cortafuegos

Un asistente de configuración de cortafuegos personal podría instalar el paquete del cortafuegos, añadir sus entradas en /etc/xinetd.conf, reiniciar el superdemonio de Internet, y configurar el navegador web del usuario para que opere a través del cortafuegos. Sería una buena idea exponer la serie de acciones involucradas en configurar el cortafuegos al usuario para incrementar las posibilidades de que pueda hacer modificaciones más tarde, si lo desea.

Una ventana de lista de comprobación de ejemplo (lista para empezar)

Una ventana de lista de comprobación

Un ejemplo de ventana de lista de comprobación (en progreso)

Una ventana de lista de comprobación

Un ejemplo de ventana de lista de comprobación (terminada)

Una ventana de lista de comprobación

Guías

- Si saber la serie de pasos en una operación no ayuda al usuario, simplemente use una ventana de progreso normal. Recuerde que probablemente está más interesado en la información que la mayoría de los usuarios, mucho de los cuales encontrarán pasos técnicos confusos en lugar de útiles.

- A diferencia de las ventanas de progreso normales, las ventanas de lista de comprobación no deben cerrarse automáticamente cuando la operación se haya completado y deben requerir permiso del usuario antes de empezar. Esto es porque uno de sus propósitos es informar al usuario de los pasos de una operación.

- La barra de progreso indica progreso en toda la operación, no en cada paso. Si bien esto es más difícil de programar, es la información más útil para el usuario. Simplemente estime cuánto tiempo toma cada paso en relación a a los otros y de acuerdo a esto asígnele a cada uno una proporción fija de la barra de progreso.

- No use una ventana de lista de comprobación para una serie de pasos programáticos internos, use una ventana de progreso regular. Por ejemplo, «Conectando al servidor de correo», «Autenticando con el servidor de correo», «Descargando mensajes», «Desconectando» no sería una serie de pasos apropiada para una ventana de lista de comprobación, sino para suboperaciones de una ventana de progreso regular.

## Diálogos

Un diálogo proporciona un intercambio de información, o diálogo, entre el usuario y la aplicación. Use un diálogo para obtener información adicional del usuario que se necesite para llevar a cabo una orden o tarea particular.

Un diálogo no debe aparecer en la lista de ventanas del panel. Cualquier diálogo abierto se debe elevar por encima de la aplicación cuando su ventana se seleccione en la lista de ventanas.

Ejemplo de diálogo

Ejemplo de diálogo con pestañas: el diálogo de impresión de GNOME

Formato del título:

Nombre del comando que abrió el diálogo (sin puntos suspensivos)

Comandos de ventana:

Minimizar, enrollar/desenrollar

Botones:

Siga la guía para los Botones de alerta, consulte la .

Su diálogo puede especificar un botón predeterminado, que se activa cuando el usuario pulsa la tecla Intro. Consulte la para una guía sobre elegir un botón predeterminado adecuado.

### Botones adicionales

Puede incluir otros botones en el área principal de botones de un diálogo además del afirmativo y Cancelar, pero más de uno o dos harán que el diálogo aparezca complicado y difícil de usar. Como con cualquier otro botón, mantenga las etiquetas tan concisas como sea posible para minimizar este efecto.

Guías

- Ponga botones que afecten a todo el diálogo en la fila del área de botones principal en la parte inferior del diálogo, a la izquierda del botón Cancelar.

- Ponga botones que afecten solo uno o algunos controles junto a sus controles asociados. Por ejemplo, ponga un botón Examinar… en el borde derecho del campo de texto que rellena.

### Distribución

Una distribución limpia y lógica ayuda al usuario a entender rápidamente qué información se le requiere.

Guías

- Ordene los controles en su diálogo en la dirección en la que la gente lee. En configuraciones regionales del oeste, es generalmente de izquierda a derecha, de arriba a abajo. Ubique los controles principales con los que el usuario interactuará tan cerca a la esquina superior izquierda como sea posible. Use la misma forma de ordenar controles dentro de grupos en el diálogo, y para especificar el orden en el que la tecla Tab los navega.

- Cuando abra un diálogo, proporcione el foco inicial del teclado al componente con el que espera que los usuarios operen primero. Este foco es especialmente importante para usuarios que deben usar un teclado para navegar por su aplicación.

- Proporcione y muestre valores predeterminados razonables para todos los controles en su diálogo como sea posible cuando se abra, para que el usuario no tenga que generar la información desde cero. Estos valores predeterminados pueden venir de la configuración del sistema (por ejemplo, nombre del servidor o dirección IP), o de información que el usuario introdujo previamente en esta u otra aplicación (como direcciones de correo-e o proxy de red).

Consulte la para obtener información más detallada sobre cómo colocar controles en los diálogos.

Consulte la para obtener información sobre cómo usar controles en pestañas en los diálogos.

### Diálogos comunes

Las bibliotecas de GNOME y GTK+ proporcionan diálogos estándar para muchas tareas comunes, incluyendo abrir y guardar archivos, elegir tipografías y colores, e imprimir. Úselos siempre que el usuario esté realizando una de estas tareas. Puede modificarlos para reflejar las necesidades de su aplicación particular (por ejemplo, añadiendo botones de previsualización Reproducir y Detener al diálogo «Abrir archivo» en una aplicación de sonido), pero no cambie o elimine demasiadas características como para hacerlos irreconocibles.

## Asistentes

Un asistente es una ventana secundaria que guía al usuario a través de una operación dividiéndola en pasos secuenciales. Los asistentes son útiles para hacer operaciones complejas menos intimidantes, ya que restringen la información que el usuario ve en cualquier momento.

Dado que los asistentes proporcionan un número relativamente pequeño de controles en la pantalla en todo momento, tienen espacio suficiente para documentación en línea. Por lo tanto, no incluya un botón Ayuda en una ventana asistente. Si no puede hacer una operación suficientemente clara en un asistente sin recurrir a un botón Ayuda, debe simplificarla más.

Assistants do have major downsides. After using an assistant it is often hard to figure out where the individual settings aggregated into the assistant are stored. Often people will resort to re-running the assistant, re-entering many settings that they don't want to change. Why do they need to re-enter anything? The assistant should be populated with the exisiting settings whenever it is run.

Los asistentes se usan a menudo en situaciones en las que una mejor solución sería simplificar, o incluso automatizar, el proceso. Antes de usar un asistente para conducir a los usuarios a través de una operación compleja, considere si puede simplificarse fundamentalmente para que no sea necesario.

Comandos de ventana:

Cerrar, minimizar/restaurar, enrollar/desenrrollar

### Página de introducción

La primera página le proporciona al usuario una «vista general». Ponga el título del asistente en la barra de título de la ventana y en su área de título, junto con una imagen opcional. Debajo de esto, explique la finalidad del asistente y, si no es obvio, dónde podrá encontrar el usuario la información que se le pedirá.

Formato del título:

Título del asistente

Botones:

Cancelar, Adelante

Ejemplo de la primera página de un asistente

Captura de pantalla que muestra la primera página de un asistente para crear una cuenta de correo-e nueva

### Páginas de contenido

Las páginas de contenido contienen la configuración del asistente en sí. Resuma el tipo de configuración presente en cada página de contenido en su área de título. Por ejemplo, Servidor de correo-e.

Formato del título:

Título del asistente - (Página actual de Páginas en total)

Botones:

Cancelar, Atrás, Adelante

### Última página

La última página debería resumir las configuraciones que el asistente ha cambiado y cómo puede el usuario modificarlas más tarde.

Formato del título:

Terminar es Título del asistente

Botones:

Cancelar, Atrás, Terminar