Content Design para UX Designers

#pracegover: imagem do artigo com um triângulo equilátero ao meio com cada ponta relacionada a um aspecto de design, sendo eles “Como funciona (Interection Design)”, “Como aparece (Graphic Design)” e “O que diz (Content Design)”.

O conteúdo de um produto digital é tão importante quanto sua aparência e seus fluxos, e não pode ficar desassociado. Em algumas interfaces, como chatbots por exemplo, o conteúdo é o “próprio design”.

Botões, labels, navegação, títulos, ajuda, textos, notificações, calls to action, links, erros, ufaa… é tudo Content Design!

Se você é um UX Designer não-especialista em conteúdo, aqui vão algumas dicas de como ter um conteúdo um pouco mais claro e conciso no seu produto digital.

Antes de tudo é importante ressaltar, este conteúdo deve ser elaborado por um especialista (comumente um UX Writer), que poderá ajudar com:

• Consultoria sobre linguagem — dúvidas relacionadas à semântica, pontuação, entre outras especificidades… ajudam a economizar tempo e desgastes desnecessários;
• Criar uma narrativa sobre o produto;
• Definir a voz do produto e consistência por todos os pontos de contato com clientes: suporte, vendas e marketing.

Contudo, esse trabalho (da escrita) muitas vezes é assumido pelo time de UX Designers, é uma realidade em várias empresas. Assim como algumas empresas ainda carecem de UX Designers.

Por isso aqui vão algumas dicas que podem nos ajudar nesta jornada.

#1 Toda palavra conta

Se o produto digital já existe, é possível fazer uma revisão e cortar o máximo de palavras desnecessárias que conseguir:

Não obrigue seus usuários a lerem longas frases, quando poucas palavras já resolveriam.

Validação de um fluxo já familiar ao usuário pode ser simplificado. #pracegover: nesta imagem estão dois exemplos de feedback para informar que uma ação foi realizada. Um dos textos é “Form saved successfully.” e o outro “Saved”. O formado mais indicado é o segundo, mais curto.

É possível ter alta densidade de informação com poucas palavras. Questione se a informação que você está disponibilizando é importante neste momento:

Esta informação é importante agora?

Esta pergunta ajuda a filtrar a relevância da informação, possibilita o foco no que é mais importante e diminui a carga cognitiva para o usuário (fica menos cansativo utilizar a interface).

#2 Prover contexto e alinhar expectativas

Usuário sente-se emponderado e confiante para tomar decisões.

Ação (deletar permanentemente), objeto (“este conteúdo”) e suas consequências (comentários e links também ficarão indisponíveis). #pracegover: esta imagem contém um componente de popover com a seguinte mensagem “Are you sure?”, “This will permanently delete this content. It will no longer be available for you, including comments and links.” com duas opções de botões — “No” e “Yes, I’m sure”.

#3 Ajuda contextual

No digital existem alguns tipos de ajuda contextual que ajudam o usuários nas suas tarefas: tooltips, conteúdo incorporado ( ℹ ), passo-a-passo, etc.

Estes recursos citados podem ser utilizados para orientações e instruções, como na imagem abaixo — quanto mais objetivo melhor.

Ajuda contextual com instrução não é algo específico do universo digital. #pracegover: fotografia de uma rua com destaque para uma faixa de pedestres com a instrução “Look left” acompanhada de uma seta para a esquerda.

#4 Conteúdo de ajuda e buscas

De acordo com Dan Craddock, com um simples set de métricas é possível melhorar seu conteúdo de ajuda:

• “Esta informação foi útil?”: % de sim ou não para esta pergunta, de preferência acompanhado de justificativa.
• % de referências no Suporte ou “Fale conosco”: após algumas tentativas, usuários desistem e tentam contato direto para solucionar seu problema.
• % de buscas: se os usuários estão buscando informações em páginas internas, talvez não estejam encontrando o que a página anunciou.

Suporte Microsoft Brasil / Suporte Apple Brasil. #pracegover: duas imagens de telas recortadas, a primeira com a pergunta “Estas informações foram úteis?”, com dois botões “Sim” e “Não”, a segunda imagem é muito parecida — “Ajudou?” seguida de dois botões “Sim” e “Não”.

Perguntas como “Esta informação é útil?”, ao final do conteúdo, não interrompem o fluxo do usuário (evite popups/popovers/modals). Por ser uma resposta binária facilita e agiliza a resposta do seu usuário e deve estar localizado na mesma página do conteúdo, facilitando sua contextualização.

A justificativa: visualizar a pergunta Por que? ou Por que não? após responder SIM ou NÃO reduz a percepção de esforço para responder a pesquisa. #pracegover: gif animado com a pergunta “Was this page helpful?” com duas opções de resposta em formato múltipla escolha (Yes/No) — existe uma interação com um ponteiro de mouse, que ao clicar em “Yes” abre uma nova seção com duas perguntas “Why or Why not? (optional)”, abre também um campo de digitação para resposta e um botão, no qual a mensagem “My comments” é digitada e na sequência é realizado um clique no botão “Send feedback” e, por último a mensagem “Thank you. We have received your comments.” é exibida.

#5 Eu já disse que não sou um robô!

Se você está escrevendo para um humano, aja como um também.

beep beep how can I help you? #pracegover: fotografia de uma criança de aproximadamente 5 anos de idade fantasiado de robô (talvez para o halloween) segurando na mão esquerda uma sacola listrada nas cores amarelo e branco, com conteúdo não identificado.

Evite que comunicações técnicas interfiram em uma comunicação clara.

Evite também mensagens robóticas. Você pode falar como seus usuários falam, dentro dos limites da formalidade do seu produto e da voz definida.

Além disso, priorize o uso de verbos pessoais:

“NÓS ESTAMOS investigando o problema” #pracegover: nesta imagem estão dois exemplos de feedback para informar que uma ação foi realizada. Um dos textos é “The problem is being investigated” e o outro “We are investigating the problem”. O formado mais indicado é o segundo.

É importante explicitar quem precisa executar a tarefa:

“Por favor, INSIRA(VOCÊ) o código para continuar” #pracegover: nesta imagem estão dois exemplos de feedback para informar que uma ação foi realizada. Um dos textos é “Code is required to proceed” e o outro “Please, insert code to proceed”. O formado mais indicado é o segundo.

#6 UX Writing com personalidade

Para esta dica é importante ter um guia de estilo definido com tom de voz e Dos and Don’ts, podendo ser mais ou menos formal, dependendo do seu produto.

Como no tópico anterior, a comunicação deve ser de humanos para humanos — transmitir esta ideia pode ser um diferencial competitivo de muito valor.

“Qual é a boa, Sávio Correia?” (Aplicativo Discord) #pracegover: uma imagem de um componente de modal em ambiente digital contendo três campos para preenchimento e dois botões- título “Definir status personalizado”, primeiro campo “Qual é a boa, Sávio Correia?” contendo um campo de resposta com um placeholder (emoji sorridente/”O suporte chegou!”), segundo campo “Limpar depois de” com opção de dropdown pré-selecionada (“hoje”), e terceiro campo “Status” com opção de dropdown pré-selecionada (ícone de círculo verde preenchido/“Disponível”) — botões “Cancelar” e “Salvar”.

#7 Notificação de erros

Validação de campos com erros podem ser previstos e notificações específicas devem ser criadas.

Mas como meço a eficiência desse conteúdo?

É importante medir se existem altas taxas de validações de campos com erros (analytics).

Validações de campos com erros. #pracegover: dois campos de texto em ambiente digital com notificações de erro — o primeiro campo está em branco, com bordas em vermelho com uma mensagem logo abaixo (“Required”), o segundo campo tem a mesma marcação em vermelho preenchido com “9999” também seguido de uma mensagem abaixo (“Max value: 999”) .

Fazer este acompanhamento de quantas vezes uma validação de erro é acionada em um campo/formulário é suficiente para prover um alerta de que existe alguma falha passível de melhoria, seja de comunicação ou de outra natureza (regras muito rígidas, por exemplo).

#8 Aprenda com todos

Explore a comunicação fora dos seus times. Apesar de todos falarem sobre o mesmo produto dentro da sua empresa, a comunicação muda entre os grupos: sponsors, consultores, vendedores, clientes.

Documentar algumas nomenclaturas que aparecem com maior frequência, ou uma coisa que é chamada por vários nomes diferentes podem te ajudar na hora de configurar uma label pensando em algum tipo de público, por exemplo.

Fazer Demonstrações e Design Critiques de seus protótipos também corroboram para uma implementação mais assertiva e consistente do seu conteúdo.

Por fim…

Existem ferramentas e metodologias para ajudar a pôr em prática algumas dessas dicas, porém é algo que eu mesmo ainda estou experimentando e dependem do contexto. Alguns exemplos:

• Mapa mental
• Dicionário de vocabulário controlado
• Design Personality
• Benchmarking
• Heurísticas de conteúdo
• …

Revisar frases, prover contexto e conteúdo de ajuda e humanizar seu conteúdo podem não ser tarefas específicas do dia-a-dia de um UX Designer, mas podem influenciar suas decisões e o andamento do seu produto digital.