{"id":9275,"date":"2022-03-22T11:48:10","date_gmt":"2022-03-22T14:48:10","guid":{"rendered":"https:\/\/marcosariosi.com.br\/site\/?p=9275"},"modified":"2022-03-22T13:57:49","modified_gmt":"2022-03-22T16:57:49","slug":"o-que-e-ux","status":"publish","type":"post","link":"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/","title":{"rendered":"O que \u00e9 UX?"},"content":{"rendered":"<h1><b>O que \u00e9 UX?<\/b><\/h1>\n<p><span style=\"font-weight: 400;\">Este termo est\u00e1 extremamente em alta nos tempos atuais, mas o que esse termo quer dizer? O que \u00e9 isso? E pra que serve?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Antes de tudo precisamos entender o que \u00e9 o termo propriamente dito, como o pr\u00f3prio nome j\u00e1 diz, <strong>UX quer dizer User Experience<\/strong>, com isso a gente pressup\u00f5e que estamos falando sobre a experi\u00eancia do usu\u00e1rio, mas o que de fato \u00e9 isso? O que deve ou deveria acontecer quando a gente fala sobre a experi\u00eancia do usu\u00e1rio? O termo \u201cExperi\u00eancia do Usu\u00e1rio\u201d foi usado pela primeira vez por <strong>Don Norman<\/strong> ainda nos anos 90, onde ele diz:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cEu inventei o termo porque achava que interface do usu\u00e1rio e usabilidade eram muito restritos, eu queria cobrir todos os aspectos da experi\u00eancia de uma pessoa com o sistema, incluindo design industrial, gr\u00e1ficos, a interface, a intera\u00e7\u00e3o f\u00edsica e o manual\u201d.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Em termos mais simples, poder\u00edamos dizer que est\u00e1 relacionado a sensa\u00e7\u00f5es,\u00a0 emo\u00e7\u00f5es, ao grau de satisfa\u00e7\u00e3o que o usu\u00e1rio tem ao utilizar um produto, um servi\u00e7o ou mesmo um sistema. Essa intera\u00e7\u00e3o, quando resulta em uma boa sensa\u00e7\u00e3o seja ela devida a sua usabilidade, &#8220;desejabilidade&#8221; e utilidade, e tendo seu <strong>Affordance<\/strong> (potencial de um objeto de ser usado como foi projetado para ser usado) de forma bem clara, intuitiva e at\u00e9 mesmo familiar, resulta sempre em uma boa experi\u00eancia do usu\u00e1rio.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Segundo o Donald Norman, \u201c\u00c9 a forma com que voc\u00ea sente o mundo, \u00e9 a forma que voc\u00ea experi\u00eancia a sua vida, \u00e9 a forma que voc\u00ea experi\u00eancia um servi\u00e7o, ou\u2026 sim\u2026 um aplicativo ou um sistema de computador. Mas \u00e9 um sistema. \u00c9 tudo!\u201d<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Don Norman: The term &quot;UX&quot;\" width=\"756\" height=\"425\" src=\"https:\/\/www.youtube.com\/embed\/9BdtGjoIN4E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Com essa introdu\u00e7\u00e3o, podemos entender que <strong>UX<\/strong> pode \u201ce deve\u201d ser aplicado a quase tudo o que nos cerca, como por exemplo, um servi\u00e7o, um site, uma ferramenta, uma m\u00e1quina, um produto, uma interface, etc. e ele, como demonstrado, ser\u00e1 uma &#8220;ferramenta\u201d muita importante que vai ajudar a se ter sucesso em qualquer que seja o projeto.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Devemos tamb\u00e9m ter bem claro quando formos desenvolver algo, que o produto \u00e9 para o usu\u00e1rio e n\u00e3o para voc\u00ea! Isso \u00e9 de extrema import\u00e2ncia e precisa estar muito claro! \u00c9 preciso conhecer as necessidades, as dores, as expectativas de funcionamento e o resultado final que este produto tem de ter, \u00e9 preciso tamb\u00e9m ter em mente a jornada que o usu\u00e1rio desse produto far\u00e1 durante toda sua intera\u00e7\u00e3o com ele (para isso \u00e9 muito preciso ter empatia!).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tendo esse conceito como o principal requisito do seu produto, voc\u00ea j\u00e1 pode come\u00e7ar a tra\u00e7ar o seu desenvolvimento, o ideal \u00e9 ter uma metodologia adequada, e quando se fala de UX, em via de regra estaremos seguindo os processos conforme o famoso Iceberg de UX, idealizado por Trevor van Gorp inspirado no livro <strong>The Elements of User Experience<\/strong>, de <strong>Jesse James Garrett<\/strong>, que descreve os 5 elementos que definem o ciclo de vida do produto,<\/span> <span style=\"font-weight: 400;\">s\u00e3o eles: Estrat\u00e9gia, Escopo, Estrutura, Esqueleto e Superf\u00edcie. Sendo que esses elementos come\u00e7am em uma parte abstrata (quando voc\u00ea ainda est\u00e1 analisando o problema que precisa resolver), at\u00e9 uma parte mais concreta, veja cada um em detalhe:\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9277 size-full\" src=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/0_D001IXbSk3scN2Ze.png\" alt=\"\" width=\"1039\" height=\"791\" srcset=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/0_D001IXbSk3scN2Ze.png 1039w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/0_D001IXbSk3scN2Ze-300x228.png 300w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/0_D001IXbSk3scN2Ze-1024x780.png 1024w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/0_D001IXbSk3scN2Ze-768x585.png 768w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/0_D001IXbSk3scN2Ze-800x609.png 800w\" sizes=\"auto, (max-width: 1039px) 100vw, 1039px\" \/><\/p>\n<h2><b>Plano de Estrat\u00e9gia<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">O plano de estrat\u00e9gia \u00e9 uma etapa abstrata, ainda n\u00e3o sabemos o que ser\u00e1 nosso produto e \u00e9 nele que iremos definir nosso cen\u00e1rio atual e consequentemente, descobrir se o problema que queremos resolver realmente importa ou sequer existe. \u00c9 aqui que devemos come\u00e7ar com as quest\u00f5es: O que? Para qu\u00ea? Para quem? E com isso podemos fazer uma imers\u00e3o nas dores de nosso usu\u00e1rio, ou melhor, necessidades do usu\u00e1rio. Partindo da ideia de que o produto que temos ou estamos criando \u00e9 para resolver um problema, passamos a levantar hip\u00f3teses para saber como podemos resolv\u00ea-lo. \u00c9 uma fase em que conversamos com os stalkeholders e alinhamos as necessidades que encontramos ao nosso objetivo de neg\u00f3cio. Podemos encontrar as informa\u00e7\u00f5es que precisamos atrav\u00e9s de entrevistas, pesquisas qualitativas e quantitativas.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Plano de Escopo<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Durante a minha conversa com profissionais da \u00e1rea, percebi que o plano de escopo pode ser tido por diferentes pontos de vistas, pois ele torna-se mold\u00e1vel ao fato de voc\u00ea estar desenvolvendo um produto novo, ou estar apenas lan\u00e7ando uma &#8220;feature&#8221;, por exemplo.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ap\u00f3s levantarmos hip\u00f3teses no plano de estrat\u00e9gia, \u00e9 hora de validar e entrar numa parte mais pr\u00e1tica, que seria o papel do escopo. Nesta etapa j\u00e1 sabemos de forma mais concreta o problema que precisamos resolver e agora \u00e9 hora de come\u00e7ar a materializar o plano anterior, e pensar em funcionalidades. O escopo pode ser dividido entre especifica\u00e7\u00f5es funcionais e requisitos de conte\u00fado. As especifica\u00e7\u00f5es funcionais consistem em uma fun\u00e7\u00e3o que nosso produto dever\u00e1 atender. J\u00e1 os<\/span><span style=\"font-weight: 400;\"> requisitos de conte\u00fado<\/span><span style=\"font-weight: 400;\">, s\u00e3o as informa\u00e7\u00f5es que precisamos para fornecer valor ao nosso usu\u00e1rio.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Geralmente quando falamos em escopo, pensamos no in\u00edcio, meio e fim, por\u00e9m na metodologia \u00e1gil, podemos deixar o escopo mais aberto, tornando poss\u00edvel modificar o que for necess\u00e1rio, neste processo, voc\u00ea tamb\u00e9m agrega valor ao seu produto.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Plano de Estrutura<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Neste plano, temos que pensar em como o usu\u00e1rio ir\u00e1 interagir com o nosso produto, sendo assim, ele est\u00e1 dividido entre a parte de Design de Intera\u00e7\u00e3o e Arquitetura de Informa\u00e7\u00e3o. \u00c9 nesta fase que ser\u00e3o mapeados todos os fluxos de navega\u00e7\u00e3o de nosso produto. No desenvolvimento de uma feature, como \u00e9 a \u00e1rvore de navega\u00e7\u00e3o para que o usu\u00e1rio chegue at\u00e9 a funcionalidade que estamos propondo? Quais intera\u00e7\u00f5es podemos prover para melhorar essa experi\u00eancia? Tudo isso ser\u00e1 definido aqui.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Plano de Esqueleto<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">O esqueleto nada mais \u00e9 do que nosso wireframe. J\u00e1 sabemos para quem e para qu\u00ea estamos construindo esse wireframe, e agora precisamos mostrar de uma forma mais abrangente, os resultados dos fluxos de navega\u00e7\u00e3o que encontramos nos planos anteriores. Nessa parte ser\u00e1 definido o design de navega\u00e7\u00e3o, informa\u00e7\u00e3o e a interface.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Plano de Superf\u00edcie<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Enfim chegamos a parte \u201cconcreta\u201d do Iceberg. A superf\u00edcie, pode ser desde interfaces, prot\u00f3tipos, at\u00e9 o nosso produto final, ela seria uma prov\u00e1vel solu\u00e7\u00e3o do problema de nosso usu\u00e1rio, que ir\u00e1 agregar valor ao produto. \u00c9 considerada a parte concreta do produto, pois \u00e9 onde o usu\u00e1rio ter\u00e1 de fato um contato com ele, baseado em tudo que foi levantado durante todo o processo de desenvolvimento.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Ok, mas por que eu deveria saber que esses planos existem?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">De forma geral, as quest\u00f5es com as quais devemos lidar se iniciam de forma abstrata, at\u00e9 chegar a uma forma mais concreta, isso \u00e9 aplicar os 5 elementos de Experi\u00eancia do Usu\u00e1rio. \u00c9 importante passar por esses processos (mesmo que inconscientemente) para agregarmos valor ao nosso neg\u00f3cio e\/ou produto, mas o fundamental de aplic\u00e1-los, \u00e9 porque nossa inten\u00e7\u00e3o \u00e9 criar uma experi\u00eancia memor\u00e1vel para o nosso usu\u00e1rio, de forma positiva, claro!<\/span><\/p>\n<h3><b>UX n\u00e3o \u00e9 s\u00f3 para fazer ficar bonito!<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Compreendemos agora, que ao falarmos de UX, n\u00e3o se trata apenas \u201cDeixar bonitinho\u201d, se trata de uma cultura, e que UX n\u00e3o serve apenas para os Designers, ele deve ser compreendido e exercido por todos aqueles que direta ou indiretamente desenvolvem e criam os produtos, desde o Gerente, ao PO, ao DevTeam, Writers, bem como aqueles que ir\u00e3o fazer os testes e entregar o resultado final.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Existe tamb\u00e9m um conceito muito utilizado em UX que s\u00e3o as<strong> heur\u00edsticas de Nielsen<\/strong>, podemos enumerar 10, vejamos em detalhes abaixo:<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>1. Visibilidade de qual estado estamos no sistema<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u00c9 responsabilidade do sistema informar o que est\u00e1 acontecendo em real time para o usu\u00e1rio, por exemplo quando estamos assistindo\/ouvindo uma playlist do Youtube, do lado direito fica bem claro: qual v\u00eddeo estamos assistindo; qual \u00e9 pr\u00f3ximo; quais assistimos ou n\u00e3o.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>2. Correspond\u00eancia entre o sistema e o mundo real<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Em rela\u00e7\u00e3o ao mundo real podemos considerar: sons, visual e o tom de escrita que o usu\u00e1rio utiliza para se comunicar. Implementamos bastante esta heur\u00edstica quando utilizamos uma seta, \u00edcones e utilizamos a cor vermelha para elementos negativos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Um software que usa muito essa heur\u00edstica \u00e9 o Photoshop em sua barra de ferramentas, por exemplo quando ele ilustra o pincel, o balde de tinta, etc.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>3. Liberdade de controle f\u00e1cil pro usu\u00e1rio<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Nesta heur\u00edstica, a preocupa\u00e7\u00e3o \u00e9 de passar pro usu\u00e1rio a liberdade de ele fazer o que quiser dentro do sistema com exce\u00e7\u00e3o das regras que v\u00e3o contra o neg\u00f3cio ou interferem em outra funcionalidade, como por exemplo quando criamos um tweet, \u00e9 bacana poder delet\u00e1-lo se estivermos afim. Mas n\u00e3o d\u00e1 pra editar um tweet. Imagina se voc\u00ea d\u00e1 um retweet e depois o usu\u00e1rio que fez o tweet muda o texto pra uma coisa que voc\u00ea n\u00e3o acha legal.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>4. Consist\u00eancia e padr\u00f5es<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u00c9 fundamental que uma interface siga as conven\u00e7\u00f5es da plataforma, mantendo padr\u00f5es de intera\u00e7\u00e3o em diversos e diferenciados contextos. Essa heur\u00edstica tamb\u00e9m diz respeito a manter uma mesma linguagem durante toda a interface para n\u00e3o confundir o usu\u00e1rio. Nesse sentido, durante a intera\u00e7\u00e3o, os usu\u00e1rios n\u00e3o devem ter d\u00favidas sobre o significado das palavras, \u00edcones ou s\u00edmbolos utilizados, assim, mantendo uma consist\u00eancia e padr\u00e3o visual (texto, cor, desenho do elemento, som e etc).<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>5. Preven\u00e7\u00f5es de erros<\/b><\/h3>\n<p>Tente criar uma interface que permita ao usu\u00e1rio n\u00e3o errar e que n\u00e3o induza tamb\u00e9m ao erro. Temos um exemplo pr\u00e1tico e inteligente, a busca do Google, que ao come\u00e7armos a escrever nossa busca ele j\u00e1 te entrega algumas sugest\u00f5es, mesmo se a gente escrever a busca com uma ortografia errada ele realiza a busca e pergunta se estamos procurando outra informa\u00e7\u00e3o com a ortografia correta.<br \/>\n<b><\/b><\/p>\n<p>&nbsp;<\/p>\n<h3><b>6. Reconhecimento em vez de memoriza\u00e7\u00e3o<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">O usu\u00e1rio n\u00e3o tem obriga\u00e7\u00e3o de decorar qual foi o caminho que ele fez pra chegar at\u00e9 a p\u00e1gina. Por exemplo, quando voc\u00ea entra em um produto de um site, normalmente\u00a0 \u00e9 disponibilizado o caminho que voc\u00ea fez pra chegar at\u00e9 ele. N\u00f3s chamamos isso de breadcrumb ou de \u201cmigalhas\u201d em portugu\u00eas.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>7. Flexibilidade e efici\u00eancia de uso<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u00c9 importante deixar uma experi\u00eancia boa com seu sistema desde o usu\u00e1rio mais leigo at\u00e9 o mais avan\u00e7ado, por exemplo, dentro do Trello (kanban de tarefas online com base em colunas free) quando voc\u00ea est\u00e1 com o foco em um cart\u00e3o voc\u00ea pode utilizar o mouse para navegar em outros cart\u00f5es, as teclas direcionais (setas pra cima e pra baixo) ou as letras j (para baixo) e k (para cima). Teclas que s\u00e3o por sua vez utilizadas no VIM, editor de texto famoso entre os desenvolvedores.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>8. Est\u00e9tica e design minimalista<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">N\u00e3o exagere! Toda informa\u00e7\u00e3o extra que voc\u00ea deixar pro seu usu\u00e1rio pode na verdade adicionar mais uma d\u00favida, ou seja, deixe o seu layout e o conte\u00fado o mais simples e direto poss\u00edvel.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>9. Ajude os usu\u00e1rios a reconhecerem, diagnosticarem e recuperarem-se de erros<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">As mensagens de erros tem que ser claras e pr\u00f3ximas do conte\u00fado ou a\u00e7\u00e3o que causou o erro, para que o usu\u00e1rio consiga corrigir e identificar de forma clara!<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>10. Ajuda e documenta\u00e7\u00e3o<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Muitos usu\u00e1rios t\u00eam o costume de ignorar a documenta\u00e7\u00e3o e sistema de ajuda, mas, se for realmente necess\u00e1rio essa documenta\u00e7\u00e3o, deixe-a pr\u00f3xima do usu\u00e1rio e do elemento ou a\u00e7\u00e3o que tenha necessidade de uma explica\u00e7\u00e3o mais detalhada e fa\u00e7a isso de forma simples, direta e mais objetiva poss\u00edvel!<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Apesar destas 10 heur\u00edsticas de Nielsen serem utilizadas durante todo o desenvolvimento das interfaces, \u00e9 bastante importante tamb\u00e9m efetuar uma avalia\u00e7\u00e3o posterior.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nesse sentido, aplicar avalia\u00e7\u00f5es heur\u00edsticas na interface \u00e9 importante para coletar informa\u00e7\u00f5es referente \u00e0 problemas de usabilidade e conseguir aperfei\u00e7oar as intera\u00e7\u00f5es e experi\u00eancia do usu\u00e1rio.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Para efetuar as avalia\u00e7\u00f5es, \u00e9 necess\u00e1rio que os especialistas testem o produto, identifiquem e listem todos os problemas encontrados na interface. Sempre levando em considera\u00e7\u00e3o cada uma das 10 heur\u00edsticas acima.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Comumente, mais de um profissional executa a avalia\u00e7\u00e3o heur\u00edstica de uma interface e os resultados s\u00e3o avaliados, vindos de diferentes perspectivas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">No entanto, como a percep\u00e7\u00e3o de pontos negativos e positivos varia de pessoa para pessoa, convidar outros UI Designers para avaliar o prot\u00f3tipo pode proporcionar a entrega de um produto final de qualidade ainda maior.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dessa forma, nos casos em que a avalia\u00e7\u00e3o heur\u00edstica \u00e9 feita por mais de um profissional, cada um deles deve inspecionar a interface individualmente e sem contato com os demais. Desse modo, \u00e9 poss\u00edvel obter resultados independentes e imparciais, de forma a realmente agregar valor \u00e0 interface desenvolvida.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Apesar de n\u00e3o fornecer uma maneira sistem\u00e1tica de encontrar e solucionar problemas de usabilidade, a avalia\u00e7\u00e3o heur\u00edstica consegue explicar cada ponto encontrado e apontado. Muito mais do que somente enxergar, o UX Designer deve sempre buscar compreender e buscar a solu\u00e7\u00e3o dos problemas que est\u00e3o na sua frente.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Em um cen\u00e1rio de transforma\u00e7\u00e3o digital, uma interface intuitiva que possua um Design minimalista e seja de f\u00e1cil compreens\u00e3o engaja os usu\u00e1rios tanto no mundo online quanto no mundo f\u00edsico.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nesse processo todo e seguindo este entendimento, n\u00e3o podemos deixar de fora deste estudo os <strong>Affordances.<\/strong><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Mas afinal, o que s\u00e3o os <strong>Affordances<\/strong>?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\"><strong>Affordance<\/strong> \u00e9 um conceito criado originalmente pelo psic\u00f3logo J. J. Gibson e posteriormente adaptado para o mundo do Design por Don Norman, <strong>Affordance<\/strong> \u00e9 uma rela\u00e7\u00e3o entre um objeto e uma pessoa (no caso, um agente que interage com esse objeto). \u00c9 o relacionamento entre as propriedades do objeto e as capacidades do agente de determinar intuitivamente, ou baseado em experi\u00eancias anteriores, como o objeto pode ser usado, sem necessidade de explica\u00e7\u00f5es, r\u00f3tulos ou instru\u00e7\u00f5es.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Por que entender esse conceito \u00e9 dif\u00edcil? Porque o comum \u00e9 pensarmos em propriedades associadas, em vez de uma rela\u00e7\u00e3o. Para a <strong>Affordance<\/strong> existir, \u00e9 preciso considerar as duas vari\u00e1veis: propriedades (do objeto) e capacidades (do agente).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Trazendo para o mundo digital, o objetivo de Norman era aproveitar a experi\u00eancia pr\u00e9via que as pessoas j\u00e1 tinham ao manipular\/observar objetos f\u00edsicos e trazer essa din\u00e2mica em interfaces digitais, a fim de proporcionar uma boa usabilidade.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se no mundo f\u00edsico eu reconhe\u00e7o que um bot\u00e3o \u00e9 pression\u00e1vel e que, geralmente, alguma coisa acontece quando eu fa\u00e7o isso, ent\u00e3o eu posso aplicar isso a minha interface, mostrando ao usu\u00e1rio que existe uma a\u00e7\u00e3o pression\u00e1vel (clic\u00e1vel no caso) ali. O cursor pode at\u00e9 mudar para uma m\u00e3ozinha pronta para apertar o bot\u00e3o!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Explorar <strong>Affordances<\/strong> no mundo digital \u00e9 uma das formas mais efetivas de gerar uma boa experi\u00eancia pela sua atua\u00e7\u00e3o direta no lado intuitivo da mente do usu\u00e1rio. Claro que deve ser considerado o background do p\u00fablico-alvo, para que as capacidades dos agentes possam se relacionar com as propridades dos objetos que voc\u00ea criar.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se a <strong>Affordance<\/strong> n\u00e3o puder ser percebida ou n\u00e3o tiver for\u00e7a o suficiente, outras formas de sinaliza\u00e7\u00e3o s\u00e3o necess\u00e1rias. Nesse momento, entram os Signifiers, o 2\u00ba princ\u00edpio fundamental da intera\u00e7\u00e3o.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Affordances\" width=\"756\" height=\"567\" src=\"https:\/\/www.youtube.com\/embed\/NK1Zb_5VxuM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Veja quais s\u00e3o os <strong>Affordances<\/strong> existentens:<\/span><\/h2>\n<h2><b>Affordance Expl\u00edcita<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">\u00c9 sinalizada por algum tipo de linguagem verbal e s\u00e3o expl\u00edcitas porque todo usu\u00e1rio, sem qualquer experi\u00eancia em interfaces, podem adivinhar como interagir com o objeto. Esse Affordance geralmente \u00e9 acompanhado de um texto indicando exatamente o que o usu\u00e1rio deve fazer, como por exemplo um bot\u00e3o com o texto: &#8220;Clique Aqui&#8221;.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9287 size-full\" src=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/explicita.png\" alt=\"\" width=\"500\" height=\"146\" srcset=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/explicita.png 500w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/explicita-300x88.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h2><b>Affordance\u00a0 Convencional<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">\u00c9 o tipo mais comum de Affordance nas interfaces, ele \u00e9 baseado em experi\u00eancias anteriores dos usu\u00e1rios. Como \u00e9 o caso de um link em azul, que reconhecemos pelo sublinhado e pela cor. Padr\u00f5es s\u00e3o \u00fateis, pois somos capazes de reduzir a carga cognitiva dos usu\u00e1rios quando interagem com um determinado elemento.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"409\" class=\"alignnone size-full wp-image-9288\" src=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/padrao.jpeg\" alt=\"\" srcset=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/padrao.jpeg 450w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/padrao-300x273.jpeg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/p>\n<h2><b>Affordance Oculta<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Neste tipo, o affordance n\u00e3o est\u00e1 dispon\u00edvel ou claro at\u00e9 que uma a\u00e7\u00e3o seja realizada pelo usu\u00e1rio. Por exemplo, um menu dropdown, onde voc\u00ea precisa passar o mouse ou clicar no menu para ver os itens da lista. \u00c9 frequentemente utilizado para diminuir a complexidade visual de um design, exibindo apenas as informa\u00e7\u00f5es relevantes em um determinado contexto.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9289 size-large\" src=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/oculta-997x1024.png\" alt=\"\" width=\"756\" height=\"776\" srcset=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/oculta-997x1024.png 997w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/oculta-292x300.png 292w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/oculta-768x789.png 768w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/oculta-1310x1345.png 1310w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/oculta-800x822.png 800w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/oculta.png 1336w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><\/p>\n<h2><b>Affordance Metaf\u00f3rica<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Nesse Affordance , utilizamos objetos do mundo real como met\u00e1foras em nossas interfaces digitais. \u00cdcones e s\u00edmbolos s\u00e3o grandes exemplos, tais como: carrinho de compra, envelope, telefone, v\u00eddeo, c\u00e2mera, impressora, etc\u2026<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Elas podem ajudar a comunicar ideias abstratas sem muitas instru\u00e7\u00f5es.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"98\" class=\"alignnone size-full wp-image-9290\" src=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/metaforica.png\" alt=\"\" srcset=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/metaforica.png 1400w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/metaforica-300x21.png 300w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/metaforica-1024x72.png 1024w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/metaforica-768x54.png 768w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/metaforica-1310x92.png 1310w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/metaforica-800x56.png 800w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<h2><b>Affordance Intera\u00e7\u00e3o n\u00e3o-permitida<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Algumas vezes pode ser necess\u00e1rio desabilitar certas funcionalidades e mostr\u00e1-las como indispon\u00edveis, ou para direcionar o usu\u00e1rio ou limitar alguma funcionalidade propositalmente, para isso usamos o recurso visual de acinzentar o elemento desabilitado por exemplo.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Entender os conceitos das Affordances, \u00e9 um dos primeiros passos para desenhar interfaces mais claras e intuitivas. Ap\u00f3s conhecer os usu\u00e1rios e entender suas necessidade e limita\u00e7\u00f5es, podemos combinar esses quatro tipos de affordances para melhorar a experi\u00eancia de uso do seu produto ou servi\u00e7o. Conseguimos ajudar as pessoas a entenderem nossa interface mais r\u00e1pido e motiv\u00e1-las a completar a\u00e7\u00f5es. Basta hierarquizar as possibilidades e usar a intera\u00e7\u00e3o certa.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"441\" height=\"195\" class=\"alignnone size-full wp-image-9291\" src=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/nao_permitida.png\" alt=\"\" srcset=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/nao_permitida.png 441w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/nao_permitida-300x133.png 300w\" sizes=\"auto, (max-width: 441px) 100vw, 441px\" \/><\/p>\n<h2><\/h2>\n<h2><b>E qual a import\u00e2ncia do UX nas empresas e no mundo corporativo?<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"350\" class=\"alignnone size-full wp-image-20\" src=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2016\/02\/about3.jpg\" alt=\"\" srcset=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2016\/02\/about3.jpg 640w, https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2016\/02\/about3-300x164.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">O UX para as empresas compreende, sobretudo, a necessidade de se manterem competitivas no mercado \u2014 uma experi\u00eancia bem-sucedida leva as pessoas a recomendarem aquele produto ou servi\u00e7o a outras que tenham uma necessidade semelhante.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O bom desenvolvimento da experi\u00eancia do usu\u00e1rio reflete na melhor capacidade que os neg\u00f3cios t\u00eam em entender as falhas que precisam ser corrigidas \u2014 isto \u00e9, ter uma vis\u00e3o clara dos pontos de vista dos consumidores para propor solu\u00e7\u00f5es mais alinhadas com as suas expectativas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00c9 observando a maneira como o seu p\u00fablico interage com determinado produto ou servi\u00e7o que as empresas tomam consci\u00eancia e aprendem a interpretar comportamentos espec\u00edficos sob uma perspectiva mais resolutiva. A seguir, voc\u00ea vai ver algumas das principais vantagens do UX.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Como mencionado, o User Experience engloba cada etapa da jornada de compra do consumidor. Ent\u00e3o, quando o trabalho \u00e9 bem desenvolvido, os potenciais compradores j\u00e1 experimentaram intera\u00e7\u00f5es positivas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As chances, ent\u00e3o, de eles continuarem com a sua marca at\u00e9 o est\u00e1gio final \u2014 que \u00e9 de fato a aquisi\u00e7\u00e3o de produtos ou servi\u00e7os \u2014, s\u00e3o muito maiores. Converter leads em vendas \u00e9 bem mais f\u00e1cil quando o cliente \u00e9 instru\u00eddo e se sente seguro em rela\u00e7\u00e3o \u00e0 sua escolha antes mesmo do momento de decis\u00e3o. Sem deixar de mencionar o custo mais baixo para manter o engajamento.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Outro aspecto importante sobre manter uma conex\u00e3o direta com os clientes \u00e9 a garantia de melhor consist\u00eancia entre as necessidades e a solu\u00e7\u00e3o. Quando se atinge esse ponto de equil\u00edbrio, a confian\u00e7a dos usu\u00e1rios aumenta. Desse modo, a longevidade de um produto \u00e9 melhorada.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Um dos primeiros passos para maximizar a qualidade dos relacionamentos com os usu\u00e1rios \u00e9 justamente ganhar credibilidade. O processo de transmitir confian\u00e7a \u00e9 longo e, mesmo quando os resultados s\u00e3o atingidos, \u00e9 preciso implementar a\u00e7\u00f5es para que ela continue expandindo e atendendo \u00e0s novas tend\u00eancias.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Logo, quando temos um bom planejamento de Experi\u00eancia do Usu\u00e1rio em a\u00e7\u00e3o, os profissionais respons\u00e1veis se dedicam \u00e0 entrega de solu\u00e7\u00f5es de checkout mais eficientes para sua p\u00e1gina, para que o cliente finalize a sua compra em poucos passos, ap\u00f3s a escolha do item, assim garantem a sensa\u00e7\u00e3o de uma compra com excelente custo-benef\u00edcio e mant\u00eam acesa a vontade de construir uma rela\u00e7\u00e3o cont\u00ednua de consumo com determinada loja.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Uma estrat\u00e9gia de User Experience bem-sucedida \u00e9 uma pe\u00e7a-chave para que todos os tipos de neg\u00f3cios ganhem competitividade e obtenham sucesso na conquista das suas metas. Al\u00e9m de experi\u00eancias \u00fanicas, o consumidor moderno busca agilidade e conforto. Portanto, estar alinhado \u00e0s suas expectativas n\u00e3o apenas fideliza a sua base de clientes, mas tamb\u00e9m garante um maior potencial para converter novos visitantes.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Fontes e Cr\u00e9ditos:<\/span><\/h2>\n<pre>https:\/\/brasil.uxdesign.cc\/5-elementos-de-ux-o-famoso-iceberg-b06d6976ccbb\r\n\r\n<span style=\"font-weight: 400;\">https:\/\/radames-pereira.medium.com\/o-que-%C3%A9-ux-e-qual-sua-proposta-para-produtos-como-aplicar-em-seu-dia-a-dia-6b1cb189c018\r\n<\/span>\r\n<span style=\"font-weight: 400;\">https:\/\/www.alura.com.br\/artigos\/10-heuristicas-de-nielsen-uma-formula-pra-evitar-erros-basicos-de-usabilidade?gclid=Cj0KCQjw29CRBhCUARIsAOboZbIz3DVrZ6UsHG2gNgbG2986gZ9PDcBQizRHQmtCQylGmBPwvG8_w60aAnZsEALw_wcB\r\n<\/span>\r\n<span style=\"font-weight: 400;\">https:\/\/medium.com\/aela\/10-heur%C3%ADsticas-de-nielsen-dicas-para-melhorar-a-usabilidade-de-sua-interface-35ef86a7fb41#:~:text=4<\/span><span style=\"font-weight: 400;\">)%20Consist%C3%AAncia%20e%20padr%C3%B5es,palavras%2C%20%C3%ADcones%20ou%20s%C3%ADmbolos%20utilizados\r\n<\/span>\r\n<span style=\"font-weight: 400;\">https:\/\/brasil.uxdesign.cc\/affordance-o-%C3%B3bvio-do-%C3%B3bvio-e91761f4403b\r\n<\/span>\r\n<span style=\"font-weight: 400;\">https:\/\/www.homemmaquina.com.br\/o-que-e-affordance\/\r\n<\/span>\r\n<span style=\"font-weight: 400;\">https:\/\/uxdesign.blog.br\/affordances-df63a212d413\r\n<\/span>\r\n<span style=\"font-weight: 400;\">https:\/\/imasters.com.br\/design-ux\/don-norman-e-o-termo-ux\r\n<\/span>\r\n<span style=\"font-weight: 400;\">https:\/\/mutant.com.br\/blog\/entenda-a-importancia-do-user-experience-para-o-sucesso-do-seu-negocio\/<\/span><\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O que \u00e9 UX? Este termo est\u00e1 extremamente em alta nos tempos atuais, mas o que esse termo quer dizer? O que \u00e9 isso? E pra que serve? Antes de tudo precisamos entender o que \u00e9 o termo propriamente dito, como o pr\u00f3prio nome j\u00e1 diz, UX quer dizer User Experience, com isso a gente pressup\u00f5e que estamos falando sobre a experi\u00eancia do usu\u00e1rio, mas o que de fato \u00e9 isso? O que deve ou deveria acontecer quando a gente [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9276,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,64],"tags":[],"class_list":["post-9275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artigos","category-ux"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>O que \u00e9 UX? - Marcos Ariosi<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O que \u00e9 UX? - Marcos Ariosi\" \/>\n<meta property=\"og:description\" content=\"O que \u00e9 UX? Este termo est\u00e1 extremamente em alta nos tempos atuais, mas o que esse termo quer dizer? O que \u00e9 isso? E pra que serve? Antes de tudo precisamos entender o que \u00e9 o termo propriamente dito, como o pr\u00f3prio nome j\u00e1 diz, UX quer dizer User Experience, com isso a gente pressup\u00f5e que estamos falando sobre a experi\u00eancia do usu\u00e1rio, mas o que de fato \u00e9 isso? O que deve ou deveria acontecer quando a gente [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"Marcos Ariosi\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-22T14:48:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-22T16:57:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/Untitled-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"965\" \/>\n\t<meta property=\"og:image:height\" content=\"347\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcos Ariosi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marcosariosi.com.br\/site\/#website\",\"url\":\"https:\/\/marcosariosi.com.br\/site\/\",\"name\":\"Marcos Ariosi\",\"description\":\"E-commerce Product Analyst Sr | Designer UX &amp; UI | Web &amp; Graphic Designer | Photographer &amp; V\u00eddeo Maker\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/marcosariosi.com.br\/site\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#primaryimage\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/Untitled-1.jpg\",\"contentUrl\":\"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/Untitled-1.jpg\",\"width\":965,\"height\":347},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#webpage\",\"url\":\"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/\",\"name\":\"O que \u00e9 UX? - Marcos Ariosi\",\"isPartOf\":{\"@id\":\"https:\/\/marcosariosi.com.br\/site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#primaryimage\"},\"datePublished\":\"2022-03-22T14:48:10+00:00\",\"dateModified\":\"2022-03-22T16:57:49+00:00\",\"author\":{\"@id\":\"https:\/\/marcosariosi.com.br\/site\/#\/schema\/person\/862ed3c959fe75de590cb31501439940\"},\"breadcrumb\":{\"@id\":\"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/marcosariosi.com.br\/site\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"O que \u00e9 UX?\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marcosariosi.com.br\/site\/#\/schema\/person\/862ed3c959fe75de590cb31501439940\",\"name\":\"Marcos Ariosi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marcosariosi.com.br\/site\/#personlogo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/698dc409347f722b43e62ce80ba4fd7fa3dfb68cbb6595509f51a70e385438d2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/698dc409347f722b43e62ce80ba4fd7fa3dfb68cbb6595509f51a70e385438d2?s=96&d=mm&r=g\",\"caption\":\"Marcos Ariosi\"},\"sameAs\":[\"http:\/\/marcosariosi.com.br\/site\"],\"url\":\"https:\/\/marcosariosi.com.br\/site\/author\/ariosi25\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"O que \u00e9 UX? - Marcos Ariosi","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/","og_locale":"pt_BR","og_type":"article","og_title":"O que \u00e9 UX? - Marcos Ariosi","og_description":"O que \u00e9 UX? Este termo est\u00e1 extremamente em alta nos tempos atuais, mas o que esse termo quer dizer? O que \u00e9 isso? E pra que serve? Antes de tudo precisamos entender o que \u00e9 o termo propriamente dito, como o pr\u00f3prio nome j\u00e1 diz, UX quer dizer User Experience, com isso a gente pressup\u00f5e que estamos falando sobre a experi\u00eancia do usu\u00e1rio, mas o que de fato \u00e9 isso? O que deve ou deveria acontecer quando a gente [&hellip;]","og_url":"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/","og_site_name":"Marcos Ariosi","article_published_time":"2022-03-22T14:48:10+00:00","article_modified_time":"2022-03-22T16:57:49+00:00","og_image":[{"width":965,"height":347,"url":"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/Untitled-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Marcos Ariosi","Est. tempo de leitura":"20 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/marcosariosi.com.br\/site\/#website","url":"https:\/\/marcosariosi.com.br\/site\/","name":"Marcos Ariosi","description":"E-commerce Product Analyst Sr | Designer UX &amp; UI | Web &amp; Graphic Designer | Photographer &amp; V\u00eddeo Maker","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/marcosariosi.com.br\/site\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"ImageObject","@id":"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#primaryimage","inLanguage":"pt-BR","url":"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/Untitled-1.jpg","contentUrl":"https:\/\/marcosariosi.com.br\/site\/wp-content\/uploads\/2022\/03\/Untitled-1.jpg","width":965,"height":347},{"@type":"WebPage","@id":"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#webpage","url":"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/","name":"O que \u00e9 UX? - Marcos Ariosi","isPartOf":{"@id":"https:\/\/marcosariosi.com.br\/site\/#website"},"primaryImageOfPage":{"@id":"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#primaryimage"},"datePublished":"2022-03-22T14:48:10+00:00","dateModified":"2022-03-22T16:57:49+00:00","author":{"@id":"https:\/\/marcosariosi.com.br\/site\/#\/schema\/person\/862ed3c959fe75de590cb31501439940"},"breadcrumb":{"@id":"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/marcosariosi.com.br\/site\/o-que-e-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/marcosariosi.com.br\/site\/"},{"@type":"ListItem","position":2,"name":"O que \u00e9 UX?"}]},{"@type":"Person","@id":"https:\/\/marcosariosi.com.br\/site\/#\/schema\/person\/862ed3c959fe75de590cb31501439940","name":"Marcos Ariosi","image":{"@type":"ImageObject","@id":"https:\/\/marcosariosi.com.br\/site\/#personlogo","inLanguage":"pt-BR","url":"https:\/\/secure.gravatar.com\/avatar\/698dc409347f722b43e62ce80ba4fd7fa3dfb68cbb6595509f51a70e385438d2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/698dc409347f722b43e62ce80ba4fd7fa3dfb68cbb6595509f51a70e385438d2?s=96&d=mm&r=g","caption":"Marcos Ariosi"},"sameAs":["http:\/\/marcosariosi.com.br\/site"],"url":"https:\/\/marcosariosi.com.br\/site\/author\/ariosi25\/"}]}},"_links":{"self":[{"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/posts\/9275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/comments?post=9275"}],"version-history":[{"count":12,"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/posts\/9275\/revisions"}],"predecessor-version":[{"id":9294,"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/posts\/9275\/revisions\/9294"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/media\/9276"}],"wp:attachment":[{"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/media?parent=9275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/categories?post=9275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosariosi.com.br\/site\/wp-json\/wp\/v2\/tags?post=9275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}