Estados do sistema
Três abordagens comuns para comunicação de estados do sistema:
Indicadores: um indicador é uma maneira de destacar um elemento da página (seja conteúdo ou parte da interface do usuário) para informar ao usuário que há algo especial nele que merece a atenção do usuário. (ex: sinal de venda, indicadores de uso/desempenho)
Validações: As mensagens de validação são mensagens (de sucesso ou erro) relacionadas às entradas dos usuários — elas comunicam se os dados inseridos estavam incompletos ou incorretos.
Notificações: As notificações são mensagens informativas que alertam o usuário sobre ocorrências gerais dentro de um sistema.
Notificações
Componentes de uma notificação
Informação: Esta é a mensagem que pretendemos transmitir. Isso deve fornecer aos usuários contexto suficiente para identificar rapidamente o problema e decidir se a informação é importante.
Origem/contexto: Este é o recurso/dados de onde a notificação se origina. Com base em como a notificação está ancorada, talvez seja necessário incluir essas informações na mensagem.
Ação (opcional): essas são possíveis etapas de correção que o usuário pode ou deve executar.
Âncora/Modo: é aqui que a notificação aparecerá (ex: centros de notificação, emblemas contextuais, e-mails, integrações de webhook, etc.)
Indicadores ou contadores de notificação: são as dicas visuais para conscientizar os usuários sobre o fato de que há algo que precisa de sua atenção. Isso pode incluir o número de notificações não lidas. Considere o aumento de notificações em uma categoria (ex: no whatsapp, a guia de mensagens mostra o número de tópicos não lidos, além de tópicos não lidos mostrando o número de mensagens não lidas)
Metadados: Hora, motivo pelo qual estão vendo esta notificação, etc.
- Solicitar aos usuários que ativem as notificações no primeiro acesso
- Ao solicitar permissão para notificações, não informar o conteúdo e propósito das notificações
- Enviar notificações em excesso
- Conteúdo das notificações irrelevante, vago ou muito extenso
- Dificultar a desativação das notificações
Indicadores de estados
Os indicadores são pistas visuais destinadas a atrair a atenção do usuário para informações dinâmicas. Ele está ancorado em componentes de interface do usuário. Formas e cores são algumas formas comuns de se obter tais informações.
Possíveis estados do sistema para indicação
Sistema ocupado
Quando requer mais do que alguns segundos para o sistema carregar, ele deve fornecer feedback imediato aos usuários. Dependendo do tempo de espera, é recomendável usar indicadores de carregamento infinito (normalmente, para operações que levam menos de 10 segundos)
O conteúdo está carregando
Quando demorar algum tempo para carregar o conteúdo, é recomendável usar um tipo especial de contêiner - tela de esqueleto. Esse contêiner de conteúdo temporário é usado para atenuar o tempo de espera e deve ser preenchido com dados reais assim que os dados estiverem disponíveis.
Deixar o usuário sem informações sobre o estado do sistema em pontos críticos
Estados desabilitados
Estado desativado
Um estado desativado é aplicado a um componente quando o usuário não tem permissão para interagir com o componente devido a permissões, dependências ou pré-requisitos. Os estados desativados removem completamente a função interativa de um componente.
Benefícios de botões desativados:
- Ajuda a descobrir e aprender: mostrar elementos desativados mostra aos usuários o que o aplicativo pode fazer e ajuda a localizar os controles e botões na interface.
Desvantagens de botões desativados:
- Aumenta o esforço mental e pode confundir: incluir botões desativados dá aos usuários mais coisas para pensar e pode confundi-los se não forem implementados corretamente.
- Problemas de acessibilidade: botões desativados são difíceis de ver e não fornecem feedback aos usuários.
Botões ocultos
Benefícios de botões ocultos:
- Reduz o esforço mental e simplifica a interface: mostrar apenas o que é necessário elimina distrações e economiza espaço.
- Permite alterar controles: o mesmo espaço pode ser usado para diferentes estados.
Desvantagens de botões ocultos:
- Pode distrair se usado em excesso: ocultar e mostrar botões constantemente pode distrair.
- Menor capacidade de descoberta: os usuários podem ter dificuldade para encontrar a opção oculta.
Quando usar?
Escolha desativado quando:
- Se o botão estiver temporariamente desativado ou exigir uma ação específica do usuário para alterar seu status. Nesse caso, seria útil fornecer uma bolha de foco/tooltip/detalhe dos botões de divulgação explicando os critérios de uso e informando aos usuários quais ações podem ser tomadas para habilitá-los.
- Se você quiser que o usuário saiba que o controle existe, mas que está desativado.
- Se o usuário puder ver esse recurso em algum lugar e depois não conseguir encontrá-lo novamente se ele estiver oculto. E não haveria nenhuma indicação do motivo pelo qual ele não poderia encontrá-lo novamente.
Escolha oculto quando:
- Se o usuário não estiver autorizado a usar o controle, o que significa que ele nunca estará disponível para o usuário.
- Se for um controle que só está ativo em situações muito raras. Não mostre ao usuário um botão que não possa ser usado ou que não esteja habilitado para ser usado.
- Se uma página tiver muitas funcionalidades desativadas. Por exemplo, um bloco extra inteiro de entradas de formulário.
Estados vazios
Estados vazios são momentos na experiência do usuário com um produto em que não há nada para exibir. Isso pode acontecer quando um usuário abre um aplicativo ou site pela primeira vez, realiza uma pesquisa que não retorna resultados ou algo dá errado quando o usuário está interagindo.
Tipos de estados vazios
Primeiro uso ou estado inicial
Ocorre com um novos usuários de um produto ou serviço, quando ainda não há nada para mostrar, como após a criação de uma nova conta.
Dados do usuário apagados
Ocorre quando os usuários concluem ações,como limpar a caixa de entrada ou a lista de tarefas, e o resultado é uma tela vazia.
Erros
Ocorrem quando alguma ocorrência inesperada acontece ou quando há problemas, como ficar off-line devido a problemas de rede.
Sem resultados/Sem dados
Quando não há nada para mostrar como resultado de um processo, pode ocorrer caso alguém faça uma pesquisa e o resultado da busca não retorne resultados válidos ou não haja dados disponíveis para mostrar (por exemplo, ao filtrar por um intervalo de datas sem entradas registradas).
Diretrizes para criação de estados vazios
Entenda o contexto
Os designers devem considerar as expectativas e interações anteriores do usuário ao usarem o aplicativo ou site. Por exemplo, a tela de estado vazia deve guiar o usuário em sua integração com o serviço, ou informá-lo sobre a exclusão dos seus dados e fornecer instruções para adicionar novo conteúdo.
Comunique o motivo
O design de IU de estado vazio deve ajudar os usuários a entender por que a tela de estado vazio está aparecendo e o que eles precisam fazer para adicionar conteúdo. Por exemplo, um aplicativo de mídia social com um feed vazio pode dizer "Você ainda não está seguindo nenhuma conta", com uma lista de contas sugeridas.
Fornecer orientação
Os usuários devem entender facilmente como adicionar conteúdo ou concluir uma tarefa. Continuando com o exemplo de um aplicativo de mídia social, a tela de estado vazia deve indicar claramente como procurar amigos ou descobrir contas relevantes.
Use dicas visuais
Dicas visuais, como ícones e cores, podem ajudar os usuários a entender o que a tela de estado vazia comunica e o que eles precisam fazer. Por exemplo, se o usuário não tiver mensagens em um aplicativo de mensagens, a tela de estado vazia pode incluir um ícone de uma caixa de correio vazia. Usar texto claro e cores contrastantes é uma boa prática de UX recomendada para acessibilidade.
Evolua com a jornada do usuário
Ao adicionar conteúdo, a IU deve refletir as alterações feitas pelo usuário. Isso garante que o usuário saiba o que está acontecendo e o que fazer em seguida. Por exemplo, se o usuário adicionou uma nova anotação em um aplicativo, a tela deve mostrar uma mensagem como "1 anotação criada".
Como usar
Comunique o objetivo de sua inscrição
Use o estado vazio para explicar a finalidade do aplicativo, como o que ele faz e como pode ser usado.
Sugira ações que o usuário pode executar
Forneça sugestões de ações que o usuário pode executar para preencher a interface com conteúdo, como realizar uma pesquisa ou criar um novo item.
Use recursos visuais
Use ilustrações ou outras imagens para ajudar o usuário a entender a finalidade do aplicativo ou site ou para sugerir ações que o usuário pode realizar.
Mantenha o design simples
Evite sobrecarregar o estado vazio com muito texto ou vários elementos. Mantenha o design simples e focado na mensagem ou ação principal que você deseja que o usuário execute. Um design de estado vazio simples inclui um título, descrição, imagem e ação.
Validar projetos com usuários
Teste e valide o estado vazio com usuários reais para obter seus comentários. Use esse feedback para melhorar seu design.
Considere o Contexto
Pense no contexto em que o estado vazio aparecerá e projete-o de acordo. Por exemplo, se o estado vazio for exibido quando o usuário não tiver conexão com a Internet, ele deverá incluir uma mensagem sobre a perda de conexão e sugestões para ações alternativas.