Guia de Redação UX: Parte 2

Luna Cesero

10 min readJun 30, 2022

Elementos textuais, de contextualização e suporte, Emails, FAQ/Ajuda

Componentes de Conteúdo

1. Elementos de Contextualização:

Primeiro Login: pode acontecer de duas formas: um cadastro realizado pelo próprio usuário ou um cadastro realizado por terceiro. Em ambos os casos, é comum que um link seja enviado por email para confirmar o cadastro e autenticar o endereço de email informado. No primeiro caso, redirecionar o usuário para uma página de "sucesso" que tenha uma chamada para ação ou a própria dashboard é o mais usual. Caso o usuário tenha sido cadastrado por um terceiro (médico, administrador da empresa, etc), será necessária a criação de uma senha: se antecipe e deixe claros os critérios para a criação da senha (quantidade de caracteres, necessidade de maiúsculas e minúsculas, caracteres especiais, etc)

Exemplo de mensagem de sucesso quando o cadastro é realizado pelo próprio usuário (plataforma Aluno Ensina)

Exemplo de Primeiro Acesso quando o cadastro é realizado por um terceiro (sistema NPL Brasil)

Guia de Primeiros Passos: ao acessar o produto pela primeira vez, o seu usuário ainda precisa aprender a utilizá-lo. Por isso, é importante que você traga chamadas para a ação, guiando-o para deixar clara qual a sua jornada dentro do produto e quais possibilidades de ação ele encontra ali. Inclua textos guia na interface para explicar como proceder em cada etapa da experiência, antecipando dúvidas e/ou erros.

Exemplo de guia mostrado no primeiro acesso realizado pelo usuário. Aqui foi usado um personagem que apresenta funcionalidades do sistema, com o intuito de se aproximar do usuário (sistema Zaki)

2. Elementos textuais da interface:

Títulos: contextualizam ou apresentam uma ação a ser tomada. Podem expressar: Nome da marca (reforçar a identidade e definir o contexto com o nome da marca, utilizando seu nome como título em todas as interfaces); Nome do conteúdo (quando a interface se baseia em um conteúdo, o título da interface é o mesmo do conteúdo. Ex: título de uma postagem do Medium); Ação ambígua (usado em interfaces onde diversas ações potenciais podem ser executadas pelo usuário. Ex: ver meus dados); Ação única (instruções a serem seguidas pelo usuário. Ex: editar email)

Botões: permitem que o usuário avance ao executar uma ação. Podem ser: comandos, links, calls to action ou botões com ícones. Devem utilizar uma ou duas palavras, recorrer ao vocabulário dos usuários e serem priorizados com clareza. Em botões de ação, deve-se iniciar o texto com um verbo, indicando a ação (Ex: pagar boleto, criar conta). Em menus ou listas, os substantivos podem ser utilizados como botões para permitir que os usuários escolham para onde desejam ir (Ex: amigos, configurações, perfil, ajuda)

Exemplos de botões numa interface: à esquerda, temos botões de ação, utilizando substantivos comuns em seus nomes; à direita, temos um botão principal de ação, iniciado por verbo “cadastrar usuário” e um botão secundário de ação “cancelar”. Perceba a hierarquia entre as ações na interface e o peso/destaque de cada botão para refletir essa hierarquia.

Descrições: complementam as informações do título e do botão, trazendo mais conteúdo que explique o funcionamento daquela experiência para que o usuário entenda com clareza como seguir aquela ação. Servem também para estabelecer a marca e reduzir responsabilidade (ao alertar o usuário de regras e certificar de que este as conhece). Podem ser: sintagmas, frases, parágrafos ou estarem ocultas (como ao clicar em um ícone de informações ou "saber mais"). Descrições devem ser breves e escaneáveis, a fim de gerar mais confiança sobre seu entendimento. Evite asteriscos e "letras miúdas", eles reduzem a confiança, indicando que o texto principal não é totalmente honesto. Quando ideias complexas precisarem ser informadas, inclua-as nas descrições, utilizando linguagem simples (ex: notas no rodapé da tela).

Exemplos de descrição: à esquerda, temos um modal, alertando ao usuário a consequência daquela ação; à direita, temos um formulário, onde a descrição afirma ao usuário que o preenchimento poderá ser editado mais tarde.

Estados vazios (empty states): indicam que um espaço vazio é intencional, a fim de criar expectativas e entusiasmo. Ele indica o que o usuário pode fazer, direcionando diretamente para a ação (ex: para acessar a área de cliente, faça login) ou indiretamente, explicando o que ele deve realizar para preencher aquele espaço (ex: para salvar uma publicação, clique em salvar quando encontrar uma imagem que você gostou).

Exemplo de estado vazio que direciona o usuário indiretamente para a ação

Exemplo de estado vazio que direciona o usuário diretamente para a ação

Rótulos: buscam facilitar a compreensão de uma experiência quando esta envolve muitos detalhes, indicando seções, categorias, status, progresso, quantidade ou unidade. São substantivos simples ou pares de substantivos ou outros recursos que podem ter sua formatação definida pelo UX Writer (como moedas e datas). Exemplos: Datas (Ex: 8 Julho de 2020 ou 08/07/20), Seções (Ex: Eventos), Valores (Ex: R$12.00 ou R$ 12,00), Estados Vazios (Ex: Sem valor)

Exemplo de rótulos em uma interface: “Dados Pessoais”, “Bilhete”, “Pagamento” e “Endereço” se referem a rótulos de seções. “R$ 36,90”, “R$ 0,68 (7,38%)” se referem a rótulos de valores, com formatação definida em “R$ 00,00” e “R$ 0,00 (0,00%)”, respectivamente. “12/12/2020 às 20:54” é um exemplo de rótulo de data, com formatação definida no formato “xx/xx/xxxx às 00:00”.

Controles: informa aos usuários - através de controles deslizantes, switches e checkboxes, - o estado de possíveis customizações. Deve se considerar para um controle: o seu nome (ex: notificações) e o seu estado (ex: on ou off). O nome do controle deve ser válido tanto para a opção afirmativa quanto para a negativa. Os controles podem ser agrupado em categorias nomeadas com sintagmas verbais (ex: exibir na página principal) ou nominais (ex: conta).

Exemplo de controle (switch) afirmando quais assistências estão incluídas no seguro. À direita, mensagem de confirmação para adição de assinatura, a qual aparece quando o usuário clicar no controle da assistência pet (que se encontra no status “off”).

Campos de entrada de texto: ajuda os usuários a fornecerem informações precisas durante o preenchimento de dados, endereços de email, números, datas, entre outros. Os textos de rótulo podem trazer o nome da informação a ser fornecida (ex: Nome completo) ou uma instrução imperativa sobre o fornecimento da informação (ex: informe o seu nome completo). As dicas podem trazer um exemplo da informação a ser fornecida (ex: Ex: Jose da Silva) ou uma orientação de como preencher corretamente (ex: sua senha deve ter pelo menos 8 caracteres). Para priorizar a usabilidade, é importante que os campos de entrada apresentem tanto o rótulo (label) quanto as dicas (placeholders), uma vez que, ao preencher a informação, a dica é sobreposta e, sem o rótulo, o usuário perderá a referência de qual informação aquele campo se refere.

À direita, exemplo de formulário com campos de texto. À direita, componentes de campos de entrada de texto prevendo diferentes elementos textuais (label/título, placeholder/dica e helper/texto complementar) nos campos

Textos de transição: sua função é confirmar que uma ação está em andamento, informando o usuário de que a solicitação foi recebida e está sendo processada. Utilize o presente contínuo do verbo "está enviando"/"está carregando", as reticências ajudam a indicar que a espera será curta. Você também pode usar essas mensagens para gerar entusiasmo, com palavras como "preparando", "configurando".

3. Elementos de suporte:

Mensagens de Confirmação: garantem aos usuários que o processo foi concluído. Elas podem aparecer passivamente (ex: rascunho salvo) ou ser exibidas em sequência (em uma nova tela ou em um modal). Use o pretérito do verbo "enviado" "carregado" "finalizado", gerando a sensação de conclusão. Em casos imediatos, uma única palavra pode resumir essa conclusão, em casos de espera mais longa ou processos mais complexos, apresente um título com a mensagem de confirmação, criando expectativa e um botão para concluir.

Notificações: informam ou lembram o usuário de se envolver com a experiência, trazendo sua atenção a uma parte da experiência para a qual não estão atentos no momento. São úteis para impulsionar o envolvimento, mas devem ser planejadas com cautela, uma vez que seu uso excessivo pode levar o usuário a desativá-las. Devem comunicar seu valor e intenção rapidamente e incluir a ação a ser tomada. Podem ser temporárias ou persistentes e podem ser mostradas: na tela bloqueada do celular, no centro de notificações ou em um banner. É composta por dois blocos de texto: título (começando com um verbo relacionado à ação a ser executada) e descrição (acrescenta informações úteis ao usuário).

Exemplos de notificações. Na ordem: notificações do ifood na tela bloqueada do celular (push notification), no centro de notificações de um app (lembrando o usuário de utilizar as assistências do seu seguro) e notificação em um banner (sugerindo ao usuário um upgrade de plano). Todas incentivam a interação do usuário com o produto.

Mensagens de Erro: ajudam o usuário a alcançar seu objetivo, indicando quando há um problema. Usam títulos iniciados por verbo e trazem instruções breves na descrição. Quando a mensagem de erro se refere a campos que estão sendo validados, o texto pode ser breve e instruir o usuário a corrigí-lo, sem interromper a ação (ex: Informe um telefone contendo 11 dígitos e tente novamente). Evite o termo "inválido". Quando o erro não pode ser corrigido, utilize um modal para apresentar a instrução no título (ex: Adicione uma nova forma de pagamento), a explicação do erro na descrição (ex: O pagamento não pôde ser efetuado. Para comprar, adicione um novo cartão ou gere um boleto) e botões para uma nova ação (ex: "Adicionar" e "cancelar"). Quando o erro se refere a uma barreira (página não encontrada, falha na conexão), especifique quando ou como a experiência estará disponível novamente.

Mantenha a confiança sem culpar o usuário. Apenas deixe claro que não foi possível seguir adiante com a solicitação. Se fizer sentido, peça desculpas pela espera, perda ou inconveniência. Em sistemas relacionados ao trabalho, forneça informações adicionais sobre o erro para que o usuário possa identificar as circunstâncias de erro e evitá-las no futuro. Para o público em geral, links de "saiba mais" já são o suficiente.

Chatbot: pode ter como função: evitar que o usuário entre em contato com a empresa ou fazer uma triagem do tipo de atendimento que aquele usuário irá receber (qual serviço ele contratou ou quer contratar, por exemplo). Ele responde aos usuários automaticamente e encaminha problemas para atendentes quando necessário. Os roteiros para chatbots devem ser facilmente compreendidos e adotar uma linguagem que o aproxime do usuário (‘Olá, em que posso ajudar?). A base para o roteiro de um chatbot é a criação de um fluxograma, mapeando todos os diversos caminhos possíveis (dificuldades, dúvidas dos usuários, possíveis respostas às perguntas realizadas pelo bot). A estruturação desses caminhos possíveis indicará os textos que deverão ser escritos no roteiro.

Exemplo de Chatbot (Ludus) criado para conversar com adolescentes que estão se preparando para o ENEM. Primeiramente temos um fluxograma dos caminhos dos usuários nas conversas, depois temos alguns prints das conversas (note o tom de voz informal, o uso de GIFS e emojis e a conversa amigável)

A Ludus foi uma assistente virtual criada pela equipe da Renata Ramos, especialista em UX Writing e convidada pela T10 para uma palestra em 2021. É bem improvável que, como product designers de uma empresa de consultoria, precisemos criar um chatbot para nossos clientes, mas se você também adorou o tema e quer saber um pouco mais sobre o processo da equipe na criação da Ludus, acesse: https://howedu.com.br/ludus-o-chatbot-que-auxilia-os-candidatos-do-enem-2/

4. Emails

Primeiro Acesso: o email de primeiro acesso costuma trazer um link ou código para autenticação do endereço de email utilizado. Deixe claro como aquele código deve ser usado (e em quanto tempo ele expira). Aproveite esse momento para dar as boas vindas e expressar a identidade da marca no diálogo com seu usuário.

Exemplo de email de boas vindas/primeiro acesso

Recuperação de Senha: durante o processo de recuperação de senha, é enviado um email para validar a solicitação e direcionar o usuário para a criação de uma nova senha.

Exemplo de email sobre recuperação de senha

Emails sobre Pedido: utilizados por e-commerces para atualizar usuários sobre status de compra e pedidos. Geralmente existem 5 diferentes status: pedido recebido, pagamento confirmado, produto pronto para o envio, produto enviado e produto entregue. Todos devem comunicar todas as informações fundamentais para o usuário, considerando cada etapa de sua jornada.

Exemplos de emails sobre pedido, sobre pedido recebido e pagamento confirmado (informações pessoais alteradas para proteger a privacidade da consumidora)

Complicações no Processo: Caso um pedido não possa ser entregue (seja por falha técnica, como falta no estoque ou greve de correios), a compra do cliente não será processada e o problema precisará ser comunicado ao usuário. Considere a linguagem, o momento, o problema e as emoções que ele vai gerar, assim, busque construir a melhor comunicação possível.

Exemplo de email em que a compra não foi concluída

5. FAQ e Ajuda

O objetivo do FAQ é evitar que o cliente ligue para a empresa, através da automatização da ajuda. Assim, é preciso que o FAQ seja escrito de maneira didática. Em geral, são escritos no formato pergunta e resposta, o que dinamiza a leitura.
Podem ser acompanhados de imagens ou links de direcionamento para o usuário ser levado a pontos específicos do produto. Normalmente, esse conteúdo está agrupado por assunto, por tipo de usuário ou por área do produto. No FAQ se esclarecem: regras do negócio, prazos de validade do produto, políticas de troca ou devolução e cancelamento, além do passo a passo de alguns processo.

Quais as referências utilizadas nesse guia?

DE CIA, Patricia. UX Writing — O texto como forma de melhorar a experiência do Usuário. Ebook. Descola.

NAKAHARA, Lory. 8 Maneiras de testar seus textos. Medium, Maio, 2021. Disponível em: https://brasil.uxdesign.cc/7-testes-para-textos-4e9302e76285Acesso: 18/02/2022.

PODMAJERSKY, Torrey. Redação Estratégica para UX. Primeira Edição. Editora Novatec, São Paulo, 2019.

RODRIGUES, Bruno. Em busca de boas práticas de UX Writing. Edição do Kindle.