Mascotes para apps de delivery: do status do pedido aos humores

Qual estado do mascote combina com cada status do pedido?

No código, mantenha o mapeamento em um só lugar para que todas as superfícies fiquem consistentes. Um .riv do Charmotion recebe um número mood para os loops e triggers para as reações únicas (inputs do Rive):

const MOOD = { idle: 0, happy: 1, wave: 2, sad: 4, loading: 5, listening: 6, sleeping: 8, attention: 9 };

const BY_STATUS = {
  placed:    { fire: "success", mood: MOOD.idle },
  accepted:  { fire: "yes",     mood: MOOD.loading },
  preparing: { mood: MOOD.loading },
  arriving:  { mood: MOOD.attention },
  delivered: { fire: "success", mood: MOOD.happy },
  delayed:   { mood: MOOD.idle },
  cancelled: { mood: MOOD.sad },
};

function showStatus(status) {
  const step = BY_STATUS[status];
  const inputs = rive.stateMachineInputs("CharacterStateMachine");
  if (step.fire) inputs.find((i) => i.name === step.fire)?.fire();
  const mood = inputs.find((i) => i.name === "mood");
  if (mood) mood.value = step.mood;
}

Até que ponto um mascote de delivery pode ser brincalhão?

Brincalhão nas pontas, tranquilo no meio. Pedido feito e pedido entregue são bons momentos para uma reação. Atrasos, cancelamentos, itens faltando e reembolsos, não.

• Atrasos: idle com uma nova previsão de entrega. Nada de piadas sobre o atraso nem cara triste; um usuário com fome esperando mais tempo não quer saber dos sentimentos do app.
• Cancelamentos: se a sua marca é descontraída, um loop sad curto ao lado dos detalhes do reembolso é aceitável, porque a perda é compartilhada e o próximo passo está claro. Se a sua marca é mais contida, use idle.
• Itens faltando ou errados: nada de mascote no formulário de suporte. Texto simples e uma solução rápida.
• Nunca culpe ninguém. Não deixe o personagem insinuar que a culpa é do entregador ou do restaurante. As orientações do NN/g sobre mensagens de erro também desaconselham humor e atribuição de culpa em erros (NN/g).

O mascote pode aparecer nas Live Activities e nas Live Updates?

Sim, como pequenas imagens estáticas que mudam conforme o status, não como uma animação em loop.

Live Activities no iOS. A documentação da Apple diz que uma Live Activity pode ficar ativa por até oito horas, que os dados estáticos e dinâmicos juntos não podem passar de 4 KB e que as imagens não podem ser maiores que o tamanho de exibição, senão o sistema pode não conseguir iniciá-la (Apple). O sistema anima apenas as mudanças de conteúdo, por até dois segundos (Apple). Então:

• inclua um PNG pequeno para cada humor na extensão do widget,
• envie apenas a string de status na atualização e escolha a imagem localmente,
• deixe que a transição de imagem do sistema seja a "animação" quando o status mudar.

Live Updates no Android. As orientações do Android citam o "rastreamento ativo de delivery de comida" como um uso adequado, exigem estilos como ProgressStyle e dizem que a notificação não pode ter uma view de conteúdo personalizada (Android Developers). O ícone do rastreador pode ser atualizado dinamicamente, o que é um lugar natural para uma pequena imagem estática do mascote.

O guia de limites de Live Activity e widgets aprofunda os tamanhos e as soluções alternativas.

Como adiciono o mascote às notificações push?

No iOS, uma notification service extension baixa a imagem e a anexa antes de a notificação ser exibida. Os anexos podem ser JPEG, GIF ou PNG de até 10 MB, ou vídeo de até 50 MB (Apple). No Android, a documentação do BigPictureStyle é baseada em um bitmap, então envie uma imagem estática (Android Developers).

• Escolha três momentos. Pedido feito, chegando e entregue. Uma imagem a cada mudança de status é só ruído.
• Texto em primeiro lugar. O título e o corpo precisam dizer tudo; muitos usuários nunca expandem a notificação.
• Mantenha o arquivo leve. Um GIF curto carrega rápido mesmo com sinal fraco na porta de casa.

Qual arquivo vai em cada superfície?

Gere imagens estáticas de qualquer clipe com o ffmpeg, por exemplo ffmpeg -ss 0.5 -i arriving.mp4 -frames:v 1 arriving.png, e depois redimensione-as para o tamanho de exibição.

O que um conjunto de mascote não faz no rastreamento de entregas?

Um conjunto do Charmotion anima o seu personagem de 17 formas: dez loops, incluindo loading, attention, happy, sad e sleeping, seis reações únicas, incluindo success e yes, e uma intro de abertura. Isso cobre todos os status acima. Não estão incluídos:

• um mapa, uma rota ou um ponto em movimento,
• o personagem andando de moto ou bicicleta, caminhando ou carregando uma bolsa,
• uma barra de progresso ou contagem regressiva do tempo de chegada desenhada na animação,
• roupas, como um uniforme de entregador.

Coloque o personagem ao lado do seu próprio componente de progresso e do mapa, não dentro deles. Todo conjunto cobre MP4, 9:16 e GIF para push, e-mail e redes sociais, além do .riv e do vídeo transparente para o rastreador dentro do app (planos pagos, a partir de US$ 20/mês).

Perguntas frequentes

O mascote de um app de delivery deve parecer triste quando o pedido atrasa?

Não. Use um estado idle calmo com a nova previsão de chegada em texto. Um cliente com fome esperando mais tempo não precisa dos sentimentos do app, e piadas sobre atraso costumam ter o efeito contrário. Guarde o sad, se for usá-lo, para um cancelamento mostrado junto com informações claras sobre o reembolso.

Posso colocar um mascote animado em uma Live Activity do iOS?

Não em loop. As Live Activities animam apenas mudanças de conteúdo, por até dois segundos, exigem dados de atualização de no máximo 4 KB e imagens que não sejam maiores que a apresentação. Inclua uma imagem estática pequena para cada humor na extensão do widget e troque a imagem quando o status do pedido mudar.

Quais atualizações do pedido merecem uma imagem na notificação push?

Pedido feito, entregador chegando e pedido entregue. São os momentos em que as pessoas olham o celular. Anexe uma imagem a essas três e deixe as demais atualizações só com texto, para que o mascote seja um sinal, e não ruído. O texto da notificação precisa fazer sentido sem a imagem.

Respostas rápidas deste guia

• Qual estado do mascote combina com cada status de entrega de comida?

Fontes

• Displaying live data with Live Activities, Apple Developer Documentation
• Animating data updates in widgets and Live Activities, Apple Developer Documentation
• Live updates, Android Developers
• UNNotificationAttachment, Apple Developer Documentation
• NotificationCompat.BigPictureStyle, Android Developers
• Error-Message Guidelines, Nielsen Norman Group
• Inputs (web runtime), Rive