UX Writing — Alpha

Este artigo é parte do Case “Alpha, cuidando das nossas crianças”.

Inicialmente foi feita uma nuvem de palavras com a transcrição das pesquisas qualitativas para:

  • embasar a comunicação de acordo com as palavras utilizadas pela persona
  • definir o tom de voz de Alpha

Algumas palavras não se destacaram tanto na nuvem por serem mencionadas com variações, mas indicavam um padrão pra se referir a algo, e isso também foi considerado. Exemplo: “registro”, “registrou”, “registros”, “registrar”, “registram” (ao falarem sobre vacina). Por isso, no botão para incluir vacina, ao invés de ser utilizada a palavra “incluir”, “inserir”, ou “cadastrar”, foi escolhida “registrar”.

O Rabiscoframe foi feito com palavras selecionadas, para já testar o UX Writing no protótipo de baixa fidelidade.

Tom e Voz

Sempre alinhado com o conceito do nome e do logotipo de Alpha, e entendendo que saúde e criança são coisas sérias, mas que não devemos ser duros ou frios, pois estamos nos comunicando com pais e responsáveis que:

  • se preocupam e querem o melhor para os filhos
  • sentem inseguranças sobre cuidados com os filhos
  • buscam suporte e apoio
  • têm medo sobre informações de saúde por não saberem se são verdadeiras ou falsas.
  • utilizam o produto em momentos de atenção à saúde dos filhos

Para a definição do tom é importante compreender o momento da jornada do usuário, levando em conta que o produto será acessado:

  • em posto ou consultório (registrando ou consultando o registro de vacinas) — momento de atenção e cuidados com a saúde do filho com profissionais da saúde ao redor
  • pra se informar sobre vacinas e consultar atrasadas — momento de preocupação para resolver a pendência e insegurança e medos sobre o ato de vacinar → oportunidade de converter esses sentimentos em segurança, confiança e ação, para pais efetivarem a vacinação
  • ao receber um lembrete de vacina e para programar um novo — há uma ansiedade envolvida ao fator esquecimento, o usuário está se organizando
  • para consultar próximas vacinas — momento em que o usuário está se organizando com os compromissos de saúde do filho, em que há mais tranquilidade mas sempre com sentimentos associados a atenção e cuidados com o filho

Precisamos, através dos textos:

  • ser formais e objetivos mas sem frieza, e utilizando linguagem simples
  • transmitir segurança
  • ter empatia: “estamos aqui com você, entendemos suas preocupações e vamos ajudar”
  • mostrar apoio e suporte
  • mostrar parceria no cuidado à saúde
  • aconchegar (utilizando bom senso, equilibrando com formalidade)
  • conscientizar sobre a importância da vacinação
  • incentivar a manter o calendário de vacinas em dia

Exemplo:

O “Bom dia” do aplicativo, seguido do nome personalizado do usuário, demonstra receptividade e proximidade. Uma forma de contato humano quando o usuário acessa o produto. Não utiliza exclamação porque neste 1º momento poderia gerar desconforto:

  • os sentimentos que o usuário tem ao entrar no app podem variar (imagine dar um bom dia super animado a alguém que está tenso e preocupado)

Neste 1º contato o ideal é ser mais neutro e mais formal, mas não frio, por tanto o texto foi associado a um ícone que traz leveza para a mensagem.

Na sequência uma frase para aconchegar, mostrar que estamos juntos e passar a mensagem sobre manter vacinas em dia (a nuvem de palavras feita após a qualitativa ressalta “ajuda” e “dia*”, e isso foi aproveitado na construção da frase).

*a nuvem só destacou “dia” mas o termo “em dia” foi utilizado diversas vezes.

Já na informação do Léo, de “Vacinas em dia!”, cabe a exclamação para destacar a conquista de tarefa cumprida.

Com a hierarquização das informações através de diferença de tamanho, peso, cor, entre outras, conseguimos sugerir um escaneamento pro usuário, promovendo uma divisão de “momentos”. Desta forma, “Vacinas em dia!” fica em um momento diferente do “Bom Dia”. E neste momento podemos nos beneficiar do tom que a exclamação (que também é diferente por estar associada a outra palavra) trás como oportunidade de gerar alívio pela tarefa cumprida e incentivo para manter assim.

O uso da exclamação deve ser feito com cautela e de acordo com cada caso.

Criação de texto embasado em UX:

Além do tom de voz, o UX Writting foi desenvolvido a partir não somente de palavras utilizadas pela persona mas também de heurísticas, estudos de psicologia, aprendizados de teste de usabilidade, entre outros:

1) Barra de progressão de vacinas

O Efeito de Zeigarnik (maior tendência a lembrar de uma tarefa incompleta do que o contrário) foi considerado para criar o texto referente às vacinas que faltam ser atualizadas, ao invés de mencionar a quantidade de vacinas concluídas.

O percentual (10%) foi destacado com cor, corpo e peso diferente, dando auxílio visual à informação de maior relevância desta parte. Ao entrar na tela o usuário rapidamente identifica o número. Ao entrar mais vezes não precisará nem ler a frase, apenas o número, pois já associará a informação.

Acredito que, nesta tela, mencionar o percentual faça mais sentido do que dizer a quantidade de vacinas atrasadas, por dar uma visão de continuidade de processo (e assim incentivar) num momento em que o usuário já deu o 2º passo no app e está dentro de uma caderneta, mais direcionado para a tarefa. Na tela anterior (item 1) foi utilizado “2 vacinas atrasadas” para passar com objetividade a informação no momento inicial, sendo visto mesmo que o usuário não entre em nenhuma caderneta, tendo um caráter mais informativo e menos lúdico.

Para validar esta suposição será feito um teste A/B para identificar se alguma das versões gera mais impacto:

  • A: com “2 vacinas atrasadas” na 1ª tela e “faltam 2 vacinas” na 2ª tela
  • B: com “2 vacinas atrasadas” na 1ª tela e “faltam 10% das vacinas” na 2ª tela

2) Menu secundário

Neste menu há uma seção para ver a lista de vacinas que a criança ainda não tomou. Nos primeiros rabiscos, foi utilizado o termo “Pendentes” pra ela, mas ao analisar junto à nuvem de palavras, a palavra “Atrasada” (se referindo à vacina) se destaca, portanto esta palavra foi substituída (o 1º teste já foi feito com esta substituição).

No teste de usabilidade (onde foi solicitado que os usuários “pensassem alto”) do protótipo de baixa fidelidade, a seção “Calendário” deste menu gerou dúvidas por ser uma palavra temporal como “Atrasadas”.

Buscando a solução percebi que havia uma inconsistência na interface conversacional, no diálogo com o usuário: a palavra “Calendários” não se encaixava no guarda-chuva da tela (“Vacinas”).

Interface conversacional
Menu Secundário com a solução (“Todas” ao invés de “Calendário”)

3) Botões

Os textos dos botões foram criados de forma que o usuário, antes de clicar, compreenda qual ação acontecerá. 1º foi baseado em hipóteses que foram validadas durante o teste de usabilidade, uma vez que foi solicitado aos usuários que “pensassem em voz alta” durante todo o teste.

Uma das correções feitas foi em “Agendar Lembrete”. 1 usuário achou que estava agendando um horário em um posto para vacinar a criança. Como o teste foi feito apenas com 5 pessoas, esta informação foi levada em conta e o texto foi substituído por “Programar Lembrete”, mas ainda precisa ser testado com mais usuários.

As cores de fundo do botão e do texto estão sempre com alto contraste.

3) Destaque de Notícias

É importante ressaltar que, na molécula de destaque de uma notícia, a mensagem principal daquela matéria precisa ser passada de forma clara e objetiva, sem que o usuário precise acessá-la pra saber do que se trata.

Além de ser fundamental por temos a conscientização do usuário com um dos objetivos principais, deste jeito, ao rolar a página para ver todo o organismo de notícias, o usuário tem um panorama de todas as informações passadas ali, mesmo que não acesse cada matéria.

5) Prevenção de erros, Feedbacks, e textos de ajuda

Ao acessar a tela de registro de vacinas, um alerta orienta o usuário a não registrar a vacina antes dela ser aplicada (ele pode tentar registrar uma vacina antes, pra “adiantar”, mas caso haja qualquer imprevisto, a aplicação não for feita, e o usuário esquecer que já registrou, a caderneta do filho ficará com uma informação errada)

“Para a segurança do seu filho, só registre a vacina após ela ser aplicada.”

O usuário pode deixar aquele alerta aparecer sempre que entrar nesta tela ou marcar a opção de não mostrar mais (liberdade para o usuário decidir — 3ª heurística de Nielsen).

Ainda assim, caso tente registrar a vacina com uma data superior à do dia em que ele está inserindo, um feedback de erro aponta o problema:

Feedback de erro
  • prevenção de erro (5ª heurística de Nielsen)
  • explicação do erro próximo a onde ele acontece (junto a outros fatores, estabelece a 9ª heurística de Nielsen, pois além de apontar o erro, auxilia o usuário na correção)
  • conexão emocional: “ter esse cuidado é importante pra segurança do seu filho”

Nos placehorders foram inseridos textos de ajuda (10ª heurística de Nielsen), orientando o usuário:

Note que, no campo da Vacina, ela já está preenchida. Neste caso ela já veio assim porque o usuário clicou em inserir vacina especificamente no card da “Pneumocócica”. Assim poupamos uma etapa, facilitando para o usuário (isto foi sinalizado no fluxo, para que o desenvolvedor fique cientes) — 7ª heurística de Nielsen.

Foram apontadas, no fluxo, orientações pro front end relativas também a campos com autocomplete, entre outros, sempre visando facilitar pro usuário.

Por ser um formulário com poucos campos, optou-se por deixá-los todos na mesma tela ao invés de fazê-lo “passo-a-passo”, porém será observado em testes se é mais adequado apresentá-lo em etapas.

Observe que há ainda outro atalho: ao escanear o QR Code gerado pelo atendimento do posto, os dados do formulário serão automaticamente preeenchidos.

Futuramente a ideia é que esses campos sejam automaticamente preenchidos no app quando o agente de saúde inseri-los no sistema do posto, poupando mais ainda o usuário, com um sistema totalmente integrado entre governo e cidadãos.

Cada palavra inserida nos layouts foi devidamente planejada e raciocinada, levando em conta a linguagem do usuário, o nível de compreensão, o contexto, o momento da jornada, o sentimento, os objetivos, e tudo o que gira em torno desta persona, para promover a melhor experiência. Foram testadas desde o protótipo de baixa fidelidade e continuarão a ser observadas em próximos testes.

Sou uma UX Designer completamente apaixonada por buscar soluções que estejam de fato baseadas nas reais necessidades do usuário.

Unlisted

Sou uma UX Designer completamente apaixonada por buscar soluções que estejam de fato baseadas nas reais necessidades do usuário.