Como projetar páginas de estado vazio para sites e aplicativos móveis

Páginas de estado vazias são elementos de design menos conhecidos, com um papel significativo na experiência do usuário. Em sua forma mais simples, estados vazios são Layouts de página vistos quando um usuário acessa uma página pela primeira vez sem conteúdo disponível.

Isso pode incluir aplicativos móveis, redes sociais ou até mesmo categorias de blog vazias. O objetivo é entregar uma página vazia que parece uma página não vazia. Os visitantes devem reconhecer a falta de conteúdo como meio de conteúdo iminente.

Eu gostaria de cobrir como as páginas de estado vazias funcionam e por que elas são tão importantes. Designers de interface devem considerar esses pontos e tentar aplicá-los a estados vazios sempre que apropriado. Mas, para começar, vamos examinar como funciona um estado vazio e como ele fornece valor à interface.

O valor dos estados vazios

A beleza de um grande design de estado vazio está na simplicidade. Páginas vazias explicam o que deve estar na página uma vez que há algum conteúdo. Pode ser passivo como uma caixa de entrada vazia ou pode estar ativamente aguardando o usuário como um feed de Twitter vazio.

As páginas em branco são chatas, sem graça e até confusas. Estados vazios fornecer orientação para ajudar os usuários a entender o que estão vendo. Mesmo sendo uma página em branco, o contexto extra ajuda.

Estados vazios também dão uma sensação de “frescura” com novas contas sem dados existentes.

Este teste feito pelo Redditor Bambo_Ocha verificou 20 aplicativos diferentes para projetos de estado vazio. Vários estilos de design ocorreram com botões de CTA, dados de amostra e até mesmo breves orientações passo a passo.

Aplicativos que prosperam em uma base de usuários devem projetar estados vazios que incentivar a atividade do usuário. Esta atividade pode estar publicando conteúdo, adicionando amigos, fazendo upload de fotos ou qualquer outra aplicação para a qual o aplicativo foi criado. A tela abaixo do Tookapic é um ótimo exemplo.

Mas as páginas de estado vazias ainda têm valor mesmo quando nenhuma ação é necessária. Esses projetos são feitos principalmente para fornecer informações.

Informações estáticas são tão valiosas e não são inerentemente ruins ter um estado vazio. Por exemplo, este design de página não mostra métricas atuais de um painel de aplicativo de rastreamento. O usuário pode querer adicionar algumas métricas, mas não é ruim deixar o traço vazio.

Projetos estáticos similares podem funcionar muito bem para arquivos de blog vazios ou pastas de mensagens vazias. É perfeitamente aceitável não ter mensagens para exibir. Mas a página não deve estar completamente vazia sem nenhum contexto.

Elementos de Página Vital

O elemento mais importante em uma página de estado vazia é contexto. Isso pode vir na forma de gráficos, texto ou ambos. Você deseja informar aos usuários por que a página está vazia e que tipo de dados pode estar lá (e-mails, tweets, perfis de amigos, etc.).

E enquanto o texto é o principal meio de comunicação na web, você não pode ignorar o valor dos gráficos e ícones.

DigitalOcean tem um painel brilhante com gráficos de estado vazio que ilustram claramente o seu ponto. Sua empresa usa marcas criativas e tipografia limpa, então não é surpresa que suas páginas de estado vazias sejam tão ilustrativas.

Outro aspecto crucial do design do estado vazio é o botão de chamada para ação. Normalmente, isso é projetado como um botão, embora os hiperlinks também funcionem bem.

O objetivo é ajudar os usuários a agir e limpar seu estado vazio. Se isso requer adicionar dados ou tomar medidas no site, os CTAs guiam os usuários para a próxima etapa necessária para limpar o estado vazio.

O Dropbox tem um ótimo design com dois botões CTA. Sempre que um usuário do Dropbox não tem pastas, ele pode criar uma nova pasta ou adicionar uma pasta de amostra à página..

Incentivo à atividade do usuário

Chamada para botões de ação são os elementos ativos, mas lembre-se de que a cópia da página explica o que o usuário está fazendo. Ninguém clica nos botões sem saber porque.

A melhor maneira de incentivar a atividade é escrever uma cópia grande em sua página de estado vazio. Guiar os usuários por meio de um fluxo de conteúdo que incentiva a atividade do usuário em todo o aplicativo.

Este estado vazio do ModSpot é um exemplo brilhante de design de qualidade e conteúdo encorajável.

Os ícones são usados para demonstrar o que o usuário deve adicionar ao site. Uma seta aponta para o botão que os usuários devem clicar junto com algum texto que incentive o comportamento. Este é um design de estado brilhante vazio com todos os elementos que você esperaria.

Da mesma forma, o estado vazio do Gumroad oferece duas opções que visam diferentes ações potenciais. Os usuários podem adicionar um produto digital ou um produto físico para começar a vender.

Outros links na página levam a guias de ajuda e detalhes de contato. Tudo é incrivelmente simplificado e une-se bem.

Web vs. aplicativos para celular

Páginas de estado vazias para todas as mídias devem seguir tendências de design semelhantes. Mas existem algumas pequenas diferenças com a experiência do usuário em um desktop comparado a um smartphone.

Websites em telas maiores tem mais espaço para botões extras. Páginas da Web também podem ter elementos de navegação maiores que pode atrair pessoas para outro lugar no site.

Isso pode ser resolvido em um estilo semelhante ao que o Nusii faz em sua página de propostas. Onde não há propostas, o usuário é guiado para o “adicionar propostas” botão na barra de navegação superior.

Aplicativos móveis podem ter problemas semelhantes, mas as telas são muito menores. Isso faz com que muito mais fácil atrair usuários diretamente para a ação.

Acho que é melhor manter os aplicativos móveis mais simples, com menos opções. Use visuais como colírio para estimular a ação e apontar para um fluxo de usuário muito específico.

Exemplos de design de estado vazio

Talvez a melhor maneira de aprender sobre o design do estado vazio seja estudando alguns exemplos. A brilhante galeria virtual emptystat.es organiza páginas de estado vazias de vários sites para aplicativos móveis.

Escolhi alguns exemplos que merecem atenção, que melhor ilustram o design do estado vazio. Se você tiver outras sugestões, não hesite em nos avisar.

IP flutuantes DigitalOcean