Projeto de Estado Vazio

Um estado vazio é o que uma interface exibe quando não há conteúdo para mostrar: uma nova conta sem dados, uma busca que não retorna resultados, uma combinação de filtros que não corresponde a nada, uma caixa de entrada que foi limpa ou uma lista aguardando sua primeira entrada. Os estados vazios estão entre as telas mais negligenciadas na maioria dos produtos, porque não são o caso que os designers consideram e raramente estão presentes nos protótipos usados ​​para revisar um design.

Essa negligência é custosa porque telas vazias aparecem nos momentos mais importantes. Todo usuário de um novo produto começa em uma tela vazia, e o que ele vê ali determina se ele entende o propósito do produto e realiza a primeira ação. Uma tela em branco com uma mensagem genérica não oferece nada; uma tela de primeiro uso bem projetada explica o que está ali, por que é importante e fornece uma única maneira óbvia de começar. A eficácia da integração é amplamente determinada por essas telas, e não por qualquer apresentação ou tutorial adicionado posteriormente.

Resultados de busca sem correspondências representam o segundo caso de alto valor. Um simples "nenhum resultado encontrado" é um beco sem saída, e as únicas opções restantes para o visitante são tentar novamente ou sair. Uma versão útil da mesma tela explica o que foi pesquisado, oferece correções ortográficas, flexibiliza o filtro mais restritivo, sugere termos relacionados, mostra alternativas populares e fornece um caminho para a ajuda. No comércio, buscas sem resultados representam visitantes com intenção clara e sem um caminho definido, o que as torna um dos erros recuperáveis ​​de maior valor em um site.

Os estados vazios também servem como superfícies de erro e casos extremos que revelam problemas do sistema. Uma lista vazia devido a uma requisição falha não deve ser idêntica a uma lista vazia porque realmente não há nada nela, já que a ação correta difere completamente. Distinguir entre estados vazios, de carregamento e de falha, e comunicar cada um deles claramente, impede que os usuários concluam que um produto funcional está com defeito ou que um produto com defeito é simplesmente novo.

Projetá-los bem exige enumerar os casos explicitamente durante o design, em vez de descobri-los durante a implementação. Para cada lista, tabela, pesquisa e painel, as perguntas são: como isso se parece sem nada, com um item, com uma quantidade típica, com uma quantidade extrema, durante o carregamento e após uma falha? Responder a essas perguntas sistematicamente é rápido e evita o resultado comum de variantes vazias serem improvisadas por um desenvolvedor no final de um sprint.

Os estados vazios também representam uma oportunidade para ensinar, e não apenas explicar, e é nesse contexto que eles geralmente se mostram mais úteis. Um estado de primeiro uso que exibe um exemplo de como uma visualização preenchida se parece, usando conteúdo de amostra realista claramente identificado como tal, comunica a finalidade do produto mais rapidamente do que qualquer descrição e oferece ao novo usuário um objetivo a alcançar. A mesma abordagem se aplica aos estados após a exclusão ou conclusão de um campo, onde mostrar a finalidade do espaço em branco impede que o usuário conclua que algo deu errado. A restrição é a honestidade: conteúdo de amostra indistinguível do conteúdo real causa confusão e, em produtos que lidam com dinheiro ou registros, pode causar erros graves.

Como os estados vazios se situam na fronteira entre o design da interface e a compreensão do produto, eles geralmente são tratados como parte do fluxo, e não como telas isoladas. design de produto trabalho eles são especificados juntamente com os estados populosos como prática padrão, e em um Auditoria de experiência do usuário Eles são uma fonte confiável de informações, já que quase todos os produtos têm pelo menos um estado vazio que nunca foi projetado e que agora bloqueia silenciosamente uma parcela dos usuários em seu primeiro contato com ele.