Embora importantes para a experiência do usuário, os estados vazios costumam ser esquecidos. Saber o que são e como usá-los e aplicar as práticas recomendadas de UX pode gerar benefícios substanciais.
O que é um estado vazio?
Os designers de UX têm muitas oportunidades de criar experiências agradáveis e significativas. Uma dessas oportunidades que muitas vezes é ignorada é 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 após completar todas as tarefas em um gerenciador de lista de tarefas.
- Obter 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.
- Pesquisando algo no Gmail e não obtendo resultados.
Estes momentos intermediários oferecer oportunidades de melhorar a experiência do usuário e, consequentemente, ampliar as oportunidades de negócios. Para 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á ao usuário saber o que está acontecendo, por que está acontecendo e o que fazer a respeito. Aqui estão dois exemplos de bons designs de UX em estado vazio:
Aqui estão alguns exemplos de projetos de estado vazio com oportunidades perdidas:
como fazer um token ethereum
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 - Eles 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 que não tem 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 da perspectiva de negócios quanto da experiência do usuário.
Os usuários experimentam muitos aplicativos, mas decidem quais desejam 'Pare 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 é prender os usuários durante o período crítico de 3 a 7 dias. - Ankit jain
Os benefícios de usar estados vazios bem projetados
Projetar telas de estado vazio bem pensadas e úteis pode ajudar a impulsionar o envolvimento 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, O que os clientes realmente desejam , Scott McKain apresenta seis princípios orientadores da excelente experiência do cliente.
Ele escreve que os clientes desejam:
- Uma experiência atraente
- 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 com o 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 consciência 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 toque pessoal.
Os benefícios de estados vazios bem planejados 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 felizes e engajados ficam cada vez menores, eles são simplesmente um bom negócio.
como aprender a linguagem de programação c
Evitado: as telas esquecidas do design UX
Visto que existem resultados aparentemente positivos 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 com o número total de telas em um aplicativo, produto ou site, então elas são frequentemente negligenciadas porque não são vistas como uma prioridade, e designers tendem a concentrar seus esforços nas partes mais visíveis de um design.
Em segundo lugar, com apenas um estimados 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 último, os estados vazios nem sempre foram bem compreendidos em termos de onde ocorrem e o que fazer com eles, então ficaram em segundo plano em favor das telas e páginas mais populares.
O que acontece quando os estados vazios são desconsiderados?
Telas em branco sem orientação podem causar confusão, incerteza e decepção. Isso pode resultar em maiores taxas de abandono 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 UX.
Como preencher uma tela vazia com o objetivo
Aqui estão algumas práticas recomendadas de UX para garantir que as telas vazias sejam projetadas para serem úteis, úteis e informativas.
Empatia. Adicionando surpresa e deleite , emoção , e personalidade são maneiras pelas quais os designers de UX criaram experiências melhores, mesmo nos cantos mais sombrios de um produto. Para telas vazias, a mensagem empática adiciona variedade e cria uma experiência mais envolvente e personalizada.
Imagens. Existe um princípio de design chamado de efeito de biofilia . Este é um estado de estresse reduzido e concentração aprimorada que resulta da visão da natureza. Adicionar algumas imagens cênicas (o plano de fundo de uma tela de erro de estado vazio, por exemplo) pode resultar em uma experiência do usuário mais agradável.
Orientação útil. Dependendo do tipo de produto, estados vazios podem ser usados para orientar o usuário. Um bom exemplo disso é um aplicativo de gerenciamento de projetos. Com uma nova conta, ainda não há projetos em andamento, o que oferece uma oportunidade potencialmente grande de 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 ir embora. Para determinados produtos, fornecer um bom conteúdo inicial os ajuda a visualizar o que está acontecendo e o que podem fazer a seguir.
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 qualquer conteúdo porque não faria sentido. Nesses casos, os designers podem simplesmente fornecer uma etapa de ação.
o que é um fundo imobiliário
No entanto, é melhor limitar as ações ao mínimo. A Lei de Hick declara 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 os apelos à ação forem mantidos 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 as está seguindo). Seria fácil se concentrar em todos os ótimos recursos do Instagram, mas uma boa tela vazia, por exemplo, poderia dar a eles a opção de “adicionar pessoas para seguir”.
Práticas recomendadas de UX do estado vazio - no campo
ApeeScape tem talentos freelance globais de primeira linha em todas as áreas do design . Aqui está o que alguns designers do ApeeScape UX têm a dizer sobre suas experiências no projeto de telas de estado vazio.
ApeeScape Designer: Tamara olson
Disciplina de design: Design UX
Quais são alguns bons projetos de estado vazio em que você trabalhou ou viu?
Projetos de estado vazio bons e modernos que observei são normalmente duas partes de instrução, uma parte de deleite. Se uma IU estiver vazia, o trabalho do designer UX é ajudar os usuários a entender o que vai no espaço quando for preenchido. Se for função do usuário preenchê-lo, a mensagem deve incluir instruções sobre como. (Por exemplo, uma tabela 'Classes' vazia em um produto edtech pode incluir uma cópia informando aos professores como criar sua primeira classe.)
Também estou vendo muitos aplicativos usarem os generosos imóveis de estados vazios como uma oportunidade de injetar um pouco de alegria e personalidade divertida para a marca. Você pode dizer que é a versão do aplicativo da web de um site Página 404 .
Você já passou por cima dos estados vazios e, em caso afirmativo, por quê?
Claro, é uma armadilha fácil. Quando estamos sendo visionários, imaginamos aplicativos e produtos quando eles estão em pleno funcionamento, preenchidos com conteúdo e usuários. Quando eu trabalhei em Google , um vice-presidente de produto comentou que os produtos são como voos de avião; a maioria dos problemas acontece durante decolagens e pousos.
Quando um usuário entra em seu produto pela primeira vez, estados de vazio são inevitáveis e não queremos que eles cheguem a becos sem saída antes mesmo de começar. Eu encorajo os designers juniores a criar 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 maneiras?
Recentemente trabalhei com Mês Nacional de Escrita de Romance no redesenho da plataforma, que permite aos usuários definir e rastrear 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 testar a funcionalidade e personalidade da plataforma e inspirar os usuários a começar a registrar seu progresso.
Qual foi o uso mais bem-sucedido de um estado de vazio que você experimentou?
Como 'zero inboxer', estou 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 'Tudo pronto!' Tecnicamente, isso quebra a regra que mencionei sobre os estados vazios que precisam de uma chamada à ação, e ainda assim, não o faz, porque o CTA subliminar é “Tire seu e-mail e vá curtir sua vida”. Eu amo isso.
ApeeScape Designer: Michael Clingerman
Disciplina de design: Design de produto SaaS
Se você projetou para estados vazios, quais tipos você vê com mais frequência?
um problema de segurança de e-mail que pode ser evitado é:
Os estados vazios com os quais estou mais familiarizado são estados 404 / de 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 vazio 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 a personalidade de sua marca.
Qual foi o uso mais bem-sucedido de um estado de vazio que você experimentou?
Sempre adorei o uso do Dropbox de estilos ilustrativos simples e monocromáticos 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 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.
• • •
Leituras adicionais no ApeeScape Design Blog
- Práticas recomendadas de design de interface do usuário e erros comuns
- Design UX móvel - práticas recomendadas, restrições e trabalho 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
Compreender o básico
O que é personalidade de marca?
A personalidade da marca é um conjunto de traços e características humanas associadas a uma marca. Ajuda os consumidores a se relacionarem com a marca com emoções como engraçado, atencioso ou sério.
O que são estados vazios?
Estados vazios são momentos na experiência de um usuário com um produto em que não há nada para exibir. Primeiro uso, limpo pelo usuário, nenhum resultado e erros são quatro dos tipos mais comuns de estados vazios.
O que a experiência do usuário faz?
A experiência do usuário abrange todos os aspectos da interação do usuário com um produto, serviço ou organização. Ajuda o usuário a associar um sentimento negativo ou positivo em relação à marca.
O que é uma experiência de integração?
Uma experiência onboarding engloba todos os aspectos da integração de um novo funcionário a uma empresa ou da familiarização de um novo cliente com um produto ou serviço.
O que significa integração do usuário?
A integração do usuário significa familiarizar um usuário ou cliente com um produto ou serviço. Isso pode significar tutoriais, exemplos, orientações ou qualquer outro meio de ajudar o usuário a entender melhor um produto.
