portaldacalheta.pt
  • Principal
  • Vida Designer
  • Design De Marca
  • Ciclo De Vida Do Produto
  • Ferramentas E Tutoriais
Design Ux

Estados vazios - o aspecto mais negligenciado da experiência do usuário



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:

Usuário do Dropbox integrando UX com design de estado vazio

Dropbox O papel fornece um bom design UX de estado vazio para a integração do usuário quando o produto é lançado pela primeira vez. O botão de call to action ajuda você a continuar sem se perguntar o que fazer a seguir.




Projeto de estado vazio sem resultados de pesquisa

Um bom exemplo de design de estado vazio quando uma consulta de pesquisa não retorna resultados. Essa tela fornece referências úteis e permite que o usuário saiba o que está acontecendo.




Aqui estão alguns exemplos de projetos de estado vazio com oportunidades perdidas:



Projeto de estado vazio com oportunidade perdida

Aqui está um design de UX de estado vazio que oferece ótimos comentários, mas perde a oportunidade de dar ao usuário qualquer direção ou ação adicional a ser executada.




Página da web em branco do design do estado vazio

Nesse design de estado vazio, simplesmente vemos uma página da web quase em branco. A imagem em si é ótima, mas não conduz o usuário por nenhum caminho certo, nem informa ou instrui.

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

Desejam-se designers freelancers de UX em tempo integral nos EUA

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:

  1. Uma experiência atraente
  2. Um foco pessoal
  3. Lealdade recíproca
  4. Diferenciação
  5. Coordenação
  6. 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.

Usando emoção e personalidade para preencher uma tela vazia

Gosto é um ótimo exemplo de preenchimento de uma tela de estado vazia com personalização e alguma personalidade divertida.

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.

O efeito da biofilia pode criar um estado de estresse reduzido

As telas de estado vazio projetadas em torno do efeito da biofilia podem ter um impacto positivo na experiência do usuário, reduzindo o estresse e ajudando no envolvimento.

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:

Prática recomendada de UX de design de estado vazio para orientar os usuários

O Evernote faz um ótimo trabalho ao orientar os usuários com seus designs de página de estado vazio.

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:

Bom design de estado vazio com conteúdo inicial

Aqui está um bom exemplo de conteúdo inicial de estado vazio. Isso dá ao usuário algo em que se basear e diminui a chance de confusão e abandono do produto.

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:

Projeto de estado vazio com uma frase de chamariz mínima

Aqui está um ótimo exemplo de um bom design de estado vazio de UX dizendo aos usuários para realizar uma ação, mas ainda mantendo-a no mínimo.

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”.

UX de integração de usuário do Instagram

Quando novos na plataforma, os usuários do Instagram são recebidos com uma maneira rápida e fácil de encontrar pessoas.

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

A designer do ApeeScape UX, Tamara Olson, compartilha as melhores práticas de design de estado vazio

Tamara Olson é uma designer UX que trabalha com ApeeScape e já trabalhou em muitos projetos que envolvem design de estado vazio.

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

O designer do ApeeScape UX, Michael Clingerman, fala sobre o design do estado vazio

O designer do ApeeScape UX, Michael Clingerman, é especialista em design de produtos 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.

As vacinas contra a gripe são obrigatórias para as crianças; aqui está o porquê

Saúde

As vacinas contra a gripe são obrigatórias para as crianças; aqui está o porquê
Usando a estrutura Radical Candor para uma gestão de engenharia eficaz

Usando a estrutura Radical Candor para uma gestão de engenharia eficaz

Gerenciamento De Projetos

Publicações Populares
Rede Al-Jazeera America é encerrada hoje
Rede Al-Jazeera America é encerrada hoje
Por que as moedas dos mercados emergentes são voláteis?
Por que as moedas dos mercados emergentes são voláteis?
Um pai compartilha sua jornada pessoal ao lidar com uma filha disléxica
Um pai compartilha sua jornada pessoal ao lidar com uma filha disléxica
Você precisa de um herói: o gerente de projeto
Você precisa de um herói: o gerente de projeto
Folha de dicas de CSS rápida e prática do ApeeScape
Folha de dicas de CSS rápida e prática do ApeeScape
 
Tutorial OpenCV: Detecção de objetos em tempo real usando MSER no iOS
Tutorial OpenCV: Detecção de objetos em tempo real usando MSER no iOS
Discurso de Barack Obama marca contagem regressiva não oficial para americanos negros
Discurso de Barack Obama marca contagem regressiva não oficial para americanos negros
Arquitetura orientada a serviços com AWS Lambda: um tutorial passo a passo
Arquitetura orientada a serviços com AWS Lambda: um tutorial passo a passo
Dez principais regras de design de front-end para desenvolvedores
Dez principais regras de design de front-end para desenvolvedores
UE adia negociações comerciais com a Austrália em meio a negociações de submarinos
UE adia negociações comerciais com a Austrália em meio a negociações de submarinos
Publicações Populares
  • alterar a variável css com javascript
  • como fazer um vídeo em efeitos posteriores
  • como criar um token
  • quão difícil é aprender
  • o que é um nó de servidor
  • quantas empresas usam o sharepoint
Categorias
  • Vida Designer
  • Design De Marca
  • Ciclo De Vida Do Produto
  • Ferramentas E Tutoriais
  • © 2022 | Todos Os Direitos Reservados

    portaldacalheta.pt