Níveis de qualidade dos widgets

Os widgets são um componente essencial para personalizar a tela inicial de um usuário. Elas podem ajudar os usuários a concluir uma jornada de usuário crítica de um app com um único toque ou fornecer um resumo rápido dos dados mais importantes de um app. Eles também podem ser personalizados para atender às necessidades do usuário e adaptados às preferências individuais.

A qualidade de um widget pode afetar o engajamento do usuário com o conteúdo e os recursos do seu app. Há três níveis principais de qualidade de widget:

• Nível 3: baixa qualidade: não atendem aos requisitos mínimos de qualidade e não oferecem uma ótima experiência do usuário.
• Nível 2: padrão de qualidade: é útil, utilizável e oferece uma experiência de qualidade.
• Nível 1: diferenciados: são widgets exemplares que oferecem experiências principais personalizadas e ajudam os usuários a criar telas iniciais únicas e produtivas.

Nível 3: baixa qualidade

Um widget é considerado de baixa qualidade se não atender aos critérios padrão de layout, cor, descoberta e conteúdo. Para mais informações sobre como criar um widget de prática recomendada e de alta qualidade, consulte as diretrizes a seguir.

Nível 2: padrão de qualidade

Para ser considerado de boa qualidade, o widget precisa atender a todos os seguintes critérios de layout, cor, descoberta e conteúdo:

Layout

• O widget precisa preencher os limites definidos pela grade do iniciador quando for colocado na tela inicial. Ele pode ser redimensionado para pelo menos um dos seguintes tamanhos : 2 x 2, 4 x 2 (células de grade da tela de início). Para mais informações, consulte as diretrizes de dimensionamento.
  • O widget precisa estar alinhado corretamente a outros elementos da tela inicial no eixo vertical ou horizontal e não ocupar espaço desnecessário.
  • O widget deve tocar em pelo menos duas bordas opostas da grade. Em outras palavras, os widgets não precisam ser retangulares. Eles podem ter formas personalizadas, desde que as bordas da forma toquem pelo menos duas bordas da grade.
• Se redimensionáveis, os widgets precisam ter um tamanho mínimo ou máximo adequado, que pode ser definido com minWidth, minHeight, maxResizeWidth e maxResizeHeight no AppWidgetProviderInfo XML
  • O tamanho máximo precisa ser definido se o redimensionamento do widget apenas adicionar espaço em branco.
  • O tamanho mínimo precisa ser definido com base no tamanho mínimo que o widget ainda oferece valor e atende aos requisitos de área de toque (48 x 48).

check_circle

O que fazer

Forneça áreas de toque de 48 x 48 dp.

cancel

O que não fazer

Deixe as áreas de toque muito pequenas.

Cor

• Os botões de texto e ícone do widget precisam ter índices de contraste suficientes para atender aos requisitos de acessibilidade (exceto miniaturas e imagens).

check_circle

O que fazer

Garanta um contraste de cores suficiente.

cancel

O que não fazer

Usar cores com contraste insuficiente.

Descoberta

• O widget precisa ter visualizações precisas no seletor de widgets. Isso pode ser definido com previewImage e previewLayout no XML AppWidgetProviderInfo ou com visualizações geradas.

  • A visualização do widget parece consistente com a funcionalidade oferecida quando adicionada à tela inicial.
  Vídeo 1: widget com visualização imprecisa.

Conteúdo

• O conteúdo do widget não pode ficar desatualizado ou ser inoportuno de maneira consistente.
  • O widget precisa ser atualizado depois que o usuário conclui uma ação nele.
  • O widget precisa ser atualizado depois que o usuário concluir uma ação relacionada no app.
• O widget precisa permitir que os usuários atualizem o conteúdo manualmente, se houver uma expectativa de que os dados sejam atualizados com mais frequência do que a interface.
• A interface do widget precisa ser funcional ou o conteúdo será cortado.
• Os estados vazios e zero do widget precisam ser intencionais e mostrar o valor do widget ou fornecer uma call-to-action quando o widget estiver instalado, mas o usuário ainda não tiver feito login.

Figura 2. Widget com estado vazio valioso.

Figura 3. Widget com botão de atualização.

Nível 1: diferenciado

Os melhores widgets atendem a todos os critérios do Nível 2 e de layout, cor, descoberta e coerência do sistema.

Layout

• O widget preenche os limites e se alinha corretamente a outros elementos da tela inicial no eixo vertical ou horizontal e não ocupa espaço desnecessário
  • Todas as formas precisam atingir as quatro bordas dos limites da grade

check_circle

O que fazer

Faça com que o widget se expanda para as quatro bordas dos limites da grade.

cancel

O que não fazer

Crie um tamanho personalizado que não preencha os limites da grade.

• O widget oferece suporte a um tamanho preferencial

  • O widget pode ser redimensionado para pelo menos um dos seguintes tamanhos : 2x2, 4x2

• O cabeçalho do widget é usado e aplicado de forma consistente

  • Recomendar o uso do cabeçalho se:
    • Você quer fornecer links diretos para determinadas funções do app, como a pesquisa.
    • Você quer aplicar um ícone de marca do app que funcione como um link consistente ao tocar nele.
    • O widget contém conteúdo rolável (lista, grade etc.)
    • O conteúdo do cabeçalho fornece um contexto útil (nome da lista de tarefas)
  • O cabeçalho é opcional quando:
    • O widget é uma imagem sem margens (Fotos)
    • O espaço é limitado (< 2 linhas de altura)
    • Quando o conteúdo do cabeçalho é redundante.
  • Se você estiver usando um cabeçalho, siga nossas especificações:
    • Ícone, título, ações.
      • O ícone está sempre presente
      • O título aparece quando há espaço suficiente
      • Ações com base no contexto do widget.
    • Altura 48 dp, enchimento, 14 dp

check_circle

O que fazer

Forneça um cabeçalho que atenda às especificações do widget.

cancel

O que não fazer

Use especificações personalizadas para tamanho e títulos.

Cor

• O widget oferece suporte à paleta de cores com base nos temas do sistema, na cor do conteúdo ou na cor da marca.
  • O widget oferece suporte a paletas nos modos claro e escuro.
  • A cor dinâmica é um exemplo de aplicação de temas no contexto do dispositivo.
  • A extração de cores local é um exemplo de criação de temas com base no conteúdo do app.
  • A cor semântica é um exemplo de tema baseado no conteúdo do app.

Figura 4. Widgets com cores dinâmicas de papel de parede e cores de tema da marca.

Descoberta

• A visualização inclui conteúdo do usuário ou aplica um tema do sistema (API Generated Previews ou previewLayout no AppWidgetProviderInfo XML).

Figura 5. Widgets com conteúdo de visualização genérico e conteúdo de visualização do usuário.

• O widget tem um nome ou uma descrição que ajuda os usuários a entender o valor do widget.
  • O nome tem menos de 50 caracteres.
  • O nome e a descrição são exclusivos no app. Por exemplo, o app não pode ter vários widgets com o mesmo nome.

check_circle

O que fazer

Inclua uma descrição sucinta exclusiva.

cancel

O que não fazer

Forneça uma descrição genérica.

Coerência do sistema

• Os widgets retangulares precisam usar o raio de canto fornecido pelo sistema (específico do OEM)

check_circle

O que fazer

Use o raio de cantos do sistema.

cancel

O que não fazer

Defina o raio de canto personalizado.

• Mostra um estado de carregamento com um indicador de progresso (em uma initialLayout com cor temática ou equivalente de marca).

Figura 6. Widgets com indicador e um estado de carregamento personalizado.

• Usa a configuração do sistema em vez de um ponto de entrada de configurações de widget personalizado
• Usa a transição de inicialização do sistema ao entrar/sair do app para o widget

Lembre-se das dicas oferecidas neste guia ao criar seu widget. Você quer oferecer a melhor qualidade e uma ótima experiência do usuário. Muitas barras de qualidade podem ser atingidas com layouts canônicos. Para saber mais sobre as barras de qualidade, os designers podem consultar os modelos de widgets do Android, e os desenvolvedores podem consultar os exemplos de código de layout nos nossos exemplos de plataforma e no guia para desenvolvedores de layouts.