Mascotes para SaaS B2B: onboarding, estados vazios e páginas 404

Onde o mascote se encaixa em um produto B2B?

Nas telas em que o usuário está esperando, começando ou travado, não onde ele está trabalhando. Um mapa rápido:

Para ver passo a passo como conectar os triggers de onboarding e estado vazio em SwiftUI, Compose, Flutter e na web, consulte como adicionar um mascote ao onboarding e aos estados vazios. Este guia trata das decisões B2B em torno disso.

O que faz um bom estado vazio com mascote?

As diretrizes do Nielsen Norman Group para estados vazios em aplicações complexas definem três funções: comunicar o status do sistema, oferecer pistas de aprendizado e dar caminhos diretos para as tarefas principais (NN/g). O mascote pode apoiar as três, mas não consegue cumprir nenhuma sozinho.

• Status primeiro. O NN/g alerta contra mostrar "Nenhum registro" enquanto o conteúdo ainda está carregando. Mostre o loop de carregamento até a consulta terminar e só então o estado vazio.
• Ensine em uma frase. "Os projetos reúnem as tarefas da sua equipe. Crie um ou importe do Jira." O personagem fica ao lado do texto, não no lugar dele.
• Um botão principal. O caminho direto é o elemento mais importante da tela. Coloque-o mais perto da linha do olhar do que o mascote.
• Adapte ao tipo de vazio. O primeiro uso recebe boas-vindas (idle ou wave). Uma lista esvaziada pelo usuário recebe uma pequena recompensa (happy). Sem resultados recebe um idle neutro e uma forma de ampliar a busca. "Sem permissão" não recebe mascote nenhum, só a indicação de a quem pedir acesso.

Quando o mascote deve sair de cena para usuários avançados?

Assim que uma tela vira rotina. As diretrizes de movimento da Apple dizem para "evitar, em geral, adicionar movimento a interações de UI que ocorrem com frequência" e para "deixar as pessoas cancelarem o movimento" em vez de obrigá-las a esperar (Apple HIG). O Assistente do Office da Microsoft, o Clippy, é o exemplo clássico de um personagem que vivia interrompendo quem já sabia o que estava fazendo (Wikipedia).

Um plano para aposentar o mascote que funciona na maioria dos produtos B2B:

1. Vincule os estados de onboarding ao onboarding. Quando o checklist de configuração for concluído ou dispensado, os momentos do mascote vão junto.
2. Mantenha só os momentos raros. Importações concluídas, marcos, estados vazios e a página 404 ficam; reações a cada ação saem.
3. Ofereça uma configuração. Um botão "Mostrar mascote" nas preferências do usuário e um padrão no nível do workspace para administradores que querem um produto mais discreto para todos.
4. Respeite as configurações do sistema. Com movimento reduzido ativado, mostre imagens estáticas (MDN).

A página 404 deve ter um mascote?

Pode ter, desde que a página continue útil. O template de 404 do U.S. Web Design System recomenda: "Evite mensagens de erro engraçadas, fofinhas ou extravagantes", porque o usuário pode não gostar de brincadeiras quando está tentando acessar algo importante. Ele também orienta a informar o que o usuário pode fazer em seguida e a incluir a navegação principal (digital.gov).

Uma página 404 que funciona com mascote tem:

• um loop calmo de sleeping ou idle, não uma reação de erro nem uma piada,
• um título direto, como "Página não encontrada", e uma linha explicando por que isso pode ter acontecido,
• busca, um link para o painel e a navegação principal,
• um status HTTP 404 real enviado pelo servidor. O Google trata uma página de erro servida com código de sucesso como soft 404 (Google Search Central).

Mantenha essa página leve: um vídeo pequeno ou uma imagem estática bastam. Não carregue um runtime de animação completo em uma página cuja única função é mandar as pessoas para outro lugar.

Como lidar com o modo escuro?

Escolha um formato que não traga fundo próprio ou faça uma exportação por tema.

• Rive desenha em um canvas transparente, então um único .riv funciona nos temas claro e escuro.
• Vídeo com fundo transparente: WebM com alfa VP9 para Chrome, Firefox e Edge, e MOV HEVC com alfa para Safari.
• GIF e MP4 têm um fundo sólido embutido. Em um tema escuro, uma caixa clara em volta do personagem parece um erro. Faça uma versão sobre a cor de superfície de cada tema e alterne entre elas com uma media query prefers-color-scheme ou com a classe de tema do seu app (MDN).

Confira também o próprio personagem sobre fundos escuros. Contornos escuros e detalhes em azul-marinho podem sumir; um card suave e claro atrás do mascote resolve melhor do que mudar as cores dele.

Qual orçamento de performance um mascote de SaaS deve ter?

O mascote nunca deve ser o motivo de uma tela estar lenta.

• Custo do runtime. O runtime web canvas-lite 2.44.0 do Rive tem cerca de 373 KB comprimido com brotli, e os builds canvas e webgl2 são maiores (Rive). Esse custo é pago uma vez por app, então ele combina mais com um produto que tem muitos momentos com o mascote do que com uma única página 404.
• Custo do arquivo. Um único .riv guarda todos os estados. Em um conjunto real do Charmotion com 17 animações, o .riv com todas as animações tinha 40 KB (12 KB com brotli), enquanto os MP4s somados chegavam a 2,6 MB e os WebMs com fundo transparente a 6,1 MB.
• Ordem de carregamento. Renderize um pôster estático no layout, carregue o runtime depois que a página ficar interativa e troque pela animação quando ela estiver pronta. Nunca bloqueie o onboarding esperando um arquivo de animação.
• Nada de GIF na web. O web.dev recomenda substituir GIFs animados por vídeo para carregar mais rápido (web.dev). Deixe os GIFs para e-mails e documentação.

O Charmotion entrega esse .riv com um input numérico mood e inputs de trigger (planos pagos, a partir de US$ 20/mês), além de WebM transparente e MOV HEVC para páginas com tema, e MP4 e GIF para e-mails e documentos de ajuda. É um personagem em 17 animações; ele não adiciona novas poses, como apontar para um botão, então os tooltips ainda precisam de uma seta.

Perguntas frequentes

Um software B2B deveria ter mascote?

Pode ter, desde que o personagem fique no onboarding, nos estados vazios e em marcos raros, e longe das telas de trabalho. Compradores avaliam ferramentas B2B pela competência, então teste o tom com clientes reais, ofereça uma configuração para ocultá-lo e nunca o coloque em telas de cobrança, permissões ou segurança.

Como deixar os usuários desativarem o mascote de um SaaS?

Adicione uma opção Mostrar mascote nas preferências do usuário e um padrão de workspace que os administradores possam definir. Quando ela estiver desativada, substitua cada estado por nada ou por um pequeno ícone estático, mantenha todo o texto igual e também troque automaticamente para imagens estáticas quando a configuração de movimento reduzido do sistema estiver ativa.

Uma página 404 engraçada prejudica o SEO?

O humor não afeta o ranqueamento; o código de status, sim. O servidor precisa retornar HTTP 404 para páginas inexistentes, ou o Google pode apontar um soft 404. O maior risco de uma piada é a usabilidade: o digital.gov recomenda mensagens simples, um próximo passo e a navegação principal em vez de brincadeiras.

Respostas rápidas deste guia

• Quando o mascote de um SaaS deve sair de cena para usuários avançados?

Fontes

• Designing Empty States in Complex Applications: 3 Guidelines, Nielsen Norman Group
• Motion, Apple Human Interface Guidelines
• 404 page template, U.S. Web Design System (digital.gov)
• How HTTP status codes, and network and DNS errors affect Google Search, Google Search Central
• Runtime sizes, Rive
• Replace animated GIFs with video for faster page loads, web.dev
• prefers-color-scheme, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• Office Assistant, Wikipedia