Daily UX Writing Challenge — Terceira parte

Solucionando problemas por meio das palavras e construindo interfaces intuitivas e agradáveis para os usuários

Fernanda Nepote
8 min readNov 10, 2022

Contextualizando

O Daily UX Writing Challenge é uma iniciativa criada pelo Ryan Farrel, que desafia, por 15 dias, a criação de conteúdos de UX Writing (e, no caso aqui, de UI Design também!) para situações específicas que ele propõe.

A Barbara Finelli (UX Writer), me chamou para fazer a parte visual dos desafios e, juntas, criamos as soluções para os mesmos — o que acaba sendo importante pois, no dia-a-dia, os UX Writers não trabalham sozinhos e sim com UX Designers e/ou UI Designers. Por fim, neste artigo, apresentaremos as soluções para os 15 diferentes cenários sugeridos pelo autor.

Ao longo do desafio, pude exercitar a escrita com foco na experiência do usuário, aprendendo muito com a Bárbara. Além disso, aprimorei meus conhecimentos principalmente em UI Design, buscando transformar o que era um texto na experiência digital eficiente e agradável para os usuários, através de boas práticas visuais e de usabilidade.

Para facilitar a visualização e entendimento, separamos os resultados em três partes, sendo esta a terceira e última, com os resultados 11 a 15 e as posteriores:

Primeira etapa: resultados 1 a 5
Segunda etapa: resultados 6 a 10

Mas, antes de começar…

O que é UX Writer, Bárbara?🧐

“Vamos começar pelo início”, como já dizia a minha avó. A sigla “UX” significa “User Experience” que é a experiência da do usuário (Eu gosto mais de falar “Pessoa Usuária”) e “Writer”, traduzindo para o portugês significa “Escrita”, ou seja o profissional UX Writer é responsável pela melhor experiência da pessoa usuária através da escrita, tornando a mensagem clara e concisa.

E, para complementar, um pouco sobre o que é UX/UI Design:

Pegando o embalo da explicação da Bárbara sobre a sigla “UX” e juntando com o Design, temos a tradução literal “Design de Experiência do Usuário”, cujo objetivo é garantir que o usuário tenha a melhor experiência de uso com relação a um produto ou serviço. Para isso, é necessário processos que envolvam entender as necessidades da pessoa usuária, seus objetivos, limitações e habilidades, tudo isso alinhado com o objetivo do negócio.

Neste desafio, porém, por se tratar de telas específicas e rápidas, os protagonistas foram o UX Writer e, o UI Design, ou “Design de Interface do Usuário”.

O UI Design é responsável pelo aspecto visual de um produto digital (aqui, no caso, das interfaces das telas propostas). Para isso, é necessário seguir boas práticas visuais e de usabilidade para construir uma experiência digital eficiente e agradável para os usuários.

Agora sim, sem mais enrolação, bora para a resolução?

Desafio #11— Lentes de contato

Cenário: Um usuário idoso está fazendo uma pesquisa no Google para encontrar uma maneira fácil de comprar lentes de contato online.

Desafio: Escreva um título e uma meta descrição para um site que vende lentes de contato por assinatura entregues a um usuário a cada 30 dias — convença-o a experimentar.

Título: Máximo de 25 caracteres

Descrição: 160 caracteres no máximo

Perspectiva e prioridade da Bárbara como UX Writer:

  • Contexto da interação: Quais são as preocupações e emoções da pessoa usuária que vai ter contato com a tela?
  1. Tranquila
  • Objetivo: Qual é o resultado esperado, ou o que eu espero da pessoa usuária, ou, quais são os critérios de sucesso?
  1. Devo me atentar que é uma pessoa usuária idosa, então a linguagem deve ser o mais clara e simples possível
  • A motivação: Qual o ponto de partida, dor do negócio iniciou a demanda? Qual problema temos que resolver?
  1. A pessoa usuária, no caso um idoso, está em busca de comprar lentes de contato através da internet

Eu, como UI Designer, fiz algumas colocações ao criar as telas:

Para esta solução digital, simulei uma pesquisa no Google e criei todos os componentes do zero a partir do resultado.

E esse foi o nosso resultado:

Em destaque, a solução do desafio

Desafio #1️2️— Nome falso?

Cenário: Um usuário está criando uma conta. Quando eles chegam à etapa em que são solicitados a inserir seu nome, eles recebem uma mensagem de erro. Um software de detecção de fraude acha que seu nome é falso, mas está errado 5% das vezes.

Desafio: Escreva uma mensagem de erro que solicite que eles corrijam o erro sem envergonhá-los por terem um nome falso.

Máximo de 45 caracteres

Perspectiva e prioridade da Bárbara como UX Writer:

  • Contexto da interação: Quais são as preocupações e emoções da pessoa usuária que vai ter contato com a tela?
  1. Bravo, pois, pode achar que o app está duvidando da veracidade do seu nome
  • Objetivo: Qual é o resultado esperado, ou o que eu espero da pessoa usuária, ou, quais são os critérios de sucesso?
  1. Que a pessoa usuária informe confirme que o nome informado realmente é o dela
  • A motivação: Qual o ponto de partida, dor do negócio iniciou a demanda? Qual problema temos que resolver?
  1. O software de detecção de fraude acha que o nome que a pessoa usuária informou ao criar a conta é falso, precisamos ter uma mensagem de erro que não cause constrangimento

Eu, como UI Designer, fiz algumas colocações ao criar as telas:

Neste caso, como a mensagem de erro não “obriga” o usuário a alterar as informações do cadastro, o botão continuou habilitado.

E esse foi o nosso resultado:

Mensagem informando usuário

Desafio #13— Notificação para o motorista de caminhão

Cenário: Um motorista de caminhão de curta distância tem um aplicativo de telefone que monitora sua rota, horário, combustível e entregas.

Ele tem mais 6 entregas antes de parar para abastecer e almoçar. Devido ao tráfego inesperado, ele está atrasado.

Ele pode optar por permanecer em sua rota planejada por mais algumas paradas, mas corre o risco de ficar sem combustível e perder o almoço, ou pode pegar combustível e almoçar agora e terminar as entregas mais tarde.

Desafio: Escreva uma notificação push alertando-o sobre esse dilema e opções.

Título: Máximo de 35 caracteres

Corpo: Máximo de 45 caracteres

Botão: 25 caracteres

Perspectiva e prioridade da Bárbara como UX Writer:

  • Contexto da interação: Quais são as preocupações e emoções da pessoa usuária que vai ter contato com a tela?
  1. Apreensivo
  2. Nervoso pois está atrasado
  • Objetivo: Qual é o resultado esperado, ou o que eu espero da pessoa usuária, ou, quais são os critérios de sucesso?
  1. Que possamos informar os dilemas que a pessoa usuária está enfrentando de maneira simples, leve e empática
  • A motivação: Qual o ponto de partida, dor do negócio iniciou a demanda? Qual problema temos que resolver?
  1. Devido a um tráfego inesperado a pessoa usuário no caso, a proto-persona é um motorista de caminhão está atrasado

E esse foi o nosso resultado:

A esquerda: modal com as informações. A direita: notificação do aplicativo.

Desafio #14— Erro desconhecido

Cenário: Um usuário está comprando usando um aplicativo de comparação de preços que oferece preços “ em tempo real” dos itens. Como eles estão verificando o preço de um item, algo dá errado. O problema é desconhecido.

Desafio: Escreva uma mensagem informando ao usuário que ele não pode acessar o aplicativo no momento. Você não pode especificar “por que” o aplicativo não funciona, você também deseja que eles continuem usando o aplicativo.

Título: Máximo de 30 caracteres

Corpo: Máximo de 120 caracteres

Botão: 15 caracteres

Perspectiva e prioridade da Bárbara como UX Writer:

  • Contexto da interação: Quais são as preocupações e emoções da pessoa usuária que vai ter contato com a tela?
  1. Com raiva, pois, quer usar o aplicativo e nao consegue acessar o preço do item que eles buscam devido a um erro
  • Objetivo: Qual é o resultado esperado, ou o que eu espero da pessoa usuária, ou, quais são os critérios de sucesso?
  1. Que mesmo com o erro no item que a pessoa usuária está olhando, ela continue no app olhando outros itens
  • A motivação: Qual o ponto de partida, dor do negócio iniciou a demanda? Qual problema temos que resolver?
  1. Problema desconhecido no aplicativo que está impossibilitando que as pessoas o acessem

E esse foi o nosso resultado:

Modal com mensagem de erro desconhecido

Desafio #15 — Experiência de integração para aplicativo bancário

Desafio: Escreva uma experiência de integração em várias telas para um aplicativo bancário que pague automaticamente as contas de um usuário todos os meses, desde que ele o configure corretamente.

Restrições de personagens por tela:

Título: Máximo 45

Corpo: Máximo 100

Botão: Máximo 25

Limite de tempo: 1 hora

O resultado você confere daqui a pouquinho! Antes…

Algumas observações sobre este desafio:

Como ele foi um pouco mais complexo que os demais, criei um guia de estilo para manter consistência e padronização entre as telas, como é possível ver na imagem abaixo. 👇

Guia de estilo para o aplicativo bancário fictício FBBank. Cada componente foi escolhido com um propósito, como é possível ler em sua legenda.

Além disso, separei a resolução em duas partes:

  1. o onboarding (telas 1 a 3), onde explicamos a feature do aplicativo e como ativá-la;
  2. o cadastro (telas 4 a 9), detalhando todas as etapas anteriormente mencionadas.

Nota-se que, durante o onboarding, o usuário tem a opção de pular o mesmo, ou seja, ele fica livre para tomar suas decisões. Além disso, quando apresento ao usuário em qual tela ele está, fica a seu critério voltar ou começar o cadastro.

A seguir, as telas do onboarding:

Da esquerda para direita: telas primeira, segunda e terceira (e última) tela do onboarding.

Durante as telas 4 a 7 o usuário colocará suas informações, como mencionado brevemente no onboarding. Na tela 8, aceitará a Política de Privacidade e na última tela, seu cadastro será finalizado, podendo utilizar o aplicativo.

Por fim, as telas do cadastro:

Da esquerda para a direita: primeira tela do cadastro (boas vindas e nome), segunda tela do cadastro (celular) e terceira tela do cadastro (CPF)
Da esquerda para a direita: quarta tela do cadastro (e-mail), quinta tela do cadastro (aceite da Política de Privacidade), sexta e última tela do cadastro (finalização e opção de começar a usar o aplicativo)

A animação simples, para entender melhor o fluxo das telas, você pode conferir abaixo:

Link para Figma.

Considerações finais Fernanda:

Foi muito interessante realizar os desafios junto da Bárbara! Me aprofundei em UX Writing e como funciona a linha de raciocínio para a construção de melhores textos aos usuários. Além disso, coloquei em prática o UI Design com desafios tão diferentes e desafiadores. Enfim, esperamos que tenham gostado! Como sempre dizemos, sugestões e feedbacks são super bem-vindos! Caso queira conversar, o meu LinkedIn está logo abaixo. 😀

Considerações finais Bárbara:

E esse foi o modo como eu e a Fernanda decidimos resolver o challenge, esperamos que tenham gostado. Sugestões e feedbacks são sempre bem-vindos. Estamos disponíveis no nosso LinkedIn para um bate-papo e eu, como sou uma ótima belorizontina, aceito um café e uma boa prosa. ☕

Meu LinkedIn

LinkedIn da Bárbara

--

--