Barras de progresso

Observação

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 nossas diretrizes de design atuais.

Com uma barra de progresso, os usuários podem acompanhar o progresso de uma operação demorada. Uma barra de progresso pode mostrar um percentual aproximado de conclusão (determinante) ou indicar que uma operação está em andamento (indeterminado).

Estudos de usabilidade mostraram que os usuários estão cientes dos tempos de resposta de mais de um segundo. Consequentemente, você deve considerar as operações que levam dois segundos ou mais para serem concluídas para serem longas e precisam de algum tipo de comentário de progresso.

Uma barra de progresso típica.

Observação

As diretrizes relacionadas ao layout são apresentadas em um artigo separado.

Esse é o controle correto?

Para decidir, considere estas perguntas:

• A operação será concluída em cerca de cinco segundos ou menos? Nesse caso, use um indicador de atividade , pois exibir uma barra de progresso por uma duração tão curta seria uma distração. Se a operação geralmente leva cinco segundos ou menos, mas às vezes leva mais, comece com um ponteiro ocupado e converta em uma barra de progresso após cinco segundos.

• Uma barra de progresso indeterminado é usada para aguardar a conclusão de uma tarefa pelo usuário? Nesse caso, não use uma barra de progresso. As barras de progresso são para o progresso do computador, não para o progresso do usuário.

• Uma barra de progresso indeterminado é combinada com uma animação? Nesse caso, use apenas a animação. A barra de progresso indeterminado é efetivamente uma animação genérica e não adiciona nenhum valor à animação.

• A operação é uma tarefa em segundo plano muito longa (mais de dois minutos) para a qual os usuários estão mais interessados em concluir do que em andamento? Nesse caso, use uma notificação . Nesse caso, os usuários fazem outras tarefas enquanto isso e não estão monitorando o progresso. O uso de uma notificação permite que os usuários executem outras tarefas sem interrupções. Exemplos dessas longas operações incluem impressão, backup, verificações do sistema e transferências ou conversões de dados em massa.

• Quando a operação for concluída, os usuários poderão reproduzir os resultados? Nesse caso, use um controle deslizante. Exemplos dessas operações incluem gravação e reprodução de vídeo e áudio.

  

  Neste exemplo, um controle deslizante é usado para indicar o progresso durante a reprodução do som. Isso permite que os usuários reproduzam os resultados mais tarde.

Conceitos de design

Durante uma longa operação, os usuários precisam ter uma ideia geral do que a operação está fazendo. Eles também precisam saber:

• Que uma longa operação foi iniciada.
• Esse progresso está sendo feito e que a operação acabará sendo concluída (e, portanto, não foi bloqueada).
• O percentual aproximado da operação que foi concluída (e, portanto, o percentual restante).
• Se eles devem cancelar a operação se não vale a pena continuar esperando.
• Se eles devem continuar a aguardar ou fazer outra coisa enquanto a operação é concluída.

Use barras de progresso determinantes para operações que exigem uma quantidade limitada de tempo, mesmo que esse período não possa ser previsto com precisão. Barras de progresso indeterminados mostram que o progresso está sendo feito, mas não fornecem outras informações. Não escolha uma barra de progresso indeterminado com base apenas na possível falta de precisão.

Por exemplo, suponha que uma operação exija cinco etapas e cada uma dessas etapas exija um período limitado, mas a quantidade de tempo para cada etapa pode variar muito. Nesse caso, use uma barra de progresso determinante e mostre o progresso quando cada etapa for concluída proporcionalmente à quantidade de tempo que cada etapa normalmente leva. Use uma barra de progresso indeterminado somente se uma barra de progresso determinada fizer com que os usuários concluam incorretamente que a operação foi bloqueada.

Se você fizer apenas uma coisa...

Certifique-se de fornecer comentários de progresso para operações demoradas e se as informações acima estão claramente comunicadas. Use barras de progresso determinantes sempre que possível.

Padrões de uso

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

Barras de progresso determinantes

Rótulo	Valor
Barras de progresso determinantes modais Indique o progresso de uma operação preenchendo da esquerda para a direita e preenchendo completamente quando a operação for concluída.	Como esses comentários são modais, os usuários não podem executar outras tarefas na janela (ou seu pai se exibidos em uma caixa de diálogo modal) até que a operação seja concluída. Neste exemplo, a barra de progresso fornece comentários durante a configuração.
Barras de progresso determinantes modais com um botão Cancelar ou Parar Permitir que os usuários interrompa a operação, talvez porque a operação está demorando muito ou não vale a pena aguardar.	Neste exemplo, os usuários podem clicar em Parar para interromper a operação e deixar o ambiente em seu estado atual.
Barras de progresso determinantes modais com um botão e animação Cancelar ou Parar Permitir que os usuários interroguem a operação e incluam uma animação para ajudar os usuários a visualizar o efeito de uma operação.	Neste exemplo, os usuários podem clicar em Parar para interromper a operação e deixar o ambiente em seu estado atual.
Barras de progresso duplo determinantes modais Indique o progresso de uma operação de várias etapas mostrando o progresso da etapa atual na primeira barra de progresso e o progresso geral na segunda barra.	Como a primeira barra de progresso fornece poucas informações adicionais e pode distrair bastante, esse padrão não é recomendado. Em vez disso, todas as etapas na operação compartilham uma parte do progresso e uma única barra de progresso vai para a conclusão uma vez. Neste exemplo, a primeira barra de progresso mostra o progresso da etapa atual e a segunda barra de progresso mostra o progresso geral. Nota: Esse padrão geralmente é desnecessário e deve ser evitado.
Barras de progresso determinantes da modelagem Indique o progresso de uma operação preenchendo da esquerda para a direita e preenchendo completamente quando a operação for concluída.	Ao contrário das barras de progresso modais, os usuários podem executar outras tarefas enquanto a operação está em andamento. Essas barras de progresso podem ser exibidas no contexto ou em uma barra de status. Neste exemplo, o Windows Internet ExplorerWindows Internet Explorer exibe seu progresso para carregar uma página da Web na barra de status. Os usuários podem executar outras tarefas enquanto a página está carregando.

Barras de progresso indeterminados

Tipo de barra de progresso	Descrição
Barras de progresso indeterminadas modais Indique que uma operação está em andamento mostrando uma animação que percorre continuamente a barra da esquerda para a direita.	Usado apenas para operações cujo progresso geral não pode ser determinado, portanto, não há noção de integridade. Barras de progresso determinantes são preferíveis porque indicam o percentual aproximado da operação que foi concluída e ajudam os usuários a determinar se a operação vale a pena continuar esperando. Eles também são menos distrativos visualmente. Neste exemplo, Windows Update usa uma barra de progresso indeterminado modal para indicar o progresso enquanto procura atualizações.
Barras de progresso indeterminadas da modelagem Indique que uma operação está em andamento mostrando uma animação que percorre continuamente a barra da esquerda para a direita.	Ao contrário das barras de progresso modais, os usuários podem executar outras tarefas enquanto o processamento está em andamento. essas barras de progresso podem ser exibidas no contexto ou em uma barra de status. Neste exemplo, o Microsoft Outlook usa uma barra de progresso indeterminada sem modelagem ao preencher as propriedades de contato. Os usuários podem continuar a usar a janela de propriedades enquanto esse trabalho está em andamento.

Metros

Tipo	Descrição
Metros Indique uma porcentagem que não está relacionada ao progresso.	Esse padrão não é uma barra de progresso, mas é implementado usando o controle de barra de progresso. os medidores têm uma aparência distinta para diferenciá-los das barras de progresso verdadeiras. Neste exemplo, o medidor mostra a porcentagem de espaço em disco usado.

Diretrizes

Geral

• Forneça comentários de progresso ao executar uma operação longa. Os usuários nunca devem ter que adivinhar se o progresso está sendo feito.

• Indica claramente o progresso real. A barra de progresso deve avançar se o progresso estiver sendo feito. Se o intervalo de tempos de conclusão esperados for grande, considere usar uma escala não linear para indicar o progresso para os tempos mais longos. Você não quer que os usuários concluam que seu programa foi bloqueado quando não o fez.

• Indica claramente a falta de progresso. A barra de progresso não deverá avançar se nenhum progresso estiver sendo feito. Você não quer que os usuários aguardem indefinidamente por uma operação que nunca será concluída.

• Forneça detalhes úteis de progresso. Forneça informações adicionais de progresso, mas somente se os usuários puderem fazer algo com ela. Verifique se o texto é exibido por tempo suficiente para que os usuários possam lê-lo.

  

  Neste exemplo, os usuários podem ver a taxa de transferência. A baixa taxa de transferência aqui sugere a necessidade de usar uma conexão de rede de alta largura de banda.

• Não forneça detalhes desnecessários. Geralmente, os usuários não se importam com os detalhes da operação que está sendo executada. Por exemplo, os usuários de um programa de instalação não se importam com o arquivo específico que está sendo copiado ou que os componentes do sistema estão sendo registrados porque não têm expectativas sobre esses detalhes. Normalmente, apenas uma barra de progresso bem rotulada fornece informações suficientes, portanto, forneça informações adicionais de progresso somente se os usuários puderem fazer algo com ela. Fornecer detalhes com os quais os usuários não se importam torna a experiência do usuário excessivamente complicada e técnica. Se você precisar de informações mais detalhadas para depuração, não as exiba em builds de versão.

  Correto:

  

  Neste exemplo, a barra de progresso rotulada é tudo o que é necessário.

  Correto:

  

  Neste exemplo, o Windows Explorer está copiando arquivos selecionados pelo usuário, portanto, exibir os nomes de arquivo que estão sendo copiados é significativo.

  Incorreto:

  

  Neste exemplo, um programa de instalação está fornecendo detalhes sem sentido para o usuário.

• Forneça animações úteis. Se bem feitas, as animações melhoram a experiência do usuário ajudando os usuários a visualizar a operação. Boas animações têm mais impacto do que o texto sozinho. Por exemplo, a barra de progresso do comando Excluir do Outlook exibirá a Lixeira do destino se os arquivos puderem ser recuperados, mas nenhuma Lixeira se os arquivos não puderem ser recuperados.

  

  Neste exemplo, a falta de uma Lixeira reforça que os arquivos estão sendo excluídos permanentemente. Essas informações adicionais não seriam comunicadas com eficiência usando apenas texto.

• Não use animações desnecessárias. As animações podem ser enganosas porque geralmente são executadas em um thread separado da tarefa real e, portanto, podem sugerir o progresso mesmo que a operação tenha sido bloqueada. Além disso, se a operação for mais lenta do que o esperado, os usuários às vezes pressupõem que a animação faz parte do motivo. Consequentemente, use animações somente quando houver uma justificativa clara; não os use para tentar entreter os usuários.

• Posicione as animações centralizados sobre a barra de progresso. Coloque a animação acima dos rótulos da barra de progresso, se houver. Se houver um botão Cancelar ou Parar à direita da barra de progresso, inclua o botão ao determinar o centro.

• Reproduza um efeito sonoro na conclusão de uma operação somente se for muito longa (mais de dois minutos), pouco frequente e importante. Se é provável que o usuário se afaste de uma operação importante durante o processamento, um efeito sonoro restaurará a atenção do usuário. Usar um efeito sonoro após a conclusão em outras circunstâncias seria um aborrecimento perturbador.

• Não roube o foco de entrada para mostrar uma atualização ou conclusão de progresso. Os usuários geralmente alternam para outros programas enquanto esperam e não querem ser interrompidos. As tarefas em segundo plano devem permanecer em segundo plano.

• Não se preocupe com o suporte técnico. Como os comentários fornecidos pelas barras de progresso não são necessariamente precisos e são fugazes, as barras de progresso não são um bom mecanismo para fornecer informações para suporte técnico. Consequentemente, se a operação puder falhar (como em um programa de instalação), não forneça informações adicionais de progresso que sejam úteis apenas para o suporte técnico. Em vez disso, forneça um mecanismo alternativo, como um arquivo de log para registrar informações de suporte técnico.

  Incorreto:

  

  Neste exemplo, a barra de progresso está mostrando detalhes destinados ao suporte técnico.

• Não coloque a porcentagem concluída ou qualquer outro texto em uma barra de progresso. Esse texto não é acessível e não é compatível com o uso de temas.

  Incorreto:

  

  Neste exemplo, o texto percentual na barra de progresso não está acessível.

• Não combine uma barra de progresso com um ponteiro ocupado. Use um ou outro, mas não ambos ao mesmo tempo.

• Não use barras de progresso verticais. As barras de progresso horizontais têm um mapeamento mais natural e um fluxo melhor.

Barras de progresso determinadas

• Use barras de progresso determinadas para operações que exigem um período limitado de tempo, mesmo que esse período de tempo não possa ser previsto com precisão. Barras de progresso indeterminados mostram que o progresso está sendo feito, mas não fornecem outras informações. Não escolha uma barra de progresso indeterminado com base apenas na possível falta de precisão.

• Indique claramente a fase de progresso. A barra de progresso deve ser capaz de indicar se a operação está no início, no meio ou no final de uma operação. Por exemplo, barras de progresso que disparam imediatamente para 99% de conclusão e, em seguida, permanecem lá por um longo tempo são particularmente pouco informativas e irritantes. Nesses casos, a barra de progresso deve ser definida inicialmente como no máximo 33% para indicar que a operação ainda está na fase inicial.

• Indica claramente a conclusão. Não deixe uma barra de progresso ir para 100%, a menos que a operação tenha sido concluída.

• Forneça uma estimativa de tempo restante se você puder fazer isso com precisão. As estimativas de tempo restantes que são precisas são úteis, mas estimativas que estão muito fora da marca ou saltam significativamente não são úteis. Talvez seja necessário executar algum processamento antes de fornecer estimativas precisas. Nesse caso, não exiba estimativas potencialmente imprecisas durante esse período inicial.

• Não reinicie o progresso. Uma barra de progresso perde seu valor se reiniciar (talvez porque uma etapa na operação é concluída) porque os usuários não têm como saber quando a operação será concluída. Em vez disso, tenha todas as etapas na operação compartilhando uma parte do progresso e fazer com que a barra de progresso vá para a conclusão uma vez.

  Incorreto:

  

  Neste exemplo, a operação foi movida para a etapa de copiar arquivos e redefinir a barra de progresso dessa etapa. Agora, os usuários não têm ideia de quanto progresso foi feito ou quanto tempo falta.

• Não faça backup do progresso. Assim como ocorre com uma reinicialização, uma barra de progresso perde seu valor se fizer backup. Sempre aumente o progresso monotonicamente. No entanto, você pode ter uma estimativa de tempo restante que aumenta (bem como diminui) porque a taxa de progresso pode variar.

Barras de progresso indeterminados

• Use barras de progresso indeterminados somente para operações cujo progresso geral não pode ser determinado. Use barras de progresso indeterminados para operações que exigem uma quantidade de tempo não associada ou que acessam um número desconhecido de objetos. Use tempos limite para fornecer limites a operações baseadas em tempo.

• Converta em uma barra de progresso determinante depois que o progresso geral puder ser determinado. Por exemplo, se demorar significativamente mais de dois segundos para determinar o número de objetos, você poderá usar uma barra de progresso indeterminado enquanto os objetos são contados e converter em uma barra de progresso determinante.

• Não combine barras de progresso indeterminados com estimativas de porcentagem concluídas ou tempo restante. Se você puder fornecer essas informações, use uma barra de progresso determinante.

• Não combine barras de progresso indeterminados com animações. Uma barra de progresso indeterminado é efetivamente uma animação genérica, portanto, você deve usar uma ou outra, mas nunca ambas.

  Correto:

  

  Neste exemplo, apenas uma animação é usada para mostrar que uma operação está em andamento.

Barras de progresso da modelagem

• Se os usuários puderem fazer algo produtivo enquanto a operação estiver em andamento, forneça comentários de modelagem. Talvez seja necessário desabilitar um subconjunto de funcionalidade que exija a conclusão da operação.

• Se a janela tiver uma barra de endereços, exiba o progresso da modelagem na barra de endereços.

  

  Neste exemplo, o progresso da modelagem é mostrado na barra de endereços.

• Caso contrário, se a janela tiver uma barra de status, exiba o progresso da modelagem na barra de status. Coloque qualquer texto correspondente à esquerda na barra de status.

  

  Neste exemplo, o progresso da modelagem é mostrado na barra de status.

Barras de progresso modal

• Coloque barras de progresso modais em páginas de progresso oucaixas de diálogo de progresso.

• Forneça um botão de comando para interromper a operação se levar mais de alguns segundos para ser concluída ou se tiver o potencial de nunca ser concluído. Rotule o botão Cancelar se cancelar retornar o ambiente ao estado anterior (não deixando efeitos colaterais), caso contrário, rotule o botão Parar para indicar que ele deixa a operação parcialmente concluída intacta. Você pode alterar o rótulo do botão de Cancelar para Parar no meio da operação se em algum momento não for possível retornar o ambiente ao estado anterior. Centralize o botão de comando verticalmente com a barra de progresso em vez de alinhar suas tops.

  Correto:

  

  Neste exemplo, a interrupção da conexão de rede não tem efeito colateral, portanto, Cancel é usado.

  Correto:

  

  Neste exemplo, a interrupção da cópia deixa todos os arquivos copiados, portanto, o botão de comando é rotulado como Parar.

  Incorreto:

  

  Neste exemplo, interromper a pesquisa não deixa nenhum efeito colateral, portanto, o botão de comando deve ser rotulado como Cancelar.

Tempo restante

Para barras de progresso determinantes:

• Use os seguintes formatos de hora. Comece com o primeiro dos seguintes formatos em que a maior unidade temporal não é zero e, em seguida, altere para o próximo formato quando a maior unidade temporal se tornar zero.

  Para barras de progresso:

  Se as informações relacionadas forem mostradas em um formato de dois-pontos:

  Tempo restante: h horas, m minutos

  Tempo restante: m minutos, s segundos

  Tempo restante: s segundos

  Se o espaço na tela estiver em um valor premium:

  h hrs, m mins restantes

  m mins, s s s restantes

  s segundos restantes

  Caso contrário:

  h horas, m minutos restantes

  m minutos, s segundos restantes

  s segundos restantes

  Para barras de título:

  hh:mm restante

  mm:ss restantes

  0:ss restantes

  Esse formato compacto mostra as informações mais importantes primeiro para que elas não estejam truncadas na barra de tarefas.

• Torne as estimativas precisas, mas não dê precisão falsa. Se a maior unidade for horas, dê minutos (se significativo), mas não segundos.

  Incorreto:

  hh hours, mm minutes, ss seconds

• Mantenha a estimativa atualizada. Tempo de atualização restante estima pelo menos a cada 5 segundos.

• Concentre-se no tempo restante porque essas são as informações que os usuários mais se preocupam. Dê tempo decorrido total somente quando houver cenários em que o tempo decorrido seja útil (como quando a tarefa provavelmente será repetida). Se a estimativa de tempo restante estiver associada a uma barra de progresso, não tenha um texto concluído por porcentagem porque essas informações são transmitidas pela própria barra de progresso.

• Esteja gramaticalmente correto. Use unidades singulares quando o número for um.

  Incorreto:

  1 minuto, 1 segundo

• Use a capitalização com estilo de frase.

Cores da barra de progresso

• Use somente barras de progresso vermelhas ou amarelas para indicar o progresso status, não os resultados finais de uma tarefa. Uma barra de progresso vermelha ou amarela indica que os usuários precisam executar alguma ação para concluir a tarefa. Se a condição não for recuperável, deixe a barra de progresso verde e exiba uma mensagem de erro.
• Vire a barra de progresso em vermelho quando houver uma condição recuperável do usuário que impeça o progresso. Exiba uma mensagem para explicar o problema e recomendar uma solução.
• Vire a barra de progresso amarela para indicar que o usuário fez uma pausa na tarefa ou que há uma condição que está impedindo o progresso , mas que o progresso ainda está ocorrendo (como, por exemplo, com conectividade de rede ruim). Se o usuário tiver pausado, altere o rótulo do botão Pausar para Retomar. Se o progresso for impedido, exiba uma mensagem para explicar o problema e recomendar uma solução.

Metros

• Use barras de progresso somente para progresso. Use medidores para indicar percentuais que não estão relacionados ao progresso.

Dimensionamento e espaçamento recomendados

Dimensionamento e espaçamento recomendados para barras de progresso.

• Sempre use a altura recomendada da barra de progresso.
  • Exceção: Você poderá usar uma altura diferente se a janela pai não der suporte à altura recomendada.
• Use a largura mínima se quiser tornar a barra de progresso discreta.
• Não use larguras maiores do que o máximo recomendado. A barra de progresso não precisa preencher o espaço disponível.
• Centralize a barra de progresso horizontalmente se a janela for muito maior do que a largura máxima recomendada.

Rótulos

Rótulos da barra de progresso

• Use um rótulo conciso com um controle de texto estático para indicar o que a operação está fazendo. Inicie o rótulo com um verbo (por exemplo, Copiar) e termine com reticências. Esse rótulo poderá ser alterado dinamicamente se a operação tiver várias etapas ou estiver processando vários objetos.

• Não atribua uma chave de acesso exclusiva porque o controle não é interativo.

• Use maiúsculas no estilo de frase.

• Se a operação não tiver sido iniciada diretamente pelo usuário, você poderá incluir um rótulo adicional para fornecer o contexto e pedir desculpas pela interrupção. Inicie este rótulo extra com a frase , aguarde enquanto. Esse rótulo não deve ser alterado durante a operação.

  

  Neste exemplo, o usuário está sendo solicitado a aguardar porque o usuário não iniciou diretamente a operação.

• Posicione o rótulo acima da barra de progresso e alinhe o rótulo com a borda esquerda da barra de progresso.

Detalhes da barra de progresso

• Forneça detalhes em texto estático, precedendo os dados com um rótulo que termina com dois-pontos. Especifique unidades (segundos, quilobytes e assim por diante) após o texto de detalhes.

  Correto:

  

  Neste exemplo, os detalhes são rotulados corretamente.

  Incorreto:

  

  Neste exemplo, os detalhes não são rotulados, exigindo que os usuários determinem seu significado.

• Use maiúsculas no estilo de frase.

• Posicione os detalhes abaixo da barra de progresso e alinhe o rótulo com a borda esquerda da barra de progresso.

• Não forneça o percentual concluído ou restante porque essas informações são transmitidas pela própria barra de progresso.

Botão Cancelar

• Rotule o botão Cancelar se cancelar retornar o ambiente ao estado anterior (não deixando nenhum efeito colateral); caso contrário, rotule o botão Parar para indicar que ele deixa a operação parcialmente concluída intacta.
• Você pode alterar o rótulo do botão de Cancelar para Parar no meio da operação se em algum momento não for possível retornar o ambiente ao estado anterior.

Títulos da caixa de diálogo Progresso

• Se a barra de progresso for exibida em uma caixa de diálogo modal, o título da caixa de diálogo deverá ser o nome do programa ou o nome da operação. Não use o que deve ser o rótulo da barra de progresso para o título da caixa de diálogo.

  Correto:

  

  Neste exemplo, o nome da tarefa é usado para o título da caixa de diálogo.

  Incorreto:

  

  Neste exemplo, o texto do título da caixa de diálogo é uma reformulação do rótulo da barra de progresso. Em vez disso, o nome do programa deve ser usado.

• Se a barra de progresso for exibida em uma caixa de diálogo de modelagem, otimize o título para exibição na barra de tarefas colocando concisamente as informações diferenciais primeiro. Exemplo: "66% Concluído".