{"id":2424,"date":"2021-08-13T00:00:00","date_gmt":"2021-08-13T00:00:00","guid":{"rendered":"https:\/\/www.cesar.org.br\/painel\/insight\/ux-writing-historia-estrategia\/"},"modified":"2026-06-09T16:34:08","modified_gmt":"2026-06-09T19:34:08","slug":"ux-writing-historia-estrategia","status":"publish","type":"insight","link":"https:\/\/www.cesar.org.br\/painel\/insight\/ux-writing-historia-estrategia\/","title":{"rendered":"UX Writing: hist\u00f3ria, estrat\u00e9gia e aplica\u00e7\u00e3o"},"content":{"rendered":"<div class=\"content-article\">\n<article data-author=\"thiago-souza\">\n<h6><b>POR:\u00a0JOS\u00c9 RONALDO BUARQUE\u00a0|\u00a0<i>UX DESIGN DO CESAR<\/i><\/b><\/h6>\n<p>UX Writing \u00e9 um tema em alta e n\u00e3o \u00e9 por acaso. Ele tem um papel fundamental na elabora\u00e7\u00e3o de textos para guiar os usu\u00e1rios e quando usado adequadamente tem o poder de transformar a leitura em uma\u00a0<b>experi\u00eancia agrad\u00e1vel.<\/b><\/p>\n<p>Se voc\u00ea ainda n\u00e3o sabe o que \u00e9\u00a0<b>UX Writing<\/b>\u00a0ou n\u00e3o domina esse universo por completo, criamos este guia para que voc\u00ea aprenda tudo o que precisa saber para se tornar um profissional de UX. Confira!<\/p>\n<h2><b>O in\u00edcio de tudo<\/b><\/h2>\n<p>Em mar\u00e7o de 1997,\u00a0<b>Jacob Nielsen<\/b>\u00a0escreve um artigo chamado\u00a0<a href=\"https:\/\/www.nngroup.com\/articles\/be-succinct-writing-for-the-web\/\" target=\"_blank\" rel=\"noopener\"><b>Writing for the Web<\/b>.<\/a>\u00a0Nesse artigo ele convida as pessoas a pensarem na informa\u00e7\u00e3o de forma diferente e como o texto se comportava em rela\u00e7\u00e3o ao consumo (p\u00fablico). Ele conclui que as pessoas gostam de um texto\u00a0<b>claro, direto e objetivo<\/b>. Dando in\u00edcio assim ao estudo da<b>\u00a0webwriting.<\/b><\/p>\n<p>Outro nome de grande relev\u00e2ncia para o writing foi o\u00a0<b>Crawford Kilian<\/b>\u00a0que estudou a\u00a0<b>intera\u00e7\u00e3o do humano com a tela do computador, antes do surgimento da web<\/b>. Em seu livro Writing for the Web (o mesmo nome do artigo de Nilsen) ele afirma que as pessoas gostam de consumir\u00a0<b>peda\u00e7os pequenos de informa\u00e7\u00e3o.<\/b><\/p>\n<p>A esses peda\u00e7os de textos ele deu o nome de\u00a0<b>\u201cchunks\u201d<\/b>, que em portugu\u00eas significa peda\u00e7os\/fatia. Para ele, alguns par\u00e2metros deveriam ser seguidos, s\u00e3o eles: O texto deve ter um\u00a0<b>t\u00edtulo<\/b>\u00a0e um\u00a0<b>entret\u00edtulo<\/b>, todo o conte\u00fado tem que estar distribu\u00eddo em\u00a0<b>4 chunks de quatro linhas<\/b>\u00a0e todas as\u00a0<b>palavras e\/ou express\u00f5es chaves deveriam estar grifadas.<\/b><\/p>\n<p>Voc\u00ea percebeu que\u00a0<b>este trecho foi formatado seguindo as diretrizes de Crawford<\/b>? Veja como a leitura se tornou mais\u00a0<b>fluida\u00a0<\/b>e como o conte\u00fado foi entregue de maneira mais r\u00e1pida.<\/p>\n<h2><b>As diferen\u00e7as entre Copywriting, Webwriting, Technical Writing e UX Writing\u00a0<\/b><\/h2>\n<p>Dentro do universo do writing, temos diversos tipos de texto para diferentes tipos de contexto. Aqui vamos abordar 4 deles: O copywriting, webwriting, technical writing, e o ux writing.<\/p>\n<h3><b>Copywriting<\/b><\/h3>\n<p>O\u00a0<b>copywriting<\/b>\u00a0\u00e9 a escrita que tem como principal objetivo a convers\u00e3o. Seu uso \u00e9 indicado quando voc\u00ea deseja que o seu leitor realize uma a\u00e7\u00e3o. Para tanto, o texto utiliza v\u00e1rios gatilhos mentais, como o da escassez por exemplo: \u201cN\u00e3o sabemos quando esse produto estar\u00e1 novamente dispon\u00edvel\u201d.<\/p>\n<h3><b>Webwriting<\/b><\/h3>\n<p>O\u00a0<b>Webwriting\u00a0<\/b>\u00e9 um conjunto de t\u00e9cnicas aplicadas ao texto que tem como objetivo a produ\u00e7\u00e3o de conte\u00fado para a web de alta qualidade, com relev\u00e2ncia para o leitor, entregue de forma\u00a0 objetiva e organizada atrav\u00e9s de sites, portais e redes sociais. Tem como objetivo atrair, informar e entreter o p\u00fablico.<\/p>\n<h3><b>Technical Writing<\/b><\/h3>\n<p>O\u00a0<b>technical writing\u00a0<\/b>\u00e9 focado na produ\u00e7\u00e3o de conte\u00fado t\u00e9cnico com o objetivo de orientar o usu\u00e1rio na utiliza\u00e7\u00e3o de um determinado produto. Isso significa que manuais e demais materiais de orienta\u00e7\u00e3o passam pelas m\u00e3os de um technical writer ou como comumente chamamos tech writer.<\/p>\n<h3><b>Ux Writing<\/b><\/h3>\n<p>J\u00e1 o\u00a0<b>ux writing ou reda\u00e7\u00e3o estrat\u00e9gica focada na experi\u00eancia,<\/b>\u00a0tem como objetivo a produ\u00e7\u00e3o de textos que promovam a melhor experi\u00eancia para o usu\u00e1rio. O principal ponto que sustenta o ux writing \u00e9 o\u00a0<b>microcopy<\/b>, que trata todo texto escrito para uma interface digital.<\/p>\n<p>Logo podemos afirmar que:\u00a0WRITING N\u00c3O \u00c9 TEXTO CORRIDO. WRITING \u00c9 PALAVRA, EXPRESS\u00c3O!<\/p>\n<p>Em resumo significa que todo o texto serve como uma ponte entre o usu\u00e1rio e a sua marca (produto ou servi\u00e7o). E se queremos estabelecer uma comunica\u00e7\u00e3o flu\u00edda e sem ru\u00eddos, o texto precisa passar pelas m\u00e3os de um ux writing. Que utilizar\u00e1 o manual de tom de voz para fundamentar a sua escrita.<\/p>\n<h2><b>O manual do tom e voz<\/b><\/h2>\n<p>Quase sempre que vou iniciar um manual de tom e voz me deparo com um problema: as pessoas n\u00e3o sabem quem s\u00e3o seus usu\u00e1rios, ou conhecem de maneira muito superficial o modo como eles se comunicam. Isso porque para a maioria dos projetos, o manual \u00e9 uma parte que sempre pode esperar mais um pouquinho.<\/p>\n<p>Por\u00e9m o manual ou guia como alguns chamam, \u00e9 uma parte fundamental para a constru\u00e7\u00e3o da marca. \u00c9 ele que vai manter e dar a consist\u00eancia dentro da comunica\u00e7\u00e3o e de quebra ainda fazer com que seus usu\u00e1rios se lembrem da sua marca.<\/p>\n<p>Sendo assim, esse material deveria come\u00e7ar a ser desenvolvido l\u00e1 na idealiza\u00e7\u00e3o da marca, por\u00e9m, sabemos que para\u00a0 a maioria n\u00e3o \u00e9 isso que acontece. Logo, podemos estabelecer um marco secund\u00e1rio no in\u00edcio da idealiza\u00e7\u00e3o do produto, afinal de contas esse manual vai ditar como ser\u00e1 a experi\u00eancia e a personalidade do seu produto ao longo do projeto.<\/p>\n<p><strong><a href=\"https:\/\/www.notion.so\/Guia-de-Identidade-Verbal-984ef615ac3b404aaee0d7f5f8b13fad\" target=\"_blank\" rel=\"noopener\">Confira o Guia de Identidade Verbal do CESAR para ter uma refer\u00eancia do que estamos falando!<\/a><\/strong><\/p>\n<h2><b>Criando a voz da marca<\/b><\/h2>\n<p>Primeiro comece com olhar interno, converse com os fundadores da marca, l\u00edderes, gestores e colaboradores, entenda como eles veem a marca, como ela pretende se posicionar no mercado e quais os p\u00fablicos e regi\u00f5es que pretendem atingir.<\/p>\n<p>Entreviste seu p\u00fablico! Deixe que eles falem sobre a sua marca. Esse \u00e9 um \u00f3timo momento para colher palavras e express\u00f5es que s\u00e3o usadas por eles. Entender como eles se comunicam, te ajudar\u00e1 a criar conte\u00fados muito mais focados e com menos ru\u00eddos.<\/p>\n<p>Se a empresa j\u00e1 vem criando conte\u00fado, um olhar retrospectivo para as mensagens que mais engajaram o p\u00fablico pode lhe dar boas pistas de que caminho seguir.<\/p>\n<p>Caso voc\u00ea ainda n\u00e3o tenha um produto ou uma marca s\u00f3lida no mercado, uma boa sa\u00edda pode ser a cria\u00e7\u00e3o de uma proto\u00a0<i>persona<\/i>. A grande vantagem na cria\u00e7\u00e3o de\u00a0<i>personas<\/i>\u00a0\u00e9 aumentar as chances de estar seguindo no caminho correto.<\/p>\n<p>Outro ponto \u00e9 fazer um bom benchmarking do mercado. E aqui temos que abrir um par\u00eantese \u201cn\u00e3o copie, estude!\u201d. O estudo do mercado servir\u00e1 caso voc\u00ea queira evoluir seu manual ou at\u00e9 mesmo cri\u00e1-lo. Veja como seus concorrentes est\u00e3o agindo, como eles est\u00e3o se comunicando, quais os pontos fortes e quais os pontos que voc\u00ea pode explorar gerando mais assertividade na comunica\u00e7\u00e3o da sua empresa e\/ou produto.<\/p>\n<p>Criar um manual significa entender o meu cliente e falar a mesma l\u00edngua. Por isso, a import\u00e2ncia de entender como as pessoas falam e se relacionam com sua marca, com a marca dos concorrentes e entre si, ajuda a construir um vocabul\u00e1rio comum que todos possam entender.<\/p>\n<h2><b>Como definir o tom de voz?<\/b><\/h2>\n<p>Agora que j\u00e1 sabemos como ser\u00e1 a nossa voz, chegou a hora de definir nosso tom.<\/p>\n<div class=\"portlet-msg-info\"><strong>1. Quais s\u00e3o os dados da persona? Qual o g\u00eanero, faixa et\u00e1ria? Defina aqui todas as caracter\u00edsticas pessoais;<\/strong><\/div>\n<div class=\"portlet-msg-info\"><strong>2. Defina como a persona se comunicar\u00e1. Ser\u00e1 uma comunica\u00e7\u00e3o individual, eu sou..? Ser\u00e1 como terceira pessoa, a marca \u00e9\u2026? Ou ter\u00e1 uma\u00a0comunica\u00e7\u00e3o se referindo \u00e0 empresa como o todo, n\u00f3s somos\u2026<\/strong><\/div>\n<div class=\"portlet-msg-info\"><strong>3. \u00c9 hora de definir as caracter\u00edsticas. Minha marca \u00e9 descontra\u00edda. Ok! Mas como se dar\u00e1 essa descontra\u00e7\u00e3o? Onde ela ser\u00e1 aplicada? E principalmente onde ela n\u00e3o ser\u00e1 aplicada? \u00c9 mais s\u00e9ria. Ok! Que n\u00edvel de seriedade? Usaremos um vocabul\u00e1rio mais formal? Onde aplicamos?<\/strong><\/div>\n<div class=\"portlet-msg-info\"><strong>4. Estabele\u00e7a um objetivo de como as pessoas deveriam se sentir ao serem impactadas pela sua comunica\u00e7\u00e3o. Esse objetivo pode ser inform\u00e1-las,\u00a0inspir\u00e1-las a algo, entre outros.<\/strong><\/div>\n<div class=\"portlet-msg-info\"><strong>5. Voc\u00ea tem uma Slogan? Deixe claro o que pode e o que n\u00e3o pode ser feito com ele. Existem marcas que possuem segmentos secund\u00e1rios, e \u00e9 preciso deixar claro o posicionamento do texto para n\u00e3o gerar confus\u00e3o a quem est\u00e1 lendo.<\/strong><\/div>\n<div class=\"portlet-msg-info\"><strong>6. As pessoas precisam reconhecer sua marca pela sua voz. Padronize sua comunica\u00e7\u00e3o. Todos os seus canais de comunica\u00e7\u00e3o devem falar a mesma l\u00edngua. Por isso, pense em um tom de voz que gere identifica\u00e7\u00e3o com o seu usu\u00e1rio.\u00a0\u00a0<\/strong><\/div>\n<h2><b>Uma s\u00f3 l\u00edngua, um s\u00f3 Writing!<\/b><\/h2>\n<p>Ao estruturar bem os pontos acima, chega o momento de dar vida ao documento. Nesse documento, est\u00e3o contidas de modo objetivo todas as informa\u00e7\u00f5es, o tom e a voz que a empresa ir\u00e1 usar.<\/p>\n<p>Existem v\u00e1rios modelos que podemos encontrar facilmente na internet, por\u00e9m independente do modelo, as informa\u00e7\u00f5es precisam estar bem detalhadas. Quando a equipe compreender bem o tom e voz da marca, todos conseguir\u00e3o falar a mesma l\u00edngua, e as intera\u00e7\u00f5es com sua audi\u00eancia ser\u00e3o muito mais eficazes. Tendo assim, uma marca mais forte, com um v\u00ednculo maior com seu p\u00fablico.<\/p>\n<h2><b>E agora? Como aplicar?<\/b><\/h2>\n<p>Utilize um padr\u00e3o! O padr\u00e3o de design \u00e9 uma solu\u00e7\u00e3o reutiliz\u00e1vel comum para um problema de design. O objetivo \u00e9 criar um ponto de partida f\u00e1cil para a reda\u00e7\u00e3o de texto UX de alta qualidade. Selecionei aqui alguns padr\u00f5es que quase toda experi\u00eancia deve usar:<\/p>\n<h3><b>T\u00edtulos<\/b><\/h3>\n<p>T\u00edtulos fornecem uma explica\u00e7\u00e3o imediata sobre o contexto e a a\u00e7\u00e3o a ser tomada. Com frequ\u00eancia, s\u00e3o os primeiros e \u00fanicos textos lidos durante a experi\u00eancia. Sendo assim, precisa ter contexto para que o usu\u00e1rio alcance o objetivo.<\/p>\n<h4><strong>T\u00edtulo com nome o nome do conte\u00fado<\/strong><\/h4>\n<p>Quando temos uma interface baseada no conte\u00fado, como uma postagem, blog, m\u00eddia social ou uma imagem, \u00e9 preciso utilizar um t\u00edtulo que esteja pautado nesse conte\u00fado.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/1+-+t%C3%ADtulo+com+nome+do+conte%C3%BAdo.png\" alt=\"\" width=\"681\" height=\"472\" \/><\/p>\n<h6><\/h6>\n<h4><strong>T\u00edtulo para a\u00e7\u00e3o amb\u00edgua<\/strong><\/h4>\n<p>Quando existem diversas a\u00e7\u00f5es potenciais que podem ser executadas pelo usu\u00e1rio, por exemplo as configura\u00e7\u00f5es de sua conta.<\/p>\n<h6><\/h6>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/1.2+-+t%C3%ADtulo+para+a%C3%A7%C3%A3o+amb%C3%ADgua.png\" alt=\"\" width=\"584\" height=\"405\" \/><\/p>\n<h4><strong>T\u00edtulos para a\u00e7\u00e3o \u00fanica<\/strong><\/h4>\n<p>Funcionam como instru\u00e7\u00f5es a serem seguidas pelo usu\u00e1rio. Usa-se de prefer\u00eancia vocativos no imperativo para refor\u00e7ar a a\u00e7\u00e3o correta. Ex: Aponte a c\u00e2mera e pague.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/1.3+-+t%C3%ADtulo+para+a%C3%A7%C3%A3o+%C3%BAnica.png\" alt=\"\" width=\"681\" height=\"472\" \/><\/p>\n<h3><b>Bot\u00f5es, links e outros comandos<\/b><\/h3>\n<p>Os bot\u00f5es s\u00e3o a parte mais importante da experi\u00eancia. S\u00e3o eles que permitem ao usu\u00e1rio avan\u00e7ar na tarefa ou executar uma a\u00e7\u00e3o. Bot\u00f5es ou quaisquer outros textos interativos, s\u00e3o aqueles com que os usu\u00e1rios interagem, tanto pelo toque, como pelo clique ou at\u00e9 mesmo atrav\u00e9s da fala.<\/p>\n<p>S\u00e3o atrav\u00e9s deles que nossos usu\u00e1rios \u201cfalam\u201d com a experi\u00eancia. O grande desafio dos bot\u00f5es \u00e9 que funcionam melhor quando s\u00e3o reconhec\u00edveis e exibem apenas uma ou duas palavras.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/2+-+bot%C3%B5es.png\" alt=\"\" width=\"681\" height=\"472\" \/><\/p>\n<p>Outro ponto \u00e9 a ordem dos bot\u00f5es, assim como em um di\u00e1logo, a a\u00e7\u00e3o principal ou mais comum aparece primeiro.<\/p>\n<h3><b>Descri\u00e7\u00f5es<\/b><\/h3>\n<p>Ajudam a seguir dentro da experi\u00eancia sabendo o que esperar, estabelecer a marca e reduzir responsabilidade. A descri\u00e7\u00e3o \u00e9 um texto informativo que se apresenta atrav\u00e9s de elementos textuais, frases ou par\u00e1grafos. Interagir com a descri\u00e7\u00e3o n\u00e3o produz efeito algum.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/descri%C3%A7%C3%B5es.png\" alt=\"\" width=\"681\" height=\"472\" \/><\/p>\n<p>Os textos descritivos s\u00f3 alcan\u00e7ar\u00e3o seu objetivo se forem lidos, mas a realidade \u00e9 que s\u00e3o ignorados. As pessoas n\u00e3o consideram uma boa experi\u00eancia ler textos. Sendo assim, quando necess\u00e1rio, o texto descritivo deve ser o mais f\u00e1cil poss\u00edvel de ser compreendido.<\/p>\n<h3><b>Estados vazios<\/b><\/h3>\n<p>Tem por finalidade criar expectativa e entusiasmo ao mesmo tempo que indica que o espa\u00e7o vazio \u00e9 intencional. A escrita para um estado vazio pode ser t\u00e3o simples como uma linha ou t\u00e3o complexo como um bot\u00e3o. Em casos simples use sempre o formato para \u201cX\u201d fa\u00e7a \u201cY\u201d.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/espa%C3%A7o+vazio.png\" alt=\"\" width=\"616\" height=\"427\" \/><\/p>\n<p>Em algumas condi\u00e7\u00f5es de estado vazio, n\u00e3o h\u00e1 nada que possa ser feio para preench\u00ea-lo. Ao contr\u00e1rio dos estados vazios, quando as telas est\u00e3o\u00a0 cheias de detalhes, outro tipo de descri\u00e7\u00e3o se faz necess\u00e1rio: r\u00f3tulos.<\/p>\n<h3><b>R\u00f3tulos<\/b><\/h3>\n<p>Visam minimizar os esfor\u00e7os necess\u00e1rios para compreens\u00e3o da experi\u00eancia. S\u00e3o usados para indicar se\u00e7\u00f5es, categorias, status, progresso, quantidade ou unidade. Existe uma grande diferen\u00e7a entre r\u00f3tulos e descri\u00e7\u00f5es. Descri\u00e7\u00f5es s\u00e3o frases completas, independente de pontua\u00e7\u00e3o. R\u00f3tulos s\u00e3o substantivos simples ou pares de substantivos.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/r%C3%B3tulos.png\" alt=\"\" width=\"605\" height=\"419\" \/><\/p>\n<p>Geralmente os r\u00f3tulos est\u00e3o associados a itens passivos da interface, como \u00edcones ou se\u00e7\u00f5es. Algumas vezes o r\u00f3tulo pode vir em elementos din\u00e2micos, e \u00e9 nesse momento que precisamos entender muito bem nosso usu\u00e1rio e as limita\u00e7\u00f5es t\u00e9cnicas envolvidas.<\/p>\n<h3><b>Controles<\/b><\/h3>\n<p>Informam aos usu\u00e1rios sobre a extens\u00e3o e o estado de poss\u00edveis customiza\u00e7\u00f5es. Existem ao menos 2 textos a serem considerados para um determinado controle: nome e estado. O nome deve descrever o controle de forma que o usu\u00e1rio o reconhe\u00e7a. J\u00e1 o estado informa, por exemplo, se uma caixa de sele\u00e7\u00e3o est\u00e1 marcada, qual a posi\u00e7\u00e3o de um controle deslizante ou se um bot\u00e3o com altern\u00e2ncia est\u00e1 para a direita ou para a esquerda, para cima ou para baixo.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/controles.png\" alt=\"\" width=\"607\" height=\"421\" \/><\/p>\n<p>Outro ponto importante \u00e9 que o texto precisa estar alinhado com seus poss\u00edveis estados. Um bom exemplo seria a checkbox, que quando est\u00e1 marcada quer dizer que sim e quando n\u00e3o est\u00e1 marcada automaticamente voc\u00ea entender\u00e1 que n\u00e3o se aplica a situa\u00e7\u00e3o. Os bot\u00f5es de altern\u00e2ncia, que possuem dois estados ativo\/ligado ou inativo\/desligado, s\u00e3o outra situa\u00e7\u00e3o. O estado deste \u00e9 representado por uma cor verde e vermelha nessa ordem (com diferencia\u00e7\u00e3o para dalt\u00f4nicos).<\/p>\n<p><b>Nota:<\/b>\u00a0A usabilidade dos controles depende do conhecimento de sua finalidade por parte do usu\u00e1rio e da compreens\u00e3o de como esses controles atendem o seu prop\u00f3sito.<\/p>\n<h3><b>Campos de entrada de texto<\/b><\/h3>\n<p>Sua fun\u00e7\u00e3o principal \u00e9 ajudar o usu\u00e1rio a fornecer informa\u00e7\u00f5es precisas. A fim de facilitar a navega\u00e7\u00e3o, algumas informa\u00e7\u00f5es podem ser auto preenchidas, como no caso do logradouro ap\u00f3s a digita\u00e7\u00e3o do CEP. Essa a\u00e7\u00e3o economiza o tempo do usu\u00e1rio e d\u00e1 a possibilidade de corre\u00e7\u00e3o caso alguma informa\u00e7\u00e3o esteja incorreta. Mas aten\u00e7\u00e3o, s\u00f3 use esse artif\u00edcio em campos em que a experi\u00eancia j\u00e1 seja conhecida e que provavelmente os campos n\u00e3o ser\u00e3o alterados.<\/p>\n<p>Se n\u00e3o for poss\u00edvel usar o auto preenchimento, r\u00f3tulos e dicas podem ser usados para indicar o conte\u00fado a ser informado.<\/p>\n<p>Para r\u00f3tulos e dicas existem 4 boas op\u00e7\u00f5es:<\/p>\n<ul>\n<li aria-level=\"1\">Nome da informa\u00e7\u00e3o a ser fornecida<\/li>\n<li aria-level=\"1\">Exemplo da informa\u00e7\u00e3o a ser fornecida<\/li>\n<li aria-level=\"1\">Instru\u00e7\u00e3o imperativa sobre o fornecimento da informa\u00e7\u00e3o<\/li>\n<li aria-level=\"1\">Orienta\u00e7\u00e3o sobre como o usu\u00e1rio pode ser bem-sucedido<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/entrada+de+texto.png\" alt=\"\" width=\"561\" height=\"389\" \/><\/p>\n<p>Queria ressaltar aqui o cuidado que devemos ter com as dicas (placeholder). Algumas pesquisas apontam que usu\u00e1rios costumam confundir essas dicas com campos autopreenchidos. Como uma boa pr\u00e1tica, r\u00f3tulos e dicas devem atuar em conjunto\u00a0 para indicar o conte\u00fado a ser informado.<\/p>\n<h3><b>Texto de transi\u00e7\u00e3o<\/b><\/h3>\n<p>Tem por objetivo confirmar que uma a\u00e7\u00e3o est\u00e1 em progresso. Quando uma a\u00e7\u00e3o \u201ctrava\u201d ou necessita de um tempo maior de espera, \u00e9 imprescind\u00edvel que o usu\u00e1rio seja avisado que a espera n\u00e3o ser\u00e1 em v\u00e3o. O texto de transi\u00e7\u00e3o nesse caso pode ser a melhor op\u00e7\u00e3o para indicar que recebeu a solicita\u00e7\u00e3o e que ser\u00e1 necess\u00e1rio aguardar um instante.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/transi%C3%A7%C3%A3o.png\" alt=\"\" width=\"632\" height=\"438\" \/><\/p>\n<p>Se a a\u00e7\u00e3o est\u00e1 em curso use o presente cont\u00ednuo (\u201cest\u00e1 carregando\u201d ou \u201cest\u00e1 enviando\u201d). Em alguns casos os textos de transi\u00e7\u00e3o servem como motivadores, sendo exibidos mesmo quando a a\u00e7\u00e3o j\u00e1 foi conclu\u00edda, mantendo-se em tela por mais alguns segundos. Como exemplo temos as plataformas de jogos. Verbos gen\u00e9ricos funcionam muito bem, como exemplo \u201cpreparando\u201d, mas na maioria dos casos palavras espec\u00edficas funcionam melhor.<\/p>\n<h3><b>Mensagem de confirma\u00e7\u00e3o<\/b><\/h3>\n<p>Mostra ao usu\u00e1rio que o progresso\/resultado esperados est\u00e3o conclu\u00eddos. Essas confirma\u00e7\u00f5es podem aparecer de maneira passiva, como uma pausa ou ainda como uma etapa moment\u00e2nea. O padr\u00e3o b\u00e1sico para esse tipo de mensagem \u00e9 usar o pret\u00e9rito ou um elemento textual que descreva adequadamente a a\u00e7\u00e3o.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/confirma%C3%A7%C3%A3o+%281%29.png\" alt=\"\" width=\"641\" height=\"444\" \/><\/p>\n<p>Uma boa t\u00e9cnica \u00e9 usar sempre pares de verbos semelhantes. Como por exemplo usar um verbo no presente cont\u00ednuo\u00a0 para a transa\u00e7\u00e3o (enviando) e o mesmo verbo no pret\u00e9rito para confirma\u00e7\u00e3o (enviado). O texto de confirma\u00e7\u00e3o pode ser uma \u00fanica palavra quando o contexto e a a\u00e7\u00e3o e serem conclu\u00eddos s\u00e3o o \u00fanico foco do usu\u00e1rio.<\/p>\n<p>Um ponto forte das mensagens \u00e9 que elas permitem que a experi\u00eancia continue enquanto outros sistemas trabalham.<\/p>\n<p>Vemos isso claramente no google, que a medida que o usu\u00e1rio digita \u00e9 exibido um texto de transi\u00e7\u00e3o \u201cSalvando\u2026\u201d, dando a certeza ao usu\u00e1rio que o documento est\u00e1 sendo salvo a medida que ele inclui caracteres, imagens ou mais coisas ao texto. Em casos de esperas longas, que podem variar de horas a dias, \u00e9 importante que a mensagem seja clara ao usu\u00e1rio, assim evitando custos operacionais.<\/p>\n<p><strong>Ex:<\/strong>\u00a0O cliente envia uma mensagem ao fornecedor \u201cY\u201d e este por sua vez leva at\u00e9 10 dias \u00fateis para responder. Sendo assim, \u00e9 importante que ap\u00f3s o envio o cliente receba a mensagem de \u201ccoment\u00e1rio enviado\u201d e veja t\u00e3o logo as informa\u00e7\u00f5es sobre tempo de resposta.<\/p>\n<h3><b>Notifica\u00e7\u00f5es<\/b><\/h3>\n<p>Informar ou lembrar o usu\u00e1rio a se envolver com a experi\u00eancia. Elas interrompem o usu\u00e1rio para fazer parte de uma experi\u00eancia para a qual n\u00e3o est\u00e1 atento. As notifica\u00e7\u00f5es devem comunicar seu valor e inten\u00e7\u00e3o rapidamente. Existem diferentes controles para essa visualiza\u00e7\u00e3o em dispositivos m\u00f3veis, desktop e notebooks em navegadores e extens\u00f5es.<\/p>\n<p>\u00c9 papel do designer informar como essa informa\u00e7\u00e3o ir\u00e1 se portar em cada dispositivo e se a notifica\u00e7\u00e3o ser\u00e1 igual em cada uma das telas. Uma notifica\u00e7\u00e3o \u00e9 composta de ao menos um, mais frequentemente 2 blocos de texto. O t\u00edtulo costuma come\u00e7ar com um verbo que esteja relacionado a a\u00e7\u00e3o a ser executada e transmite as informa\u00e7\u00f5es necess\u00e1rias para o sucesso. A descri\u00e7\u00e3o acrescenta informa\u00e7\u00f5es \u201c\u00fateis\u201d que n\u00e3o s\u00e3o essenciais para o sucesso do usu\u00e1rio.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/notifica%C3%A7%C3%B5es.png\" alt=\"\" width=\"628\" height=\"435\" \/><\/p>\n<p>Um ponto de aten\u00e7\u00e3o \u00e9 com a quantidade de notifica\u00e7\u00f5es. Quando feito da maneira correta ela pode ser um grande impulsionador do seu neg\u00f3cio, diferentemente quando feita em excesso e sem crit\u00e9rios. Neste caso levar\u00e1 em muitos casos a desativa\u00e7\u00e3o das notifica\u00e7\u00f5es por parte dos usu\u00e1rios.<\/p>\n<h3><b>Erros<\/b><\/h3>\n<p>Ajudar os usu\u00e1rios a completarem as tarefas ou chegarem aonde desejam,\u00a0 sinalizando caso haja algum problema para atingir o objetivo.\u00a0 As mensagens de erros s\u00e3o sem d\u00favida a parte mais importante de qualquer experi\u00eancia para manter a voz da marca e demonstrar empatia por quem est\u00e1 tentando utiliz\u00e1-la. Evite culpar o usu\u00e1rio, mesmo que o erro tenha acontecido por conta de uma falta sua.<\/p>\n<p>Em aplica\u00e7\u00f5es de ambiente de trabalho, detalhes adicionais sobre o erro podem ajudar. Para o grande p\u00fablico acrescente detalhes ou links para maiores informa\u00e7\u00f5es. Os erros podem ser classificados em n\u00edveis nessa ordem: ru\u00eddo, obst\u00e1culo, barreira.<\/p>\n<p>O\u00a0<b>ru\u00eddo<\/b>\u00a0\u00e9 menos intrusivo. Trata-se de uma recomenda\u00e7\u00e3o para uma corre\u00e7\u00e3o antes de seguir adiante. O texto deve ser bastante breve e esclarecedor. Lembre-se que ser\u00e1 mais r\u00e1pido o usu\u00e1rio alcan\u00e7ar seu objetivo se ele for instru\u00eddo de como fazer a coisa certa.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/ru%C3%ADdo.png\" alt=\"\" width=\"632\" height=\"438\" \/><\/p>\n<p><b>Obst\u00e1culo\u00a0<\/b>\u00e9 quando o erro n\u00e3o consegue ser corrigido no momento em que ocorre. Esses erros ocorrem quando o usu\u00e1rio n\u00e3o consegue chegar aonde deseja da forma como havia planejado, mas ainda pode chegar l\u00e1. Exemplo um pagamento recusado. A mensagem de erro oferece instru\u00e7\u00f5es primeiro, seguidas da explica\u00e7\u00e3o e por fim, da a\u00e7\u00e3o a ser executada para continuar.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/obst%C3%A1culo.png\" alt=\"\" width=\"632\" height=\"438\" \/><\/p>\n<p><b>Barreira\u00a0<\/b>\u00e9 quando em alguns casos o usu\u00e1rio chega no final da estada e ali \u00e9 estabelecido um bloqueio, seja ele um uma interrup\u00e7\u00e3o planejada ou n\u00e3o. Quando poss\u00edvel especifique quando ou sob qual circunst\u00e2ncia a experi\u00eancia estar\u00e1 dispon\u00edvel novamente. Exemplo erro 404. Para que a experi\u00eancia possa voltar a acontecer o usu\u00e1rio precisa se conectar a internet.<\/p>\n<p>Existe um padr\u00e3o para estes casos que \u00e9: Um t\u00edtulo, seguido de um valor e uma repeti\u00e7\u00e3o da instru\u00e7\u00e3o, pode auxiliar aqueles que s\u00e3o usu\u00e1rios eventuais da experi\u00eancia.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.cesar.org.br\/documents\/805050\/0\/barreira.png\" alt=\"\" width=\"620\" height=\"430\" \/><\/p>\n<h2><b>Dicas de ouro\u00a0<\/b><\/h2>\n<p>Para finalizar gostaria de deixar algumas regras de ouro que aprendi quando realizei o curso com o Bruno Rodrigues e que ir\u00e3o auxiliar bastante na nossa constru\u00e7\u00e3o textual. S\u00e3o elas:<\/p>\n<h3><strong>Seja conciso<\/strong><\/h3>\n<p>Use o m\u00ednimo de palavras poss\u00edvel sem perder o sentido<\/p>\n<p><b>Evite:\u00a0<\/b>Voc\u00ea deve fazer login antes de escrever um coment\u00e1rio<\/p>\n<p><b>Prefira<\/b>: Fa\u00e7a login para comentar<\/p>\n<p><b>Evite<\/b>: blocos de textos longos<\/p>\n<p><b>Prefira:\u00a0<\/b>Escreva e em seguida corte pela metade<\/p>\n<h3><strong>Comece com o objetivo<\/strong><\/h3>\n<p><b>Evite<\/b>: toque no item para ver suas propriedades<\/p>\n<p><b>Prefira<\/b>: para ver as propriedades do item, toque nele<\/p>\n<h3><strong>Seja consistente<\/strong><\/h3>\n<p>Use sempre os mesmo termos, evite sin\u00f4nimos e n\u00e3o se refira ao usu\u00e1rio tanto na segunda pessoa quanto na primeira pessoa na mesma frase.<\/p>\n<p><b>Evite:<\/b>\u00a0altere suas prefer\u00eancias em Minha conta<\/p>\n<p><b>Prefira:\u00a0<\/b>Altere suas prefer\u00eancias em sua conta<\/p>\n<h3><b>Fuja dos termos t\u00e9cnicos<\/b><\/h3>\n<p><b>Evite:<\/b>\u00a0Erro de sistema (c\u00f3digo # 2234)<\/p>\n<p><b>Prefira:<\/b>\u00a0Erro de login: voc\u00ea digitou uma senha incorreta<\/p>\n<h3><strong>Escreva no presente<\/strong><\/h3>\n<p><b>Evite:<\/b>\u00a0o v\u00eddeo foi baixado<\/p>\n<p><b>Prefira:<\/b>\u00a0v\u00eddeo baixado<\/p>\n<h3><strong>Use numerais<\/strong><\/h3>\n<p><b>Evite<\/b>: voc\u00ea tem duas chamadas perdidas<\/p>\n<p><b>Prefira:<\/b>\u00a0voc\u00ea tem 2 chamadas perdidas<\/p>\n<h3><strong>Tenha cuidado com o uso de humor\u00a0<\/strong><\/h3>\n<p>O que pode parecer inteligente no in\u00edcio pode se tornar irritante com o tempo, especialmente se voc\u00ea usar o humor em mensagens de erro.<\/p>\n<p>O CESAR \u00e9 uma organiza\u00e7\u00e3o\u00a0<i>Design Driven<\/i>, e por isso aplica os\u00a0<a href=\"https:\/\/www.cesar.org.br\/index.php\/2021\/06\/16\/design-nao-e-so-sobre-desenhos-e-voce-deveria-saber-disso\/\" target=\"_blank\" rel=\"noopener\">princ\u00edpios de\u00a0<i>Design<\/i>\u00a0e\u00a0<i>User<\/i><\/a><a href=\"https:\/\/www.cesar.org.br\/index.php\/2021\/06\/16\/design-nao-e-so-sobre-desenhos-e-voce-deveria-saber-disso\/\" target=\"_blank\" rel=\"noopener\"><i> Experience<\/i><\/a>\u00a0em todos os projetos de inova\u00e7\u00e3o que executa. Quer saber mais sobre como entregar uma experi\u00eancia incr\u00edvel para seus consumidores por meio do design?<a href=\"https:\/\/materiais.cesar.org.br\/faleconsultor\" target=\"_blank\" rel=\"noopener\"><b>\u00a0Fale com um consultor.\u00a0<\/b><\/a><\/p>\n<p>&nbsp;<\/p>\n<pre dir=\"ltr\"><b id=\"docs-internal-guid-837557dc-7fff-fec1-02b0-d8addfc0f5c8\">REFER\u00caNCIAS BIBLIOGR\u00c1FICAS <\/b>\r\n\r\n<b id=\"docs-internal-guid-837557dc-7fff-fec1-02b0-d8addfc0f5c8\">PODMAJERSKY, Torrey. Strategic Writing for UX. O'Reilly Media (9 julho 2019)<\/b>\r\n\r\n<b id=\"docs-internal-guid-837557dc-7fff-fec1-02b0-d8addfc0f5c8\">RODRIGUES, Bruno. Em busca de boas pr\u00e1ticas de UX Writing.  Amazon ( julho 2019)<\/b><\/pre>\n<\/article>\n<\/div>\n","protected":false},"featured_media":6972,"template":"","categories":[1],"tags":[102],"formato_insights":[16],"class_list":["post-2424","insight","type-insight","status-publish","has-post-thumbnail","hentry","category-design","tag-ux","formato_insights-artigo"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cesar.org.br\/painel\/wp-json\/wp\/v2\/insight\/2424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cesar.org.br\/painel\/wp-json\/wp\/v2\/insight"}],"about":[{"href":"https:\/\/www.cesar.org.br\/painel\/wp-json\/wp\/v2\/types\/insight"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cesar.org.br\/painel\/wp-json\/wp\/v2\/media\/6972"}],"wp:attachment":[{"href":"https:\/\/www.cesar.org.br\/painel\/wp-json\/wp\/v2\/media?parent=2424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cesar.org.br\/painel\/wp-json\/wp\/v2\/categories?post=2424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cesar.org.br\/painel\/wp-json\/wp\/v2\/tags?post=2424"},{"taxonomy":"formato_insights","embeddable":true,"href":"https:\/\/www.cesar.org.br\/painel\/wp-json\/wp\/v2\/formato_insights?post=2424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}