Como desenhar Estados Vazios
Um cenário sempre presente em produtos digitais móveis e, muitas vezes, negligenciado pelos designers, é o estado vazio (Empty State).
Tudo bem, o foco principal de um produto é o seu conteúdo, mas nem sempre conseguiremos entregar isso em todos os lugares. Existirão situações em que algo de errado pode acontecer, ou simplesmente não existe conteúdo nesse local.
Se você designer não souber como direcionar o usuário, ele poderá se sentir perdido e até mesmo frustrado. Isso acontece porque a falta de direção aumenta a carga cognitiva do usuário, piorando sua experiência com o produto. Saber passar as mensagens de forma clara e sucinta parece simples, mas é preciso ficar atento à diversas questões como tom e voz, direcionamento e suporte, saídas…
Ao longo deste artigo reuni, algumas dicas sobre esses cenários.
O que é
Os estados vazios geralmente ocorrem quando:
• Primeiro acesso: O usuário está acessando aquele local pela primeira vez
- Sem conteúdo: Não aconteceu algo ainda para exibir algum conteúdo
- Erros na aplicação: quando acontece algum problema
- Nenhum resultado de busca
As mensagens nessas telas devem ser personalizadas e depender do contexto do aplicativo. Esta é uma boa oportunidade de contato direto com o usuário.
Estrutura da Tela
1. O que está acontecendo
Sim, o objetivo principal é explicar o porquê isso está acontecendo e dar um direcionamento. Porém, o usuário precisa primeiro saber o que está acontecendo. Por isso, é uma boa prática utilizar o título como um resumo da tela.
2. Explique e ensine o usuário
Na mensagem, explique os motivos e direcione o que ele pode fazer a partir daqui. Por exemplo, você pode recomendar e mostrar ao usuário a melhor maneira de começar a utilizar o produto. Mas lembre-se de ser sucinto: textos grandes podem mais atrapalhar do que ajudar.
3. Saída (caso houver)
Depois de ensinar o que está acontecendo, o próximo passo é dar a oportunidade de ação a partir dali. Caso for possível, adicione um botão de CTA (call to action).
4. Iconografia
Telas vazias são funcionais, mas isso não significa que elas precisam ser entediantes. Torne o design mais humano, adicionando elementos como ilustrações ou animações para alcançar uma conexão emocional com o usuário. Assim, o design se torna mais real e intuitivo, trazendo personalidade e identificação, além de manter as coisas leves descontraídas.
Dicas de ouro
Quando um usuário está utilizando seu produto, é provável que em algum momento, ele fique preso em algum lugar. Podem ser erros gerais no aplicativo, erros de sincronização e download do conteúdo, problemas de conexão com a Internet ou não há conteúdo ainda na página.
Esse é um cenário delicado, portanto é preciso ficar bem atento em como passar a mensagem ao usuário.
- Não seja vago ou ambíguo
Escreva mensagens claras ao usuário. Ele deve conseguir compreender o que está acontecendo e o que fazer a partir disso. Se a mensagem for ambígua, o usuário não saberá como agir corretamente.
2. Seja breve, porém significativo
Como vimos anteriormente, a mensagem deve ser clara e completa, mas também objetiva. Ninguém quer ler um textão para descobrir o que aconteceu de errado. Portanto, seja conciso!
3. Não culpe o usuário
Independentemente do que aconteça, a culpa não é do usuário. Mesmo que ele repita o erro várias vezes, é obrigação do design identificar, explicar e encaminhar a melhor saída. Portanto, fique atento para que sua mensagem não transmita culpa.
4. Evite palavras negativas
Algumas palavras negativas devem ser evitadas ao projetar essas telas. Dependendo do tom, pode parecer desrespeitoso ou pessimista. Telas de erro já são uma experiência complicada, por que piorá-las, certo?
5. Evite letras maiúsculas
Letras maiúsculas são mais difíceis de ler, além disso, parece que a mensagem está sendo passada aos gritos. Como o cenário de erro já é crítico e delicado, usar texto em maiúsculas pode causar ao usuário uma sensação ruim. (O mesmo vale para uso de exclamações. Evite usá-las).
6. Seja específico e relevante
No exemplo “não faça”, existem 3 possíveis causas para o erro ter acontecido. Mas o que aconteceu de fato?
Sempre que possível, aponte a localização exata do problema, para onde o usuário deve ir e quais etapas são necessárias para resolvê-lo.
7. Não use termos técnicos
Dificilmente um usuário comum irá entender termos técnicos demais. Portanto evite utilizar estes termos nas mensagens. É muito importante o produto falar a língua do usuário (é mais trabalhoso para gente também, mas estamos aqui para isso).
Se houver necessidade de mencionar detalhes técnicos e complexos, coloque-os em uma seção específica ou com opção de mostrar/ocultar. Pode ser útil para um usuário avançado que queira saber detalhes técnicos.
Conclusão
Estados vazios e telas de erros não precisam ser uma dor de cabeça. Aproveite a oportunidade para conectar-se ao usuário e transformar a experiência negativa em positiva. Use um tom adequado, mensagens visualmente simples e intuitivas.
Se a primeira impressão é a que fica, que seja agradável.
Referências
https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4
https://medium.com/rafaeldesouzaneves/desenhando-empty-states-b882ed09195f
https://material.io/design/communication/empty-states.html#alternatives
