Coach mark

Coach marks são balões informativos que chamam a atenção do usuário para guiar a descoberta de funcionalidades ou mudanças em uma interface.

Figma

---

Uso

Use coach marks para apresentar funcionalidades novas, orientar o usuário em fluxos pouco conhecidos ou destacar áreas importantes da interface. São especialmente úteis em primeiras interações, mudanças relevantes no produto ou pontos críticos de conversão. O conteúdo deve ser claro, objetivo e não obstrutivo.

---

Anatomia

❖. Container

• Estrutura que envolve todo o conteúdo do Coach mark. Aplica a identidade visual da variante ativa (por exemplo, cor de fundo para a categoria de mensagem).

1. Tag (Opcional)

• Elemento textual curto, usado para destacar categorias ou chamar atenção para o tipo de conteúdo (ex: "Novo", "Dica", "Assinatura").

2. Title

• Texto obrigatório e principal. Deve ser direto, objetivo e conter poucas linhas para garantir legibilidade rápida. Fornece o resumo da mensagem do Coach mark.

3. Description (Opcional)

• Complementa o título com informações adicionais. Deve ser concisa, com até 4 linhas, e usada apenas quando for necessário contextualizar ou detalhar a informação.

4. Progress bar (Opcional)

• Indicador visual da quantidade de etapas em um fluxo guiado. Recebe uma quantidade de blocos proporcionais ao número total de passos do tour.

5. Close

• Elemento obrigatório que permite ao usuário dispensar o Coach mark. Deve estar sempre visível e acessível.

6. Back button (Opcional)

• Usado em fluxos guiados para permitir retorno ao passo anterior. Quando presente, deve ocupar o menor espaço possível, priorizando a economia de layout.

7. Secondary Button (Opcional)

• Ação secundária contextual em fluxos com múltiplas etapas. Deve estar visualmente subordinado ao botão primário.

8. Primary Button

• Elemento obrigatório para ações principais, como avançar no fluxo. Sempre deve conter um rótulo claro indicando o próximo passo.

9. Arrow (Opcional)

• Elemento gráfico que conecta visualmente o Coach mark ao elemento da interface ao qual está relacionado. Pode ser posicionado de forma flexível conforme o contexto.

---

Variantes

Default

Usada em comunicações gerais ou introdução de funcionalidades comuns do produto. Aplica a cor secundária principal para gerar destaque e deve manter tom neutro e informativo.

Subscription

Específica para destacar recursos ou benefícios relacionados à assinatura do produto. Aplica identidade visual distinta (como cor temática de assinatura) para reforçar a natureza do conteúdo.

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
19/11/2024	18/07/2025	--/--/----	--/--/----	Ver na tabela

Atualizações por data

Novembro 2024

19/11/2024

• Criação e documentação do novo componente

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.