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
UX Writing + Desk Research + Redação
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:
- Como as informações textuais se organizam;
- Como as informações visuais se organizam;
- 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.
