Compartilhar via


Barras de status (noções básicas de design)

Nota

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossa diretrizes de design atuais.

Uma barra de status é uma área na parte inferior de uma janela primária que exibe informações sobre o estado da janela atual (como o que está sendo exibido e como), tarefas em segundo plano (como impressão, verificação e formatação) ou outras informações contextuais (como seleção e estado do teclado).

As barras de status normalmente indicam status por meio de texto e ícones, mas também podem ter indicadores de progresso, bem como menus para comandos e opções relacionadas ao status.

captura de tela da barra de status típica

Uma barra de status típica.

Nota

As diretrizes relacionadas à área de notificação são apresentadas em um artigo separado.

Essa é a interface do usuário certa?

Para decidir, considere estas perguntas:

  • O status é relevante quando os usuários estão usando ativamente outros programas? Nesse caso, use um ícones da área de notificação.

  • O item de status precisa exibir notificações? Nesse caso, você deve usar um ícone de área de notificação.

  • A janela é uma janela primária? Caso contrário, não use uma barra de status. Caixas de diálogo, assistentes, painéis de controle e folhas de propriedades não devem ter barras de status.

  • As informações são principalmente status? Caso contrário, não use uma barra de status. As barras de status não devem ser usadas como uma barra de menus secundária ou da barra de ferramentas.

  • As informações explicam como usar o controle selecionado? Em caso afirmativo, exiba as informações ao lado do controle associado usando uma explicação complementar ou um rótulo de instrução.

  • O status é útil e relevante? Ou seja, é provável que os usuários alterem seu comportamento como resultado dessas informações? Caso contrário, não exiba o status ou coloque-o em um arquivo de log.

  • O status é crítico? A ação imediata é necessária? Nesse caso, exiba as informações em um formulário que exija atenção e não possa ser facilmente ignorado, como uma caixa de diálogo ou dentro da própria janela primária.

    captura de tela da barra de status de

    Uma barra de endereços vermelha no Windows Internet Explorer.

  • O programa destina-se principalmente a usuários iniciantes? Os usuários inexperientes geralmente não estão cientes das barras de status, portanto, reconsidere o uso de barras de status nesse caso.

Conceitos de design

As barras de status são uma ótima maneira de fornecer informações de status sem interromper os usuários ou interromper seu fluxo. No entanto, as barras de status são fáceis de ignorar. Tão fácil, de fato, que muitos usuários não notam barras de status.

A solução para esse problema não é exigir a atenção do usuário usando ícones extravagantes, animação ou flashing, mas projetar para essa limitação. Você pode fazer isso:

  • Verifique se as informações de status são úteis e relevantes. Caso contrário, não forneça uma barra de status.
  • Não usar barras de status para informações cruciais. Os usuários nunca devem saber o que está na barra de status. Se os usuários precisarem vê-lo, não coloque-o em uma barra de status.

se fizer apenas uma coisa...

Verifique se as informações da barra de status são úteis e relevantes, mas não cruciais.

Padrões de uso

As barras de status têm vários padrões de uso:

Uso Exemplo
o status da janela atual
Mostrar a origem do que está sendo exibido junto com todos os modos de exibição
captura de tela de uma barra de status 'location'
Neste exemplo, a barra de status exibe o caminho para o documento.
progresso
Mostrar o progresso das tarefas em segundo plano, com uma barra de progresso ou uma animação determinada.
captura de tela da barra de status com a barra de progresso
Neste exemplo, a barra de status inclui uma barra de progresso para mostrar a página da Web carregando em uma janela do Internet Explorer.
informações contextuais
Mostrar informações contextuais sobre o que o usuário está fazendo no momento.
captura de tela da barra de status mostrando o número de pixels
Neste exemplo, o Microsoft Paint mostra o tamanho da seleção em pixels.

Diretrizes

Geral

  • Considere fornecer um comando Exibir Barra de Status se apenas alguns usuários precisarem das informações da barra de status. Oculte a barra de status por padrão se a maioria dos usuários não precisar dela.
  • Não use a barra de status para explicar os itens da barra de menus. Esse padrão de ajuda não é detectável.

Apresentação

  • Desabilite o status modal que não se aplica. O status modal inclui estados de teclado e documento.
  • Remova o status não modal que não se aplica.
  • Apresentar informações de status na seguinte ordem: status da janela atual; progresso; e informações contextuais.

Ícones

  • Escolha designs de ícone de status facilmente reconhecíveis. Prefira ícones com contornos exclusivos em relação a ícones em forma quadrada ou retangular.

  • Use faixas de vermelho puro, amarelo e verde apenas para comunicar informações de status. Caso contrário, esses ícones são confusos.

    Correto:

    captura de tela da barra de status com ícones azuis

    Incorreto:

    captura de tela da barra de status com um ícone vermelho

    No exemplo incorreto, o ícone vermelho sugere involuntariamente um erro, criando confusão.

  • Use variações de ícone ou sobreposições para indicar alterações de status ou status. Use variações de ícone para mostrar alterações em quantidades ou pontos fortes. Para outros tipos de status, use estas sobreposições padrão:

    Recobrir Estado
    captura de tela do ícone de aviso
    Aviso
    captura de tela do ícone de erro
    Erro
    captura de tela do ícone desabilitado/desconectado
    Desabilitado/Desconectado
    captura de tela do ícone bloqueado/offline
    Bloqueado/Offline
  • Não altere o status com muita frequência. Os ícones da barra de status não devem parecer barulhentos, instáveis ou exigir atenção. O olho é sensível às alterações no campo periférico da visão, portanto, as mudanças de status precisam ser sutis.

  • Para ícones que fornecem informações de status importantes, prefira rótulos in-loco.

  • Ícones da barra de status sem rótulo devem ter dicas de ferramenta.

Para obter mais informações, consulte Ícones.

Interação

  • Torne interativa uma área da barra de status para permitir que os usuários direcionem o acesso a comandos e opções relacionados.
    • Use um controle com aparência e comportamento como um botão de menu ou um botão de divisão. Essas áreas da barra de status devem ter uma seta suspensa para indicar que são clicáveis.
    • Exiba o menu ao clicar à esquerda no mouse para baixo, não para o mouse para cima.
    • Não dê suporte ao clique com o botão direito do mouse ou ao clique duplo. Os usuários não esperam essas interações em uma barra de status, portanto, é provável que não tentem.
  • Exibir dicas de ferramentas ao focalizar.

Texto

  • Geralmente, use rótulos concisos. Corte qualquer texto que possa ser eliminado.
  • Prefira fragmentos de frase, sem pontuação final. Use frases completas (com pontuação final) somente quando os fragmentos de frase não forem significativamente mais curtos.
  • Para rótulos de progresso opcionais, indique o que a operação está fazendo com um rótulo que começa com um verbo (formulário gerund) e termina com reticências. Por exemplo: "Copiando...". Esse rótulo poderá ser alterado dinamicamente se a operação tiver várias etapas ou estiver processando vários objetos.
  • Não use cor, negrito ou itálico para enfatizar o texto da barra de status.
  • Para obter diretrizes de frase de dica de ferramenta, consulte dicas de ferramentas e dicas de informações.

Documentação

Consulte as barras de status como barras de status, não linhas de status ou outras variações. Exemplo: "O número da página atual é exibido na barra de status".