# Janelas

## Partes da janela e interação com o sistema

### Títulos

Dê a cada janela um título (com exceção de alertas e caixas de ferramenta). Um bom título de janela contém a informação que é relevante ao usuário, e distingue uma janela particular de outras janelas abertas. Omita informação que não auxilia nesta seleção, por exemplo o número da versão do aplicativo ou o nome do vendedor.

#### Exemplo de um título de janela

Captura de tela mostrando uma barra de título de uma janela com título "Parts of Windows and System Interaction - Mozilla Firefox"

Veja a descrição de cada tipo particular de janela para formatos do título.

### Comandos de bordas e janelas

A maioria das janelas possuem bordas, exceto algumas janelas perfiladas ou rasgadas. Não tente desenhar suas próprias bordas, em vez disso forneça dicas ao gerenciador de janelas para o tipo de borda desejada.

Comandos de janela diferentes são apropriados para diferentes tipos de janela. Veja a descrição de cada tipo particular de janela para uma lista dos comandos de janela apropriados. Esses são os comandos de janelas possíveis:

- #### Fechar

  Fecha a janela. Sempre desenhe isso como um botão na borda da janela quando for relevante ao tipo de janela.

- #### Maximizar

  Faz com que a janela use todo o espaço inutilizado da tela.

- #### Minimizar

  Faz com que a janela seja temporariamente escondida. Continuará a aparecer na lista de janelas da área de trabalho.

- #### Rolar/desenrolar

  Mostra apenas a barra de título da janela, como se tivesse sido "rolada"

### Modalidade

Uma janela não modal não restringe a interação do usuário com outras janelas abertas na área de trabalho de maneira alguma. Usar janelas não modais dá ao usuário flexibilidade máxima para executar tarefas dentro de seu aplicativo em qualquer ordem e de quaisquer meios que escolher.

Uma janela modal de aplicativo, enquanto estiver aberta, previne o usuário de interagir com outras janelas no mesmo aplicativo.

Uma janela modal de sistema, enquanto estiver aberta, previne o usuário de interagir com qualquer outra janela em qualquer aplicativo, incluindo a própria área de trabalho.

#### Diretrizes

- Use uma janela modal de aplicativo somente se permitir a interação com outras partes do aplicativo enquanto a janela estiver aberta puder causar perda de dados ou outros problemas sérios. Forneça uma maneira óbvia de sair da janela modal, como um botão cancelar em um alerta.

- Não use janelas modais de sistema.

### Foco

O foco é o meio pelo qual o usuário designa qual janela deve receber informações do teclado, mouse ou outro dispositivo de entrada. Caso esteja usando um leitor de tela ou alguma tecnologia assistiva similar, o foco pode também designar a janela que o usuário deseja receber informações. A janela focada é considerada a janela que o usuário está atualmente "trabalhando".

Certifique-se que seu aplicativo funciona corretamente com os três mecanismos diferentes pelos quais as janelas podem receber foco no GNOME:

- #### Clicar para focar

  A janela é focada clicando nela.

- #### Apontar para focar

  A janela é focada movendo o ponteiro do mouse sobre ela. Também conhecido como "foco desleixado".

- #### Foco do teclado

  A janela é focada usando um atalho do teclado como Alt Tab.

#### Restrições especiais para apontar para focar.

Note que o apontar-para-focar coloca uma série de restrições em aplicativos GNOME que não estão presentes em ambientes como MacOS ou Windows. Por exemplo, janelas de utilidade compartilhadas entre janelas de múltiplos documentos, como a caixa de ferramentas do editor de imagens GIMP, não podem ser sensíveis ao contexto - isto é, não podem iniciar uma ação como Salvar no documento atual. Isto porque enquanto estiver movendo o ponteiro do documento atual para a janela de utilidade, o usuário pode inadvertidamente passar o ponteiro sobre uma janela diferente, mudando o foco e possivelmente salvando o documento errado.

### Exibindo e ocultando janelas

Como seu aplicativo exibe e oculta janelas pode afetar muito a percepção do usuário de seu aplicativo, particularmente sobre sua performance.

#### Diretrizes

- Sempre exiba uma janela o mais rápido possível, mas tenha certeza de que sua janela tenha o tamanho correto antes de mostrá-la. Redimensionar uma janela depois de exibi-la é desorientador e dá um aspecto rude ao seu aplicativo.

- Caso uma janela tenha uma informação que demore alguns segundos para computar ou exibir, é geralmente melhor não carregá-la completamente antes de exibir a janela. Por exemplo, uma janela contendo uma grande área de texto pode ser exibida rapidamente, e então o texto pode ser preenchido posteriormente (desde que isso não resulte no redimensionamento da janela). Isso fará com que seu aplicativo pareça mais responsivo do que se você não tivesse exibido a janela até que seu conteúdo estivesse completo.

- Oculte uma janela o mais rápido possível depois que for fechada. A não ser que um alerta seja exibido, imediatamente oculte a janela na qual o usuário tenha fechado clicando no botão Fechar na borda da janela - seu aplicativo pode executar alguma operação de limpeza posterior. Além de fazer com que o sistema pareça lento, não fazer isso pode fazer com que o gerenciador de janelas pense que o aplicativo não está respondendo, e exiba um alerta desnecessário ao usuário.

## Janelas primárias

Uma janela primária geralmente apresenta uma visualização das informações do usuário, como um documento de texto em um processador de textos, uma imagem em um programa de desenhos, ou cálculos em uma calculadora ou uma planilha. Também pode ser uma visualização de algo mais abstrato, como um jogo. Uma única instância de um aplicativo pode ter mais de uma janela primária, e mais de um tipo de janela primária.

Uma janela primária é sempre exibida na lista de janelas do painel.

### Uma janela primária típica (gedit)

Uma janela primária típica: uma visão de documento do gedit

Uma janela primária normalmente tem uma borda, uma barra de menu, uma barra de status, e também pode conter uma ou mais barras de ferramenta.

### Título

O elemento mais importante do título da janela de um aplicativo baseado em documentos é o nome do documento aberto. Para outros aplicativos, é geralmente o nome do aplicativo.

#### Diretrizes

- Use o nome do arquivo como o título da janela para aplicativos baseados em documento. Não use o caminho completo, já que o nome do arquivo sozinho é mais fácil de distinguir entre outros títulos de janela, por exemplo na lista de janelas.

  #### Usando nomes do documetos como título da janela

  Aplicativo | Exemplo de título de janela
  --- | ---
  AbiWord | Meu relatório.abw
  Evolution | Caixa de entrada
  Reprodutor de músicas | U2 - Better Than the Real Thing

  Caso o caminho do arquivo seja importante, por exemplo quando o usuário tem dois documentos com o mesmo nome abertos de diretórios diferentes no mesmo aplicativo, mostre o caminho completo na barra de status.

- Antes que um novo documento seja salvo pela primeira vez, defina o título da janela para <Tipo do documento> não salvo. Por exemplo, Desenho não salvo, Planilha não salva, ou genericamente Documento não salvo.

- Quando um documento tem mudanças pendentes, coloque um asterisco (*) no começo do título da janela. Por exemplo, *Desenho não salvo, *RelatórioAnual.

- Para aplicativos que não são baseados em documentos, use o nome do aplicativo como título da janela.

  #### Usando nomes de aplicativos como título da janela

  Aplicativo | Título da janela
  --- | ---
  Dicionário | Dicionário
  Calculadora | Calculadora

- Não coloque números de versão, nomes de companhia, ou outra informação que não seja de uso imediato ao usuário no título da janela. Isto consome espaço, fazendo com que os títulos em espaços limitados como a lista de janelas do sistema menos úteis, e adiciona mais texto para o usuário ter que escanear para achar informação útil. Em um produto "beta", onde o número da versão é critico para informações de erros, colocar números de versão pode ser útil, mas remova-as das versões estáveis. Em vez disso, coloque a informação da versão no diálogo Sobre.

Enquanto nomes de documentos são mais adequados aos usuários, nós entendemos que desenvolvedores desejem aumentar o reconhecimento de seu aplicativo. Se você planeja incluir o nome do seu aplicativo no título da janela primária, use o seguinte formato: Nome do documento - Nome do aplicativo. Isso garante que o nome do documento apareça em situações de espaço limitado, como a lista de janelas do sistema.

Incluir o nome do aplicativo no título de um aplicativo baseado em documentos não é recomendado.

Pense sobre nomear janelas no contexto da lista de janelas do painel. Em uma tela típica com um número relativamente pequeno de janelas abertas, uma janela tem 20-30 caracteres de texto e um ícone. Considere qual texto pode dar as pistas mais imediatamente obvias para um usuário olhando para uma janela em particular.

### Comandos de janela

Fechar, maximizar/restaurar, minimizar, enrolar/desenrolar

### Relação entre documentos e janelas

#### Interface de documento único (IDU)

Uma interface de documento único coloca cada documento em sua janela primária. Caixas de ferramentas e outras janelas de utilidade podem ser compartilhadas entre múltiplos documentos IDU, mas fechá-los não deve ter efeito sobre as janelas de documento. Use IDU em seus aplicativos GNOME a não ser que tenha um motivo razoável para não fazê-lo.

##### Um típico aplicativo IDU (Visualizador de imagens)

Um típico aplicativo IDU: Visualizador de imagens sendo usado para inspecionar um ícone.

#### Interface de múltiplos documentos (IMD)

Uma interface de múltiplos documentos apresenta um visualizador em painéis, abas ou similar de dois documentos em uma única janela.

##### Um típico aplicativo IMD (gedit) exibindo três documentos abertos em páginas de abas.

Um típico aplicativo IMD: gedit com três documentos abertos na mesma janela.

IMD herda vários problemas de usabilidade, e por isso seu uso é desencorajado. É melhor abrir um documento em uma janela primária, com sua própria barra de menu, de ferramenta e de status, ou permitir múltiplas instâncias de seu aplicativo serem executadas simultaneamente. Em ambos os casos, isso deixa para o gerenciador de janelas (que age a partir das preferências do usuário) ao invés do seu aplicativo decidir como agrupar e apresentar janelas de documento do mesmo aplicativo.

#### Interface controlada de documento único (ICDU)

Em um típico aplicativo IDU, janelas de documentos são tratadas como primárias. Por exemplo, quanto todos os documentos tiverem sido fechados, o aplicativo (incluindo janelas de utilidade) também fecha. Em uma ICDU, uma janela de utilidades é tratada como a janela primária. Por exemplo, fechar a janela de utilidades irá fechar todos os documentos e sair do aplicativo.

Usar ICDU não é recomendado

Uma ICDU é ocasionalmente usada porque janelas de documento podem ser muito pequenas para possuírem barras de menu. Tipicamente esse não é o caso de uso normal para o aplicativo, mas representa um caso de uso significativamente minoritário. Por exemplo, um editor de imagens sendo usado para editar pequenos elementos de páginas da web resulta em várias pequenas janelas de documento que não podem acomodar uma barra de título.

Uma maneira melhor de resolver este problema é permitir que barras de menu "recolham" em um botão de estouro, do mesmo modo que barras de ferramentas operam quando a janela diminui para menos que a largura da barra de ferramentas. Isso permite pequenas janelas, mas também fornece uma oportunidade para que as pessoas descubram para onde seus menus foram.

Note que, caso documentos muito pequenos forem o caso de uso primário do seu aplicativo, considere encontrar um meio de evitar janelas completamente. Janelas não são interfaces efetivas para lidar com um número grande de pequenos itens. Considere buscar um sistema de layout fixo/automatizado para apresentar os "documentos". Também considere se os "documentos" vão ser usados primariamente em um agrupamento de nível mais alto, em cujo caso que o grupo se torna o documento.

## Janelas de utilidade

Janelas de utilidade, como paletas e caixas de ferramenta, normalmente tem bordas. Elas não contém uma barra de menu, de ferramenta ou de status.

Uma janela de utilidade não deve aparecer na lista de janelas do painel a não ser que, ou que possa ser, a única janela exibida pelo aplicativo. Caso contrário, a janela de utilidades deve ser elevada para frente do aplicativo quando a janela do aplicativo é selecionada a partir da lista de janelas.

### Janelas de aplicação instantânea

Para janelas que permitem que o usuário mude valores e preferências, como janelas de preferências e propriedades, atualize esses valores ou configurações imediatamente para refletir as mudanças feitas na janela. Isso é conhecido como "aplicação instantânea". Não faça o usuário pressionar um botão OK ou Aplicar para fazer as mudanças acontecerem, a não ser caso:

- a mudança irá demorar mais que um segundo para ser aplicada, no caso em que aplicar as mudanças imediatamente pode fazer o sistema ficar lento ou não responsivo, ou

- as mudanças na janela devem ser aplicadas simultaneamente para prevenir o sistema de entrar em um estado potencialmente instável. Por exemplo, os campos nome de máquina e proxy em uma janela de propriedades.

Caso ambas as condições afetem apenas alguns poucos controles em sua janela, organize esses controles juntos em um ou mais grupos, cada um com seu próprio botão Aplicar. Deixe o resto dos controles como aplicação instantânea.

#### Diretrizes

- Não tente validar ou aplicar mudanças causadas por edição de um campo de texto até que o usuário tenha movido o foco para um controle diferente na janela, ou que a janela tenha sido fechada. Validar após cada pressionamento de tecla é geralmente irritante e desnecessário. Exceção: caso o campo aceite apenas um número fixo de caracteres, como um código de cor hexadecimal, valide e aplique a mudança tão logo o número de caracteres tenha sido digitado.

- Quando o usuário move o foco para um controle diferente, não indique uma entrada inválida exibindo um alerta ou desfazendo a mudança do usuário. Ambos os métodos são particularmente disruptivos para usuários em que o foco segue o mouse, para os quais o foco pode deixar o controle com maior frequência que acontece com os usuários em que o foco segue o clique.

### Janelas de aplicação explícita

Caso a maioria dos controles em sua janela não são adequados para aplicação instantânea, considere fazer com que toda a janela seja de "aplicação explícita". Uma janela de aplicação explícita tem estes três botões em sua caixa de botões, e um botão opcional Ajuda:

- #### Aplicar

  Aplica todas as configurações da janela, mas não fecha a janela caso o usuário queira mudar de ideia.

- #### Cancelar

  Reinicia todas as configurações da janela para aquelas que estavam em vigor quando a janela estava aberta. Nota: isto deve desfazer os efeitos de todas as aplicações do botão Aplicar desde que a janela foi aberta, não apenas o mais recente.

- #### OK

  Aplica todas as configurações da janela, e fecha a janela.

#### Botões em uma janela de aplicação explícita

Captura de tela mostrando o posicionamento correto dos botões Ajuda, Aplicar, Cancelar e OK em um diálogo

### Botões padrão

Quando projetar um diálogo ou uma janela de utilidade, você pode atribuir a tecla Enter para ativar um botão particular na janela. O GNOME indica esse botão ao usuário desenhando uma borda diferente em torno dele. Por exemplo, o botão Ajuda em .

Escolha o botão padrão para ser a mais provável ação, como uma ação de confirmação ou uma ação que aplique as mudanças em uma janela de utilidade. Não faça um botão o padrão caso a ação seja irreversível, destrutiva ou inconveniente para o usuário. Caso não haja um botão apropriado em sua janela, para designá-lo como padrão, não estabeleça um.

Em particular, é atualmente não recomendado fazer o botão Fechar o padrão em uma janela de aplicação instantânea, já que isso pode fazer com que os usuários fechem a janela acidentalmente antes de terminar de usá-la.

### Janelas de propriedade

Janelas de propriedade permitem que o usuário visualize e modifique as características de um objeto como um documento, arquivo, desenho ou lançador de aplicativo.

#### Exemplo de uma janela de propriedades

Captura de tela mostrando a janela "propriedades do arquivo" do Nautilus

#### Formato de título:

Propriedades do nome do objeto

#### Comandos de janela:

Fechar, minimizar, enrolar/desenrolar

#### Botões:

Coloque um botão Fechar no canto inferior direito. Um botão Ajuda pode ser colocado no canto inferior esquerdo.

### Janelas de preferências

Janelas de preferências permitem que o usuário mude a maneira que um aplicativo se parece ou se comporta.

#### Exemplo de uma janela de preferências

Captura de tela mostrando a janela de preferências do Gnibbles

#### Formato de título:

Preferências do nome do aplicativo

#### Comandos de janela:

Fechar, minimizar, enrolar/desenrolar

#### Botões:

Coloque um botão Fechar no canto inferior direito. Um botão Ajuda pode ser colocado no canto inferior esquerdo.

#### Personalizando fontes e cores

Caso sua janela de preferências permita que o usuário personalize fontes e cores, use o seguinte estilo de redação e layout como guias para esses controles:

##### Estilo de redação recomendado para sobrescrever elementos do tema - substitua por captura de tela

    	(o) Usar fonte do tema
    	(o) Usar esta fonte: [Seletor de fonte]

    	(o) Usar cores do tema
    	(o) Usar estas cores:
    		Plano de fundo: [ seletor de cores ]
    		Primeiro plano: [ seletor de cores ]

O estilo de redação de botões de opção podem ser mais específicos onde for necessário, por exemplo, "Usar fonte monoespaçada do tema", ou "Usar cor de fundo do tema".

### Caixas de ferramenta

Uma caixa de ferramenta fornece acesso conveniente à um conjunto de ações e alternâncias por meio de um conjunto de pequenos botões com estilo de barra de ferramentas. Caixas de ferramentas podem ser usadas para fornecer um grupo específico de ferramentas para acrescentar a uma barra de ferramentas que contém itens mais universais, como Salvar e Abrir. Uma única caixa de ferramentas pode ser compartilhada entre múltiplos documentos para economizar espaço na tela;

#### Exemplo de uma caixa de ferramentas

Uma captura de tela de uma caixa de ferramentas com oito botões organizados em duas linhas

#### Formato de título:

Caixas de ferramenta não têm título

#### Comandos de janela:

Fechar, enrolar/desenrolar

#### Botões:

Caixas de ferramenta não têm botões

#### Redimensionamento:

Faça com que as caixas de ferramenta sejam redimensionáveis, mas apenas redimensione discretamente pela largura dos itens da caixa de ferramentas. Em outras palavras, o usuário pode redimensionar a caixa de ferramentas para a largura de um item, dois itens, três itens, etc, mas não para um item e meio.

#### Diretrizes

- Coloque na caixa de ferramentas apenas botões que não abram outras janelas.

- Caixas de ferramentas são melhores usados para botões de alternância modais que afetam a operação do mouse no documento, como um conjunto de botões para escolher entre pincel, borracha e modos de preenchimento em um aplicativo de desenho. Botões que iniciam ações ao clique (como um botão de salvar) são melhor posicionados em barras de ferramentas.

- Assegure-se que fechar a caixa de ferramentas não fechará ou de outro modo alterará qualquer outra janela primária com a qual esteja associada.

- Não coloque caixas de ferramentas na lista de janelas do sistema. Caixas de ferramentas devem sempre ficar abaixo de todas as janelas primárias as quais estão associadas.

- Caso todas as janelas primárias associadas com a caixa de ferramentas estiverem fechadas ou minimizadas, esconda a caixa de ferramentas também. Exiba-a novamente quando uma das janelas primárias for aberta ou restaurada.

- Faça a caixa de ferramentas com dois itens de largura por padrão, a não ser que seja dividida em categorias. Faça caixas de ferramentas categorizadas com quatro itens de largura por padrão.

#### Categorias de caixa de ferramentas

Enquanto que categorias possam não ser tão visualmente atraentes quanto caixas de ferramentas homogêneas preenchidas com belos ícones, elas fazem com que uma caixa de ferramentas desajeitada e grande seja mais gerenciável. Escolher um ícone pequeno dentre quinze outros itens é uma tarefa difícil. Adicionalmente, categorias permitem que o usuário esconda conjuntos de itens que não são relevantes à sua tarefa atual.

##### Uma caixa de ferramentas larga dividida em categorias

##### Diretrizes

- Divida caixas de ferramentas com mais de dezesseis itens em categorias. O melhor tamanho para uma categoria é entre quatro e dez itens.

- Dê a cada categoria uma etiqueta (em capitalização de título) e uma seta de colapso. Clicar na etiqueta ou na seta alterna a categoria entre os estados colapsado e não colapsado.

## Alertas

Uma alerta fornece informações sobre o estado do sistema do aplicativo, ou pede por informações essenciais sobre como proceder com uma tarefa em particular. É distinto de outros tipos de janela já que não é requisitado diretamente pelo usuário, e geralmente contém uma mensagem ou questão ao invés de controles editáveis. Visto que alertas são uma intrusão indesejável no trabalho do usuário, não os use exceto onde necessário para evitar perdas de dados em potencial ou outros problemas sérios.

Um alerta tem bordas similares às de um diálogo, e é modal.

Um alerta não deve aparecer na lista de janelas do painel a não ser que seja, ou que possa ser, a única janela exibida pelo aplicativo. Por exemplo, um alerta lembrete de compromisso pode ser exibido após a janela principal do aplicativo de calendário ter sido fechada.

Caso contrário, um alerta deve ser destacado sobre o aplicativo quando a janela do aplicativo tiver sido selecionada da lista de janelas.

### Exemplo de um alerta

Exemplo de um alerta exibindo o texto "You have an appointment with George Wells in 15 minutes", com um botão OK para dispersar a janela.

### Formato do título

Janelas de alerta não tem títulos, já que o título duplicaria desnecessariamente o texto primário do alerta. Desta forma, usuários podem ler e responder a alertas mais rapidamente já que há menos ruído visual e texto confuso.

### Redimensionar

Janelas de alerta não são redimensionáveis. Caso o usuário precise redimensionar seu alerta, o texto provavelmente não é conciso o suficiente.

### Comandos de janela:

Nenhum

### Alerta devem ficar sobre seus parentes.

Alertas não aparecem na lista de janelas do sistema. Consequentemente, assegure-se que alertas fiquem sobre suas janelas de origem. De outra forma, usuário certamente perderão o alerta e acharão seu aplicativo não responsivo por nenhuma razão aparente. Janelas modais devem sempre ficar na frente da(s) janela(s) que bloqueiam.

### Textos de alerta

Um alerta pode conter tanto texto primário como secundário. O texto primário resume a situação. O texto secundário fornece informação adicional.

Faça com que tanto o texto primário quanto o secundário sejam selecionáveis. Isso facilita para o usuário copiar e colar o texto em outra janela, como uma mensagem de e-mail.

#### Localização do texto primário e secundário

Captura de tela de um alerta exibindo um exemplo de texto primário em negrito, e secundário em uma fonte menor abaixo.

#### Texto primário

O texto primário fornece ao usuário uma sentença que resume a informação ou ação sugerida. Esse resumo deve conter concisamente os detalhes essenciais do problema ou sugestão. Todo alerta tem um texto primário, exibido em negrito em fonte levemente maior que o padrão. O texto primário é pontuado no estilo 'manchete de jornal', isto é, não tem ponto final, mas pode conter um ponto de interrogação no final.

Indique o texto primário com a marcação pango:

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

#### Texto secundário

Texto secundário fornece uma descrição mais profunda sobre o problema e a ação sugerida, incluindo possíveis efeitos colaterais. Texto secundário pode também fornecer informações que poderão ajudar o usuário a fazer uma decisão informada. Na maior parte das situações, o usuário deve necessitar apenas do texto primário para fazer uma decisão rápida, mas pode ler o texto secundário caso esteja inseguro do curso da ação, ou precise de detalhes extras. Texto secundário é opcional, mas quando utilizado, coloque uma linha de texto de altura abaixo do texto primário usando o tamanho e a largura padrão da fonte.

### Botões de alerta

Dê a todos os alertas um botão afirmativo que dispensa o alerta e realiza a ação sugerida pelo botão primário. Forneça um botão Cancelar para todos os alertas exibidos em resposta às ações do usuário, como Sair. Caso o alerta avise o usuário de um problema técnico ou outra situação que poderia resultar em perda de informação, forneça um botão Ajuda que dê mais informações na situação em particular e explique as opções do usuário. Você também pode fornecer botões que executam ações alternadas que deem outra possível solução, corrija problemas em potencial, ou inicie programas ou diálogos relacionados.

#### Ordem e posição dos botões para alertas

Captura de tela mostrando a ordem e a posição dos botões do alerta: Ajuda na parte inferior esquerda e Alternar, Cancelar e Afirmativo na parte inferior direita.

#### Button Phrasing

Escreva as etiquetas de botões como verbos no imperativo, por exemplo Salvar ou Imprimir. Isso permite que o usuário selecione uma ação com menos hesitação. Uma frase ativa condiz também com o papel do botão em iniciar ações, em contraste com uma frase mais passiva. Por exemplo, Buscar e Conectar são botões melhores que Sim e OK.

- #### Botões afirmativos

  Posicione os botões afirmativos no canto inferior direito do alerta. O botão afirmativo aceita a ação proposta pelo alerta, ou simplesmente dispensa o alerta caso nenhuma ação seja sugerida (como é o caso com alertas de informação).

- #### Botão Cancelar

  Caso o alerta tenha sido produzido em resposta a uma ação do usuário, posicione um botão Cancelar imediatamente à esquerda do botão afirmativo. Isso fornece uma rota de fuga para que os usuários parem a ação em resposta à nova informação, ou caso simplesmente tenham clicado por acidente. Clicar no botão Cancelar reverte o aplicativo para seu estado anterior à ação do usuário.

- #### Botão Ajuda

  Um botão Ajuda pode ser usado para esclarecer alertas que apresentam opções potencialmente destrutivas. Coloque o botão Ajuda no canto inferior esquerdo do alerta. Quando clicado, mostre uma janela de ajuda esclarecendo a situação, detalhando as ações executadas pelos outros botões, e explique qualquer efeito colateral que cada ação pode ter.

- #### Botões alternados

  Botões extras podem ser usados para fornecer alternativas à ação primária proposta pelo texto do alerta. Posicione estes botões a esquerda do botão Cancelar, ou do botão afirmativo caso Cancelar não esteja presente. Um exemplo de uma ação alternativa comum seria o botão Sair sem salvar em um alerta de confirmação de salvamento. Esta é uma alternativa à ação sugerida Salvar e o botão Cancelar.

### Espaçamento e posicionamento dentro dos alertas

Usar alertas limpos e com espaços consistentes fazem com que a mensagem seja mais fácil de digerir e as respostas a disposição, mais óbvias.

#### Espaçamento dentro de um alerta

Diagrama mostrando o espaçamento correto a ser usado entro controles e botõe em uma janela de alerta. Isto é detalhado nas diretrizes abaixo.

#### Diretrizes

- A borda ao redor de todos os cantos da aresta, bem como o espaço entre o ícone e o texto, é 12 pixels.

- O espaçamento horizontal entre botões é 6 pixels.

- Adicione uma quebra de linha com tamanho da fonte padrão abaixo de ambom os textos primário e secundário, ou 24 pixels caso esteja usando o Glade.

- Alinhe o topo do ícone com o topo do texto primário.

- Alinhe o texto da mensagem à esquerda, para localidades ocidentais.

#### Detalhes técnicos para um layout apropriado

Crie uma nova janela GtkDialog especificando o número de botões que deseja que o alerta contenha (e um botão de ajuda caso seja apropriado). O GtkDialog contém uma GtkVBox com a primeira linha vazia, e a última linha contendo um GtkButtonBox com botões. Na primeira linha vazia, coloque uma nova GtkHBox. Na coluna à esquerda da GtkHBox coloque uma GtkImage. À direita, coloque uma GtkLabel. Dentro da GtkLabel coloque o texto primáio primeiro (usando a marcação Pango apropriada, veja ), então coloque duas quebras de linha (retorno), e coloque o texto secundário. Agora mude as propriedades de cada controle de acordo com essas tabelas:

#### Propriedades para o GtkDialog

Propriedade | Valor
--- | ---
Título | (nenhum)
Largura da borda | 6
Tipo | Nível superior
Redimensionável | Não
Tem separador | Não

#### Propriedades para o GtkVBox (incluso no diálogo por padrão)

Propriedade | Valor
--- | ---
Espaçamento | 12

#### Propriedades para o GtkHBox

Propriedade | Valor
--- | ---
Espaçamento | 12
Largura da borda | 6

#### Propriedades para GtkImage

Propriedade | Valor
--- | ---
Alinhamento Y | 0.00
Tamanho do ícone | Diálogo

#### Propriedades para GtkLabel

Propriedade | Valor
--- | ---
Usar marcação | Sim
Quebrar texto | Sim
Alinhamento Y | 0.00

### Alertas de informação

Use alertas de informação quando o usuário deve saber sobre a informação apresentada antes de continuar, ou tenha pedido a informação especificamente. Apresente informações menos importantes por outros meios, como a mensagem da barra de status.

#### Um alerta de informação

#### Um alerta de informação...

- usa o ícone de informação do estoque

- apresenta uma mensagem selecionável e um botão OK. O botão é posicionado no canto inferior direito do alerta. Pressionar Enter ou Escape esconde o alerta.

- pode apresentar um botão de conveniência para dar acesso à um objeto relevante. Por exemplo, um botão Detalhes em um lembrete de compromisso abre a janela de propriedades do compromisso. Posicione esse botão à esquerda do botão afirmativo.

#### Comandos de janela:

Enrolar/desenrolar, minimizar (caso o alerta não tenha janela pai), fechar

### Alertas de erro

Mostre um alerta de erro quando uma operação solicitada pelo usuário não puder ser completada com sucesso. Apresente os erros causados por operações não solicitadas pelo usuário por outros meios, a menos que o erro possa resultar em perda de dados ou outros problemas sérios. Por exemplo, um erro encontrado durante uma verificação de email, iniciada pelo usuário ao clicar em um botão na barra de ferramentas, deve apresentar um alerta de erro. Entretanto, um erro encontrado em uma verificação automática e periódica de email seria reportado mais apropriadamente com uma mensagem na barra de status.

#### Um alerta de erro

#### Um alerta de erro...

- usa o ícone predefinido de erro.

- mostra uma mensagem selecionável e um botão OK. O botão é posicionado no canto inferior direito do alerta. Pressionar Enter pode dispensar o alerta de erro.

- pode apresentar um botão de conveniência para tratar imediatamente o erro. Por exemplo, um botão Formatar... em um alerta "Este disco não está formatado". Posicione este botão à esquerda do botão afirmativo.

#### Comandos de janela:

Rolar/desenrolar

### Alertas de confirmação

Mostra um alerta de confirmação quando o comando do usuário pode destruir seus dados, criar um risco de segurança, ou pode levar mais de 30 segundos de esforço do usuário para de recuperar caso tenha selecionado erroneamente.

#### Um alerta de confirmação

#### Um alerta de confirmação...

- usa o ícone predefinido de alerta.

- mostra uma mensagem selecionável e um botão rotulado com um verbo ou uma frase verbal descrevendo a ação a ser confirmada, ou rotulado como OK caso a frase seja maior que 3 palavras. Este botão é posicionado no canto inferior direito do alerta.

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

- may present an alternate action button or a convenience button. Place this button to the left of the Cancel button.

#### Comandos de janela:

Rolar/desenrolar

#### Save Confirmation Alerts

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

##### A save confirmation alert

Save confirmation alert: "[ Close without Saving] [ Cancel ] [[ Save ]] "

##### Texto primário

Save changes to document Document Name before closing?

You may replace document with a more appropriate description, for example image or diagram if the document in question is not primarily text.

##### Texto secundário

If you close without saving, changes from the last Time Period will be discarded

The secondary text provides the user with some context about the number of changes that might be unsaved.

##### Buttons

Close without Saving, Cancel, Save

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.

### Authentication Alerts

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.

#### An authentication alert

#### Diretrizes

- Use the stock authentication icon.

- Show a labelled field for each required item of information. Suggested fields are Username and Password (in that order) where appropriate.

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

- Place any alternative action or convenience button to the left of the Cancel button.

- 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 janela:

Rolar/desenrolar

## Progress Windows

A progress window can be used to provide feedback during an operation that takes more than a few seconds. See for more details about proper use of progress bars.

A progress window should always appear as an independent window in a window list. If progress of a task makes a window temporarily unusable, do not present a modal dialog-like progress window in front of it. Instead, present progress somewhere in the original window, making all its other elements temporarily insensitive. This helps reduce visual clutter.

### An example of a progress window

An example of a progress window

### Formato do título

Progress windows should have a title representing the overall operation: for example Copying Files, Installing, or Calling. As with other window titles, do not end progress window titles with an ellipsis.

### Redimensionar

Progress windows should be resizable if they contain non-static information the user may want to copy (for example, the source URL in a download progress window). Otherwise they should not be resizable.

### Diretrizes

- It is often better to use the progress bar contained in many primary windows' statusbar rather than a progress window. See for details on choosing between the two.

- Progress windows should use primary and secondary text like an alert. See

- The progress bar text should provide an idea of how much work has been completed. It is better to provide specific information rather than a unitless percentage. For example, "13 of 19 images rotated" or "12.1 of 30 MB downloaded" rather than "13% complete".

- If possible, an estimate of the time left until the operation is complete should also be included in the progress bar text. Indicate that the "time left" is an estimate using the word "about".

- Immediately beneath the progress bar, place italicized text indicating the current sub-operation being performed. This might be a step in a sequence, "Contacting control tower for permission to land", or it could be the current object being operated on in a bulk operation, "Rotating MonaLisa.png", "Rotating StarryNight.png".

- If the operation in progress is potentially hazardous (destructive, costly, etc) or heavily taxes a limited resource for more than ten seconds (network bandwidth, hard disk, CPU, etc), consider placing a Pause toggle button to the right of the Cancel button. When paused, the italicized current sub-operation text should have " (Paused)" appended. This will allow users to perform important tasks requiring that resource, or give them time to think whether they want to procede with a dangerous operation they inadvertantly triggered.

### A progress window for a file copy operation

A progress window for a copy operation

### Checklist Windows

Occasionally a procedure is comprised of a series of user performable actions. In these cases, particularly when it is desirable that the user acquire some familiarity with the actions involved in a procedure, checklist windows may be used.

#### Firewall Setup Wizard

A personal firewall setup wizard might install the firewall package, add entries for the firewall to /etc/xinetd.conf, restart the internet super-daemon, and configure the user's web browser to operate through the firewall. It may be desirable that the user is exposed to the series of actions involved in setting up the firewall to increase the chances that they will be sucessful in making modifications later, if they so desire.

#### An example checklist window (Ready to Start)

A checklist window

#### An example checklist window (In Progress)

A checklist window

#### An example checklist window (Completed)

A checklist window

#### Diretrizes

- If knowing the series of steps in an operation isn't that useful to the user, just use a regular progress window. Remember that you are probably more interested in the information than most users, many of whom will find the technical steps confusing rather than helpful.

- Unlike regular progress windows, checklist windows should not close automatically when the operation is complete and should require explicit user input before they begin. This is because one of their purposes is to inform the user concerning an operation's contingent steps.

- The progress bar indicates progress in the overall operation, not each step. While this is more difficult to program, it is the information most useful to the user. Just estimate how long each of the steps takes relative to each other and assign each step a fixed ratio of the progress bar's progress accordingly.

- Do not use a checklist window for a series of internal programmatic steps, use a regular progress window. For example "Connect to mail server", "Authenticate with mail server", "Download messages", "Disconnect" would not be an appropriate series of steps for a checklist window, but would be appropriate sub-operation steps for a regular progress window.

## Dialogs

A dialog provides an exchange of information, or dialog, between the user and the application. Use a dialog to obtain additional information from the user that is needed to carry out a particular command or task.

A dialog should not appear in the panel window list. Any open dialogs should be raised above the application when the application window itself is selected from the window list.

### An example of a dialog

An example of a tabbed dialog: the GNOME print dialog

### Formato de título:

Name of command that opened the dialog (without any trailing ellipsis)

### Comandos de janela:

Minimize, Roll-up/Unroll

### Botões:

Follow the guidelines for Alert buttons, see .

Your dialog may specify a default button, that is activated when the user presses the Return key. See for guidance on choosing an appropriate default button.

### Additional Buttons

You can include other buttons in a dialog's main button area in addition to the affirmative button and Cancel, but any more than one or two such buttons will make the dialog appear complicated and difficult to use. As with any other button, keep the labels as concise as possible to minimize this effect.

#### Diretrizes

- Place buttons that apply to the dialog as a whole in the main button area row at the bottom of the dialog, to the left of the Cancel button.

- Place buttons that apply to one or a few controls next to their associated controls. For instance, place a Browse... button at the trailing edge of the text field it fills in.

### Layout

A clean, logical dialog layout helps the user to quickly understand what information is required from them.

#### Diretrizes

- Arrange controls in your dialog in the direction that people read. In western locales, this is generally left-to-right, top-to-bottom. Position the main controls with which the user will interact as close to the upper left corner as possible. Follow similar guidelines for arranging controls within groups in the dialog, and for specifying the order in which controls are traversed using the Tab key.

- When opening a dialog, provide initial keyboard focus to the component that you expect users to operate first. This focus is especially important for users who must use a keyboard to navigate your application.

- Provide and show sensible default values for as many of the controls in your dialog as possible when it is opened, so the user does not have to generate the information from scratch. These defaults may come from system settings (for example, hostname or IP address), or from information that the user has previously entered in this or another application (for example, email address or network proxy).

See for more detailed information on arranging controls in dialogs.

See for information on using tabbed notebook controls in dialogs.

### Common Dialogs

The gtk and GNOME libraries provide standard dialogs for many common tasks, including opening and saving files, choosing fonts and colors, and printing. Always use these when the user is performing one of these tasks. You may modify the dialogs to reflect the needs of your particular application (for example, adding preview Play and Stop buttons to the Open File dialog in an audio application), but do not change or remove features so much as to make them unrecognizable.

## Assistants

An assistant is a secondary window that guides the user through an operation by breaking it into sequential steps. Assistants are useful for making complex operations less intimidating, as they restrict the information visible to the user at any given moment.

Because assistants provide a relatively small number of controls on the screen at any given time, they have sufficient space for inline documentation. Therefore, do not include a Help button in an assistant window. If you cannot make an operation sufficiently clear in an assistant without resorting to a Help button, you need to simplify it further.

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.

Assistants are often used in situations where a better solution would be to simplify, or even better automate, the process. Before using an assistant to step people through a complex operation, consider if the operation can be fundamentally simplified so an assistant is unnecessary.

### Comandos de janela:

Close, Minimize/Unminimize, Roll-up/Unroll

### Introductory Page

The first page provides the user with the "big picture". Place the title of the assistant in the window's title bar and the assistant's title area, along with an optional picture. Beneath this, state the goal of the assistant, and, if it is not obvious, where the user can find the information the assistant will be asking for.

#### Formato de título:

Assistant Title

#### Botões:

Cancel, Forward

#### Example of the first page of an assistant

Screenshot showing the first page of an assistant for creating a new email account

### Content Pages

Content pages contain the actual settings of the assistant. Summarize the type of setting present on each content page in its title area. For example, Mail Server.

#### Formato de título:

Assistant Title - (Current Page of Total Pages)

#### Botões:

Cancel, Back, Forward

### Last Page

The last page should summarize the settings that will be changed by the assistant, and how the user can modify them later.

#### Formato de título:

Finish Assistant Title

#### Botões:

Cancel, Back, Finish