ESTUDOS UXW | Uma coleção de estudos de UX Writing e Content Design

Capítulos:< A Taste of UXW
Bootcamp Aldeia Coworking
UWX Challenge

Desafio de UX Writing do curso A Taste of UXW

O UX Writing Hub é uma empresa norte-americana que proporciona cursos de profissionalização em UX Writing. Um dos produtos, disponíveis gratuitamente, é o A Taste of UX Writing, que funciona como um minicurso, literalmente um gostinho de tudo o que as outras opções da empresa oferecem.

Quando comecei o minicurso, decidi também traduzir o conteúdo para que fosse mais acessível para as comunidades de UX e as pessoas que não dominam o inglês. Ao final da jornada, o Hub propunha um desafio de reescrita de uma página de exportação de arquivos, portanto, esse “mini” — gosto desse conceito — estudo busca mostrar aspectos do que foi aprendido e também as soluções para o problema apresentado.

Qual é a dor?

A empresa MockDocs possui um aplicativo web que permite que designers criem, direto no navegador, wireframes e esquemas de layout semelhantes ao Miro e outras ferramentas. Porém, a tela de configuração — especificamente veremos a de exportação — foi desenvolvida totalmente pelo programador.

O objetivo é tornar a tela mais prática, dinâmica e clara.

Desk Research: Começando pelo começo

Antes de começar a enxugar e traduzir os textos, fiz uma desk research tentando entender como esse tipo de navegação poderia ser. Como grande parte da minha experiência é com o design, quando imagino uma tela com a proposta de export file, imediatamente lembro das tools presentes no pacote Adobe, e definitivamente não queremos que a exportação de um arquivo seja tão complicado.

Na pesquisa, foquei em ferramentas online com uma premissa semelhante, como Miro, Figma, Mural, Click Up, Notion, Taskade, Google Docs e também o Canva. A busca não foi especificamente para analisar telas de exportação, mas as telas gerais de configurações.

São vários os motivos para a escolha dessas características como referências, mas as principais delas se resumem em três pontos:

1. Como as informações textuais se organizam;
2. Como as informações visuais se organizam;
3. Quais elementos trazem maior dinâmica e atração para o usuário.

Textual —Tanto no curso A Taste of UXW quanto em livros como Redação Estratégia para UX de Torrey Podmajersky ou Microcopy de Kinneret Yifrah, por exemplo, há fortes reflexões sobre a cópia objetiva, mas especialmente em Microcopy, há uma passagem que diz:

Microcopy can offer users an immediate and accessible answer to any question they might have, and thus create a feeling of certainty.

Considerando essa perspectiva e aplicando sobre os demais elementos que precisam constituir a página/conteúdo, foi possível notar o esforço das ferramentas em tornar o conteúdo genérico, se aproveitando de recursos como tooltips. Porém, meu esforço se baseou em evitar recursos alternativos e tentar deixar o conteúdo mais limpo e intuitivo, o que envolve o visual.

Visual — Para pensar no conteúdo, é preciso também pensar no visual e vice-versa, isso é o que mantém a harmonia no design. As ferramentas, todas, possuíam um apelo interessante nesse aspecto, sendo o mais simples oferecido pela Mural.

Um ponto interessante sobre esse design, é o sentido da necessidade. A Mural não precisa de várias opções para exportação, pois o resultado do seu produto é colhido de maneira intuitiva e direta no board do projeto, mas o que vale observar aqui é o drop-down com o formato e também especificação. Isso ajuda a tapar o buraco de não deixar dúvidas para o usuário.

Dinâmica —As ferramentas possuem muitos elementos que saltam aos olhos, possuem o design focado em chamar a atenção para pequenas ações necessárias com o uso de caixas de marcação e toggles, isso torna as opções de escolhas do usuário mais diretas e confortáveis para leitura e resposta.

Estudando a estrutura

Com base nas referências e nos estudos, o processo seguiu para uma desconstrução e análise da estrutura da página, tanto visual quanto conteúdo. Isso é necessário para identificar e entender precisamente quais elementos estão errados e o que pode ser feito para corrigir e/ou melhorar.

O cabeçalho é extenso, assim como a organização do conteúdo do menu. Intuitivamente o usuário sabe que se trata de um menu, portanto, a mudança para o termo “Configurações” se torna válida, assim como a aba de exportação pode ser substituída por “Exportar”.

A segunda parte da estrutura possui alguns pontos: o texto descritivo é longo, os formatos de arquivos estão exibidos sem um padrão — nesse caso, o ideal seria seguir o Guia de Estilos da empresa, mas para esse estudo, foi usado o Guia de Estilos do Google, que proporciona uma visão ampla sobre o uso das terminologias de formato de arquivos em diversos casos.

Também existe a divisão com uma barra entre as informações, o que é desnecessário, prática e visualmente.

As informações sobre local de armazenamento e o tamanho da exportação podem causar confusão ou um desconforto na experiência, além da quantidade de informações. Uma opção é a inversão de prioridade das informações. Os botões são genéricos e não estão claros, os CTAs (Call-to-action) podem ser melhorados com voz ativa, deixando a ação do usuário melhor definida.

Rascunho e reflexão

O rascunho acima foi feito com a intenção de ter um exemplo visual de como as informações poderiam se comportar. A mudança mais marcante, desconsiderando o conteúdo, é a ausência do “Edit Directory”. Por se tratar de uma ferramenta online — operando direto no navegador, a seleção de diretório para salvamento torna a experiência ambígua. Quando optamos por fazer o salvamento de um arquivo nos navegadores, nos é dada a opção de salvamento pelo navegador ou o download é feito direto em um diretório pré-configurado, normalmente a pasta chamada “download”.

Apesar das referências, considerei a naturalidade fonética das palavras; segundo K. Yifrah no Microcopy, há um conselho no livro que diz: “Take the words out of somebody’s mouth” — “Tome as palavras da boca de outra pessoa”, no sentido de imaginar que alguém está falando determina frase para você, tornando assim a escrita mais natural, e ainda há um complemento:

Are you undecided about how to phrase something? Imagine a customer service rep standing right in front of you, how would they phrase it? Try to be as natural and spontaneous as you can, without processing or structuring beforehand. It helps when two people do this — one asks and the other replies with the first answer that comes to mind.

Essa passagem é importante para contextualizar a decisão das frases e palavras no modelo apresentado abaixo. No curso do UXW Hub e também no livro Microcopy, é constantemente destacado que a única maneira de ter um texto precisamente efetivo, é através do teste, e na ausência de uma pesquisa mais profunda com usuários e o contexto da marca, tomei a sugestão de Yifrah como norte para a criação.

A visão do produto

Na redefinição do conteúdo da página da MockDocs, foram desconsideradas diversas informações, como o funcionamento da plataforma, as definições dos documentos e organizações. Essas informações seriam preciosas para avaliar a relevância de todo o conteúdo, portanto, o resultado do estudo se baseia somente no que foi apresentado pelo desafio, sem suposições.

Para compreender as alterações, separei a linha de raciocínio do design em algumas partes:

A redução do conteúdo foi conforme a análise feita na estrutura. O título “Configurações” é suficiente para a compreensão da importância das informações da página. No menu, a alteração para “Exportar” também deixa a aba apresentada de forma mais objetiva em relação a sua função.

O subtítulo “Defina as configurações dos seus arquivos” foi escolhida por ter o potencial explicativo e a harmonia fonética, sendo menos artificial do que outra opção, como “configure seus arquivos”.

O “Formato” é apresentado conforme o Guia de Estilo Google, onde a indicação é o uso das referência com letras maiúsculas. Diferente do Guia de Estilos, não há o complemento indicando a natureza do arquivo, para isso, foi considerado que a exportação daria suporte apenas para o formato imagem.

O “Tamanho” também é apresentado em um drop-down seguido de uma cópia de suporte para destacar a importância dessa seleção. Durante as pesquisas, foram encontrados alguns exemplos que também apresentavam esse tipo de informação, mas normalmente em tooltips e de maneira mais ampla e desnecessária. Para todos os efeitos, essa cópia pode estar escondida sob uma ação de hover em navegador padrão e exposta — conforme o resultado do exercício — em versões móveis, é uma possibilidade.

A opção de escolha de configurações na ação do salvamento são confusas na página original, não dando para entender em que momento aquelas opções estariam disponíveis ou se seria necessário abrir a tela de configurações novamente.

Segundo a Nielsen Norman Group: “A toggle switch is a digital on/off switch(…)” — “Uma chave seletora (toggle switch) é um ligar/desligar digital” e “Toggle switches are best used for changing the state of system functionalities and preferences(...)” — “Chaves seletoras são melhor usadas para mudança de estado de sistema de funcionalidade e preferências(…)”.

O uso de “Escolher depois” é para criar um gatilho de memória no usuário, assim como deixar claro que trata-se de uma opção com recuperação, e não definitiva. Esse gatilho é reforçado pelo uso da caixa de marcação.

Novamente, durante a pesquisa, foi possível notar o uso excessivo de botões toggles em opções semelhantes a da sessão “Escolher depois”, porém, a escolha da caixa de marcação é justificada pelo simples senso de escolha e edição. O toggle é normalmente utilizado no UI design para identificar ações com resultado imediato na interface, como ativar ou desativar o modo noturno de uma página, o que é uma analogia direta ao uso de interruptores para luz e outro com ações imediatas: ligar e desligar, acender e apagar, abrir e fechar.

Em uma tabela da Nielsen & Norman Group, isso fica ainda mais claro quando pensamos nas condições das opções disponíveis ao usuário:

Por fim, os botões foram alterados para “Descartar” e “Salvar alterações”. Ambos possuem caráter mais explicativo e não deixam margem para que o usuário se preocupe com a opção, tornando a decisão mais segura e quase instintiva.

Se esse estudo foi interessante 👏 salva nos seus favoritos. Quer conversar? Me adicione no LinkedIn.

Desafios de UX Writing do Bootcamp Aldeia Coworking

O Bootcamp de UXW da Aldeia Coworking é um mergulho no universo de UXW com profissionais e propõe algumas pequenas práticas em seu andamento e desafios - ligeiramente - elaborados para o encerramento. Nesse artigo, vou compartilhar o resultado dos meus desafios finais, além de algumas observações sobre aprendizados, práticas e técnicas de UX Writing e também a influência de outras habilidades e know how.

[1] Desafio Aldeia CC - Cancelamento de aula - Notificação Push

Contexto

O primeiro desafio do Bootcamp apresenta um problema de notificação, onde deve ser criada uma notificação push para um hipotético aplicativo da Aldeia, que avise o aluno - já está em trânsito para a aula - que a aula foi cancelada devido a um imprevisto e será remarcada.

Problema

Antes de elaborar qualquer linha de texto, considerei duas situações. 

(1) O aluno em questão está em trânsito, pode ser dirigindo, transporte coletivo ou outro, independente disso, a primeira linha (title) precisará ser objetiva, porém clara, para que ele não decida automática ao ler, mas consiga processar a mensagem e as condições adversas na qual ele está no momento. 

(2) Por já estar a caminho da aula e considerando o tempo e expectativas investidos nessa atividade, vi a necessidade de propor uma opção que mantivesse as expectativas do aluno, evitando a frustração ou o desconforto na quebra da rotina.

No livro Strategic Writing for UX de Torrey Podmajersky, há uma passagem que diz: “Notifications interrupt people to get them to pay attention to a part of the experience that they aren’t paying attention to at the moment [...] Notifications must communicate that value and their timeliness at a glance, and include the first action the person needs to take to realize that value.”

Resolução

Título: Aula Remarcada!

Corpo: Olá, Marker, sua aula de UX Writing foi cancelada pela ausência da nossa professora. Mas estamos te esperando para um café e aproveitar o tempo para fazer networking.

Botões: “Estou a caminho”, “Confirmar nova data”

Conclusão

Tanto a reflexão sobre o problema quanto a citação de Torrey servem para contextualizar a decisão da resolução do problema em questão, e para isso, foi suposto que apesar do cancelamento da aula, em um espaço criativo e produtivo, o primeiro passo é manter as engrenagens girando, ou seja, atividades constantes. 

Isso nos leva ao resultado, que além de informar o cancelamento, propõe uma solução com o reagendamento e também uma atividade social e profissional para aproveitar o tempo de aula e criar possibilidades e experiências.

Backlog

Antes dessa conclusão, experimentei algumas variações para o título e outras mais enxutas para o corpo, porém, mesmo acompanhando o Guia de Estilo da Aldeia, algumas expressão e termos acabavam não encaixando bem no impacto da mensagem para a situação em que ela seria aplicada, por exemplo: "Aviso importante!" soaria como algo emergencial e não ficaria claro, "Maker, a aula foi cancelada!" é um tanto quanto extenso se considerarmos o tempo de leitura e a recepção da mensagem, porém, "Aula remarcada!" é objetivo, funciona e por ser uma notificação direto do aplicativo da Aldeia, acaba sendo acompanhada do branding. 

Enquanto no corpo, as tentativas de regular o tamanho da mensagem acabavam tirando a clareza da mesma e não dando margem para as possíveis soluções, além do reagendamento.

Por fim, os botões são práticos e tentam aproximar o usuário buscando empatia na comunicação, como um diálogo entre um grupo de conhecidos usando o "Estou a caminho" para confirmar a presença e manter a expectativa do aluno, mas dando também uma opção para que ele possa confirmar a nova data (e possivelmente, em uma nova tela, alterá-la).

[2] Desafio iFood - Pedido Indisponível - Notificação Push

Contexto

O segundo problema apresentado no bootcamp é uma notificação dentro do aplicativo iFood. O usuário adiciona um prato ao carrinho e volta ao menu, momentos depois, ele tenta finalizar a compra, porém o prato está indisponível. Deve ser criada uma mensagem explicando que o pedido não pode ser realizado e oferecendo uma solução para o usuário.

Problema

Quando pensamos na experiência do usuário, informações negativas tendem a buscar simplicidade ou mesmo, levemente, o humor. Se tratando o iFood, é preciso considerar que a pessoa está buscando a solução para o seu problema, sua fome, e isso também está ligado a diversos fatores, como a ansiedade, expectativa, desejo, a preocupação com tempo e custo de entrega, e custo do prato.

Ao abrir o aplicativo, parte dessas emoções são ativadas, e elas todas se ampliam no momento de finalizar o pedido. 

Há uma passagem no livro Microcopy de Kinneret Yifrah que ajuda a definir como conduzir uma resposta para esse problema:

“[...] Describe the problem and what went wrong as precisely as you can. [...] Provide a constructive suggestion on how to solve the problem and carry on forward.”

Resolução

Título: Produto Indisponível

Corpo: Seu pedido não pôde ser preparado, mas você pode escolher outra opção no menu do restaurante.

Botão: "Ver opções do menu"

Conclusão

Tentei levar em conta todas as emoções que estão conectadas ao simples processo de pedir um prato no iFood, que claramente se mostrou não tão simples assim. Há diversas formas com que essa solução pode ser dada, mas acredito que a objetividade - sem enrolação, encaixam melhor aqui. O usuário não pode perder tempo pensando no que ocasionou o esgotamento do produto, ele precisa ter claro que o produto não pôde ser preparado e que sua próxima ação é voltar ao menu do restaurante.

Também, o argumento que “não pôde ser preparado”, possui uma recepção mais suave, por estar dando uma explicação, do que simplesmente “está indisponível” ou “esgotou”, etc.

Backlog

Apesar de tudo, me ocorreram possíveis diálogos que se limitaram por não ter um conhecimento profundo do Style Guide da empresa e da jornada do usuário em situações como essa dentro do aplicativo, mas vou citar algumas:

Já vi, diversas vezes, o iFood usando expressões e emojis, porém, apesar de parecer que faz sentido, ele fica um tanto quanto desconexo do visual. Assim como o título parece autêntico, mas foneticamente fica um bocado estranho, e esse efeito se repete quando usamos “esgotou” ou “esgotado” no título.

A ideia de oferecer opções para o usuário é claramente uma forma interessante de resolver esse tipo de problema, mas me atendo ao que foi estudado e um empurrãozinho do Microcopy, percebo nessa solução que ao oferecer as opções, podemos estar tirando o poder de decisão do usuário, ou seja, e se o usuário tiver empatia pelo restaurante e quiser permanecer nele para escolher uma nova opção. O caminho para voltar ao restaurante seria absurdamente maior.

Se esse estudo foi interessante 👏 salva nos seus favoritos. Quer conversar? Me adicione no LinkedIn.

Pequenos problemas e grandes responsabilidades  —  através das palavras no UXW CHALLENGE

O Daily UX Writing Challenge é um exercício criado pelo designer Ryan Farrell, no qual recebemos desafios diários por 15 dias com possíveis problemas de UXW que devem ser resolvidos.

Esta é a primeira parte do desafio — 5 primeiros dias. As propostas e desenvolvimentos estão apresentadas abaixo, há planos para que também sejam desenvolvidas as telas visualmente, porém, o primeiro objetivo é finalizar o desafio aplicando conhecimentos de UX Writing.

Nota: O desafio é originalmente em inglês, portanto, alguns dos projetos podem acabar extrapolando os limites sugeridos de caracteres. Isso acontece, principalmente, pela diferença entre as línguas, uma vez que muitas palavras no inglês são consideravelmente mais curtas do que no português, e verbos e blá blá blá.

UXW Challenge — Patam Airlines: Dia 1

Cenário: Um viajante está no aeroporto aguardando pelo seu último voo para a casa quando esse voo é de repente cancelado devido ao mau tempo.

Desafio: Escrever uma mensagem de notificação do aplicativo da companhia aérea informando o cancelamento do voo e o que o viajante deve fazer.

Título: 45 caracteres | Corpo: 175 caracteres | Botão: 25 caracteres

Desenhando: Definitivamente, poucas coisas são tão frustrantes quanto um contratempo que acaba com seus planos e ainda ocupa o seu tempo. Por se tratar de um serviço relativamente custoso e que envolve diversas expectativas, as diretrizes da empresa e a mensagem, precisam oferecer soluções, buscando comunicar de maneira clara e honesta.

No livro Microcopy de Kinneret Yifrah, há um trecho que se destaca aqui como uma boa sugestão:

Well written microcopy, appearing exactly where it is needed, will prevent problems in completing an action, and will save the user valuable time, frustration and a feeling of helplessness.

O título é breve, mas suficiente para tomar a atenção do usuário. A mensagem foi construída buscando alertar o cancelamento, informar sobre o motivo do imprevisto e oferecer soluções para o usuário, tendo suporte dos botões que permitem a consulta do próximo vôo ou opções — como locais para estadia.

UXW Challenge— Placar na Mão: Dia 2

Cenário: O usuário é um pai trabalhador, e um grande fã de esportes, em meio a essa temporada do seu esporte favorito ele não pode mais assistir aos jogos.

Desafio: Escreva uma tela promocional para um aplicativo que permita aos usuários escolher times, enviar lembretes de jogos, placar em tempo real e vídeos com melhores momentos.

Título: 40 caracteres | Corpo: 175 caracteres | Botão: 25 caracteres

Desenhando: Apesar da chamada ter alto potencial de interesse para o usuário, podemos assumir que a cópia para a chamada precisa manter um tom convidativo e de empatia.

Considerei um título com apelo, buscando chamar a atenção do usuário — considerando outras possíveis notificações. O texto é um flavor que entrega as vantagens do serviço. Trabalhar botões é sempre um desafio, por isso considerei um tom mais descontraído, como a reação empolgada do usuário ao encontrar uma solução para o seu problema — a princípio a ideia era existir apenas o botão, porém, adicionei um “lembrete” para um hipotético aplicativo que exija ações adicionais das quais o usuário não consiga executar naquele momento.

UXW Challenge— E-mail digitado errado: Dia 3

Cenário: O usuário digitou o endereço de e-mail errado para acessar a sua conta.

Desafio: Diga ao usuário para digitar o e-mail certo.

Texto máximo: 40 caracteres

Desenhando: Mensagens de erro costumam ser o tópico de discussão dentro do design, ela precisa carregar alguns valores e ter o cuidado de não frustrar ou confundir o usuário. Portanto, dentro do texto limite, encontrei a melhor opção na objetividade e clareza, mas também buscando a empatia com o usuário e oferecendo um canal de ajuda.

UXW Challenge— Delivery: Dia 4

Cenário: Uma pessoa está no seu supermercado favorito. Ela abre o aplicativo do supermercado para ver as ofertas e é recebida com uma promoção.

Desafio: Escrever uma tela promocional para um serviço de assinatura que entrega mantimentos uma vez por mês com uma taxa fixa.

Título: 45 caracteres | Corpo: 175 caracteres | Botão: 25 caracteres

Desenhando: Durante a pandemia, os serviços de entrega cresceram em um ritmo monstruoso, mas interessante foi acompanhar a maneira como os canais se comunicavam conosco.

Na busca de uma mensagem clara, mas que pudesse entregar o conceito todo do serviço, considerando que a mensagem poderia aparecer em um momento potencialmente duvidoso para o usuário. O título é objetivo, já entregando a intenção da mensagem, enquanto o corpo explica a dinâmica do serviço e oferece uma chamada promocional com suporte botão.

A cópia final, em um primeiro momento, usei “Não tenho interesse”, mas por se tratar de um serviço com um grande potencial de adesão — principalmente atualmente, optei por um lembrete, pois é o tipo de serviço que em algum momento será buscado.

UXW Challenge—Recuperação de Arquivo: Dia 5

Cenário: O usuário trabalha com design gráfico. Enquanto faz comentários sobre o design em um aplicativo, seu celular é desligado abruptamente. Quando ele reinicia o celular, o app é reaberto.

Desafio: Escrever uma mensagem que o usuário irá ler ao reabrir o app. O que ele precisa saber? Quais os passos — se existirem — ele precisa para recuperar o conteúdo? O que acontece se ele não conseguir recuperar o conteúdo?

Título: 40 caracteres | Corpo: 140 caracteres | Botão: 20 caracteres

Desenhando: Essa proposta é interessante pela carga emocional que ela carrega. Todos já passamos pela frustração de um crash de aplicativo, portanto, os autosaves e loads de segurança que tem sido cada vez mais comuns, são de grande importância.

Considerando a opção com autosave e sem, criei duas situações: a primeira tem um discurso baseado na empatia, comunicando de maneira objetiva que o projeto está seguro e o usuário pode retomar de onde parou, também com a opção de ver o histórico de arquivos salvos. Na segunda situação, a intenção é assinalar que o evento está fora do alcance dos recursos do aplicativo, mas o usuário ainda pode resgatar o projeto com base na última alteração salva, dando opções e não apenas estendendo o problema.

UXW Challenge—Moovendo: Dia 6

Cenário: É segunda-feira. Um usuário acabou de entrar no seu carro para dirigir até o trabalho. Ele conecta seu telefone no carro e começa a dirigir.

Desafio: Como você deixa o usuário saber que há um incêndio em uma cidade vizinha e está causando fechamentos de algumas ruas? O efeito no seu trajeto é desconhecido, mas há um perigo definitivo se o fogo chegar perto. Como você comunicaria isso para ele? Quando? Escreva.

Título: 30 caracteres | Corpo: 45 caracteres

Desenhando: Acredito que este foi um dos desafios mais difíceis, pois existem diversos fatores que serão influenciados com a notícia. Para melhor ilustrar as decisões tomadas no desenvolvimento do texto, vou deixar - brevemente - algumas reflexões, principalmente sobre o impacto da notícia no comportamento do usuário.

(1) O usuário, possivelmente, está um estado de calma e monotonia, por se tratar de um início de semana e uma rota cotidiana. (2) Ao entrar no carro e escrever o digitar seu destino no aplicativo, há alguns gatilhos que podem ser despertos, como ansiedade caso ele esteja atrasado, ou seja, uma rota que eventualmente possui trânsito. (3) Dependendo da realidade do usuário, a notícia de um incêndio pode afetá-lo profundamente: por ser em uma região próxima, por haver possíveis conhecidos ou parentes na região do incidente. A resposta a uma dessas condições pode ser, além do estresse, a desestabilidade emocional e a falta de segurança.

Sendo assim, há algumas respostas que podem dar suporte a decisão do usuário, também correspondendo a algumas expectativas, como: rotas alternativas - atualizadas em tempo real - rankeadas por tempo de percurso e informações extras sobre o incidente - identificando não haver movimento do veículo.

Por fim, o principal argumento para a escolha dos textos é: não alarmar o usuário para evitar possíveis gatilhos que desencadeiem eventos traumáticos ou outros incidentes, oferecer soluções para o problema imediato e um canal de informações.

Se esse estudo foi interessante 👏 salva nos seus favoritos. Quer conversar? Me adicione no LinkedIn.