Verifique anotações sem usar o mouse
Vá até o ícone usando o teclado e experimente na tela sensível ao toque. As legendas devem poder abrir de forma adequada; As informações necessárias para a decisão precisam aparecer diretamente na interface.
Dica Sistema de projeto
Adicione explicação sem ocultar as informações necessárias.
Conteúdo do checklist
Progresso da revisão
01
Estrutura e significado
Compare as informações e a apresentação no contexto de uso.
02
Interação e usabilidade
Experimente a operação, altere o status e continue trabalhando.
O progresso é salvo automaticamente neste navegador.
ORIENTAÇÕES
Como revisar
EXEMPLOS
Exemplos de uso
Interpretação de um índice
O ícone ao lado de “Porcentagem de conclusão” abre uma breve explicação ao focar; O rótulo e o valor do índice permanecem legíveis quando a legenda é fechada.
Variantes e casos de uso
Como abrir a dica
Abrir pelo ponteiro e pelo foco quando adequado; informações essenciais devem aparecer diretamente, sem ficarem escondidas na dica.
Testar apenas com teclado e apenas com toque: o significado da ação deve continuar claro.
Exemplo Um botão de ícone tem nome acessível; a dica acrescenta o atalho sem substituir o nome.
Mais informaçõesExplicar a ação sem cobrir o conteúdo.
Informações complementares
A dica explica brevemente um detalhe, sem repetir o rótulo nem conter tarefas complexas.
Ler o rótulo e depois a dica: o complemento deve responder ao que ainda não foi esclarecido.
Exemplo A dica dos dados informa a data de atualização, em vez de repetir Receita.
Mais informaçõesExplicar a ação sem cobrir o conteúdo.Explicar a ação sem cobrir o conteúdo.
Largura adequada à leitura
Limitar a largura conforme o texto e permitir quebras de linha sem criar uma coluna estreita demais.
Testar traduções longas e telas pequenas: a dica não deve ultrapassar a largura disponível.
Exemplo Uma frase de orientação pode ocupar duas linhas em uma caixa compacta.
Mais informaçõesExplicar a ação sem cobrir o conteúdo.Explicar a ação sem cobrir o conteúdo.
Posição em relação ao elemento
Manter a dica perto do elemento, mudar de direção nas bordas e não cobrir o conteúdo necessário.
Focar um ícone na borda da janela: a dica deve permanecer inteiramente visível.
Exemplo Na borda direita, a dica aparece à esquerda do botão.
Mais informaçõesInformaçãoInformaçãoMais informações
Quando usar
Usar dicas para ajuda complementar; erros, requisitos de preenchimento e avisos importantes precisam de outro local.
Desativar as dicas: deve continuar possível concluir a tarefa sem perder condições obrigatórias.
Exemplo Os requisitos de senha ficam abaixo do campo; o atalho do botão pode aparecer na dica.
Informação
Ativar notificaçõesMais informaçõesExplicar a ação sem cobrir o conteúdo.