{"id":2933,"date":"2017-07-17T08:57:14","date_gmt":"2017-07-17T11:57:14","guid":{"rendered":"https:\/\/blog.umbler.com\/?p=2933"},"modified":"2021-12-01T11:00:37","modified_gmt":"2021-12-01T13:00:37","slug":"user-interface-ui-e-user-experience-ux-entenda-as-diferencas","status":"publish","type":"post","link":"https:\/\/blog.umbler.com\/br\/user-interface-ui-e-user-experience-ux-entenda-as-diferencas\/","title":{"rendered":"User Interface e User Experience (UI e UX): entenda suas diferen\u00e7as"},"content":{"rendered":"

Nos \u00faltimos tempos, tem se tornado comum a confus\u00e3o entre os termos User Interface (ou UI<\/em>)<\/strong> e User Experience (ou UX<\/em>)<\/strong>. Designers e desenvolvedores front-end sofrem muito com essa confus\u00e3o.<\/p>\n

No TreinaWeb<\/a>, recebemos muitas perguntas dos alunos e, apesar de serem conceitos intimamente relacionados (o que ajuda na confus\u00e3o entre estes dois pontos), UI e UX na verdade s\u00e3o coisas conceitualmente bem diferentes!<\/p>\n

Vamos entender melhor quais s\u00e3o essas diferen\u00e7as.<\/p>\n

\u00c9 hora de fazer um bolo para explicar sobre User Interface e User Experience!<\/h2>\n

Para entendermos melhor qual \u00e9 o papel da User Interface e User Experience, respectivamente UI e da UX, vamos imaginar que estamos confeccionando um bolo.<\/p>\n

De cara, j\u00e1 podemos enxergar duas responsabilidades distintas: uma \u00e9 a responsabilidade est\u00e9tica, que se preocupa com a maneira como o bolo ser\u00e1 apresentado para quem for com\u00ea-lo.<\/p>\n

Perceba que essa responsabilidade fica praticamente para a cobertura do bolo. A outra responsabilidade \u00e9 o prazer, o sabor e a sensa\u00e7\u00e3o de saciedade que quem for comer o bolo dever\u00e1 sentir, fazendo com que mais e mais pessoas queiram sabore\u00e1-lo.<\/p>\n

Entenda que, al\u00e9m da cobertura em si, \u00e9 preciso considerar tamb\u00e9m o recheio (que d\u00e1 sabor ao bolo) e a massa (que d\u00e1 a sust\u00e2ncia)<\/strong>.<\/p>\n

Agora, \u00e9 importante lembrarmos que a cobertura ajuda tamb\u00e9m neste ponto: por mais que tenhamos um bolo com recheio e massa saborosos, provavelmente ele ser\u00e1 rejeitado por ser feio – a cobertura do bolo acaba impactando na percep\u00e7\u00e3o sobre ele.<\/p>\n

Ambas as responsabilidades est\u00e3o diretamente relacionadas aos conceitos de UI e UX.<\/p>\n

Onde est\u00e1 a UI do nosso bolo?<\/h2>\n

A quest\u00e3o da User Interface (UI) est\u00e1 mais relacionada \u00e0 parte decorativa<\/strong> do bolo, ou seja, \u00e0 cobertura e demais decora\u00e7\u00f5es.<\/p>\n

A User Interface est\u00e1 mais relacionada \u00e0 maneira como o bolo ser\u00e1 apresentado para o consumidor. De acordo com nosso paralelo, se trat\u00e1ssemos de uma aplica\u00e7\u00e3o web, por exemplo, a UI seria a parte de \u201cdesenho\u201d do site e a maneira como ele seria apresentado para os usu\u00e1rios, incluindo aspectos como paletas de cores a serem utilizadas, fontes e tudo mais.<\/p>\n

A UI fica respons\u00e1vel por tentar seduzir o usu\u00e1rio pela apar\u00eancia. Aspectos relacionados \u00e0 maneira como o usu\u00e1rio vai interagir com a aplica\u00e7\u00e3o tamb\u00e9m s\u00e3o incorporados dentro do campo da UI.<\/p>\n

Perceba que a UI \u00e9 um aspecto importante, pois caracteriza, geralmente, o primeiro contato que o usu\u00e1rio ter\u00e1 com o site ou aplica\u00e7\u00e3o web<\/strong>. Seres humanos s\u00e3o muito guiados por aspectos visuais e por sensa\u00e7\u00f5es.<\/p>\n

Portanto, uma user interface bem desenhada e pensada pode ser o primeiro passo para prender um usu\u00e1rio dentro de um site. No caso de um bolo, esse \u00e9 o primeiro passo para convencer algu\u00e9m a com\u00ea-lo (ou n\u00e3o!).<\/p>\n

Imagine dois bolos: o primeiro mais simples, sem cobertura e com um aspecto assim\u00e9trico. Por sua vez, o segundo \u00e9 melhor constru\u00eddo, uniforme e tem uma cobertura personalizada.<\/p>\n

Qual bolo chama mais a sua aten\u00e7\u00e3o e d\u00e1 mais vontade de comer?<\/p>\n

Muito provavelmente voc\u00ea se sente mais seduzido pelo bolo com a est\u00e9tica mais agrad\u00e1vel, j\u00e1 que parece mais gostoso e at\u00e9 mesmo mais profissional, justamente por seu apelo visual.<\/p>\n

Continuando com o nosso paralelo com sites e sistemas web, a UI de um site que se parece mais com o segundo bolo, em tese, \u00e9 mais bem-feita e bonita que a UI do primeiro bolo.<\/p>\n

Um bom projeto de UI precisa garantir uma harmonia visual<\/strong> dentro de um site ou aplica\u00e7\u00e3o web. Al\u00e9m disso, precisa garantir que o usu\u00e1rio conseguir\u00e1 acessar as funcionalidades oferecidas pelo site, independentemente da situa\u00e7\u00e3o na qual \u00e9 acessado.<\/p>\n

Veja que a UI tamb\u00e9m precisa cuidar para que a intera\u00e7\u00e3o com o site ou aplica\u00e7\u00e3o web seja a melhor poss\u00edvel. Se um site \u00e9 agrad\u00e1vel visualmente, harmonioso e suas funcionalidades s\u00e3o de f\u00e1cil acesso, mesmo em um ambiente mobile, por exemplo, provavelmente possui um bom projeto de UI.<\/p>\n

Aqui, entra aquela m\u00e1xima que provavelmente voc\u00ea j\u00e1 viu no seu Facebook ou em alguma outra rede social: \u201ca interface de usu\u00e1rio \u00e9 como uma piada: se voc\u00ea precisa explic\u00e1-la, isso significa que ela pode n\u00e3o ser t\u00e3o boa<\/strong>\u201d.<\/p>\n

Podemos citar algumas t\u00e9cnicas e ferramentas que est\u00e3o diretamente relacionadas com a quest\u00e3o da UI: prototipagem, estudos de branding, implementa\u00e7\u00f5es de anima\u00e7\u00f5es, etc.<\/p>\n

Onde est\u00e1 a UX do nosso bolo?<\/h2>\n

A User Experience (ou UX) \u00e9 algo mais global do que a UI<\/strong>. Ela est\u00e1 muito relacionada \u00e0 experi\u00eancia que o usu\u00e1rio ter\u00e1, no nosso exemplo, ao comer o bolo.<\/p>\n

Ela est\u00e1 relacionada \u00e0s sensa\u00e7\u00f5es de prazer que algu\u00e9m ter\u00e1 ao com\u00ea-lo, al\u00e9m de se preocupar em fidelizar a pessoa, fazendo com que ela sempre sinta vontade em comer o bolo novamente.<\/p>\n

Pense em um bolo comprado pela primeira vez em uma confeitaria.Se voc\u00ea prova esse bolo pela primeira vez e o acha maravilhoso, voc\u00ea provavelmente voltar\u00e1 e comprar\u00e1 o bolo novamente.<\/p>\n

Nesse caso, voc\u00ea teve uma boa experi\u00eancia<\/strong> com aquela confeitaria, o que acabou te fidelizando a ela. A confeitaria teve um bom projeto de UX. Provavelmente o bolo tem recheio e massa maravilhosos, o que aumentou sua vontade de compr\u00e1-lo de novo.<\/p>\n

Tamb\u00e9m entra aqui o atendimento<\/a> que voc\u00ea teve na confeitaria. Se o atendimento foi bom, voc\u00ea tamb\u00e9m sentir\u00e1 vontade de voltar outra vez para comprar outra coisa. Se h\u00e1 a possibilidade de que o bolo seja entregue na sua casa, melhor ainda! Tudo isso faz parte da UX.<\/p>\n

Trazendo esse paralelo de volta para sites e sistemas web, podemos dizer que a User Experience, nesses casos, faz rela\u00e7\u00e3o com a percep\u00e7\u00e3o que o usu\u00e1rio tem ao interagir com o site ou aplica\u00e7\u00e3o web<\/strong>.<\/p>\n

Quando um site consegue responder de maneira adaptativa e responsiva a um acesso feito via smartphone.<\/p>\n

Por exemplo, aqui temos um caso de User Experience: o site se \u201cmolda\u201d para se adaptar \u00e0 modalidade de acesso que o usu\u00e1rio est\u00e1 utilizando, facilitando o acesso ao usu\u00e1rio. Essa facilidade conferida \u00e9 que \u00e9 o grande ponto da User Experience.<\/p>\n

A User Experience de um site visa que o usu\u00e1rio tenha prazer e se sinta feliz e realizado ao acessar um site ou aplica\u00e7\u00e3o web. Ela tenta garantir que tudo est\u00e1 facilmente ao alcance do usu\u00e1rio sem nenhuma complica\u00e7\u00e3o.<\/p>\n

Outros aspectos n\u00e3o t\u00e3o claros assim podem ser incorporados ao dom\u00ednio da UX. Como, por exemplo, a velocidade de resposta \u00e0s a\u00e7\u00f5es que um usu\u00e1rio ordena, a adaptabilidade a diferentes situa\u00e7\u00f5es de acesso (tamanho do viewport<\/em> do dispositivo, largura de banda, etc.) e a oferta de recursos que podem facilitar a utiliza\u00e7\u00e3o do site ou de suas funcionalidades oferecidas.<\/p>\n

Tamb\u00e9m podemos citar ferramentas e t\u00e9cnicas que est\u00e3o ligadas ao aspecto da User Experience<\/strong>: wireframes, testes funcionais e de intera\u00e7\u00e3o, acompanhamento do processo de desenvolvimento, etc.<\/p>\n

No fim das contas (…)<\/h2>\n

No fim das contas, a User Experience est\u00e1 mais preocupada com as sensa\u00e7\u00f5es e com as emo\u00e7\u00f5es que o usu\u00e1rio tem ao acessar algum determinado recurso, o que a torna um aspecto mais comportamental do que necessariamente t\u00e9cnico.<\/p>\n

Ela busca garantir que o usu\u00e1rio se sinta feliz e realizado<\/strong> ao utilizar um site, fidelizando-o. Perceba que o grande foco \u00e9 a percep\u00e7\u00e3o do usu\u00e1rio ao interagir com uma aplica\u00e7\u00e3o.<\/p>\n

J\u00e1 a User Interface foca mais na maneira em como o site ser\u00e1 apresentado para o usu\u00e1rio, independentemente do local onde ser\u00e1 apresentado. Ela visa garantir harmonia e acessibilidade ao conte\u00fado.<\/p>\n

O norte dos estudos sobre User Interface \u00e9 garantir que o usu\u00e1rio ter\u00e1 uma interface para intera\u00e7\u00e3o clara, concisa e acess\u00edvel, independente do meio pelo qual ela est\u00e1 sendo acessada.<\/p>\n

O conceito ainda parece confuso?<\/h2>\n

\u00c9 que se tratam de dois conceitos que se confundem, realmente mesmo. Na verdade, voc\u00ea pode acabar pensando na UI como um subconjunto da UX. N\u00e3o tem como o usu\u00e1rio ter uma boa experi\u00eancia de utiliza\u00e7\u00e3o em um site se o mesmo n\u00e3o possui um bom projeto de UI.<\/p>\n

Se estamos tratando de aplica\u00e7\u00f5es web, n\u00e3o tem como um usu\u00e1rio se sentir satisfeito e feliz se, ao acessar um site atrav\u00e9s de um dispositivo m\u00f3vel, este n\u00e3o se apresente de forma adequada para um dispositivo com viewport menor.<\/p>\n

Perceba que, houve uma falha no projeto de UI, j\u00e1 que a interface n\u00e3o conseguiu se comportar da melhor maneira para aquele usu\u00e1rio. Essa falha no projeto de UI acabou causando uma falha tamb\u00e9m no projeto de UX.<\/p>\n

Pois o usu\u00e1rio acabou n\u00e3o tendo uma boa experi\u00eancia<\/strong> nessa situa\u00e7\u00e3o e, fatalmente, n\u00e3o ir\u00e1 voltar a acessar o site em quest\u00e3o<\/strong>, j\u00e1 que a percep\u00e7\u00e3o deste sobre a aplica\u00e7\u00e3o web n\u00e3o foi a esperada.<\/p>\n

Nesse caso, n\u00e3o foi a experi\u00eancia e percep\u00e7\u00e3o desejados para usu\u00e1rios que utilizem dispositivos m\u00f3veis (o que \u00e9 um problema, estat\u00edsticas do IBGE apontam que, no Brasil, a maioria do acesso \u00e0 internet \u00e9 realizado atrav\u00e9s de dispositivos m\u00f3veis).<\/p>\n

Onde entram os designers e os desenvolvedores front-end?<\/h2>\n

Aqui, realmente temos algo dif\u00edcil de se definir, pois, como voc\u00ea deve ter percebido, todos s\u00e3o respons\u00e1veis por uma boa UX e por uma boa UI, afinal.<\/p>\n

Por\u00e9m, em linhas gerais, podemos dizer que os designers est\u00e3o mais ligados \u00e0 UI<\/strong>, j\u00e1 que estes v\u00e3o ser os maiores respons\u00e1veis pela interface em si.<\/p>\n

Enquanto os desenvolvedores front-end acabam mais respons\u00e1veis pela UX<\/strong>, j\u00e1 que estes t\u00eam de garantir uma boa experi\u00eancia no aspecto geral dentro do site.<\/p>\n

No entanto, \u00e9 bem comum que estas responsabilidades se misturem, ainda mais por serem conceitos t\u00e3o correlacionados.<\/p>\n

Quem \u00e9 mais importante?<\/h2>\n

Ambos, User Interface e User Experience s\u00e3o importantes de maneira igualit\u00e1ria, justamente por conta dessa correla\u00e7\u00e3o. Pense em uma aplica\u00e7\u00e3o que \u00e9 incr\u00edvel do ponto de vista visual, mas \u00e9 incrivelmente chata para ser utilizada.<\/p>\n

Ou ent\u00e3o, pense em uma aplica\u00e7\u00e3o que \u00e9 supersimples e direta, mas a apar\u00eancia remete aos anos 2000. Nas duas situa\u00e7\u00f5es as chances da aplica\u00e7\u00e3o fracassar em linhas gerais s\u00e3o muito altas.<\/p>\n

Estes exemplos j\u00e1 deixam claros o peso e a import\u00e2ncia que tanto a User Interface quanto a User Experience t\u00eam<\/strong> para a sobreviv\u00eancia de um site ou aplica\u00e7\u00e3o.<\/p>\n

Ent\u00e3o, nada de menosprezar o designer ou o front-end: eles podem contribuir para um case de sucesso ou um case de completo fracasso de uma aplica\u00e7\u00e3o ou site.<\/p>\n

Se voc\u00ea identificou com as disciplinas de UX e UI, continue dando uma olhada em nosso blog<\/a> e confira os cursos dispon\u00edveis no Treinaweb<\/a> \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"

Nos \u00faltimos tempos, tem se tornado comum a confus\u00e3o entre os termos User Interface (ou UI) e User Experience (ou UX). Designers e desenvolvedores front-end sofrem muito com essa confus\u00e3o. No TreinaWeb, recebemos muitas perguntas dos alunos e, apesar de serem conceitos intimamente relacionados (o que ajuda na confus\u00e3o entre estes dois pontos), UI e […]<\/p>\n","protected":false},"author":26,"featured_media":5299,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[213,273,274,275,276,200],"class_list":["post-2933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comunidade","tag-front-end","tag-ui","tag-user-experience","tag-user-interface","tag-ux","tag-web-design"],"_links":{"self":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/2933"}],"collection":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/comments?post=2933"}],"version-history":[{"count":0,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/2933\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media\/5299"}],"wp:attachment":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media?parent=2933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/categories?post=2933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/tags?post=2933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}