Skip to main content

Modelo de Formatação Geral

Fontes​

  • Alinhamento do texto: Justificado

  • Tipo de fonte: Helvetica ​

  • Tamanho padrão: Vá em formatos e escolha o "Cabeçalho 4", em seguida, escolha o tamanho "16"**.

  • Tamanho de Cabeçalho para "Etapas": Use o "Cabeçalho 2".

  • Copiar e colar: Ao colar algo, use o "colar sem formatação", ou use a opção Remover formatação:

  • Cor de fundo: Nunca use.

  • Cor da fonte: Use o painel do Freshdesk e selecione a seguinte cor:

  • Etapas: Use o "Cabeçalho 2", negrito e sem dois pontos.

  • Negrito: Apenas para ícones que representam botões.

  • **Aspas + **Itálico: Apenas para elementos selecionáveis, como datas, checkboxes ou um combobox.

  • Aspas: Para transcrever mensagens oficiais do sistema, como: "Sucesso, você criou sua conta".****

  • Itálico: Use para descrever nomes de elementos ou objetos, como checkbox ou Toggle.

  • Sublinhado: Nunca use.

  • Capitalização: Apenas a primeira letra de uma frase deve ser maiúscula, exceto ícones que representam botões no sistema e têm todas as letras maiúsculas.

  • Pontuação: Use dois pontos antes de transcrever ou citar algo oficial. Use ponto final ao concluir uma instrução ou passo a passo.

  • Parênteses: Apenas para sugestões pontuais ou informações opcionais, mas evite.

  • Colchetes: Apenas para atalhos de teclado, como [Ctrl + S], mas evite.

  • Chaves: Nunca use.

Listas

  • Listas ordenadas: Use-as ao descrever os passos que o usuário precisa executar uma sequência onde o passo seguinte depende do anterior.
  • Listas não ordenadas: Use-as quando há necessidade de organização visual em lista, mas os itens não são dependentes de uma sequência.
  • Recuos: Em listas ordenadas, quando uma passo for quebrado em passos menores (filhos), mas dependentes desse passo maior (pai). Quando isso acontecer, use a tecla [Ctrl + ]] ou a opção Aumentar recuo no painel do Freshdesk. Além disso, use a opção "Lower Alpha".

Vocabulário

  • Ao descrever o usuário: Use Gestão (e não Gestor), use Professor(a) (e não Professor)
  • O que usar: escrita simples, linguagem pessoal (“eu”, “você”, “nós”), expressões acolhedoras, como: “calma”; “vamos ajudar você!”
  • O que não usar: gírias, contrações, como “pra” em vez de “para” (tudo bem usar contrações em vídeos); palavras rebuscadas, antiquadas ou linguagem coloquial.
  • Para tutoriais (vídeos e textos): Use linguagem ativa, por exemplo: "faça isso" em vez de: "você pode fazer isso”.
  • Emojis: Use-os, mas sem frequência e de forma deliberada, ou seja, quando houver um motivo válido, como uma referência visual ou para expressar algo que seja mais eficiente do que palavras.

Imagens

  • Atenção com dados pessoais: Remova qualquer dado sensível real do usuário no sistema, como números de inscrição, matrícula, CPF, sobrenome...****
  • Alinhamento: Use o atalho de teclado [Shift + Enter] ao inserir uma imagem numa lista qualquer, isso evitará quebrar a sequência da lista. Além disso, use as configurações **Nenhum (para centralizar) ** e Texto de quebra nas propriedades da imagem, como mostra a figura abaixo:

Links

  • Use apenas links clicáveis: Como isso aqui. Faça isso usando um atalho de teclado, como [Ctrl + K] ou na opção do painel de formatação do Freshdesk.
  • Redirecionamento: Use a opção "Abrir em uma nova guia" sempre que o usuário ainda depende de informações do Freshdesk no tutorial de consulta em questão.

Imagens, figuras e recortes

Ao adicionar screenshots onde o usuário precisará clicar, scrolar ou qualquer outra interação, SEMPRE use imagens de TELA INTEIRA.

Utilize APENAS UMA seta para indicar algo​

Como não fazer​

Como fazer​

Indicações e referências visuais​

Usando o software Greenshot, use as configurações indicadas a seguir:

  • Line thickness: 4 para formas (como quadrados, retângulos e círculos); 5 para setas.
  • Font: Microsoft Sans Serif.
  • Size: 20 para números

Não use sobreposição textos, como na figura abaixo onde a seta está em cima do texto e o mesmo acontece com o quadro contendo o número 1.

Use as formas de quadrado, retângulo ou círculo APENAS quando houver necessidade de evidenciar um elemento na tela que não se caracteriza como um call-to-action (um elemento, como um botão, com cores ou traços em contraste na tela). Veja alguns exemplos abaixo:

Exemplos de elementos que DEVEM ser circulados

  • Turmas

- Abas​

IMPORTANTE: Ao enumerar passos numa mesma tela, não circule os números ao lado do retângulo, apenas escreva o número, como no exemplo abaixo:

Exemplos de elementos que NÁO DEVEM ser circulados:​

  • Cards

- Botões​

IMPORTANTE: nesses casos (elementos call-to-action) utilize apenas as setas.