Diretrizes e lista de verificação de controles de progresso (aplicativos da Windows Store)

Descrevemos as práticas recomendadas para o uso de controles de progresso em seu aplicativo da Windows Store em C++, C# ou Visual Basic.

Mapa: Como este tópico está relacionado aos outros? Veja:

Este é o controle correto?

Os controles ProgressBar e ProgressRing mostram aos usuários o progresso de uma operação que leva mais de 2 segundos para ser concluída. Um ProgressBar pode mostrar uma porcentagem de conclusão aproximada (progresso determinado), e ambos os controles de progresso podem indicar que uma operação está em andamento (progresso indeterminado).

Nem sempre é necessário mostrar um controle de progresso. Às vezes, o progresso de uma tarefa é suficientemente óbvio por si só, ou a tarefa é concluída tão rapidamente que a exibição de um controle de progresso seria distrativa. Veja a seguir alguns pontos a serem considerados ao determinar se você deve mostrar um controle de progresso.

  • A operação será concluída em dois segundos ou menos?

    Em caso afirmativo, não mostre um controle de progresso. Se uma operação demorar mais de dois segundos para ser concluída na maioria das vezes (mas não sempre), aguarde 500ms antes de mostrar o controle para evitar cintilação.

  • A operação está aguardando que o usuário execute uma tarefa?

    Em caso afirmativo, não use uma barra de progresso. Barras de progresso servem para progresso do computador, e não para progresso do usuário.

  • O usuário precisa saber que algo está acontecendo?

    Por exemplo, se o aplicativo está baixando alguma coisa em tela de fundo, e o usuário não iniciou o download, o usuário não precisa acompanhar o progresso.

  • A operação é uma atividade em tela de fundo que não bloqueia a atividade do usuário e é de interesse mínimo (porém existente) para o usuário?

    Use texto e elipse quando seu aplicativo estiver executando tarefas que não precisam estar visíveis o tempo todo, mas cujo status você ainda precisa mostrar.

    Exemplo de texto como um indicador de progresso

    Use elipses para indicar que a tarefa está em andamento. Se houver várias tarefas ou itens, você poderá indicar o número de tarefas restantes. Quando todas as tarefas estiverem concluídas, descarte o indicador.

  • Você pode utilizar o conteúdo da operação para visualizar o progresso?

    Em caso afirmativo, não mostre um controle de progresso. Por exemplo, ao exibir imagens carregadas do disco, elas aparecem na tela uma por uma à medida que são carregadas. A exibição de um controle de progresso não traria nenhum benefício; apenas sobrecarregaria a interface do usuário.

Não use o "cursor de espera" para indicar atividade, pois os usuários que usam toques para interagir com o sistema não o verão, e os usuários que utilizam o mouse não precisam de duas maneiras de visualizar a atividade (o cursor e o controle do progresso).

Escolhendo o tipo correto de estilo de controle de progresso

Há 3 estilos de controle de progresso:

  • O estilo de barra de progresso determinado

    Exemplo de uma barra de progresso determinado

    Use o estilo de barra de progresso determinado quando a tarefa é determinada. Ou seja, quando ela tem uma duração bem definida ou um fim previsível. Eis alguns exemplos de tarefas determinadas:

    • O aplicativo está baixando uma foto de 500 kb e recebeu 100 kb até o momento.
    • O aplicativo está exibindo um anúncio de 15 segundos e se passaram dois segundos.
  • O estilo de barra de progresso indeterminado

    Exemplo de uma barra de progresso indeterminado

    Use este estilo para tarefas que não são determinadas e não são modais (não bloqueiam a interação com o usuário).

  • O estilo de toque de progresso indeterminado

    Exemplo de um toque de progresso

    Use este estilo para tarefas que não são determinadas e são modais (bloqueiam a interação com o usuário).

Trate tarefas parcialmente modais como não modais. Algumas tarefas bloqueiam a interação até que algum progresso seja feito, e então o usuário pode começar a interagir com o aplicativo novamente. Por exemplo, quando o usuário executa uma consulta de pesquisa, a interação é bloqueada até que o primeiro resultado seja exibido. Trate tarefas como essas como não modais e utilize o estilo de barra de progresso indeterminado se o estado modal durar menos de 2 segundos. Se o estado modal puder durar mais de 2 segundos, utilize o toque de progresso indeterminado para a fase modal da tarefa e utiize a barra de progresso indeterminado para a fase não modal.

Diretrizes gerais

Veja a seguir algumas diretrizes gerais a serem seguidas, independentemente do estilo de controle de progresso utilizado.

  • Mostre um único controle de progresso para várias tarefas relacionadas ativas. Se houver vários itens relacionados na tela e todos eles estiverem executando simultaneamente algum tipo de atividade, não mostre vários controles de progresso. Em vez disso, mostre um controle que termine quando a última tarefa for concluída. Por exemplo, se o aplicativo baixar várias fotografias, mostre um único controle de progresso, em vez de mostrar um para cada foto.
  • Não altere o local nem o tamanho do controle de progresso enquanto a tarefa estiver sendo executada.

Diretrizes para tarefas determinadas

Se você puder estimar a quantidade de trabalho restante em tempo, bytes, arquivos ou alguma outra unidade de medida quantificável, use uma barra de progresso determinado. Veja a seguir algumas diretrizes para uso da barra de progresso determinado.

Alternando de indeterminado para determinado

Se for necessário tempo (ou uma ação) para começar a apresentar progresso determinado, use a barra indeterminada primeiro, e depois alterne para a barra determinada.

Por exemplo, se a primeira etapa de uma tarefa de download for se conectar a um servidor, você não poderá estimar quanto tempo isso irá demorar. Depois que a conexão for estabelecida, alterne para a barra de progresso determinado para mostrar o progresso do download. Mantenha a barra de progresso exatamente no mesmo lugar e com o mesmo tamanho após a alternância.

Alternando de uma barra de progresso indeterminado para determinado

Mostrando o progresso e o status embutido

Suponha que você tenha uma lista de itens, como uma lista de impressoras, e determinadas ações possam iniciar uma operação em itens nessa lista (como instalar um driver para uma das impressoras). Quando isso acontecer e a operação for determinada, mostre uma barra de progresso determinado ao lado do item.

Mostre o assunto (rótulo) da tarefa acima da barra de progresso e o status abaixo. Não forneça texto de status se o que está acontecendo for óbvio. Quando a tarefa estiver concluída, oculte a barra de progresso. Use o texto de status para comunicar o novo estado de um item.

Mostrando o progresso embutido com o status

Mostrando várias operações

Quando você quiser mostrar uma lista de tarefas, alinhe o conteúdo em uma grade para que os usuários possam ver o status facilmente. Mostre barras de progresso para todos os itens, mesmo para aqueles que estão pendentes.

Como o objetivo dessa lista é mostrar as operações em andamento, remova as operações da lista quando elas forem concluídas.

Exibindo várias barras de progresso

Mostrando o progresso determinado modal do aplicativo na barra do aplicativo

Se um usuário tiver iniciado uma tarefa a partir da barra do aplicativo e essa tarefa bloquear a interação com o usuário, mostre o controle de progresso na barra do aplicativo.

Se estiver claro para o que a barra de progresso está mostrando o progresso, você poderá alinhá-la com o topo da barra do aplicativo e ocultar o rótulo e o status; caso contrário, forneça um texto para o rótulo e para o status.

Para desabilitar a interação durante a tarefa, desative os controles na barra do aplicativo e ignore a entrada na área de conteúdo.

 

O que fazer e o que não fazer para tarefas determinadas

O que fazerSe a operação for modal (bloquear a interação com o usuário) e demorar mais de 10 segundos, ofereça uma forma de cancelá-la.
O progresso do espaço é atualizado de forma uniforme. Evite situações em que o progresso aumenta além de 80% e depois para por um longo período. Você deseja agilizar o progresso até o fim, e não retardá-lo. Evite saltos drásticos, como de 0% para 90%.
Depois de definir o progresso como 100%, aguarde até o fim da animação da barra de progresso determinado antes de a ocultar.
Se sua tarefa for interrompida (por um usuário ou por uma condição externa), mas o usuário puder retomá-la, indique visualmente se o progresso está pausado definindo a propriedade ShowPaused como verdadeira. Forneça o texto de status abaixo da barra de progresso que informe ao usuário o que está acontecendo.
Se a tarefa for interrompida e não puder ser retomada ou precisar ser reiniciada desde o início, indique visualmente que há um erro definindo a propriedade ShowError como verdadeira. Substitua o texto de status (abaixo da barra) por uma mensagem que informe ao usuário o que aconteceu e como corrigir o problema (se possível).

 

O que não fazerNão diminua o progresso. Sempre aumente o valor de progresso. Se você precisar reverter uma ação, mostre o progresso da reversão assim como você mostraria o progresso de qualquer outra ação.
Não reinicie o progresso (de 100% para 0%), a menos que esteja óbvio para o usuário que uma etapa ou tarefa atual não é a última. Por exemplo, suponha que uma tarefa tenha duas partes: baixar alguns dados e depois processar e exibir esses dados. Quando o download estiver concluído, redefina a barra de progresso como 0% e comece a mostrar o progresso do processamento de dados. Se não estiver claro para os usuários que há várias etapas em uma tarefa, recolha essas tarefas em uma única escala de 0 a 100% e atualize o texto de status ao mover de uma tarefa para a próxima.

 

Diretrizes para tarefas indeterminadas

Se a tarefa for modal (bloquear a interação com o usuário até sua conclusão), use o estilo de toque de progresso indeterminado. Se a tarefa não for modal, use o estilo de barra de progresso indeterminado.

Toque de progresso indeterminado

Siga estas diretrizes para exibir o toque de progresso:

  • Exiba o toque de progresso no contexto da ação: mostre-o próximo ao local onde o usuário iniciou a ação ou onde os dados resultantes serão exibidos.
  • Forneça o texto de status à direita do toque de progresso.
  • Deixe o toque de progresso com a mesma cor do texto de status.
  • Desabilite os controles com os quais o usuário não deve interagir enquanto a tarefa estiver sendo executada.
  • Se a tarefa resultar em um erro, oculte o indicador de progresso e o texto de status e exiba uma mensagem de erro em seu lugar.

Veja a seguir algumas diretrizes para situações específicas envolvendo o toque de progresso.

Em uma caixa de diálogo, ocorre uma ação antes de avançarmos para a próxima tela

Coloque o toque de progresso logo acima da área do botão, alinhado à esquerda com o conteúdo da caixa de diálogo.

Progresso em uma caixa de diálogo
Mostrando o progresso em uma janela do aplicativo com controles alinhados à direita

Coloque o toque de progresso à esquerda ou logo acima do controle que causou a ação. Alinhe o toque de progresso com o conteúdo relacionado.

Progresso em uma janela do aplicativo
Mostrando o progresso em uma janela do aplicativo com controles alinhados à esquerda

Se um controle que inicia a ação modal estiver alinhado à esquerda, coloque o toque de progresso à direita desse controle. Ou você pode colocá-lo abaixo do controle.

Um toque de progresso com controles alinhados à esquerda

- ou -

Um toque de progresso abaixo dos controles alinhados à esquerda

Mostrando o progresso em um menu suspenso

Use um menu suspenso se a atividade puder prosseguir em tela de fundo quando o usuário ignorar o menu suspenso tocando fora dele.

Um controle de progresso em um menu suspenso
Mostrando vários itens

Coloque o toque de progresso e o texto do status abaixo do título do item. Se ocorrer um erro, substitua o toque de progresso e o status pelo texto do erro.

Um toque de progresso em uma lista de vários itens

 

Barra de progresso indeterminado

Use uma barra de progresso indeterminado para tarefas que não bloqueiam a interação com o usuário (não modais).

Veja a seguir algumas diretrizes para situações específicas da barra de progresso indeterminado.

Mostrando o progresso em um menu suspenso

Coloque a barra de progresso indeterminado na parte superior do menu suspenso e defina sua largura de forma que ela abranja todo o menu suspenso. Esse posicionamento minimiza a distração, mas ainda comunica a atividade em andamento. Não dê um título para o menu suspenso, pois um título impede que você coloque a barra de progresso na parte superior do menu suspenso.

Uma barra de progresso indeterminado em um menu suspenso
Em uma janela do aplicativo

Coloque a barra de progresso indeterminado na parte superior da janela do aplicativo, abrangendo toda a janela.

Uma barra de progresso indeterminado em uma janela do aplicativo

 

Diretrizes para texto de status

  • Ao usar a barra de progresso determinado, não mostre a porcentagem de progresso no texto de status. O controle já fornece essas informações.
  • Se você usar texto para indicar atividade sem um controle de progresso, use elipses para transmitir que a atividade está em andamento.
  • Se você usar um controle de progresso, não utilize elipses no texto de status, pois o controle de progresso já indica que a operação está em andamento.

Padrões de layout

Veja a seguir as diretrizes de layout para diversos padrões comuns de uso do controle de progresso.

  • Barra de progresso determinado com rótulo e status

    Uma barra de progresso determinado com informações de rótulo e status

  • Várias barras de progresso

    Layout recomendado para várias barras de progresso

  • Toque de progresso indeterminado com texto de status

    Layout para toque de progresso indeterminado com texto de status

  • Barra de progresso indeterminado

    Barra de progresso indeterminado

Tópicos relacionados

Roteiro para criação de aplicativos usando C#, C++ ou VB

 

 

Mostrar:
© 2014 Microsoft