Estados vazios – o aspecto mais negligenciado do UX
Publicados: 2022-03-11Embora importante para a experiência do usuário, os estados vazios são frequentemente ignorados. Saber o que são e como usá-los e aplicar as melhores práticas de UX pode gerar benefícios substanciais.
O que é um estado vazio?
Os designers de UX têm muitas oportunidades para criar experiências agradáveis e significativas. Uma dessas oportunidades que muitas vezes é desconsiderada é o “estado vazio” ou tela vazia. Estados vazios são momentos na experiência de um usuário com um produto em que não há nada para exibir.
Aqui estão alguns exemplos de situações comuns de estado vazio:
- Uma nova tela do Dropbox onde nenhum arquivo ou pasta foi criado.
- A tela resultante depois de concluir todas as tarefas em um gerenciador de lista de tarefas.
- Obtendo uma tela de erro no Slack quando um comando não é compatível.
- Iniciando uma nova conta de rede social e não há conexões.
- Procurando algo no Gmail e não obtendo resultados.
Esses momentos intermediários oferecem oportunidades para melhorar a experiência do usuário e, consequentemente, ampliar as oportunidades de negócios. Para os designers de UX, aproveitar todas as oportunidades para aprimorar a experiência do usuário e agregar mais valor ao negócio é uma coisa boa.
Um estado vazio útil permitirá que o usuário saiba o que está acontecendo, por que está acontecendo e o que fazer a respeito. Aqui estão dois exemplos de bons designs de UX de estado vazio:
Aqui estão alguns exemplos de designs de estado vazios com oportunidades perdidas:
Tipos de Estados Vazios
Aqui estão quatro tipos de estados vazios frequentemente encontrados:
- Primeiro uso – Ocorre com um novo produto ou serviço quando ainda não há nada para mostrar, como uma nova conta Evernote ou Dropbox.
- Usuário limpo – ocorre quando os usuários concluem ações como limpar sua caixa de entrada ou lista de tarefas, e o resultado é uma tela vazia.
- Erros – Ocorrem quando algo dá errado ou quando há problemas como um telefone celular ficando offline devido a problemas de rede.
- Sem resultados/Sem dados – Ocorre quando não há nada para mostrar. Isso pode acontecer se alguém fizer uma pesquisa e a consulta estiver vazia ou não houver dados disponíveis para mostrar (ao filtrar por um intervalo de datas sem dados, por exemplo).
À medida que o design de estado vazio recebe mais atenção, os designers de UX descobrem que há resultados benéficos em utilizá-los, tanto do ponto de vista comercial quanto da experiência do usuário.
Os usuários experimentam muitos aplicativos, mas decidem quais eles querem 'parar de usar' nos primeiros 3-7 dias. Para aplicativos 'decentes', a maioria dos usuários retidos por 7 dias permanece por muito mais tempo. A chave para o sucesso é fisgar os usuários durante esse período crítico de 3 a 7 dias. – Ankit Jain
Os benefícios de usar estados vazios bem projetados
Projetar telas de estado vazias bem pensadas e úteis pode ajudar a impulsionar o engajamento do produto, encantar os usuários e reduzir a rotatividade. Isso diminui as chances de perder usuários para produtos concorrentes, deixando-os frustrados ou perdidos.
Em seu livro, What Customers Really Want , Scott McKain apresenta seis princípios orientadores da ótima experiência do cliente.
Ele escreve que os clientes querem:
- Uma experiência convincente
- Um foco pessoal
- Lealdade recíproca
- Diferenciação
- Coordenação
- Inovação
Quando aplicados ao design de estado vazio, esses princípios podem ser de grande benefício para uma empresa – por exemplo, um aumento na satisfação do produto e a redução das taxas de abandono.
Aqui estão três áreas adicionais que também podem se beneficiar de um bom design de estado vazio:
- Integração do usuário – oferece uma oportunidade de construir confiança e uso contínuo do produto, além de uma experiência de usuário elevada.
- Construção de marca – Gera conscientização e promove a empresa para construir maior valor de marca.
- Personalização – Pode ser lúdico, divertido, sério ou dinâmico em vários estados de uso; cria uma sensação de um toque pessoal.
Os benefícios de estados vazios bem projetados não podem ser subestimados. Eles não apenas contribuem para uma experiência atraente do cliente, mas à medida que as janelas de oportunidade para manter os clientes satisfeitos e engajados ficam cada vez mais curtas, eles são simplesmente bons negócios.
Evitado: As telas esquecidas do UX Design
Uma vez que existem resultados positivos aparentes para estados vazios bem projetados, por que eles são ignorados em primeiro lugar?
Em primeiro lugar, existem muito poucas situações de estado vazio que ocorrem quando comparadas ao número total de telas em um aplicativo, produto ou site, portanto, muitas vezes são negligenciadas porque não são vistas como prioridade, e os designers tendem a concentrar seus esforços em as partes mais visíveis de um desenho.
Em segundo lugar, com apenas cerca de 2 a 5% dos usuários vendo um estado vazio, nem sempre é um uso econômico ou prático do tempo de um designer.
Por fim, os estados vazios nem sempre foram bem compreendidos em termos de onde eles ocorrem e o que fazer com eles, então eles ficaram em segundo plano em favor das telas e páginas mais populares.
O que acontece quando estados vazios são desconsiderados?
Telas em branco sem orientação podem levar à confusão, incerteza e decepção. Isso pode resultar em taxas de abandono mais altas e menor satisfação geral com o produto.
Felizmente, as coisas estão começando a mudar à medida que os benefícios e oportunidades de projetar boas telas de estado vazio se tornam uma parte mais importante e de alta prioridade do processo de design de UX.
Como preencher uma tela vazia com propósito
Aqui estão algumas práticas recomendadas de UX para garantir que as telas vazias sejam projetadas para serem úteis, úteis e informativas.
Empatia. Adicionar surpresa e prazer , emoção e personalidade são todas as maneiras pelas quais os designers de UX criaram experiências melhores, mesmo nos cantos mais escuros de um produto. Para telas vazias, mensagens empáticas adicionam variedade e criam uma experiência mais envolvente e personalizada.
Imagens. Existe um princípio de design chamado efeito biofilia. Este é um estado de estresse reduzido e concentração aprimorada que resulta de vistas da natureza. Adicionar algumas imagens cênicas (o plano de fundo de uma tela de erro de estado vazia, por exemplo) pode resultar em uma experiência de usuário mais agradável.
Orientação útil. Dependendo do tipo de produto, os estados vazios podem ser usados para orientar o usuário. Um bom exemplo disso é um aplicativo de gerenciamento de projetos. Com uma nova conta, não há projetos ainda em jogo, oferecendo uma oportunidade potencialmente grande para ajudar o usuário a começar rapidamente, reduzindo assim a chance de abandono. Aqui está um exemplo:
Conteúdo inicial. Existem muitas telas que ficam em branco por tempo suficiente para o usuário ficar frustrado e sair. Para determinados produtos, fornecer um bom conteúdo inicial os ajuda a visualizar o que está acontecendo e o que eles podem fazer em seguida.
Aqui está um exemplo de uma tela de estado vazia com conteúdo inicial:
Fornecendo uma Etapa de Ação. Com alguns produtos, não precisamos fornecer orientação ou preencher a tela com nenhum conteúdo porque não faria sentido. Nesses casos, os designers podem simplesmente fornecer uma etapa de ação.
No entanto, é melhor manter as ações no mínimo. A Lei de Hick afirma que “o tempo que leva para tomar uma decisão aumenta com o número e a complexidade das escolhas”. Assim, os usuários provavelmente agirão mais rapidamente quando as chamadas para ação forem mantidas em um ou dois no máximo. Aqui está um ótimo exemplo:
Outro bom exemplo é o Instagram. Quando as pessoas são novas na plataforma, elas ainda não estão seguindo ninguém (e ninguém está seguindo). Seria fácil se concentrar em todos os ótimos recursos do Instagram, mas uma boa tela de estado vazia, por exemplo, poderia dar a opção de “adicionar pessoas para seguir”.
Práticas recomendadas de UX de estado vazio - do campo
A Toptal tem talento freelance global de primeira linha em todas as áreas do design. Aqui está o que alguns designers de UX da Toptal tinham a dizer sobre suas experiências projetando telas de estado vazias.
Designer Toptal: Tamara Olson
Disciplina de Design: UX Design
Quais são alguns bons projetos de estado vazio em que você trabalhou ou viu?
Bons e modernos designs de estado vazio que observei são tipicamente duas partes de instrução, uma parte de prazer. Se uma interface do usuário estiver vazia, é trabalho do designer de UX ajudar os usuários a entender o que acontecerá no espaço quando ele for preenchido. Se for trabalho do usuário preenchê-lo, a mensagem deve incluir instruções sobre como. (Por exemplo, uma tabela vazia de “Aulas” em um produto edtech pode incluir uma cópia informando aos professores como criar sua primeira aula.)
Também estou vendo muitos aplicativos usarem os imóveis generosos dos estados vazios como uma oportunidade para injetar um pouco de prazer e personalidade de marca divertida. Você pode dizer que é a versão do aplicativo da web da página 404 de um site.
Você já ignorou estados vazios e, em caso afirmativo, por quê?
Claro, é uma armadilha fácil. Quando estamos sendo visionários, imaginamos aplicativos e produtos em pleno funcionamento, preenchidos com conteúdo e usuários. Quando eu trabalhava no Google, um vice-presidente de produtos comentou que produtos são como voos de avião; a maioria dos problemas acontece durante as decolagens e pousos.
Quando um usuário entra em seu produto pela primeira vez, estados vazios são inevitáveis, e não queremos que eles cheguem a becos sem saída antes mesmo de começar. Eu encorajaria designers juniores a projetar um conjunto separado de designs lineares mostrando o fluxo de integração do usuário.
Você viu o sucesso do cliente com o uso de estados vazios? Se sim, de que formas?
Recentemente, trabalhei com o National Novel Writing Month no redesenho de sua plataforma, que permite que os usuários definam e acompanhem metas em torno do progresso da escrita. Nossa equipe de produto teve uma bola absoluta com os estados vazios; foi uma maneira maravilhosa de apresentar e provocar a funcionalidade e a personalidade da plataforma e inspirar os usuários a começar a registrar seu progresso.
Qual é o uso mais bem-sucedido de um estado vazio que você experimentou?
Como um “zero inboxer”, fico constantemente encantado com a ilustração da caixa de entrada vazia do aplicativo Gmail: uma pessoa sob um guarda-chuva, lendo um livro sob o sol, com a legenda “Você está pronto!” Isso tecnicamente quebra a regra que mencionei sobre estados vazios que precisam de um apelo à ação e, no entanto, não o faz, porque o CTA subliminar é “Saia do seu e-mail e vá aproveitar sua vida”. Eu amo isso.
Toptal Designer: Michael Clingerman
Disciplina de Design: Design de Produto SaaS
Se você projetou para estados vazios, quais tipos você vê com mais frequência?
Os estados vazios com os quais estou mais familiarizado são estados 404/erro e estados limpos pelo usuário.
Você viu o sucesso do cliente com o uso de estados vazios? Se sim, de que maneiras?
sim. Já vi casos em que telas de estado vazias se tornaram parte de uma estratégia de comunicação e conteúdo envolvente e agradável. Existem outros casos em que os clientes os usaram para construir sua personalidade de marca.
Qual é o uso mais bem-sucedido de um estado vazio que você experimentou?
Sempre adorei o uso de estilos ilustrativos simples e monocromáticos do Dropbox para estabelecer a personalidade, o tom e o caráter da marca corporativa.
Conclusão
É fácil ignorar estados vazios (ou telas vazias) no design de UX porque eles ocorrem com pouca frequência e nem sempre são bem compreendidos. No entanto, os benefícios de sua inclusão são subestimados porque melhoram a experiência do usuário e ajudam a criar um produto mais coeso.
• • •
Leia mais no Blog Toptal Design
- Práticas recomendadas de design de interface do usuário e erros comuns
- Mobile UX Design – Melhores Práticas, Restrições e Trabalhando com Desenvolvedores
- Princípios heurísticos para interfaces móveis
- Influência com Design - Um Guia para Cores e Emoções
- Os princípios do design e sua importância