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 uma porcentagem aproximada de conclusão (determinada) ou indicar que uma operação está em andamento (indeterminada).
Estudos de usabilidade mostraram que os usuários percebem conscientemente os 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 como demoradas e que precisam de algum tipo de feedback 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 um período tão curto 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 esperar que o usuário conclua uma tarefa? 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 indeterminada é combinada com uma animação? Em caso afirmativo, use apenas a animação. A barra de progresso indeterminado é uma animação genérica e não agrega 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 na conclusão do que no progresso? Em caso afirmativo, use notificações. Nesse caso, os usuários realizam 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ção. Exemplos dessas operações demoradas incluem impressão, backup, varreduras 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? Em caso afirmativo, use um controle deslizante. Exemplos de tais 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 operação longa, os usuários precisam de uma ideia geral do que a operação está fazendo. Eles também precisam saber:
- Que uma longa operação começou.
- Esse progresso está sendo feito e que a operação acabará sendo concluída (e, portanto, não foi bloqueada).
- A porcentagem aproximada da operação que foi concluída (e, portanto, a porcentagem restante).
- Se eles devem cancelar a operação se não vale a pena continuar esperando.
- Se eles devem continuar esperando ou fazer outra coisa enquanto a operação é concluída.
Use barras de progresso determinadas para operações que exigem um período de tempo limitado, mesmo que esse período de tempo não possa ser previsto com precisão. As barras de progresso indeterminadas mostram que o progresso está sendo feito, mas não fornecem outras informações. Não escolha uma barra de progresso indeterminada 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 de tempo limitado, mas a quantidade de tempo para cada etapa pode variar muito. Nesse caso, use uma barra de progresso determinada 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 travou.
Se você fizer apenas uma coisa...
Certifique-se de fornecer feedback de progresso para operações demoradas e que as informações acima sejam comunicadas com clareza. Use barras de progresso determinadas sempre que possível.
Padrões de uso
As barras de progresso têm vários padrões de uso:
Barras de progresso determinado
| Etiqueta | Valor |
|---|---|
| Barras de progresso determinadas 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 exibido 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 determinadas modais com um botão Cancelar ou Parar Permita que os usuários interrompam a operação, talvez porque a operação esteja demorando muito ou não valha a pena esperar. |
 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 determinadas modais com um botão Cancelar ou Parar e animação Permita que os usuários interrompam a operação e inclua 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 determinadas pelo modal 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 ser bastante perturbadora, esse padrão não é recomendado. Em vez disso, faça com que todas as etapas da operação compartilhem uma parte do progresso e faça com que uma única barra de progresso seja concluída 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 determinadas sem modal 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 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 indeterminado
| 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 completude. As barras de progresso determinadas são preferíveis porque indicam a porcentagem aproximada da operação que foi concluída e ajudam os usuários a determinar se vale a pena continuar aguardando a operação. Elas também causam menos distração visual.  Neste exemplo, o Windows Update usa uma barra de progresso indeterminada modal para indicar o progresso enquanto procura atualizações. |
| Barras de progresso indeterminadas sem modal 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 processo 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 modal ao preencher as propriedades do contato. Os usuários podem continuar a usar a janela de propriedades enquanto esse trabalho estiver em andamento. |
Metros
| Tipo | Descrição |
|---|---|
| Metros Indica uma porcentagem não relacionada ao progresso. |
Esse padrão não é uma barra de progresso, mas é implementado usando o controle da barra de progresso. Os medidores têm uma aparência distinta para diferenciá-los das verdadeiras barras de progresso.  Neste exemplo, o medidor mostra a porcentagem de espaço na unidade de disco usada. |
Diretrizes
Geral
Forneça feedback de progresso ao executar uma operação demorada. Os usuários nunca devem ter que adivinhar se o progresso está sendo feito.
Indique claramente o progresso real. A barra de progresso deve avançar se houver progresso. Se o intervalo de tempos de conclusão esperados for grande, considere o uso de uma escala não linear para indicar o progresso para os tempos mais longos. Você não quer que os usuários achem que seu programa travou quando isso na verdade não acontecer.
Indica claramente a falta de progresso. A barra de progresso não deve avançar se não tiver havido progresso. Você não quer que os usuários esperem indefinidamente por uma operação que nunca será concluída.
Forneça detalhes úteis sobre o progresso. Forneça informações adicionais sobre o progresso, mas somente se os usuários puderem fazer algo com essas informações. Certifique-se de que o texto seja 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, uma barra de progresso bem rotulada sozinha fornece informações suficientes, portanto, forneça informações adicionais de progresso somente se os usuários puderem fazer algo com elas. 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 que o usuário selecionou, portanto, exibir os nomes de arquivo que estão sendo copiados é importante.
Incorreto:
Neste exemplo, um programa de instalação está fornecendo detalhes que não têm 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 a visualizar a operação. Boas animações têm mais impacto do que apenas texto. Por exemplo, a barra de progresso do comando Excluir do Outlook exibe 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 de forma tão eficaz 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 progresso mesmo que a operação tenha travado. Além disso, se a operação for mais lenta do que o esperado, os usuários às vezes assumem que a animação é parte do motivo. Consequentemente, use animações apenas quando houver uma justificativa clara; Não os use para tentar entreter os usuários.
Posicione as animações centralizadas na 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 longo (mais de dois minutos), pouco frequente e importante. Se for 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 que distrai.
Não roube o foco de entrada para mostrar uma atualização ou conclusão de progresso. Os usuários geralmente mudam 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 acontece com 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 mostra 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 de porcentagem 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 os dois ao mesmo tempo.
Não use barras de progresso verticais. As barras de progresso horizontais têm um mapeamento mais natural e melhor fluxo.
Barras de progresso determinado
Use barras de progresso determinadas para operações que exigem um período de tempo limitado, mesmo que esse período de tempo não possa ser previsto com precisão. As barras de progresso indeterminadas mostram que o progresso está sendo feito, mas não fornecem outras informações. Não escolha uma barra de progresso indeterminada com base apenas na possível falta de precisão.
Indica 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 fim de uma operação. Por exemplo, barras de progresso que disparam imediatamente para 99% de conclusão e 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.
Indi claramente a conclusão. Não deixe uma barra de progresso ir para 100 por cento, a menos que a operação tenha sido concluída.
Forneça uma estimativa de tempo restante, se puder fazê-lo com precisão. As estimativas de tempo restante que são precisas são úteis, mas as estimativas que estão muito erradas ou saltam significativamente não são úteis. Pode ser necessário realizar 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 for reiniciada (talvez porque uma etapa da operação seja concluída) porque os usuários não têm como saber quando a operação será concluída. Em vez disso, faça com que todas as etapas da operação compartilhem uma parte do progresso e que estejam com a barra de progresso para conclusão única.
Incorreto:
Neste exemplo, a operação foi movida para a etapa de copiar arquivos e redefinir a barra de progresso para essa etapa. Agora os usuários não têm ideia de quanto progresso foi feito ou quanto tempo resta.
Não faça backup do progresso. Assim como acontece 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 do tempo restante que aumenta (e diminui) porque a taxa de progresso pode variar.
Barras de progresso indeterminado
Use barras de progresso indeterminadas somente para operações cujo progresso geral não pode ser determinado. Use barras de progresso indeterminadas para operações que exigem um período ilimitado ou que acessam um número desconhecido de objetos. Use tempos limite para dar limites a operações baseadas em tempo.
Converta em uma barra de progresso determinada assim 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 indeterminada enquanto os objetos são contados e, em seguida, converter em uma barra de progresso determinada.
Não combine barras de progresso indeterminadas com estimativas de porcentagem concluída ou de tempo restante. Se você puder fornecer essas informações, use uma barra de progresso determinada.
Não combine barras de progresso indeterminadas com animações. Uma barra de progresso indeterminada é 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 sem modo
Se os usuários puderem fazer algo produtivo enquanto a operação estiver em andamento, forneça comentários sem janela restrita. Talvez seja necessário desabilitar um subconjunto de funcionalidades que exija a conclusão da operação.
Se a janela tiver uma barra de endereços, exiba o progresso sem janela restrita na barra de endereços.
Neste exemplo, o progresso sem modo é mostrado na barra de endereços.
Caso contrário, se a janela tiver uma barra de status, exiba o progresso sem janela restrita na barra de status. Coloque qualquer texto correspondente à esquerda na barra de status.
Neste exemplo, o progresso sem modo é mostrado na barra de status.
Barras de progresso modais
Coloque barras de progresso modais nas páginas de progresso ou nas caixas 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 tiver o potencial de nunca ser concluído. Rotule o botão Cancelar se o cancelamento 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 de 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 partes superiores.
Correto:
Neste exemplo, interromper a conexão de rede não tem efeito colateral, portanto, Cancelar é usado.
Correto:
Neste exemplo, interromper a 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 determinado:
Use os seguintes formatos de hora. Comece com o primeiro dos formatos a seguir, em que a maior unidade de tempo não é zero e, em seguida, mude para o próximo formato quando a maior unidade de tempo 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 horas, mm minutos, ss segundos
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 percentual completo porque essas informações serã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 no estilo de frase.
Cores da barra de progresso
- Use barras de progresso vermelhas ou amarelas apenas para indicar o status do progresso, 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.
- Torne a barra de progresso vermelha 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.
- Torne a barra de progresso amarela para indicar que o usuário pausou a 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 apenas para o progresso. Use medidores para indicar porcentagens que não estão relacionadas ao progresso.
Dimensionamento e espaçamento recomendados
Tamanho e espaçamento recomendados para barras de progresso.
- Sempre use a altura recomendada da barra de progresso.
- Exceção: você pode usar uma altura diferente se a janela pai não suportar a altura recomendada.
- Use a largura mínima se quiser uma 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 mais larga 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. Comece o rótulo com um verbo (por exemplo, Copiando) e termine com reticências. Esse rótulo pode 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.
Se a operação não foi iniciada diretamente pelo usuário, você pode incluir um rótulo adicional para fornecer o contexto e pedir desculpas pela interrupção. Comece este rótulo extra com a frase, Por favor, aguarde um pouco. Esta etiqueta não deve ser alterada 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, kilobytes e assim por diante) após o texto de detalhes.
Correto:
Neste exemplo, os detalhes estão rotulados corretamente.
Incorreto:
Neste exemplo, os detalhes não são rotulados, exigindo que os usuários determinem seu significado.
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 a porcentagem concluída ou restante porque essa informação é transmitida pela própria barra de progresso.
Botão Cancelar
- Rotule o botão Cancelar se o cancelamento 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 de 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 das caixas de diálogo de 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 deveria 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 sem modo, otimize o título para exibição na barra de tarefas colocando de forma concisa as informações distintivas primeiro. Exemplo: "66% concluído."