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 orientações ainda se aplica em princípio, mas a apresentação e os exemplos não refletem as nossas orientações de conceção atuais .

Com uma barra de progresso, os usuários podem acompanhar o progresso de uma operação longa. 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 estão cientes de tempos de resposta de mais de um segundo. Consequentemente, você deve considerar que as operações que levam dois segundos ou mais para serem concluídas são longas e 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.

Será este o controlo correto?

Para decidir, considere estas questões:

• A operação será concluída em cerca de cinco segundos ou menos? Em caso afirmativo, use um indicador de atividade em vez disso, porque exibir uma barra de progresso por uma duração tão curta seria distrair. 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? Em caso afirmativo, 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? Em caso afirmativo, use apenas a animação. A barra de progresso indeterminado é efetivamente uma animação genérica e não acrescenta 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 um de notificações. 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ção. Exemplos dessas operações demoradas incluem impressão, backup, verificações do sistema e transferências ou conversões de dados em massa.

• Quando a operação estiver 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 de 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. Precisam também de saber:

• Que se iniciou uma longa operação.
• Esse progresso está sendo feito e que a operação acabará sendo concluída (e, portanto, não foi travada).
• A percentagem aproximada da operação que foi concluída (e, portanto, a percentagem restante).
• Se eles devem cancelar a operação se não vale a pena continuar a esperar.
• Se eles devem continuar a esperar ou fazer algo mais enquanto a operação é concluída.

Use barras de progresso determinadas para operações que exigem uma quantidade limitada de tempo, mesmo que essa quantidade de tempo não possa ser prevista com precisão. Barras de progresso indeterminado 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 requer cinco etapas e cada uma dessas etapas requer uma quantidade limitada de tempo, 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 ao tempo que cada etapa geralmente leva. Use uma barra de progresso indeterminado somente se uma barra de progresso determinado fizer com que os usuários concluam incorretamente que a operação foi bloqueada.

Se você fizer apenas uma coisa...

Certifique-se de fornecer feedback de progresso para operações longas e que as informações acima sejam claramente comunicadas. Use barras de progresso determinadas sempre que possível.

Padrões de utilização

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

Barras de progresso determinadas

Rótulo	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 estiver concluída.	Como esse feedback é modal, 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 feedback 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 está demorando muito ou não vale 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 duplas determinadas 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 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 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: Este padrão é geralmente desnecessário e deve ser evitado.
Barras de progresso determinadas sem moderação Indique o progresso de uma operação preenchendo da esquerda para a direita e preenchendo completamente quando a operação estiver 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 ExplorerO 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 modal indeterminado Indique que uma operação está em andamento mostrando uma animação que percorre continuamente a barra da esquerda para a direita.	Utilizado apenas para operações cujo progresso global não pode ser determinado, pelo que não existe qualquer noção de exaustividade. 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 esperando. Eles também são menos distratores visualmente. Neste exemplo, o Windows Update usa uma barra de progresso modal indeterminado para indicar o progresso enquanto procura atualizações.
Barras de progresso indeterminado sem moderação 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 indeterminado sem moderação ao preencher as propriedades de contato. Os usuários podem continuar a usar a janela de propriedade enquanto esse trabalho está em andamento.

Medidores

Tipo	Descrição
metros Indique uma percentagem que não esteja relacionada com o 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 verdadeiras barras de progresso. Neste exemplo, o medidor mostra a porcentagem de espaço em disco usado.

Orientações

Geral

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

• Indique claramente os progressos reais. 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 concluam que seu programa foi bloqueado quando não o fez.

• Indicar claramente a falta de progressos. A barra de progresso não deve avançar se não houver progressos. 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 elas. 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 eles não têm expectativas sobre esses detalhes. Normalmente, uma barra de progresso bem rotulada por si só fornece informações suficientes, portanto, forneça informações de progresso adicionais 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 compilações de versão.

  Correto:

  de progresso da instalação

  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 arquivos que estão sendo copiados é significativo.

  Incorreto:

  

  Neste exemplo, um programa de instalação está fornecendo detalhes que não fazem 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 apenas texto. Por exemplo, a barra de progresso do comando Excluir do Outlook exibe a Lixeira para o 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 sido bloqueada. 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, só use animações quando houver uma justificação clara; não os use para tentar entreter os utilizadores.

• Animações de posição centralizadas sobre a barra de progresso. Coloque a animação acima dos rótulos da barra de progresso, se tiver algum. 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 apenas 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 enquanto está processando, um efeito sonoro restaura 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 mudam para outros programas enquanto aguardam 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 o feedback fornecido pelas barras de progresso não é necessariamente preciso e é passageiro, 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 completa 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 os dois ao mesmo tempo.

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

Barras de progresso determinadas

• Use barras de progresso determinadas para operações que exigem uma quantidade limitada de tempo, mesmo que essa quantidade de tempo não possa ser prevista com precisão. Barras de progresso indeterminado 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.

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

• Indicar 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 puder fazê-lo com precisão. Estimativas de tempo restante que são precisas são úteis, mas estimativas que estão muito fora da marca ou saltam significativamente não são úteis. Pode ser necessário realizar algum processamento antes de poder fornecer estimativas precisas. Em caso afirmativo, 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 é 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 a barra de progresso seja concluída uma vez.

  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. Tal como acontece com um reinício, uma barra de progresso perde o seu valor se fizer uma cópia de segurança. Aumente sempre 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 indeterminado

• Use barras de progresso indeterminado apenas para operações cujo progresso geral não pode ser determinado. Use barras de progresso indeterminado para operações que exigem uma quantidade ilimitada de tempo 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ê pode usar uma barra de progresso indeterminado enquanto os objetos são contados e, em seguida, converter em uma barra de progresso determinado.

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

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

  Correto:

  do servidor

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

Barras de progresso sem moderação

• Se os usuários puderem fazer algo produtivo enquanto a operação estiver em andamento, forneça feedback sem moderação. 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ço, exiba o progresso sem moderação na barra de endereço.

  

  Neste exemplo, o progresso sem moderação é mostrado na barra de endereço.

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

  

  Neste exemplo, o progresso sem moderação é mostrado na barra de status.

Barras de progresso modal

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

• Forneça um botão de comando para interromper a operação se ela demorar mais do que alguns segundos para ser concluída ou tiver o potencial de nunca ser concluída. Rotule o botão Cancelar se cancelar retornar o ambiente ao seu estado anterior (sem deixar 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 seu estado anterior. Centralize o botão de comando verticalmente com a barra de progresso em vez de alinhar os topos.

  Correto:

  de rede

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

• Use os seguintes formatos de tempo. Comece com o primeiro dos seguintes formatos, onde a maior unidade de tempo não é zero, e 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 formato de dois pontos:

  Tempo restante: h horas, m minutos

  Tempo restante: m minutos, s segundos

  Tempo restante: s segundos

  Se o espaço no ecrã for escasso:

  h hrs, m mins restantes

  m mins, s segundos 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 restante

  0:ss restantes

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

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

  Incorreto:

  hh horas, mm minutos, ss segundos

• Mantenha a estimativa up-todata. O tempo restante de atualização estima pelo menos a cada 5 segundos.

• Concentre-se no tempo que resta porque essa é a informação que mais interessa aos utilizadores. Dê o tempo total decorrido apenas 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 texto percentual completo porque essa informação é transmitida pela própria barra de progresso.

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

  Incorreto:

  1 minuto, 1 segundo

• Use maiúsculas 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 pelo usuário que impeça a realização de mais progressos. Exiba uma mensagem para explicar o problema e recomendar uma solução.
• Ative a barra de progresso em amarelo para indicar que o usuário pausou a tarefa ou que há uma condição que está impedindo o progresso mas 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.

Medidores

• Use as barras de progresso apenas para progredir. Use medidores para indicar porcentagens que não estão relacionadas ao progresso.

Dimensionamento e espaçamento recomendados

Dimensionamento e espaçamento recomendados para barras de progresso.

• Use sempre a altura da barra de progresso recomendada.
  • 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 tornar a barra de progresso discreta.
• Não utilize larguras superiores ao 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 uma reticência. Esse rótulo pode mudar 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 de maiúsculas no estilo de frase.

• Se a operação não foi iniciada diretamente pelo usuário, você pode incluir um rótulo adicional para dar o contexto e pedir desculpas pela interrupção. Comece este rótulo extra com a frase, Por favor, aguarde enquanto. Este rótulo não deve mudar 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 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 terminado com dois pontos. Especifique unidades (segundos, kilobytes e assim por diante) após o texto dos 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 de 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 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 cancelar retornar o ambiente ao seu 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 seu 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 reafirmação do rótulo da barra de progresso. O nome do programa deve ser usado em vez disso.

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