TOP 10 de técnicas visuais para a interface de missões
Três coisas são importantes na interface de missões: clareza de propósito, sensação de progresso e ritmo de pequenas vitórias. Abaixo, dez técnicas que aumentam a participação/complition e reduzem as queixas sem sobrecarregar a tela.
1) Escada progresso em vez de faixa «infinita»
O que é uma escala segmentada com liminares e pontos de recompensa.
É mais fácil para o cérebro compreender estágios discretos do que um progresso contínuo de 63%.
Como desenhar
Três a cinco divisões, assinar cada «T1 100 pontos», «T2 300», «Final 600».
Mostrar os prêmios recebidos diretamente nas divisões (ícones FS/cachê/crachá).
Clique na divisão «o que foi dado/quando queimar».
A/B-ideia: escada com ícones vs escala seca. Espera: + 3-5 p.p. para completição T1.
2) «Quanto falta» em unidades compreensíveis
Ao lado do progresso, mostramos o equivalente a um esforço, pontos → rodadas → minutos.
Fórmula por baixo do capô (aproximadamente)
«Restam 120 pontos ≈ 8 rodadas de €0,5 ≈ 6-8 minutos».
Regras
Primeiro a hora, depois as rodadas e o dinheiro.
Contar pela mediana das últimas 10 a 20 ações do usuário (dicas adaptativas).
Atualizar a cada 2 ou 3 segundos, sem «saltos».
A/B-ideia: «Ficou nos óculos vs em minutos». Espera - 10% a 15% das saídas iniciais.
3) Cartões de passo (Step Cards) com «um propósito para a tela»
O que é, cada passo de uma missão é um cartão separado, com um alvo grande e o botão "Como é que isto é contabilizado? ».
Composição do cartão
O título é «Passo 2 de 3».
Alvo: 1 linha («Recolha 300 pontos ou 150 spins»).
Progresso: mini-escada/chip 180/300.
Botão «?» → listagem de jogos incluídos/excluídos, caps, exemplos.
Do: fonte grande, contraste hierárquico visual.
Don 't: sobrecarregar com pequenas condições e estrelas.
4) alvos OR: «garfo» visual de três caminhos
Em vez do texto «ou/ou», três botões de caminho igualitários (Rápido Competição com a história).
Regras
Os três caminhos são visíveis ao mesmo tempo; realçado ativamente.
Por baixo de cada botão, um mini-ETA, «£8-10 min», «1 x 20», «100 spin».
Micro-texto
Selecione um caminho conveniente. Você pode mudar a qualquer momento - o progresso vai continuar".
A/B-ideia: botões vs-azulejos. Espera: + 4-7 p.p. participation _ net.
5) Áreas de recompensa em liderbord e missões
Dividimos a tabela/grade em zonas (Top-3 / 4-10 / 11-50 / 51 +) e mostramos a recompensa mínima de cada zona.
Visual
Tintas de cor das zonas; perto da posição do jogador: «Faltam 2.400 pontos para a zona 4-10».
«Garantido: FS x 10» na zona, sem «procurar nas regras».
Benefício: remove o «teto de vidro», forma um alvo realista.
6) Módulo de tymbox com «janela de respiração»
O que é um temporizador visual de fase ativa (15-20 min) + um cartão de pausa sem multa.
Tela
Um relógio com a assinatura «Janela das 20h».
Ao terminar: Animação macia + escolha «Voltar mais tarde »/« Prolongar» (se for o caso).
A mensagem é, «A pausa não interrompe o estrilo».
Efeito: Cria Sessions/DAU, reduz o cansaço.
7) Micro-animações «faísca» e esqueletos de download
O que é: flashes leves/confetes em progressos e recompensas; esqueletos + shimer em locais com dados.
Guidas por movimentos
Duração de 200-350 ms, curvas ease-out/ease-in-out.
Não bloquear o conteúdo principal, mas «realçar».
Os esqueletos repetem a geometria dos cartões; Shimer 1. 2–1. 6 segundos.
Ideia A/B com animação vs sem. Espera: - 8-12% saídas iniciais, + CTR para «continuar».
8) Tulas contextuais: «Como se contabiliza?» E «Por que não vem?»
O que é um ícone? Ao lado do alvo, abre um mini-hyde com fórmulas, exemplos e erros frequentes.
Modelo de bloco
«Como achamos»: fórmula + 1 exemplo.
«Caps»: por aposta/min/dia (números).
«Não há progresso?» 3 razões + referências a jogos/modos excluídos.
Além disso, reduz drasticamente os tíquetes.
9) Cor, contraste e iconografia (WCAG + tema escuro)
Regras básicas
Contraste de texto mínimo WCAG AA (4. 5:1), grande - 3:1.
A cor ≠ o único meio de sentido: adicione ícones/pattern.
Ícones: 2-3 formas básicas (estrela - prémios, objetivo - passo/missão, raio - «faíscas»).
Tema escuro: fundo # 0F/12, «faíscas» brilham sem RGB venenoso.
Micro-copiado
«A recompensa vai queimar dentro de 12 horas», sempre ao lado do botão «Receber».
10) Estados em branco, erros, editoras «queimar»
São telas elaboradas quando não há dados/missões e quando algo correu mal.
Vazio
Ilustração + "Hoje é livre. Queres experimentar o Menu do Dia?
Botão Selecionar missão → (leva à escolha).
Erros
"Não consegui atualizar o progresso. Repetimos «... + spinner segundos» «Tentar mais »/« No bate-papo».
O status Queima X é exibido na ficha de premiação e na lista de prêmios.
Elementos de interface avançados
O chip "kap" é alcançado: "200/200 pontos/hora - limite. Largada às 00:00".
O crachá «quase-alcançado» é um indicador amarelo com ≤150 pontos para o limite.
«Mudar de jogo - o progresso vai continuar».
Localização: números com espaços intrínsecos «€1 000», 24 horas de tempo, nome do dia local.
Micro-textos (pode ser inserido como está)
«Restam 120 pontos ≈ 8 rodadas de €0,5 (6-8 min)».
"Estás na zona 11-50. Garantido: FS x 10. Até 4-10 - 2400 pontos"
"Cap alcançado: 200 pontos/hora. Lançamento às 00:00 (Europe/Kyiv)"
«Escolha o caminho Rápido/Competição/Com a história - pode mudar a qualquer momento».
Métricas para experiências UI
Efeito UI sobre vórtice: CTR «Iniciar», participation _ net, T1/T2 complition.
Comportamentos: Early-exit (≤5 min), time-to-T1/T2, caminhos switch-rate, visualização de torsos «?»
Qualidade: queixas/1k, erros de atualização do progresso, latency p95.
Valor: EcoARPPU (net), Prize & Bónus/Ativo, Net Uplift.
Moldura A/B (curta)
Unidade: usuário; sticky-assignment; A ratificação (plataforma/geo/payer-flag).
Hipóteses: faixa de escada vs; «minutos» vs «pontos»; botões vs vs; com a animação «faísca» vs sem.
CUPED: pré-sessão-time como um cobiçado; janela ≥2 semanas com fases D0-D2/D3-D7.
Folha de cheque do designer de missões
- Escada T1→T2→Final com ícones de prémios.
- Bloco «Quanto falta» em minutos/rodadas.
- Cartões de passos, um alvo para a tela.
- caminhos OR - três botões visíveis com ETA.
- Áreas de recompensa e «garantido».
- Timbox timer + «janela de respiração».
- Micro-animação «faísca», esqueletos/shimer.
- Tula «Como se conta?» «porquê não vai».
- Contraste/ícone/tema escuro; «Vai queimar através do X».
- Estados vazios e erros benignos.
Mini-mala (sintética)
Até: faixa de progresso sem liminares, texto «restam 120 pontos», capas ocultas, nenhum estado quente vazio.
Depois de: escada com prémios, «8 rounds/6-8 min», botões OR-caminhos, módulo de taimbox, tulos «?», «kap alcançado», faíscas + esqueletos, áreas de recompensa.
Resultado de 4 semanas vs controle participation _ net + 6. 4 p.p., complition + 10. 8 p.p., Early-exit - 18%, queixas/1k - 31%, EcoARPPU (net) + €1. 7 при Prize&Bonus/Active +€0. 5.
Uma boa interface de missões é a disciplina visual: estágio em vez de «pântano de juros», dicas específicas de esforço, recompensas visíveis e dinâmica suave. Adicione disponibilidade, tulos claros, timbocks e animações cuidadosas - e as missões começarão a funcionar como um «ritmo de pequenas vitórias», em vez de uma longa e chata faixa de progresso.